chore(module): safelist dynamic colors

package.json

@@ -25,14 +25,14 @@
   },
   "dependencies": {
     "@headlessui/vue": "^1.4.3",
+    "@iconify/vue": "^3.1.3",
     "@nuxt/kit": "npm:@nuxt/kit-edge@latest",
-    "@popperjs/core": "^2.11.2",
-    "@vueuse/core": "^7.6.1",
     "@nuxtjs/tailwindcss": "^5.0.0-4",
+    "@popperjs/core": "^2.11.2",
     "@tailwindcss/aspect-ratio": "^0.4.0",
     "@tailwindcss/forms": "^0.4.0",
     "@tailwindcss/line-clamp": "^0.3.1",
-    "@iconify/vue": "^3.1.3",
+    "@vueuse/core": "^7.6.1",
     "defu": "^5.0.1",
     "lodash-es": "^4.17.21",
     "nanoid": "^3.2.0",
@@ -41,8 +41,8 @@
   "devDependencies": {
     "@nuxt/module-builder": "^0.1.7",
     "@nuxtjs/eslint-config-typescript": "^8.0.0",
-    "@types/tailwindcss": "^3.0.7",
     "@types/lodash-es": "^4.17.6",
+    "@types/tailwindcss": "^3.0.7",
     "@vueuse/components": "^7.6.1",
     "eslint": "^8.8.0",
     "nuxt3": "latest",

src/module.ts

@@ -5,6 +5,7 @@ import defu from 'defu'
 import type { TailwindConfig } from 'tailwindcss/tailwind-config'
 import colors from 'tailwindcss/colors.js'
 import { name, version } from '../package.json'
+import { safeColorsAsRegex } from './utils'
 
 interface ColorsOptions {
   /**
@@ -87,7 +88,15 @@ export default defineNuxtModule<ModuleOptions>({
         content: [
           resolve(runtimeDir, 'components/**/*.{vue,js,ts}'),
           resolve(runtimeDir, 'presets/*.{mjs,js,ts}')
-        ]
+        ],
+        // Safelist dynamic colors used in preset
+        safelist: [{
+          pattern: new RegExp(`bg-(${safeColorsAsRegex})-(100|600|700)`)
+        }, {
+          pattern: new RegExp(`text-(${safeColorsAsRegex})-(100|800)`)
+        }, {
+          pattern: new RegExp(`ring-(${safeColorsAsRegex})-(500)`)
+        }]
       },
       cssPath: resolve(runtimeDir, 'tailwind.css')
     })

src/runtime/presets/default.ts

@@ -1,23 +1,4 @@
-const colors = [
-  'primary',
-  'rose',
-  'pink',
-  'fuchsia',
-  'purple',
-  'violet',
-  'indigo',
-  'blue',
-  'sky',
-  'cyan',
-  'teal',
-  'emerald',
-  'green',
-  'lime',
-  'yellow',
-  'amber',
-  'orange',
-  'red'
-]
+import { safeColors } from '../../utils'
 
 const button = {
   base: 'font-medium focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus:ring-offset-white dark:focus:ring-offset-black',
@@ -46,7 +27,7 @@ const button = {
     xl: 'p-3'
   },
   variant: {
-    ...colors.reduce((acc: any, color) => {
+    ...safeColors.reduce((acc: any, color) => {
       acc[color] = `shadow-sm border border-transparent text-white bg-${color}-600 hover:bg-${color}-700 disabled:bg-${color}-600 focus:ring-2 focus:ring-offset-2 focus:ring-${color}-500`
       return acc
     }, {}),
@@ -99,7 +80,7 @@ const badge = {
     xl: 'text-sm px-4 py-1'
   },
   variant: {
-    ...colors.reduce((acc: any, color) => {
+    ...safeColors.reduce((acc: any, color) => {
       acc[color] = `bg-${color}-100 dark:bg-${color}-700 text-${color}-800 dark:text-${color}-100`
       return acc
     }, {})

src/utils.ts

@@ -0,0 +1,6 @@
+import colors from 'tailwindcss/colors.js'
+import { without, kebabCase } from 'lodash-es'
+
+export const safeColors = without(Object.keys(colors).map(kebabCase), 'inherit', 'current', 'transparent', 'black', 'white', 'gray')
+
+export const safeColorsAsRegex = safeColors.join('|')