feat(module): HMR support with @nuxtjs/tailwindcss (#1665)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

test/basic.spec.ts

@@ -56,76 +56,3 @@ describe('nuxt', () => {
     })
   })
 })
-
-describe('tailwindcss config', () => {
-  it.each([
-    /* format:
-     name,
-     tailwindcss config, safelistColors,
-     expected safelistPatterns (add "!" before a pattern to negate it)
-    */
-    [
-      'default safelist',
-      {}, [],
-      ['bg-(primary)-50', 'bg-(red)-500'] // these both should be in the safelist
-    ],
-    [
-      'safelisting single new color',
-      {}, ['myColor'],
-      'bg-(myColor|primary)-50'
-    ],
-    [
-      'reducing amount of theme colors',
-      { theme: { colors: { plainBlue: '#00F' } } }, ['plainBlue'],
-      ['bg-(plainBlue|primary)-50', '!', /orange/] // the word "orange" should _not_ be found in any safelist pattern
-    ]
-  ])('%s', async (_description, tailwindcss, safelistColors, safelistPatterns) => {
-    const { tailwindConfig } = await getTailwindCSSConfig({
-      ui: {
-        safelistColors
-      },
-      tailwindcss: {
-        config: tailwindcss
-      }
-    })
-    expect.extend({
-      toBeRegExp: (received, expected) => {
-        if (typeof expected === 'string' || expected instanceof String) {
-          return {
-            message: () => `expected ${received} to be exact regex ${expected}`,
-            pass: received.toString() === RegExp(expected as string).toString()
-          }
-        } else if (expected instanceof RegExp) {
-          return {
-            message: () => `expected ${received} to be a regex like ${expected.toString()}`,
-            pass: received.toString().match(expected)
-          }
-        }
-        return {
-          message: () => `expected ${received} to be a regex`,
-          pass: false
-        }
-      }
-    })
-    safelistPatterns = safelistPatterns instanceof Array ? safelistPatterns : [safelistPatterns]
-
-    let negate = false
-    for (const safelistPattern of safelistPatterns) {
-      if (safelistPattern === '!') {
-        // negate next!
-        negate = true
-        continue
-      }
-      if (negate) {
-        expect(tailwindConfig.safelist).not.toContainEqual({
-          pattern: expect.toBeRegExp(safelistPattern)
-        })
-      } else {
-        expect(tailwindConfig.safelist).toContainEqual({
-          pattern: expect.toBeRegExp(safelistPattern)
-        })
-      }
-      negate = false
-    }
-  })
-})

test/colors.spec.ts

@@ -0,0 +1,88 @@
+import { describe, expect, it } from 'vitest'
+import { excludeColors, generateSafelist, setGlobalColors } from '../src/runtime/utils/colors'
+import defaultColors from 'tailwindcss/colors'
+import type { Config as TWConfig } from 'tailwindcss'
+
+describe('excludeColors', () => {
+  it('should exclude colors from the list', () => {
+    const twColors = {
+      red: defaultColors.red,
+      zinc: defaultColors.zinc,
+      blue: defaultColors.blue
+    }
+    expect(excludeColors(twColors).join(',')).toBe('red,blue')
+  })
+})
+
+describe('generateSafelist', () => {
+  it.each([
+    /* format:
+     name,
+     tailwindcss config, safelistColors,
+     expected safelistPatterns (add "!" before a pattern to negate it)
+    */
+    [
+      'default safelist',
+      {}, [],
+      ['bg-(primary)-50', 'bg-(red)-500'] // these both should be in the safelist
+    ],
+    [
+      'safelisting single new color',
+      {}, ['myColor'],
+      'bg-(myColor|primary)-50'
+    ],
+    [
+      'reducing amount of theme colors',
+      { theme: { colors: { plainBlue: '#00F' } } }, ['plainBlue'],
+      ['bg-(plainBlue|primary)-50', '!', /orange/] // the word "orange" should _not_ be found in any safelist pattern
+    ]
+  ])('%s', async (_description, tailwindConfig: Partial<TWConfig>, safelistColors, safelistPatterns) => {
+    safelistColors.push('primary')
+    tailwindConfig.theme = tailwindConfig.theme || {}
+    tailwindConfig.theme.extend = tailwindConfig.theme.extend || {}
+    tailwindConfig.theme.extend.colors =
+      tailwindConfig.theme.extend.colors || {}
+    const safelistConfig = generateSafelist(safelistColors, setGlobalColors(tailwindConfig.theme))
+
+    expect.extend({
+      toBeRegExp: (received, expected) => {
+        if (typeof expected === 'string' || expected instanceof String) {
+          return {
+            message: () => `expected ${received} to be exact regex ${expected}`,
+            pass: received.toString() === RegExp(expected as string).toString()
+          }
+        } else if (expected instanceof RegExp) {
+          return {
+            message: () => `expected ${received} to be a regex like ${expected.toString()}`,
+            pass: received.toString().match(expected)
+          }
+        }
+        return {
+          message: () => `expected ${received} to be a regex`,
+          pass: false
+        }
+      }
+    })
+
+    safelistPatterns = safelistPatterns instanceof Array ? safelistPatterns : [safelistPatterns]
+
+    let negate = false
+    for (const safelistPattern of safelistPatterns) {
+      if (safelistPattern === '!') {
+        // negate next!
+        negate = true
+        continue
+      }
+      if (negate) {
+        expect(safelistConfig).not.toContainEqual({
+          pattern: expect.toBeRegExp(safelistPattern)
+        })
+      } else {
+        expect(safelistConfig).toContainEqual({
+          pattern: expect.toBeRegExp(safelistPattern)
+        })
+      }
+      negate = false
+    }
+  })
+})