feat: add css variables as arbitrary valuess for w and h

src/_rules/size.js

@@ -2,10 +2,13 @@ import { handler as h, resolveBreakpoints, resolveVerticalBreakpoints } from '#u
 
 const sizeMapping = { h: 'height', w: 'width' };
 const getPropName = (minmax, hw) => `${minmax || ''}${sizeMapping[hw]}`;
-const resolveArbitraryValues = (d, unit, context) => {
-  if (unit === "rem") return h.rem(`${d}${unit}`);
-  if (unit === "px" || context.theme.usingPixels) return h.px(d);
-  return h.rem(d);
+const resolveArbitraryValues = (value, unit, context) => {
+  if (unit === "rem") return h.rem(`${value}${unit}`);
+  if (unit === "px" || context.theme.usingPixels) return h.px(value);
+  if (value.startsWith('--')) {
+    return `var(${value})`;
+  }
+  return h.rem(value) || value;
 };
 
 function getSizeValue(minmax, hw, theme, prop) {
@@ -44,5 +47,5 @@ export const sizes = [
       '(min|max)-w-screen-$breakpoints',
     ],
   }],
-  [/^(min-|max-)?([wh])-\[(\d+)(rem|px)?]$/, ([, minmax, wh, d, unit], context) => ({ [getPropName(minmax, wh)]:  resolveArbitraryValues(d, unit, context) })],
+  [/^(min-|max-)?([wh])-\[(.+)(rem|px)?]$/, ([, minmax, wh, value, unit], context) => ({ [getPropName(minmax, wh)]:  resolveArbitraryValues(value, unit, context) })],
 ];

test/__snapshots__/size.js.snap

@@ -274,6 +274,20 @@ exports[`min width and height > min-width 1`] = `
 .min-w-screen{min-width:100vw;}"
 `;
 
+exports[`min width and height with arbitrary values > min height with css variables and anything else 1`] = `
+"/* layer: default */
+.min-h-\\\\[--css-variable\\\\],
+.min-h-\\\\[var\\\\(--css-variable\\\\)\\\\]{min-height:var(--css-variable);}
+.min-h-\\\\[customStuff\\\\]{min-height:customStuff;}"
+`;
+
+exports[`min width and height with arbitrary values > min width with css variables and anything else 1`] = `
+"/* layer: default */
+.min-w-\\\\[--css-variable\\\\],
+.min-w-\\\\[var\\\\(--css-variable\\\\)\\\\]{min-width:var(--css-variable);}
+.min-w-\\\\[customStuff\\\\]{min-width:customStuff;}"
+`;
+
 exports[`min width and height with arbitrary values > min-height with pixel unit 1`] = `
 "/* layer: default */
 .min-h-\\\\[20000px\\\\]{min-height:20000px;}
@@ -438,6 +452,13 @@ exports[`width and height > width 1`] = `
 .w-screen{width:100vw;}"
 `;
 
+exports[`width and height with arbitrary values > height with css variables and anything else 1`] = `
+"/* layer: default */
+.h-\\\\[--css-variable\\\\],
+.h-\\\\[var\\\\(--css-variable\\\\)\\\\]{height:var(--css-variable);}
+.h-\\\\[customStuff\\\\]{height:customStuff;}"
+`;
+
 exports[`width and height with arbitrary values > height with pixel unit 1`] = `
 "/* layer: default */
 .h-\\\\[20000px\\\\]{height:20000px;}
@@ -466,6 +487,13 @@ exports[`width and height with arbitrary values > height with rem values 1`] = `
 .h-\\\\[99999\\\\]{height:9999.9rem;}"
 `;
 
