feat: add numbers & css variables for col and row grid utils (#4717)

praburangki · web-flow · commit 1948d4b127be · 2025-06-08T12:57:39.000Z
diff --git a/packages-presets/preset-wind4/src/rules/grid.ts b/packages-presets/preset-wind4/src/rules/grid.ts
@@ -23,14 +23,14 @@ export const grids: Rule<Theme>[] = [
 
   // global
   [/^(?:grid-)?(row|col)-(.+)$/, ([, c, v]) => ({
-    [`grid-${rowCol(c)}`]: h.bracket.cssvar.auto(v),
+    [`grid-${rowCol(c)}`]: h.bracket.number.cssvar.auto(v),
   })],
 
   // span
   [/^(?:grid-)?(row|col)-span-(.+)$/, ([, c, s]) => {
     if (s === 'full')
       return { [`grid-${rowCol(c)}`]: '1/-1' }
-    const v = h.bracket.number(s)
+    const v = h.bracket.number.cssvar(s)
     if (v != null)
       return { [`grid-${rowCol(c)}`]: `span ${v}/span ${v}` }
   }, { autocomplete: '(grid-row|grid-col|row|col)-span-<num>' }],
diff --git a/test/assets/output/preset-wind4-targets.css b/test/assets/output/preset-wind4-targets.css
@@ -777,12 +777,18 @@
 .-gap-row-5,
 .-gap-y-5{row-gap:calc(calc(var(--spacing) * 5) * -1);}
 .grid{display:grid;}
+.col-11{grid-column:11;}
+.-col-12{grid-column:-12;}
 .grid-col-\$variable{grid-column:var(--variable);}
 .grid-row-\$variable{grid-row:var(--variable);}
 .row-\[span_1\/span_2\]{grid-row:span 1/span 2;}
+.row-11{grid-row:11;}
+.-row-12{grid-row:-12;}
 .row-auto{grid-row:auto;}
+.col-span-\$variable{grid-column:span var(--variable)/span var(--variable);}
 .col-span-1{grid-column:span 1/span 1;}
 .row-span-\[hi\]{grid-row:span hi/span hi;}
+.row-span-\$variable{grid-row:span var(--variable)/span var(--variable);}
 .row-span-full{grid-row:1/-1;}
 .row-start-full{grid-row-start:full;}
 .row-end-1{grid-row-end:1;}
diff --git a/test/assets/preset-wind4-targets.ts b/test/assets/preset-wind4-targets.ts
@@ -484,6 +484,14 @@ export const presetWind4Targets: string[] = [
   'scheme-light-dark',
   'scheme-dark',
   'scheme-light',
+
+  // grid
+  'col-11',
+  '-col-12',
+  'col-span-$variable',
+  'row-11',
+  '-row-12',
+  'row-span-$variable',
 ]
 
 export const presetWindNonTargets: string[] = [
