Add CSS watch mode

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/package.json

@@ -30,14 +30,15 @@
     "build": "yarn build:app && yarn build:css",
     "build:app": "backstage-cli package build",
     "build:css": "node scripts/build-css.mjs",
+    "build:css:watch": "node scripts/build-css.mjs --watch",
     "build-storybook": "storybook build",
     "clean": "backstage-cli package clean",
     "lint": "backstage-cli package lint",
     "prepack": "backstage-cli package prepack",
+    "postinstall": "yarn build:css",
     "postpack": "backstage-cli package postpack",
-    "postinstall": "yarn setup-dev",
-    "setup-dev": "bash scripts/setup-dev.sh",
-    "start": "storybook dev -p 6006",
+    "start": "yarn build:css:watch && yarn storybook",
+    "storybook": "storybook dev -p 6006",
     "test": "backstage-cli package test"
   },
   "dependencies": {

packages/canon/scripts/build-css.mjs

@@ -57,23 +57,53 @@ if (!fs.existsSync(distDir)) {
   fs.mkdirSync(distDir, { recursive: true });
 }
 
-// Bundle and transform files
-cssFiles.forEach(file => {
-  let { code: bundleCode } = bundle({
-    filename: file.path,
+// Add watch mode support
+const args = process.argv.slice(2);
+const watchMode = args.includes('--watch');
+
+async function buildCSS(logs = 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);
+
+    if (logs) {
+      console.log(chalk.blue('CSS bundled: ') + file.newName);
+    }
   });
 
-  let { code, map } = transform({
-    filename: `${distDir}/${file.newName}`,
-    code: bundleCode,
-    minify: true,
-    sourceMap: true,
+  if (logs) {
+    console.log(chalk.green('CSS files bundled successfully!'));
+  }
+}
+
+if (watchMode) {
+  // Watch both directories for changes
+  [cssDir, componentsDir].forEach(dir => {
+    fs.watch(dir, { recursive: true }, (eventType, filename) => {
+      if (filename?.endsWith('.css')) {
+        console.log(
+          chalk.yellow(`Changes detected in ${filename}, rebuilding...`),
+        );
+        buildCSS(false).catch(console.error);
+      }
+    });
   });
 
-  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!'));
+  // Initial build
+  buildCSS().catch(console.error);
+  console.log(chalk.yellow('Watching for CSS changes...'));
+} else {
+  buildCSS().catch(console.error);
+}

yarn.lock

@@ -3832,7 +3832,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@backstage/canon@workspace:packages/canon":
+"@backstage/canon@workspace:^, @backstage/canon@workspace:packages/canon":
   version: 0.0.0-use.local
   resolution: "@backstage/canon@workspace:packages/canon"
   dependencies:
@@ -28845,6 +28845,7 @@ __metadata:
   resolution: "example-app@workspace:packages/app"
   dependencies:
     "@backstage/app-defaults": "workspace:^"
+    "@backstage/canon": "workspace:^"
     "@backstage/catalog-model": "workspace:^"
     "@backstage/cli": "workspace:^"
     "@backstage/config": "workspace:^"