fix(preset-wind4): escape css variables

zyyv · zyyv · commit d1e00bfc9a89 · 2025-10-20T13:35:48.000+08:00
close #4957
diff --git a/packages-presets/preset-wind4/src/preflights/theme.ts b/packages-presets/preset-wind4/src/preflights/theme.ts
@@ -1,7 +1,7 @@
 import type { CSSEntry, Preflight } from '@unocss/core'
 import type { PreflightsTheme, PresetWind4Options } from '..'
 import type { Theme } from '../theme/types'
-import { toArray, uniq } from '@unocss/core'
+import { escapeSelector, toArray, uniq } from '@unocss/core'
 import { alphaPlaceholdersRE } from '@unocss/rule-utils'
 import { compressCSS, detectThemeValue, getThemeByKey, themeTracking, trackedTheme } from '../utils'
 
@@ -92,7 +92,7 @@ export function theme(options: PresetWind4Options): Preflight<Theme> {
           }
         }
 
-        const resolvedDeps = deps.map(([key, value]) => (key && value) ? `${key}: ${value};` : undefined).filter(Boolean)
+        const resolvedDeps = deps.map(([key, value]) => (key && value) ? `${escapeSelector(key)}: ${value};` : undefined).filter(Boolean)
         if (resolvedDeps.length === 0) {
           return undefined
         }
diff --git a/packages-presets/preset-wind4/src/utils/utilities.ts b/packages-presets/preset-wind4/src/utils/utilities.ts
@@ -1,6 +1,6 @@
 import type { CSSEntries, CSSObject, CSSObjectInput, CSSValueInput, DynamicMatcher, RuleContext, StaticRule, VariantContext } from '@unocss/core'
 import type { Theme } from '../theme'
-import { symbols, toArray } from '@unocss/core'
+import { escapeSelector, symbols, toArray } from '@unocss/core'
 import { colorToString, getStringComponent, getStringComponents, isInterpolatedMethod, parseCssColor } from '@unocss/rule-utils'
 import { SpecialColorKey } from './constant'
 import { h } from './handlers'
@@ -52,7 +52,7 @@ export function directionSize(
       }
       else if (theme.spacing && size in theme.spacing) {
         themeTracking('spacing', size)
-        return map[direction].map(i => [formatter(property, i), isNegative ? `calc(var(--spacing-${size}) * -1)` : `var(--spacing-${size})`])
+        return map[direction].map(i => [formatter(property, i), isNegative ? `calc(var(--${escapeSelector(`spacing-${size}`)}) * -1)` : `var(--${escapeSelector(`spacing-${size}`)})`])
       }
 
       v = h.bracket.cssvar.global.auto.fraction.rem(isNegative ? `-${size}` : size)

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`import type { CSSEntry, Preflight } from '@unocss/core'`
`2`	`2`	`import type { PreflightsTheme, PresetWind4Options } from '..'`
`3`	`3`	`import type { Theme } from '../theme/types'`
`4`		`-import { toArray, uniq } from '@unocss/core'`
	`4`	`+import { escapeSelector, toArray, uniq } from '@unocss/core'`
`5`	`5`	`import { alphaPlaceholdersRE } from '@unocss/rule-utils'`
`6`	`6`	`import { compressCSS, detectThemeValue, getThemeByKey, themeTracking, trackedTheme } from '../utils'`
`7`	`7`
`@@ -92,7 +92,7 @@ export function theme(options: PresetWind4Options): Preflight<Theme> {`
`92`	`92`	`}`
`93`	`93`	`}`
`94`	`94`
`95`		- const resolvedDeps = deps.map(([key, value]) => (key && value) ? `${key}: ${value};` : undefined).filter(Boolean)
	`95`	+ const resolvedDeps = deps.map(([key, value]) => (key && value) ? `${escapeSelector(key)}: ${value};` : undefined).filter(Boolean)
`96`	`96`	`if (resolvedDeps.length === 0) {`
`97`	`97`	`return undefined`
`98`	`98`	`}`