chore: use Lightning CSS

package.json

@@ -37,21 +37,20 @@
   },
   "homepage": "https://ass.js.org/",
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.47.5",
+    "@microsoft/api-extractor": "^7.47.9",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-replace": "^5.0.7",
     "@rollup/plugin-terser": "^0.4.4",
-    "@vitest/browser": "^2.0.4",
-    "@vitest/coverage-istanbul": "^2.0.5",
+    "@vitest/browser": "2.0",
+    "@vitest/coverage-istanbul": "2.0",
     "ass-compiler": "^0.1.14",
-    "csso": "^5.0.5",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-unicorn": "^55.0.0",
+    "lightningcss": "^1.27.0",
     "playwright": "^1.45.3",
-    "rollup": "^4.20.0",
-    "typescript": "^5.5.4",
-    "vitest": "^2.0.4"
+    "rollup": "^4.21.3",
+    "typescript": "^5.6.2",
+    "vitest": "2.0"
   }
 }

rollup.config.js

@@ -1,8 +1,6 @@
-import { readFileSync } from 'node:fs';
-import { minify } from 'csso';
-import replace from '@rollup/plugin-replace';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import terser from '@rollup/plugin-terser';
+import { transform, Features } from 'lightningcss';
 
 /** @type {import('rollup').RollupOptions} */
 export default {
@@ -30,12 +28,20 @@ export default {
     },
   ],
   plugins: [
-    replace({
-      preventAssignment: true,
-      values: {
-        __GLOBAL_CSS__: minify(readFileSync('./src/global.css', 'utf8')).css,
-      },
-    }),
     nodeResolve(),
+    {
+      transform(code, id) {
+        if (id.endsWith('.css')) {
+          const result = transform({
+            filename: id,
+            code: new TextEncoder().encode(code),
+            minify: true,
+            include: Features.Nesting,
+          });
+          return { code: `export default '${result.code.toString()}';` };
+        }
+        return null;
+      },
+    },
   ],
 };

src/utils.js

@@ -1,3 +1,5 @@
+import GLOBAL_CSS from './global.css';
+
 export function alpha2opacity(a) {
   return 1 - `0x${a}` / 255;
 }
@@ -37,7 +39,6 @@ export function createSVGEl(name, attrs = []) {
   return $el;
 }
 
-const GLOBAL_CSS = '__GLOBAL_CSS__';
 /**
  * @param {HTMLElement} container
  */

vitest.config.js

@@ -1,6 +1,18 @@
+import path from 'node:path';
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
+  plugins: [
+    {
+      enforce: 'pre',
+      resolveId(source, importer) {
+        if (source.endsWith('.css')) {
+          return { id: path.resolve(importer, '..', `${source}?inline`) };
+        }
+        return null;
+      },
+    },
+  ],
   test: {
     include: 'test/test.js',
     browser: {