cli: Switch CSS bundling from lightningcss to postcss-import

postcss-import naturally preserves @layer declarations during bundling,
eliminating the need for custom layer parsing and restoration logic.
This simplifies the implementation while also preserving source comments.

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
Co-authored-by: Cursor <cursoragent@cursor.com>

packages/cli/package.json

@@ -110,7 +110,6 @@
     "inquirer": "^8.2.0",
     "jest-css-modules": "^2.1.0",
     "json-schema": "^0.4.0",
-    "lightningcss": "^1.29.1",
     "lodash": "^4.17.21",
     "minimatch": "^9.0.0",
     "node-stdlib-browser": "^1.3.1",
@@ -119,6 +118,7 @@
     "p-queue": "^6.6.2",
     "pirates": "^4.0.6",
     "postcss": "^8.1.0",
+    "postcss-import": "^16.1.0",
     "process": "^0.11.10",
     "raw-loader": "^4.0.2",
     "react-dev-utils": "^12.0.0-next.60",

packages/cli/src/modules/build/lib/builder/css.ts

@@ -15,12 +15,14 @@
  */
 
 import fs from 'fs-extra';
-import { bundle, transform } from 'lightningcss';
+import postcss from 'postcss';
+// @ts-expect-error - no types available
+import postcssImport from 'postcss-import';
 import { resolve as resolvePath, dirname } from 'node:path';
 import { EntryPoint } from '../../../../lib/entryPoints';
 
 /**
- * Bundles a CSS entry point, resolving @import statements and preserving @layer declarations.
+ * Bundles a CSS entry point, resolving @import statements.
  */
 export async function buildCSSEntryPoint(
   entryPoint: EntryPoint,
@@ -33,33 +35,20 @@ export async function buildCSSEntryPoint(
     entryPoint.path.replace(/^(\.\/)?src\//, 'dist/'),
   );
 
-  // Read source to extract @layer declaration before bundling
+  // Read source CSS
   const source = await fs.readFile(sourcePath, 'utf8');
-  const layerMatch = source.match(/@layer\s+[^;]+;/);
 
-  // Bundle @import statements using lightningcss
-  const { code: bundledCode } = bundle({
-    filename: sourcePath,
+  // Bundle @import statements using postcss-import
+  const result = await postcss([postcssImport()]).process(source, {
+    from: sourcePath,
+    to: outputPath,
   });
 
-  // Transform the bundled CSS
-  const { code } = transform({
-    filename: outputPath,
-    code: bundledCode,
-    minify: false,
-  });
-
-  // Restore @layer declaration if it was removed during bundling
-  let finalCode = code.toString();
-  if (layerMatch && !finalCode.includes(layerMatch[0])) {
-    finalCode = `${layerMatch[0]}\n\n${finalCode}`;
-  }
-
   // Ensure output directory exists
   await fs.mkdir(dirname(outputPath), { recursive: true });
 
   // Write the bundled CSS
-  await fs.writeFile(outputPath, finalCode);
+  await fs.writeFile(outputPath, result.css);
 }
 
 /**