screens/breakpoints

playground.ts

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

src/screens.ts

@@ -1,6 +1,14 @@
 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 screens: Plugin<CustomAtRules> = {
     customAtRules: {
         screen: {
@@ -12,17 +20,38 @@ export const screens: Plugin<CustomAtRules> = {
         Rule: {
             custom: {
                 screen(rule) {
-                    console.log(rule.body.value)
+                    console.log(rule)
+                    if (rule.prelude.value as string in breakpoints) {
 
-                    return {
-                        type: 'media',
-                        value: {
-                            rules: rule.body.value,
-                            loc: rule.loc,
-                            query: {
-                                mediaQueries: [
-                                    { raw: '(min-width: 500px)' }
-                                ]
+                        return {
+                            type: 'media',
+                            value: {
+                                rules: rule.body.value,
+                                loc: rule.loc,
+                                query: {
+                                    mediaQueries: [
+                                        {
+                                            mediaType: 'all',
+                                            condition: {
+                                                type: 'feature',
+                                                value: {
+                                                    type: 'plain',
+                                                    name: "min-width",
+                                                    value: {
+                                                        type: 'length',
+                                                        value: {
+                                                            type: 'value',
+                                                            value: {
+                                                                unit: 'rem',
+                                                                value: breakpoints[rule.prelude.value]
+                                                            }
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    ]
+                                }
                             }
                         }
                     }

tests/screens.test.ts

@@ -0,0 +1,29 @@
+import { expect, test } from "bun:test";
+import { testHelper } from "./test";
+import { screens, spacing } from "../index";
+
+
+test("sm", () => {
+    expect(testHelper([screens], '.foo {color: red; @screen sm {color: green;}}'))
+        .toBe('.foo{color:red;@media (min-width:40rem){&{color:green}}}')
+})
+
+test("md", () => {
+    expect(testHelper([screens], '.foo {color: red; @screen md {color: green;}}'))
+        .toBe('.foo{color:red;@media (min-width:48rem){&{color:green}}}')
+})
+
+test("lg", () => {
+    expect(testHelper([screens], '.foo {color: red; @screen lg {color: green;}}'))
+        .toBe('.foo{color:red;@media (min-width:64rem){&{color:green}}}')
+})
+
+test("xl", () => {
+    expect(testHelper([screens], '.foo {color: red; @screen xl {color: green;}}'))
+        .toBe('.foo{color:red;@media (min-width:80rem){&{color:green}}}')
+})
+
+test("xxl", () => {
+    expect(testHelper([screens], '.foo {color: red; @screen xxl {color: green;}}'))
+        .toBe('.foo{color:red;@media (min-width:96rem){&{color:green}}}')
+})