feat: support nested colors theme

src/preflights.ts

@@ -10,7 +10,7 @@ export const preflights: Preflight[] = [
     getCSS(ctx: PreflightContext<Theme>) {
       if (ctx.theme.preflightBase) {
         const css = entriesToCss(Object.entries(ctx.theme.preflightBase))
-        return `:root{${css}}`
+        return `*,::before,::after{${css}}::backdrop{${css}}`
       }
     },
   },

src/rules/ring.ts

@@ -8,7 +8,7 @@ export const ringBase = {
   '--un-ring-offset-width': '0px',
   '--un-ring-offset-color': '#fff',
   '--un-ring-width': '0px',
-  '--un-ring-color': '#93c5fd80',
+  '--un-ring-color': 'rgba(147,197,253,0.5)',
   '--un-shadow': '0 0 rgba(0,0,0,0)',
 }
 

src/utils/utilities.ts

@@ -1,5 +1,4 @@
 import type { CSSEntries, CSSObject, ParsedColorValue, Rule, RuleContext, VariantContext } from '@unocss/core'
-
 import { toArray } from '@unocss/core'
 import type { Theme } from '../theme'
 import { restoreSelector } from '../transform'
@@ -11,7 +10,6 @@ export const CONTROL_MINI_NO_NEGATIVE = '$$mini-no-negative'
 
 /**
  * Provide {@link DynamicMatcher} function returning spacing definition. See spacing rules.
- *
  * @param {string} propertyPrefix - Property for the css value to be created. Postfix will be appended according to direction matched.
  * @return {@link DynamicMatcher} object.
  * @see {@link directionMap}
@@ -26,9 +24,25 @@ export const directionSize = (propertyPrefix: string) => ([_, direction, size]:
  * Obtain color from theme by camel-casing colors.
  */
 const getThemeColor = (theme: Theme, colors: string[]) => {
-  return theme.colors?.[
-    colors.join('-').replace(/(-[a-z])/g, n => n.slice(1).toUpperCase())
-  ]
+  let obj: Theme['colors'] | string = theme.colors
+  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
+      }
+    }
+    return undefined
+  }
+
+  return obj
 }
 
 /**
@@ -46,8 +60,7 @@ const getThemeColor = (theme: Theme, colors: string[]) => {
  * @return {ParsedColorValue|undefined}  {@link ParsedColorValue} object if string is parseable.
  */
 export const parseColor = (body: string, theme: Theme): ParsedColorValue | undefined => {
-  // 百分比 / 改为 _
-  const split = restoreSelector(body).split(/(?:\/|\_|:)/)
+  const split = restoreSelector(body).split(/(?:\/|\_|:)/) // 百分比 / 改为 _
 
   let main, opacity
   if (split[0] === '[color') {
@@ -86,19 +99,23 @@ export const parseColor = (body: string, theme: Theme): ParsedColorValue | undef
     if (scale.match(/^\d+$/)) {
       no = scale
       colorData = getThemeColor(theme, colors.slice(0, -1))
+      if (!colorData || typeof colorData === 'string')
+        color = undefined
+      else
+        color = colorData[no] as string
     }
     else {
       colorData = getThemeColor(theme, colors)
       if (!colorData && colors.length <= 2) {
         [, no = no] = colors
         colorData = getThemeColor(theme, [name])
       }
-    }
 
-    if (typeof colorData === 'string')
-      color = colorData
-    else if (no && colorData)
-      color = colorData[no]
+      if (typeof colorData === 'string')
+        color = colorData
+      else if (no && colorData)
+        color = colorData[no] as string
+    }
   }
 
   return {

test/__snapshots__/preset-mini.test.ts.snap

@@ -7,9 +7,16 @@ exports[`preset-mini > custom var prefix 1`] = `
 .scale-100{--hi-scale-x:1;--hi-scale-y:1;transform:translateX(var(--hi-translate-x)) translateY(var(--hi-translate-y)) translateZ(var(--hi-translate-z)) rotate(var(--hi-rotate)) rotateX(var(--hi-rotate-x)) rotateY(var(--hi-rotate-y)) rotateZ(var(--hi-rotate-z)) skewX(var(--hi-skew-x)) skewY(var(--hi-skew-y)) scaleX(var(--hi-scale-x)) scaleY(var(--hi-scale-y)) scaleZ(var(--hi-scale-z));}"
 `;
 
+exports[`preset-mini > nested theme colors 1`] = `
+"/* layer: default */
+.bg-a-b-c{--un-bg-opacity:1;background-color:rgba(81,69,67,var(--un-bg-opacity));}
+.text-a-b-c{--un-text-opacity:1;color:rgba(81,69,67,var(--un-text-opacity));}
+.text-a-camel-case{--un-text-opacity:1;color:rgba(34,51,68,var(--un-text-opacity));}"
+`;
+
 exports[`preset-mini > targets 1`] = `
 "/* layer: preflights */
-:root{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:#93c5fd80;}
+*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);}
 /* layer: 1 */
 .uno-layer-1\\\\:translate-0{--un-translate-x:0rpx;--un-translate-y:0rpx;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 /* layer: default */