fix(preset-wind4): support special color key with alpha

zyyv · zyyv · commit e43d002d9c71 · 2025-11-21T10:34:48.000+08:00
close #4998
diff --git a/packages-presets/preset-wind4/src/utils/utilities.ts b/packages-presets/preset-wind4/src/utils/utilities.ts
@@ -253,20 +253,24 @@ export function colorCSSGenerator(
   if (color) {
     const result: [CSSObject, ...CSSValueInput[]] = [css]
     const isCSSVar = color.includes('var(')
-    if (Object.values(SpecialColorKey).includes(color)) {
+    const isSpecial = Object.values(SpecialColorKey).includes(color)
+
+    if (isSpecial && !alpha) {
       css[property] = color
+      return result
+    }
+
+    const alphaKey = `--un-${varName}-opacity`
+    const value = (keys && !isCSSVar && !isSpecial) ? generateThemeVariable('colors', keys) : color
+    let method = modifier ?? (keys ? 'in srgb' : 'in oklab')
+    if (!method.startsWith('in ') && !method.startsWith('var(')) {
+      method = `in ${method}`
     }
-    else {
-      const alphaKey = `--un-${varName}-opacity`
-      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}`
-      }
 
-      css[property] = `color-mix(${method}, ${value} ${alpha ?? `var(${alphaKey})`}, transparent)${rawColorComment}`
-      result.push(defineProperty(alphaKey, { syntax: '<percentage>', initialValue: '100%' }))
+    css[property] = `color-mix(${method}, ${value} ${alpha ?? `var(${alphaKey})`}, transparent)${rawColorComment}`
+    result.push(defineProperty(alphaKey, { syntax: '<percentage>', initialValue: '100%' }))
 
+    if (!isSpecial) {
       if (keys && !isCSSVar) {
         themeTracking(`colors`, keys)
         if (!modifier) {
diff --git a/test/assets/output/preset-wind4-targets.css b/test/assets/output/preset-wind4-targets.css
@@ -725,6 +725,8 @@
 .bg-\[url\(https\:\/\/test\.unocss\.png\)\]{--un-url:url(https://test.unocss.png);background-image:var(--un-url);}
 .bg-\#452233\/40,
 .bg-hex-452233\/40{background-color:color-mix(in oklab, #452233 40%, transparent) /* #452233 */;}
+.bg-current{background-color:currentColor;}
+.bg-current\/10{background-color:color-mix(in oklab, currentColor 10%, transparent) /* currentColor */;}
 .first-letter\:bg-green-400::first-letter{background-color:color-mix(in srgb, var(--colors-green-400) var(--un-bg-opacity), transparent) /* oklch(79.2% 0.209 151.711) */;}
 .\[\&\[data-active\=\"true\"\]\]\:bg-red[data-active="true"]{background-color:color-mix(in srgb, var(--colors-red-DEFAULT) var(--un-bg-opacity), transparent) /* oklch(70.4% 0.191 22.216) */;}
 .bg-red-100{background-color:color-mix(in srgb, var(--colors-red-100) var(--un-bg-opacity), transparent) /* oklch(93.6% 0.032 17.717) */;}
diff --git a/test/assets/preset-wind4-targets.ts b/test/assets/preset-wind4-targets.ts
@@ -97,6 +97,8 @@ export const presetWind4Targets: string[] = [
   'bg-repeat-revert',
   'bg-right-bottom',
   'bg-scroll',
+  'bg-current',
+  'bg-current/10',
 
   // bg gradient
   'from-current',
