fix: considered content as function (#592)

* fix: considered content as function

* fix: passing content function to defu

* docs: fixed braces.. not sure howd that disappear

* chore: using non-typed test config instead

* chore: update

Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>

Author: ineshbose

docs/content/2.tailwind/1.config.md

@@ -188,7 +188,7 @@ If you want to fully overwrite its value, you can use a `function` that receives
 ```js{}[tailwind.config.js]
 export default {
   content (contentDefaults) {
-    return tailwindContent
+    return [...contentDefaults.filter((c) => c.endsWith('*.vue')), './my-components/**/*.vue', `${srcDir}/themes/**/*.js`]
   }
 }
 ```

src/module.ts

@@ -115,8 +115,9 @@ export default defineNuxtModule<ModuleOptions>({
       configPaths.forEach(path => nuxt.options.watch.push(path))
     }
 
+    // Default tailwind config
+    let tailwindConfig: any = defuArrayFn(moduleOptions.config, { content: contentPaths })
     // Recursively resolve each config and merge tailwind configs together.
-    let tailwindConfig: any = {}
     for (const configPath of configPaths) {
       let _tailwindConfig
       try {
@@ -126,18 +127,14 @@ export default defineNuxtModule<ModuleOptions>({
       }
 
       // Transform purge option from Array to object with { content }
-      if (_tailwindConfig && Array.isArray(_tailwindConfig.purge)) {
+      if (_tailwindConfig && Array.isArray(_tailwindConfig.purge) && !_tailwindConfig.content) {
         _tailwindConfig.content = _tailwindConfig.purge
       }
-
-      tailwindConfig = defu(_tailwindConfig || {}, tailwindConfig)
+      if (_tailwindConfig) {
+        tailwindConfig = defuArrayFn(_tailwindConfig, tailwindConfig)
+      }
     }
 
-    tailwindConfig.content = [...(tailwindConfig.content || []), ...contentPaths]
-
-    // Merge with our default purgecss default
-    tailwindConfig = defuArrayFn(tailwindConfig, moduleOptions.config)
-
     // Write cjs version of config to support vscode extension
     const resolveConfig: any = await import('tailwindcss/resolveConfig.js').then(r => r.default || r)
     const resolvedConfig = resolveConfig(tailwindConfig)

test/configs.test.ts

@@ -1,6 +1,7 @@
 import { describe, test, expect, vi } from 'vitest'
 import { mockedWarn } from 'consola'
 import { useTestContext } from '@nuxt/test-utils'
+import destr from 'destr'
 import { setupNuxtTailwind } from './util'
 
 describe('tailwindcss module configs', async () => {
@@ -17,7 +18,8 @@ describe('tailwindcss module configs', async () => {
     configPath: [
       'alt-tailwind.config.js',
       'malformed-tailwind.config',
-      'ts-tailwind.config'
+      'ts-tailwind.config',
+      'override-tailwind.config.js'
     ],
     cssPath: 'tailwind.css'
   })
@@ -42,4 +44,15 @@ describe('tailwindcss module configs', async () => {
     // set from ts-tailwind.config.ts
     expect(nuxt.vfs[vfsKey]).contains('"javascriptYellow": "#f1e05a"')
   })
+
+  test('content is overridden', () => {
+    const nuxt = useTestContext().nuxt
+    const vfsKey = Object.keys(nuxt.vfs).find(k => k.includes('tailwind.config.'))
+    // set from override-tailwind.config.ts
+    const contentFiles = destr(nuxt.vfs[vfsKey].replace(/^(module\.exports = )/, '')).content.files
+    expect(contentFiles.length).toBe(4)
+    expect(contentFiles[0]).toBe('ts-content/**/*.md')
+    expect(contentFiles[1]).toBe('./custom-theme/**/*.vue')
+    expect(contentFiles.slice(2).filter(c => c.endsWith('vue')).length).toBe(2)
+  })
 })

test/fixture/basic/override-tailwind.config.js

@@ -0,0 +1,14 @@
+export default {
+  content: contentDefaults => [
+    contentDefaults[0],
+    './custom-theme/**/*.vue',
+    ...contentDefaults.filter(c => c.endsWith('vue'))
+  ],
+  theme: {
+    extend: {
+      colors: {
+        typescriptBlue: '#007acc'
+      }
+    }
+  }
+}

test/fixture/basic/ts-tailwind.config.ts

@@ -2,7 +2,7 @@ import { Config } from 'tailwindcss'
 
 export default <Config> {
   content: [
-    'content/**/*.md'
+    'ts-content/**/*.md'
   ],
   theme: {
     extend: {