fix(module): allow CSS variables in tailwind colors (#2014)

Author: davestewart

src/runtime/plugins/colors.ts

@@ -1,5 +1,5 @@
 import { computed } from 'vue'
-import { get, hexToRgb } from '../utils'
+import { get, parseConfigValue } from '../utils'
 import { defineNuxtPlugin, useAppConfig, useNuxtApp, useHead } from '#imports'
 import colors from '#tailwind-config/theme/colors'
 
@@ -19,10 +19,10 @@ export default defineNuxtPlugin(() => {
     }
 
     return `:root {
-${Object.entries(primary || colors.green).map(([key, value]) => `--color-primary-${key}: ${hexToRgb(value)};`).join('\n')}
+${Object.entries(primary || colors.green).map(([key, value]) => `--color-primary-${key}: ${parseConfigValue(value)};`).join('\n')}
 --color-primary-DEFAULT: var(--color-primary-500);
 
-${Object.entries(gray || colors.cool).map(([key, value]) => `--color-gray-${key}: ${hexToRgb(value)};`).join('\n')}
+${Object.entries(gray || colors.cool).map(([key, value]) => `--color-gray-${key}: ${parseConfigValue(value)};`).join('\n')}
 }
 
 .dark {

src/runtime/utils/index.ts

@@ -41,14 +41,22 @@ export function mergeConfig<T> (strategy: Strategy, ...configs): T {
   return defuTwMerge({}, ...configs) as T
 }
 
+const rxHex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i
+
+export function parseConfigValue (value: string) {
+  return rxHex.test(value)
+    ? hexToRgb(value)
+    : value
+}
+
 export function hexToRgb (hex: string) {
   // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
   hex = hex.replace(shorthandRegex, function (_, r, g, b) {
     return r + r + g + g + b + b
   })
 
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  const result = rxHex.exec(hex)
   return result
     ? `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}`
     : null