@light and @dark blocks

index.ts

@@ -1,7 +1,8 @@
 import { composePlugins, type Plugin } from './src/plugin';
 import { screens } from './src/screens';
 import { spacing } from './src/spacing';
+import { colorScheme } from './src/colorScheme';
 
-export const crosswind = composePlugins([screens, spacing])
+export const crosswind = composePlugins([screens, spacing, colorScheme])
 
-export { composePlugins, type Plugin, screens, spacing }
+export { composePlugins, type Plugin, screens, spacing, colorScheme }

playground.ts

@@ -1,11 +1,11 @@
 import { transform } from "lightningcss";
-import { composePlugins, spacing, screens } from ".";
+import { composePlugins, spacing, screens, colorScheme } from ".";
 
 const a = {
     filename: 'test.css',
     minify: true,
-    code: new TextEncoder().encode('.foo {color: red; @screen sm {color: green;}}'),
-    ...composePlugins([spacing, screens]),
+    code: new TextEncoder().encode('.foo {color: red; @light {color: green;} @dark {color: yellow;}}'),
+    ...composePlugins([colorScheme]),
 }
 
 let { code, map } = transform(a);

src/colorScheme.ts

@@ -0,0 +1,83 @@
+import type { CustomAtRules } from "lightningcss";
+import type { Plugin } from "./plugin";
+
+const breakpoints = {
+    sm: 40,
+    md: 48,
+    lg: 64,
+    xl: 80,
+    xxl: 96
+} as const;
+
+export const colorScheme: Plugin<CustomAtRules> = {
+    customAtRules: {
+        light: {
+            prelude: null,
+            body: 'style-block'
+        },
+        dark: {
+            prelude: null,
+            body: 'style-block'
+        }
+    },
+    visitor: {
+        Rule: {
+            custom: {
+                light(rule) {
+                    return {
+                        type: 'media',
+                        value: {
+                            rules: rule.body.value,
+                            loc: rule.loc,
+                            query: {
+                                mediaQueries: [
+                                    {
+                                        mediaType: 'all',
+                                        condition: {
+                                            type: 'feature',
+                                            value: {
+                                                type: 'plain',
+                                                name: "prefers-color-scheme",
+                                                value: {
+                                                    type: 'ident',
+                                                    value: 'light'
+                                                }
+                                            }
+                                        }
+                                    }
+                                ]
+                            }
+                        }
+                    }
+                },
+                dark(rule) {
+                    return {
+                        type: 'media',
+                        value: {
+                            rules: rule.body.value,
+                            loc: rule.loc,
+                            query: {
+                                mediaQueries: [
+                                    {
+                                        mediaType: 'all',
+                                        condition: {
+                                            type: 'feature',
+                                            value: {
+                                                type: 'plain',
+                                                name: "prefers-color-scheme",
+                                                value: {
+                                                    type: 'ident',
+                                                    value: 'dark'
+                                                }
+                                            }
+                                        }
+                                    }
+                                ]
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+} as const;

src/screens.ts

@@ -20,8 +20,7 @@ export const screens: Plugin<CustomAtRules> = {
         Rule: {
             custom: {
                 screen(rule) {
-                    console.log(rule)
-                    if (rule.prelude.value as string in breakpoints) {
+                    if (typeof rule.prelude.value === 'string' && rule.prelude.value in breakpoints) {
 
                         return {
                             type: 'media',

tests/colorScheme.test.ts

@@ -0,0 +1,14 @@
+import { expect, test } from "bun:test";
+import { testHelper } from "./test";
+import { colorScheme } from "../index";
+
+
+test("light", () => {
+    expect(testHelper([colorScheme], '.foo {color: red; @light {color: green;}}'))
+        .toBe('.foo{color:red;@media (prefers-color-scheme:light){&{color:green}}}')
+})
+
+test("dark", () => {
+    expect(testHelper([colorScheme], '.foo {color: red; @dark {color: green;}}'))
+        .toBe('.foo{color:red;@media (prefers-color-scheme:dark){&{color:green}}}')
+})