size property

README.md

@@ -12,13 +12,15 @@ I also really like semantic values, and Tailwind gives you sensible semantic val
 
 ## roadmap
  - [x] `tw` units
- - [ ] `@screen <breakpoint>` queries
- - [ ] `@dark` and `@light` queries
+ - [x] `@screen <breakpoint>` queries
+ - [x] `@dark` and `@light` queries
+ - [x] `size` property that sets width and height
  - [ ] `aspect-ratio: square` and `aspect-ratio: video`
  - [ ] semantic `perspective`s
- - [ ] translations as properties
  - [ ] preflight
  - [ ] typography
+ - [ ] inline variables
+ - [ ] `dark-light()`, `@light`, and `@dark` polyfilled for the multiple strategies in tailwind
  - [ ] (maybe) daisyui and/or shadcn port
  - [ ] (maybe) container queries
  - [ ] respect tailwind config (prob only if there's financial demand lmao)

index.ts

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

playground.ts

@@ -5,8 +5,8 @@ import { composePlugins, spacing, screens, colorScheme, crosswind } from ".";
 let { code, map } = transform({
     filename: 'test.css',
     minify: true,
-    code: new TextEncoder().encode('.foo{color: red;@light {color: green;}; @dark {color:yellow;}}'),
-    ...crosswind
+    code: new TextEncoder().encode('.foo{size: 4em}'),
+    ...composePlugins([crosswind])
 });
 
 console.log(code.toString())

src/size.ts

@@ -0,0 +1,27 @@
+import type { CustomAtRules, Visitor } from "lightningcss";
+
+export const size: Visitor<CustomAtRules> = {
+    Declaration: {
+        custom: {
+            size: (prop) => {
+                return [{
+                    property: "unparsed",
+                    value: {
+                        propertyId: {
+                            property: "width"
+                        },
+                        value: prop.value
+                    }
+                }, {
+                    property: "unparsed",
+                    value: {
+                        propertyId: {
+                            property: "height"
+                        },
+                        value: prop.value
+                    }
+                }]
+            }
+        }
+    }
+} as const;

tests/size.test.ts

@@ -0,0 +1,14 @@
+import { expect, test } from "bun:test";
+import { testHelper } from "./test";
+import { size } from "../index";
+
+
+test("size", () => {
+    expect(testHelper([size], '.foo {size: 1em}'))
+        .toBe('.foo{width:1em;height:1em}')
+})
+
+test("size auto", () => {
+    expect(testHelper([size], '.foo {size: auto}'))
+        .toBe('.foo{width:auto;height:auto}')
+})

tests/spacing.test.ts

@@ -4,11 +4,11 @@ import { spacing } from "../index";
 
 
 test("tw units", () => {
-    expect(testHelper([spacing], '.foo {size: 1tw}'))
-        .toBe('.foo{size:.25rem}')
+    expect(testHelper([spacing], '.foo {width: 1tw}'))
+        .toBe('.foo{width:.25rem}')
 })
 
 test("calc w/ tw", () => {
-    expect(testHelper([spacing], '.foo {size: calc(var(--size) * 1tw)}'))
-        .toBe('.foo{size:calc(var(--size)*.25rem)}')
+    expect(testHelper([spacing], '.foo {width: calc(var(--size) * 1tw)}'))
+        .toBe('.foo{width:calc(var(--size)*.25rem)}')
 })