fix(preset-mini): resolve nested theme colors with dashed keys (#5021)

nlemoine · web-flow · commit 8e7db6e855da · 2025-12-22T14:15:54.000+08:00
diff --git a/packages-presets/preset-mini/src/_utils/utilities.ts b/packages-presets/preset-mini/src/_utils/utilities.ts
@@ -34,25 +34,31 @@ export function directionSize(propertyPrefix: string): DynamicMatcher {
 type ThemeColorKeys = 'colors' | 'borderColor' | 'backgroundColor' | 'textColor' | 'shadowColor' | 'accentColor'
 
 function getThemeColorForKey(theme: Theme, colors: string[], key: ThemeColorKeys = 'colors') {
-  let obj = theme[key] as Theme['colors'] | string
-  let index = -1
-
-  for (const c of colors) {
-    index += 1
-    if (obj && typeof obj !== 'string') {
-      const camel = colors.slice(index).join('-').replace(/(-[a-z])/g, n => n.slice(1).toUpperCase())
-      if (obj[camel])
-        return obj[camel]
-
-      if (obj[c]) {
-        obj = obj[c]
-        continue
+  const obj = theme[key] as Theme['colors'] | string
+
+  function deepGet(current: any, path: string[]): any {
+    if (path.length === 0)
+      return current
+    if (!current || typeof current !== 'object')
+      return undefined
+
+    // Try progressively shorter flat keys (e.g., 'dark-blue-foo', 'dark-blue', 'dark')
+    for (let i = path.length; i > 0; i--) {
+      const flatKey = path.slice(0, i).join('-')
+      const camelKey = flatKey.replace(/(-[a-z])/g, n => n.slice(1).toUpperCase())
+
+      // Try camelCase first, then dashed
+      const value = current[camelKey] ?? current[flatKey]
+      if (value != null) {
+        if (i === path.length)
+          return value
+        return deepGet(value, path.slice(i))
       }
     }
     return undefined
   }
 
-  return obj
+  return deepGet(obj, colors)
 }
 
 /**
diff --git a/packages-presets/preset-mini/test/color.test.ts b/packages-presets/preset-mini/test/color.test.ts
@@ -49,6 +49,14 @@ describe('preset-mini color utils', () => {
           colorMix: 'color-mix(in hsl, oklch(95% 0.10 var(--hue)), oklch(100% 0 360))',
           colorMixUnoAlpha: 'color-mix(in hsl, oklch(95% 0.10 var(--hue) / %alpha), oklch(100% 0 360))',
           colorMixDosAlpha: 'color-mix(in srgb, oklch(95% 0.10 var(--hue) / %alpha) 30%, oklch(100% 0 360 / %alpha))',
+          brand: {
+            'dark-blue': {
+              'DEFAULT': '#123456',
+              'foo-bar': {
+                baz: '#fedcba',
+              },
+            },
+          },
         },
       },
       symbols,
@@ -133,6 +141,26 @@ describe('preset-mini color utils', () => {
       prop: 'color-mix(in srgb, oklch(95% 0.10 var(--hue) / 0.2) 30%, oklch(100% 0 360 / 0.2))',
     })
 
+    // nested color with dash in key name (with DEFAULT)
+    expect(fn('brand-dark-blue')).eql({
+      '--un-v-opacity': 1,
+      'prop': 'rgb(18 52 86 / var(--un-v-opacity))',
+    })
+
+    expect(fn('brand-dark-blue/50')).eql({
+      prop: 'rgb(18 52 86 / 0.5)',
+    })
+
+    // deeply nested color with multiple dashed keys
+    expect(fn('brand-dark-blue-foo-bar-baz')).eql({
+      '--un-v-opacity': 1,
+      'prop': 'rgb(254 220 186 / var(--un-v-opacity))',
+    })
+
+    expect(fn('brand-dark-blue-foo-bar-baz/25')).eql({
+      prop: 'rgb(254 220 186 / 0.25)',
+    })
+
     // invalid
     expect(fn('hex-invalid')).eql({})
     expect(fn('5px')).eql(undefined)
