fix(preset-wind4): cancel support for chained variables

zyyv · zyyv · commit 8a465d1c3363 · 2025-11-19T11:22:01.000+08:00
close #4994
diff --git a/packages-presets/preset-wind4/src/utils/utilities.ts b/packages-presets/preset-wind4/src/utils/utilities.ts
@@ -252,13 +252,13 @@ export function colorCSSGenerator(
 
   if (color) {
     const result: [CSSObject, ...CSSValueInput[]] = [css]
-
+    const isCSSVar = color.includes('var(')
     if (Object.values(SpecialColorKey).includes(color)) {
       css[property] = color
     }
     else {
       const alphaKey = `--un-${varName}-opacity`
-      const value = keys ? generateThemeVariable('colors', keys) : color
+      const value = (keys && !isCSSVar) ? generateThemeVariable('colors', keys) : color
       let method = modifier ?? (keys ? 'in srgb' : 'in oklab')
       if (!method.startsWith('in ') && !method.startsWith('var(')) {
         method = `in ${method}`
@@ -267,7 +267,7 @@ export function colorCSSGenerator(
       css[property] = `color-mix(${method}, ${value} ${alpha ?? `var(${alphaKey})`}, transparent)${rawColorComment}`
       result.push(defineProperty(alphaKey, { syntax: '<percentage>', initialValue: '100%' }))
 
-      if (keys) {
+      if (keys && !isCSSVar) {
         themeTracking(`colors`, keys)
         if (!modifier) {
           const colorValue = ['shadow', 'inset-shadow', 'text-shadow', 'drop-shadow'].includes(varName)
diff --git a/test/preset-wind4.test.ts b/test/preset-wind4.test.ts
@@ -154,33 +154,31 @@ describe('preset-wind4', () => {
       ],
       theme: {
         colors: {
-          foo: 'var(--colors-bar)',
-          bar: 'var(--colors-baz-bcd, #000)',
-          baz: {
-            bcd: 'var(--colors-test, #fff)',
-          },
-          test: '#fff',
+          // foo: 'var(--colors-bar)',
+          // bar: 'var(--colors-baz-bcd, #000)',
+          // baz: {
+          //   bcd: 'var(--colors-test, #fff)',
+          // },
+          // ^^^ don't do this
+
+          // issue #4994: Chaining CSS variables within a theme is strongly discouraged,
+          // as it can cause browsers to fail to resolve variables to the correct values promptly during evaluation (or recalculation).
+          // Furthermore, Uno does not perform in-depth analysis of the source of these references.
+          primary: `var(--custom-css-variable, #123456)`,
+          secondary: `calc(var(--another-css-variable, 10%) + 5%)`,
         },
       },
     })
 
-    const { css } = await uno.generate('c-foo')
+    const { css } = await uno.generate('c-primary c-primary/50 c-secondary')
     expect(css).toMatchInlineSnapshot(`
       "/* layer: properties */
       @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*, ::before, ::after, ::backdrop{--un-text-opacity:100%;}}
       @property --un-text-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
-      /* layer: theme */
-      :root, :host {
-      --colors-foo: var(--colors-bar);
-      --colors-bar: var(--colors-baz-bcd, #000);
-      --colors-baz-bcd: var(--colors-test, #fff);
-      --colors-test: #fff;
-      }
       /* layer: default */
-      .c-foo{color:color-mix(in srgb, var(--colors-foo) var(--un-text-opacity), transparent) /* var(--colors-bar) */;}
-      @supports (color: color-mix(in lab, red, red)){
-      .c-foo{color:color-mix(in oklab, var(--colors-foo) var(--un-text-opacity), transparent) /* var(--colors-bar) */;}
-      }"
+      .c-primary{color:color-mix(in srgb, var(--custom-css-variable, #123456) var(--un-text-opacity), transparent) /* var(--custom-css-variable, #123456) */;}
+      .c-primary\\/50{color:color-mix(in srgb, var(--custom-css-variable, #123456) 50%, transparent) /* var(--custom-css-variable, #123456) */;}
+      .c-secondary{color:color-mix(in srgb, calc(var(--another-css-variable, 10%) + 5%) var(--un-text-opacity), transparent) /* calc(var(--another-css-variable, 10%) + 5%) */;}"
     `)
   })
 
