feat: support for custom vars and keyword color (#49)

src/index.ts

@@ -87,11 +87,15 @@ export function presetTheme<T extends Record<string, any>>(options: PresetThemeO
           else if (typeof val === 'string') {
             const name = [prefix, ...themeKeys].join('-')
             if (themeKeys[0] === 'colors') {
-              const cssColor = parseCssColor(val)
-              if (cssColor) {
+              const cssColor = parseCssColor(val) || val
+              if (typeof cssColor !== 'string') {
                 setThemeValue(name, 0, true)
                 curTheme[key] = wrapCSSFunction(cssColor.type, wrapVar(name), cssColor?.alpha)
               }
+              else {
+                setThemeValue(name, 0, true)
+                curTheme[key] = wrapVar(name)
+              }
             }
             else {
               setThemeValue(name, 0)

tests/index.test.ts

@@ -262,4 +262,43 @@ describe('theme', () => {
       .pt-7{padding-top:1.75rem;}"
     `)
   })
+
+  test('color-keyword-and-custom-vars', async () => {
+    const uno = createGenerator({
+      theme: {
+        colors: {
+          primary: '#123456',
+          colorKey: 'red',
+          customVar: 'var(--fd-color-light)',
+        },
+      },
+      presets: [
+        presetUno(),
+        presetTheme<Theme>({
+          theme: {
+            dark: {
+              colors: {
+                primary: '#654321',
+                colorKey: 'blue',
+                customVar: 'var(--fd-color-dark)',
+              },
+            },
+          },
+        }),
+      ],
+    })
+
+    const targets = ['text-color-key', 'text-custom-var']
+    const { css } = await uno.generate(targets.join('\n'))
+    expect(css).toMatchInlineSnapshot(`
+      "/* layer: preflights */
+      *,::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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y: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);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y: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);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}
+      /* layer: theme */
+      .dark{--un-preset-theme-colors-colorKey:blue;--un-preset-theme-colors-customVar:var(--fd-color-dark);}
+      :root{--un-preset-theme-colors-colorKey:red;--un-preset-theme-colors-customVar:var(--fd-color-light);}
+      /* layer: default */
+      .text-color-key{color:var(--un-preset-theme-colors-colorKey);}
+      .text-custom-var{color:var(--un-preset-theme-colors-customVar);}"
+    `)
+  })
 })