From b6795c068363d86a30e2d07441e962e3edf52193 Mon Sep 17 00:00:00 2001
From: Dave Stewart <dev@davestewart.co.uk>
Date: Sat, 3 Aug 2024 01:28:20 +0100
Subject: [PATCH] feat(Config): allow CSS variables in Tailwind config

---
 src/runtime/plugins/colors.ts |  6 +++---
 src/runtime/utils/index.ts    | 10 +++++++++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/runtime/plugins/colors.ts b/src/runtime/plugins/colors.ts
index 83ee5d16ba..552cb5994b 100644
--- a/src/runtime/plugins/colors.ts
+++ b/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 {
diff --git a/src/runtime/utils/index.ts b/src/runtime/utils/index.ts
index 184ab44519..88cee74255 100644
--- a/src/runtime/utils/index.ts
+++ b/src/runtime/utils/index.ts
@@ -41,6 +41,14 @@ 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
@@ -48,7 +56,7 @@ export function hexToRgb (hex: string) {
     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