From 1e0be5e1830f603a1188deece76816ae8158df15 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Wed, 15 Jan 2025 17:27:19 +0000
Subject: [PATCH] First pass at bundling CSS

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 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, '');
+});