Merge pull request #32761 from backstage/rugvip/css-exports-support

cli: add support for CSS exports in package build

packages/ui/package.json

@@ -5,9 +5,7 @@
     "role": "web-library"
   },
   "publishConfig": {
-    "access": "public",
-    "main": "dist/index.esm.js",
-    "types": "dist/index.d.ts"
+    "access": "public"
   },
   "keywords": [
     "backstage"
@@ -22,17 +20,25 @@
   "sideEffects": [
     "*.css"
   ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./css/styles.css": "./src/css/styles.css",
+    "./package.json": "./package.json"
+  },
+  "typesVersions": {
+    "*": {
+      "package.json": [
+        "package.json"
+      ]
+    }
+  },
   "main": "src/index.ts",
   "types": "src/index.ts",
   "files": [
-    "dist",
-    "css"
+    "dist"
   ],
   "scripts": {
-    "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": "backstage-cli package build",
     "clean": "backstage-cli package clean",
     "lint": "backstage-cli package lint",
     "prepack": "backstage-cli package prepack",
@@ -50,12 +56,9 @@
     "@backstage/cli": "workspace:^",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "chalk": "^5.4.1",
     "eslint-plugin-storybook": "^10.3.0-alpha.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",
     "react-router-dom": "^6.30.2",

packages/ui/scripts/build-css.mjs

@@ -1,79 +0,0 @@
-/*
- * 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 'node:fs';
-import chalk from 'chalk';
-/* eslint-enable no-restricted-imports */
-
-const srcFile = 'src/css/styles.css';
-const distDir = 'css';
-const distFile = `${distDir}/styles.css`;
-
-// Check if styles.css exists
-if (!fs.existsSync(srcFile)) {
-  console.error(`${srcFile} does not exist`);
-  process.exit(1);
-}
-
-// Ensure the dist/css directory exists
-if (!fs.existsSync(distDir)) {
-  fs.mkdirSync(distDir, { recursive: true });
-}
-
-const args = process.argv.slice(2);
-const watchMode = args.includes('--watch');
-
-async function buildCSS(logs = true) {
-  const css = fs.readFileSync(srcFile);
-
-  let { code: bundleCode } = bundle({
-    filename: srcFile,
-  });
-
-  const { code } = transform({
-    filename: distFile,
-    code: bundleCode,
-    minify: false,
-  });
-
-  // Prepend the layer order declaration that lightningcss removes during bundling
-  // This is crucial to maintain the correct layer cascade order
-  const layerDeclaration = '@layer tokens, base, components, utilities;\n\n';
-  const finalCode = layerDeclaration + code;
-
-  fs.writeFileSync(distFile, finalCode);
-  if (logs) {
-    console.log(chalk.blue('CSS transformed and minified: ') + 'styles.css');
-    console.log(chalk.green('CSS file built successfully!'));
-  }
-}
-
-if (watchMode) {
-  fs.watch('src/css', { recursive: true }, (eventType, filename) => {
-    if (filename === 'styles.css') {
-      console.log(
-        chalk.yellow(`Changes detected in ${filename}, rebuilding...`),
-      );
-      buildCSS(false).catch(console.error);
-    }
-  });
-  buildCSS().catch(console.error);
-  console.log(chalk.yellow('Watching for CSS changes...'));
-} else {
-  buildCSS().catch(console.error);
-}