plugin system

should prob open a discussion on the lightningcss side to figure out a better way of doing this, but this works for now

index.ts

@@ -1,4 +1,5 @@
-import { composeVisitors, transform, type CustomAtRules, type Visitor } from 'lightningcss';
+import { transform, type CustomAtRules, type Visitor } from 'lightningcss';
+import { composePlugins, type Plugin } from './src/plugin';
 
 export const spacing: Visitor<CustomAtRules> = {
     Token: {
@@ -12,11 +13,35 @@ export const spacing: Visitor<CustomAtRules> = {
     }
 } as const;
 
-let { code, map } = transform({
-    filename: 'test.css',
-    minify: true,
-    code: new TextEncoder().encode('.foo {size: 0.25tw}'),
-    visitor: composeVisitors([spacing])
-});
+export const screen: Plugin<CustomAtRules> = {
+    customAtRules: {
+        screen: {
+            prelude: '<custom-ident>',
+            body: 'style-block'
+        }
+    },
+    visitor: {
+        Rule: {
+            custom: {
+                screen(rule) {
+                    console.log(rule.body.value)
+
+                    return {
+                        type: 'media',
+                        value: {
+                            rules: rule.body.value,
+                            loc: rule.loc,
+                            query: {
+                                mediaQueries: [
+                                    { raw: '(min-width: 500px)' }
+                                ]
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+} as const;
 
-console.log(code.toString())
+export { composePlugins, type Plugin }

playground.ts

@@ -0,0 +1,14 @@
+import { transform } from "lightningcss";
+import { composePlugins, spacing, screen } from ".";
+
+const a = {
+    filename: 'test.css',
+    minify: true,
+    code: new TextEncoder().encode('.foo {size: 0.25tw; @screen lg {size: 1tw; color: red;}}'),
+    ...composePlugins([spacing, screen]),
+}
+
+let { code, map } = transform(a);
+console.log(a)
+
+console.log(code.toString())

src/plugin.ts

@@ -0,0 +1,24 @@
+import { composeVisitors, type CustomAtRules, type Visitor } from 'lightningcss';
+
+export type Plugin<C extends CustomAtRules> = {
+    visitor: Visitor<C>,
+    customAtRules?: C
+}
+
+export function composePlugins<C extends CustomAtRules>(plugins: (Plugin<C> | Visitor<C>)[]) {
+    let customAtRules: CustomAtRules = {};
+    let visitors: Visitor<CustomAtRules>[] = [];
+
+    plugins.forEach(p => {
+        if ('visitor' in p) {
+            visitors.push(p.visitor)
+            if (p.customAtRules) { Object.assign(customAtRules, p.customAtRules) }
+        } else {
+            visitors.push(p)
+        }
+    });
+
+    return {
+        customAtRules, visitor: composeVisitors(visitors)
+    }
+}

tests/test.test.ts

@@ -1,15 +1,14 @@
 import { composeVisitors, transform, type CustomAtRules, type Visitor } from "lightningcss";
-import { spacing } from "../index";
+import { composePlugins, spacing, type Plugin } from "../index";
 
 import { expect, test } from "bun:test";
 
-function testHelper(visitors: Visitor<CustomAtRules>[], input: string) {
+export function testHelper<C extends CustomAtRules>(visitors: (Plugin<C> | Visitor<C>)[], input: string) {
     let { code } = transform({
         filename: 'test.css',
         minify: true,
         code: new TextEncoder().encode(input),
-        visitor: composeVisitors(visitors),
-
+        ...composePlugins(visitors)
     });
 
     return code.toString()