fix(preset-mini,preset-wind4): update regex to allow word characters in arbitrary values (#4732)

Jungzl · web-flow · commit 3758c4b5e7bd · 2025-06-12T02:08:13.000Z
diff --git a/packages-presets/preset-mini/src/_rules/variables.ts b/packages-presets/preset-mini/src/_rules/variables.ts
@@ -33,7 +33,7 @@ export const cssProperty: Rule[] = [
     const [prop, ...rest] = body.split(':')
     const value = rest.join(':')
 
-    if (!isURI(body) && /^[a-z-_]+$/i.test(prop) && isValidCSSBody(value)) {
+    if (!isURI(body) && /^[\w-]+$/.test(prop) && isValidCSSBody(value)) {
       const parsed = h.bracket(`[${value}]`)
 
       if (parsed)
diff --git a/packages-presets/preset-wind4/src/rules/variables.ts b/packages-presets/preset-wind4/src/rules/variables.ts
@@ -46,7 +46,7 @@ export const cssProperty: Rule<Theme>[] = [
     const [prop, ...rest] = body.split(':')
     const value = rest.join(':')
 
-    if (!isURI(body) && /^[a-z-_]+$/i.test(prop) && isValidCSSBody(value)) {
+    if (!isURI(body) && /^[\w-]+$/.test(prop) && isValidCSSBody(value)) {
       const parsed = h.bracket(`[${value}]`)
 
       if (parsed)
diff --git a/test/assets/output/preset-mini-targets.css b/test/assets/output/preset-mini-targets.css
@@ -7,6 +7,7 @@
 .items-\$size{align-items:var(--size);}
 .ws-\$variable{white-space:var(--variable);}
 .\[--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:#22c55e,#3b82f6;}
 .\[--css-variable-color\:theme\(colors\.red\.500\)\]{--css-variable-color:#ef4444;}
 .\[--css-variable-color\:theme\(colors\.red\.500\/50\%\)\]{--css-variable-color:rgb(239 68 68 / 50%);}
diff --git a/test/assets/output/preset-wind4-targets.css b/test/assets/output/preset-wind4-targets.css
@@ -1146,6 +1146,7 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .object-position-\$variable{object-position:var(--variable);}
 .ws-\$variable{white-space:var(--variable);}
 .\[--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);}
 .\[--css-variable-color\:theme\(colors\.red\.500\)\]{--css-variable-color:oklch(63.7% 0.237 25.331);}
 .\[--css-variable-color\:theme\(colors\.red\.500\/50\%\)\]{--css-variable-color:oklch(63.7% 0.237 25.331 / 50%);}
diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -1050,6 +1050,7 @@ export const presetMiniTargets: string[] = [
   '[padding:theme(spacing.xl)]',
   '[color:theme(colors.blue.300/40%)]',
   '[--css-variable:"wght"_400,_"opsz"_14]',
+  '[--css-variable-4:""wght"_400,_"opsz"_14"]',
   '[--css-variable-color:theme(colors.red.500)]',
   '[--css-variable-color:theme(colors.red.500/50%)]',
   '[--css-variable-color:theme(colors.green.500),theme(colors.blue.500)]',