+exports[`width and height with arbitrary values > width with css variables and anything else 1`] = `
+"/* layer: default */
+.w-\\\\[--css-variable\\\\],
+.w-\\\\[var\\\\(--css-variable\\\\)\\\\]{width:var(--css-variable);}
+.w-\\\\[customStuff\\\\]{width:customStuff;}"
+`;
+
 exports[`width and height with arbitrary values > width with pixel unit 1`] = `
 "/* layer: default */
 .w-\\\\[20000px\\\\]{width:20000px;}

test/size.js

@@ -69,6 +69,12 @@ describe('min width and height', () => {
 
 
 describe("width and height with arbitrary values", () => {
+  test('width with css variables and anything else', async(t) => {
+    const classes = ['w-[--css-variable]', 'w-[var(--css-variable)]', 'w-[customStuff]'];
+    const { css } = await t.uno.generate(classes);
+    expect(css).toMatchSnapshot();
+  });
+
   test('width with rem values', async (t) => {
     const classes = ['w-[20000]', 'w-[99999]', 'w-[378]'];
 
@@ -95,12 +101,16 @@ describe("width and height with arbitrary values", () => {
     expect(css).toMatchSnapshot();
   });
   test('width with invalid value', async (t) => {
-    const classes = ['w-20000', 'w-99999', 'w-378', 'w-[20000a]'];
+    const classes = ['w-20000', 'w-99999', 'w-378'];
 
     const { css } = await t.uno.generate(classes);
     expect(css).toMatchInlineSnapshot('""');
   });
-
+  test('height with css variables and anything else', async(t) => {
+    const classes = ['h-[--css-variable]', 'h-[var(--css-variable)]', 'h-[customStuff]'];
+    const { css } = await t.uno.generate(classes);
+    expect(css).toMatchSnapshot();
+  });
   test('height with rem values', async (t) => {
     const classes = ['h-[20000]', 'h-[99999]', 'h-[378]'];
 
@@ -127,14 +137,19 @@ describe("width and height with arbitrary values", () => {
     expect(css).toMatchSnapshot();
   });
   test('height with invalid value', async (t) => {
-    const classes = ['h-20000', 'h-99999', 'h-378', 'h-[20000a]'];
+    const classes = ['h-20000', 'h-99999', 'h-378'];
 
     const { css } = await t.uno.generate(classes);
     expect(css).toMatchInlineSnapshot('""');
   });
 });
 
 describe("min width and height with arbitrary values", () => {
+  test('min width with css variables and anything else', async(t) => {
+    const classes = ['min-w-[--css-variable]', 'min-w-[var(--css-variable)]', 'min-w-[customStuff]'];
+    const { css } = await t.uno.generate(classes);
+    expect(css).toMatchSnapshot();
+  });
   test('min-width with rem values', async (t) => {
     const classes = ['min-w-[20000]', 'min-w-[99999]', 'min-w-[378]'];
 
@@ -161,12 +176,17 @@ describe("min width and height with arbitrary values", () => {
     expect(css).toMatchSnapshot();
   });
   test('min-width with invalid value', async (t) => {
-    const classes = ['min-w-20000', 'min-w-99999', 'min-w-378', 'min-w-[20000a]'];
+    const classes = ['min-w-20000', 'min-w-99999', 'min-w-378'];
 
     const { css } = await t.uno.generate(classes);
     expect(css).toMatchInlineSnapshot('""');
   });
 
+  test('min height with css variables and anything else', async(t) => {
+    const classes = ['min-h-[--css-variable]', 'min-h-[var(--css-variable)]', 'min-h-[customStuff]'];
+    const { css } = await t.uno.generate(classes);
+    expect(css).toMatchSnapshot();
+  });
   test('min-height with rem values', async (t) => {
     const classes = ['min-h-[20000]', 'min-h-[99999]', 'min-h-[378]'];
 
@@ -193,7 +213,7 @@ describe("min width and height with arbitrary values", () => {
     expect(css).toMatchSnapshot();
   });
   test('min-height with invalid value', async (t) => {
-    const classes = ['min-h-20000', 'min-h-99999', 'min-h-378', 'min-h-[20000a]'];
+    const classes = ['min-h-20000', 'min-h-99999', 'min-h-378'];
 
     const { css } = await t.uno.generate(classes);
     expect(css).toMatchInlineSnapshot('""');
@@ -227,7 +247,7 @@ describe("max width and height with arbitrary values", () => {
     expect(css).toMatchSnapshot();
   });
   test('max-width with invalid value', async (t) => {
-    const classes = ['max-w-20000', 'max-w-99999', 'max-w-378', 'max-w-[20000a]'];
+    const classes = ['max-w-20000', 'max-w-99999', 'max-w-378'];
 
     const { css } = await t.uno.generate(classes);
     expect(css).toMatchInlineSnapshot('""');
@@ -259,7 +279,7 @@ describe("max width and height with arbitrary values", () => {
     expect(css).toMatchSnapshot();
   });
   test('max-height with invalid value', async (t) => {
-    const classes = ['max-h-20000', 'max-h-99999', 'max-h-378', 'max-h-[20000a]'];
+    const classes = ['max-h-20000', 'max-h-99999', 'max-h-378'];
 
     const { css } = await t.uno.generate(classes);
     expect(css).toMatchInlineSnapshot('""');