paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 26 Packages Projects Releases Wiki Activity

Merge pull request #28501 from backstage/canon-css-bundling

Browse Source 
Canon - Transform and bundle CSS
This commit is contained in:
Charles de Dreuille
2025-01-16 14:00:20 +00:00
committed by GitHub
parent 6ae059357e daadfe8035
commit e43c3f4fcc
3 changed files with 259 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/canon/package.json
+6 -1
View File
@@ -27,8 +27,10 @@
"dist"
],
"scripts": {
"build": "backstage-cli package build",
"build": "yarn build:app && yarn build:css",
"build-storybook": "storybook build",
"build:app": "backstage-cli package build",
"build:css": "node scripts/build-css.mjs",
"clean": "backstage-cli package clean",
"lint": "backstage-cli package lint",
"prepack": "backstage-cli package prepack",
@@ -56,8 +58,11 @@
"@testing-library/jest-dom": "^6.0.0",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"chalk": "^5.4.1",
"eslint-plugin-storybook": "^0.11.1",
"glob": "^11.0.1",
"globals": "^15.11.0",
"lightningcss": "^1.29.1",
"mini-css-extract-plugin": "^2.9.2",
"react": "^18.0.2",
"react-dom": "^18.0.2",
packages/canon/scripts/build-css.mjs
+79
View File
@@ -0,0 +1,79 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* eslint-disable no-restricted-imports */
import { transform, bundle } from 'lightningcss';
import fs from 'fs';
import path from 'path';
import chalk from 'chalk';
import { glob } from 'glob';
/* eslint-enable no-restricted-imports */
// Check if core.css and components.css exist
const cssDir = 'src/css';
const distDir = 'dist/css';
const componentsDir = 'src/components';
// Core files
const cssFiles = [
{ path: `${cssDir}/core.css`, newName: 'core.css' },
{ path: `${cssDir}/components.css`, newName: 'components.css' },
];
// Components files
const componentsFiles = glob
.sync('**/*.css', { cwd: componentsDir })
.map(file => {
const folderName = file.split('/')[0].toLocaleLowerCase('en-US');
return { path: `${componentsDir}/${file}`, newName: `${folderName}.css` };
});
// Combine core and components files
cssFiles.push(...componentsFiles);
// Check if files exist
cssFiles.forEach(file => {
if (!fs.existsSync(file.path)) {
console.error(`${file.originalName} does not exist`);
process.exit(1);
}
});
// Ensure the dist/css directory exists
if (!fs.existsSync(distDir)) {
fs.mkdirSync(distDir, { recursive: true });
}
// Bundle and transform files
cssFiles.forEach(file => {
let { code: bundleCode } = bundle({
filename: file.path,
});
let { code, map } = transform({
filename: `${distDir}/${file.newName}`,
code: bundleCode,
minify: true,
sourceMap: true,
});
fs.writeFileSync(`${distDir}/${file.newName}`, code);
fs.writeFileSync(`${distDir}/${file.newName}.map`, map);
console.log(chalk.blue('CSS bundled: ') + file.newName);
});
console.log(chalk.green('CSS files bundled successfully!'));
yarn.lock
+174 -1
View File
@@ -3802,9 +3802,12 @@ __metadata:
"@testing-library/jest-dom": ^6.0.0
"@types/react": ^18.0.0
"@types/react-dom": ^18.0.0
chalk: ^5.4.1
clsx: ^2.1.1
eslint-plugin-storybook: ^0.11.1
glob: ^11.0.1
globals: ^15.11.0
lightningcss: ^1.29.1
mini-css-extract-plugin: ^2.9.2
react: ^18.0.2
react-dom: ^18.0.2
@@ -24242,7 +24245,7 @@ __metadata:
languageName: node
linkType: hard
"chalk@npm:~5.4.1":
"chalk@npm:^5.4.1, chalk@npm:~5.4.1":
version: 5.4.1
resolution: "chalk@npm:5.4.1"
checksum: 0c656f30b782fed4d99198825c0860158901f449a6b12b818b0aabad27ec970389e7e8767d0e00762175b23620c812e70c4fd92c0210e55fc2d993638b74e86e
@@ -26554,6 +26557,15 @@ __metadata:
languageName: node
linkType: hard
"detect-libc@npm:^1.0.3":
version: 1.0.3
resolution: "detect-libc@npm:1.0.3"
bin:
detect-libc: ./bin/detect-libc.js
checksum: daaaed925ffa7889bd91d56e9624e6c8033911bb60f3a50a74a87500680652969dbaab9526d1e200a4c94acf80fc862a22131841145a0a8482d60a99c24f4a3e
languageName: node
linkType: hard
"detect-libc@npm:^2.0.0":
version: 2.0.1
resolution: "detect-libc@npm:2.0.1"
@@ -30110,6 +30122,22 @@ __metadata:
languageName: node
linkType: hard
"glob@npm:^11.0.1":
version: 11.0.1
resolution: "glob@npm:11.0.1"
dependencies:
foreground-child: ^3.1.0
jackspeak: ^4.0.1
minimatch: ^10.0.0
minipass: ^7.1.2
package-json-from-dist: ^1.0.0
path-scurry: ^2.0.0
bin:
glob: dist/esm/bin.mjs
checksum: ffbbafe1d2dae2fa68f190ac76df7254e840b27f59df34129fd658bd9da0c50b538d144eb0962dc7fa71cdaccf3fe108f045d4a15b3f5815e465749a6bf00965
languageName: node
linkType: hard
"glob@npm:^7.0.0, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6, glob@npm:^7.1.7":
version: 7.2.3
resolution: "glob@npm:7.2.3"
@@ -32656,6 +32684,15 @@ __metadata:
languageName: node
linkType: hard
"jackspeak@npm:^4.0.1":
version: 4.0.2
resolution: "jackspeak@npm:4.0.2"
dependencies:
"@isaacs/cliui": ^8.0.2
checksum: 210030029edfa1658328799ad88c3d0fc057c4cb8a069fc4137cc8d2cc4b65c9721c6e749e890f9ca77a954bb54f200f715b8896e50d330e5f3e902e72b40974
languageName: node
linkType: hard
"jake@npm:^10.8.5":
version: 10.8.5
resolution: "jake@npm:10.8.5"
@@ -34305,6 +34342,116 @@ __metadata:
languageName: node
linkType: hard
"lightningcss-darwin-arm64@npm:1.29.1":
version: 1.29.1
resolution: "lightningcss-darwin-arm64@npm:1.29.1"
conditions: os=darwin & cpu=arm64
languageName: node
linkType: hard
"lightningcss-darwin-x64@npm:1.29.1":
version: 1.29.1
resolution: "lightningcss-darwin-x64@npm:1.29.1"
conditions: os=darwin & cpu=x64
languageName: node
linkType: hard
"lightningcss-freebsd-x64@npm:1.29.1":
version: 1.29.1
resolution: "lightningcss-freebsd-x64@npm:1.29.1"
conditions: os=freebsd & cpu=x64
languageName: node
linkType: hard
"lightningcss-linux-arm-gnueabihf@npm:1.29.1":
version: 1.29.1
resolution: "lightningcss-linux-arm-gnueabihf@npm:1.29.1"
conditions: os=linux & cpu=arm
languageName: node
linkType: hard
"lightningcss-linux-arm64-gnu@npm:1.29.1":
version: 1.29.1
resolution: "lightningcss-linux-arm64-gnu@npm:1.29.1"
conditions: os=linux & cpu=arm64 & libc=glibc
languageName: node
linkType: hard
"lightningcss-linux-arm64-musl@npm:1.29.1":
version: 1.29.1
resolution: "lightningcss-linux-arm64-musl@npm:1.29.1"
conditions: os=linux & cpu=arm64 & libc=musl
languageName: node
linkType: hard
"lightningcss-linux-x64-gnu@npm:1.29.1":
version: 1.29.1
resolution: "lightningcss-linux-x64-gnu@npm:1.29.1"
conditions: os=linux & cpu=x64 & libc=glibc
languageName: node
linkType: hard
"lightningcss-linux-x64-musl@npm:1.29.1":
version: 1.29.1
resolution: "lightningcss-linux-x64-musl@npm:1.29.1"
conditions: os=linux & cpu=x64 & libc=musl
languageName: node
linkType: hard
"lightningcss-win32-arm64-msvc@npm:1.29.1":
version: 1.29.1
resolution: "lightningcss-win32-arm64-msvc@npm:1.29.1"
conditions: os=win32 & cpu=arm64
languageName: node
linkType: hard
"lightningcss-win32-x64-msvc@npm:1.29.1":
version: 1.29.1
resolution: "lightningcss-win32-x64-msvc@npm:1.29.1"
conditions: os=win32 & cpu=x64
languageName: node
linkType: hard
"lightningcss@npm:^1.29.1":
version: 1.29.1
resolution: "lightningcss@npm:1.29.1"
dependencies:
detect-libc: ^1.0.3
lightningcss-darwin-arm64: 1.29.1
lightningcss-darwin-x64: 1.29.1
lightningcss-freebsd-x64: 1.29.1
lightningcss-linux-arm-gnueabihf: 1.29.1
lightningcss-linux-arm64-gnu: 1.29.1
lightningcss-linux-arm64-musl: 1.29.1
lightningcss-linux-x64-gnu: 1.29.1
lightningcss-linux-x64-musl: 1.29.1
lightningcss-win32-arm64-msvc: 1.29.1
lightningcss-win32-x64-msvc: 1.29.1
dependenciesMeta:
lightningcss-darwin-arm64:
optional: true
lightningcss-darwin-x64:
optional: true
lightningcss-freebsd-x64:
optional: true
lightningcss-linux-arm-gnueabihf:
optional: true
lightningcss-linux-arm64-gnu:
optional: true
lightningcss-linux-arm64-musl:
optional: true
lightningcss-linux-x64-gnu:
optional: true
lightningcss-linux-x64-musl:
optional: true
lightningcss-win32-arm64-msvc:
optional: true
lightningcss-win32-x64-msvc:
optional: true
checksum: d1c4dba66dfe7f6a76532bdb84c35742bee61149550e5eb5b0e84e282f21aecd335f917ca9619bb7ca95fc1eb3092dc7e22f2c16b01e9a0ee472b76452343cce
languageName: node
linkType: hard
"lilconfig@npm:^2.0.3":
version: 2.1.0
resolution: "lilconfig@npm:2.1.0"
@@ -34873,6 +35020,13 @@ __metadata:
languageName: node
linkType: hard
"lru-cache@npm:^11.0.0":
version: 11.0.2
resolution: "lru-cache@npm:11.0.2"
checksum: f9c27c58919a30f42834de9444de9f75bcbbb802c459239f96dd449ad880d8f9a42f51556d13659864dc94ab2dbded9c4a4f42a3e25a45b6da01bb86111224df
languageName: node
linkType: hard
"lru-cache@npm:^5.1.1":
version: 5.1.1
resolution: "lru-cache@npm:5.1.1"
@@ -36057,6 +36211,15 @@ __metadata:
languageName: node
linkType: hard
"minimatch@npm:^10.0.0":
version: 10.0.1
resolution: "minimatch@npm:10.0.1"
dependencies:
brace-expansion: ^2.0.1
checksum: f5b63c2f30606091a057c5f679b067f84a2cd0ffbd2dbc9143bda850afd353c7be81949ff11ae0c86988f07390eeca64efd7143ee05a0dab37f6c6b38a2ebb6c
languageName: node
linkType: hard
"minimatch@npm:^5.0.1, minimatch@npm:^5.1.0":
version: 5.1.6
resolution: "minimatch@npm:5.1.6"
@@ -38522,6 +38685,16 @@ __metadata:
languageName: node
linkType: hard
"path-scurry@npm:^2.0.0":
version: 2.0.0
resolution: "path-scurry@npm:2.0.0"
dependencies:
lru-cache: ^11.0.0
minipass: ^7.1.2
checksum: 9953ce3857f7e0796b187a7066eede63864b7e1dfc14bf0484249801a5ab9afb90d9a58fc533ebb1b552d23767df8aa6a2c6c62caf3f8a65f6ce336a97bbb484
languageName: node
linkType: hard
"path-to-regexp@npm:0.1.12":
version: 0.1.12
resolution: "path-to-regexp@npm:0.1.12"