From 1e0be5e1830f603a1188deece76816ae8158df15 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 15 Jan 2025 17:27:19 +0000 Subject: [PATCH 1/2] First pass at bundling CSS Signed-off-by: Charles de Dreuille --- packages/canon/package.json | 4 +- packages/canon/scripts/build-css.mjs | 56 ++++++++++++++++++++++++++++ 2 files changed, 59 insertions(+), 1 deletion(-) create mode 100644 packages/canon/scripts/build-css.mjs diff --git a/packages/canon/package.json b/packages/canon/package.json index d08f660e7d..0929111546 100644 --- a/packages/canon/package.json +++ b/packages/canon/package.json @@ -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", diff --git a/packages/canon/scripts/build-css.mjs b/packages/canon/scripts/build-css.mjs new file mode 100644 index 0000000000..221d483e03 --- /dev/null +++ b/packages/canon/scripts/build-css.mjs @@ -0,0 +1,56 @@ +/* + * 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'; +/* eslint-enable no-restricted-imports */ + +// Check if core.css and components.css exist +const cssFiles = ['src/css/core.css', 'src/css/components.css']; +const distDir = 'dist/css'; + +cssFiles.forEach(file => { + if (!fs.existsSync(file)) { + console.error(`${file} does not exist`); + process.exit(1); + } +}); + +// Ensure the dist/css directory exists +if (!fs.existsSync(distDir)) { + fs.mkdirSync(distDir, { recursive: true }); +} + +cssFiles.forEach(file => { + let { code: bundleCode } = bundle({ + filename: file, + }); + + let { code, map } = transform({ + filename: `${distDir}/${path.basename(file)}`, + code: bundleCode, + minify: true, + sourceMap: true, + }); + + fs.writeFileSync(`${distDir}/${path.basename(file)}`, code); + fs.writeFileSync(`${distDir}/${path.basename(file)}.map`, map); + + // Clear the content of the original CSS file + fs.writeFileSync(file, ''); +}); From daadfe8035b015f0d7596d54604ff4a335206f15 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 15 Jan 2025 18:13:43 +0000 Subject: [PATCH 2/2] Improve the script to include all css files Signed-off-by: Charles de Dreuille --- packages/canon/package.json | 3 + packages/canon/scripts/build-css.mjs | 41 +++++-- yarn.lock | 175 ++++++++++++++++++++++++++- 3 files changed, 209 insertions(+), 10 deletions(-) diff --git a/packages/canon/package.json b/packages/canon/package.json index 0929111546..0dfea024cc 100644 --- a/packages/canon/package.json +++ b/packages/canon/package.json @@ -58,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", diff --git a/packages/canon/scripts/build-css.mjs b/packages/canon/scripts/build-css.mjs index 221d483e03..f0ca17c73e 100644 --- a/packages/canon/scripts/build-css.mjs +++ b/packages/canon/scripts/build-css.mjs @@ -18,15 +18,36 @@ 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 cssFiles = ['src/css/core.css', 'src/css/components.css']; +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)) { - console.error(`${file} does not exist`); + if (!fs.existsSync(file.path)) { + console.error(`${file.originalName} does not exist`); process.exit(1); } }); @@ -36,21 +57,23 @@ if (!fs.existsSync(distDir)) { fs.mkdirSync(distDir, { recursive: true }); } +// Bundle and transform files cssFiles.forEach(file => { let { code: bundleCode } = bundle({ - filename: file, + filename: file.path, }); let { code, map } = transform({ - filename: `${distDir}/${path.basename(file)}`, + filename: `${distDir}/${file.newName}`, code: bundleCode, minify: true, sourceMap: true, }); - fs.writeFileSync(`${distDir}/${path.basename(file)}`, code); - fs.writeFileSync(`${distDir}/${path.basename(file)}.map`, map); + fs.writeFileSync(`${distDir}/${file.newName}`, code); + fs.writeFileSync(`${distDir}/${file.newName}.map`, map); - // Clear the content of the original CSS file - fs.writeFileSync(file, ''); + console.log(chalk.blue('CSS bundled: ') + file.newName); }); + +console.log(chalk.green('CSS files bundled successfully!')); diff --git a/yarn.lock b/yarn.lock index af6c15c0fc..d1dd4667e9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"