fix(preset-wind4): add spacing property support and related CSS variables

Simon-He95 · Simon-He95 · commit 700d6d06fe34 · 2025-10-29T11:49:55.000+08:00
close: #4965
diff --git a/packages-presets/preset-wind4/src/rules/variables.ts b/packages-presets/preset-wind4/src/rules/variables.ts
@@ -38,13 +38,22 @@ export const cssVariables: Rule<Theme>[] = [
   }],
 ]
 
+// #4965
+const SPACING_PROPERTY_REGEX = /(--spacing)\(([\s\S]+?)\)/
 export const cssProperty: Rule<Theme>[] = [
   [/^\[(.*)\]$/, ([_, body]) => {
     if (!body.includes(':'))
       return
 
     const [prop, ...rest] = body.split(':')
-    const value = rest.join(':')
+    let value = rest.join(':')
+
+    if (SPACING_PROPERTY_REGEX.test(value)) {
+      const spacingMatch = value.match(SPACING_PROPERTY_REGEX)!
+      const spacingValue = spacingMatch[2]
+      const spacingVar = spacingMatch[1]
+      value = value.replace(SPACING_PROPERTY_REGEX, `calc(var(${spacingVar}) * ${spacingValue})`)
+    }
 
     if (!isURI(body) && /^[\w-]+$/.test(prop) && isValidCSSBody(value)) {
       const parsed = h.bracket(`[${value}]`)
diff --git a/test/assets/output/preset-wind4-targets.css b/test/assets/output/preset-wind4-targets.css
@@ -1192,6 +1192,11 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .object-\$fit{object-fit:var(--fit);}
 .object-position-\$variable{object-position:var(--variable);}
 .ws-\$variable{white-space:var(--variable);}
+.\[--cell-size\:--spacing\(1\.5\)\]{--cell-size:calc(var(--spacing) * 1.5);}
+.\[--cell-size\:--spacing\(8\)\]{--cell-size:calc(var(--spacing) * 8);}
+.\[--cell-size\:--spacing\(var\(--count\,1\)\)_hello\]{--cell-size:calc(var(--spacing) * var(--count,1)) hello;}
+.\[--cell-size\:--spacing\(var\(--count\,1\)\)\]{--cell-size:calc(var(--spacing) * var(--count,1));}
+.\[--cell-size\:--spacing\(var\(--count\)\)\]{--cell-size:calc(var(--spacing) * var(--count));}
 .\[--css-spacing\:theme\(spacing\.sm\)\]{--css-spacing:0.875rem;}
 .\[--css-variable-4\:\"\"wght\"_400\,_\"opsz\"_14\"\]{--css-variable-4:""wght" 400, "opsz" 14";}
 .\[--css-variable-color\:theme\(colors\.green\.500\)\,theme\(colors\.blue\.500\)\]{--css-variable-color:oklch(72.3% 0.219 149.579),oklch(62.3% 0.214 259.815);}
diff --git a/test/assets/preset-wind4-targets.ts b/test/assets/preset-wind4-targets.ts
@@ -642,6 +642,13 @@ export const presetWind4Targets: string[] = [
 
   // inert
   'inert:opacity-25',
+
+  // property shortcuts
+  '[--cell-size:--spacing(8)]',
+  '[--cell-size:--spacing(1.5)]',
+  '[--cell-size:--spacing(var(--count))]',
+  '[--cell-size:--spacing(var(--count,1))]',
+  '[--cell-size:--spacing(var(--count,1))_hello]',
 ]
 
 export const presetWindNonTargets: string[] = [
