chore: use klona and content configuration as object

Author: ineshbose

package.json

@@ -49,6 +49,7 @@
     "consola": "^3.2.3",
     "defu": "^6.1.4",
     "h3": "^1.12.0",
+    "klona": "^2.0.6",
     "pathe": "^1.1.2",
     "postcss": "^8.4.38",
     "postcss-nesting": "^12.1.5",

playground/nuxt.config.ts

@@ -11,18 +11,21 @@ const logger = consola.withTag('nuxt:tailwindcss:playground')
 
 export default defineNuxtConfig({
   extends: ['./theme'],
+
   // builder: 'webpack',
   modules: [
     existsSync(resolve(__dirname, '../dist/module.mjs')) ? '@nuxtjs/tailwindcss' : '../src/module',
     '@nuxt/content',
   ],
+
   tailwindcss: {
     // viewer: false,
     config: {},
     exposeConfig: true,
     cssPath: '~/assets/css/tailwind.css',
     editorSupport: true,
   } satisfies Partial<ModuleOptions>,
+
   hooks: {
     'tailwindcss:loadConfig': (config, configPath, idx) => {
       logger.info('Running `tailwindcss:loadConfig` hook...', Object.keys(config || {}), { configPath, idx })
@@ -54,9 +57,11 @@ export default defineNuxtConfig({
       logger.info('Running `tailwindcss:resolvedConfig` hook...', { typography: Boolean(config.theme.typography), hasOld: Boolean(oldConfig) })
     },
   } satisfies Partial<ModuleHooks>,
+
   content: {
     documentDriven: true,
   },
+
   css: [
     // Including Inter CSS is the first component to reproduce HMR issue. It also causes playground to look better,
     // since Inter is a native font for Tailwind UI
@@ -65,4 +70,6 @@ export default defineNuxtConfig({
     '@fontsource/inter/600.css',
     '@fontsource/inter/700.css',
   ],
-})
+
+  compatibilityDate: '2024-07-11',
+})

pnpm-lock.yaml

@@ -147,7 +147,7 @@ const createInternalContext = async (moduleOptions: ModuleOptions, nuxt = useNux
     ).then(configs => configs.reduce(
       (prev, curr) => configMerger(curr, prev),
       // internal default tailwind config
-      configMerger(moduleOptions.config, { content: contentPaths }),
+      configMerger(moduleOptions.config, { content: { files: contentPaths } }),
     )) as TWConfig
 
     // Allow extending tailwindcss config by other modules
@@ -180,7 +180,7 @@ const createInternalContext = async (moduleOptions: ModuleOptions, nuxt = useNux
         `\nconst inlineConfig = ${serializeConfig(moduleOptions.config as Partial<TWConfig>)};\n`,
         'const config = [',
         layerConfigs.join(',\n'),
-        `].reduce((prev, curr) => configMerger(curr, prev), configMerger(inlineConfig, { content: ${JSON.stringify(contentPaths)} }));\n`,
+        `].reduce((prev, curr) => configMerger(curr, prev), configMerger(inlineConfig, { content: { files: ${JSON.stringify(contentPaths)} } }));\n`,
         `module.exports = ${configUpdatedHook['main-config'] ? `(() => {const cfg=config;${configUpdatedHook['main-config']};return cfg;})()` : 'config'}\n`,
         ].join('\n')
       },

src/context.ts

@@ -1,6 +1,7 @@
 /** @typedef {import('tailwindcss').Config} TWConfig */
 
 import { createDefu } from 'defu'
+import { klona } from 'klona'
 
 const isJSObject = value => typeof value === 'object' && !Array.isArray(value)
 
@@ -12,7 +13,7 @@ const isJSObject = value => typeof value === 'object' && !Array.isArray(value)
  * @type {(...p: Array<Partial<TWConfig> | Record<string | number | symbol, any> | undefined>) => Partial<TWConfig>}
  */
 export default (_base, ...defaults) => {
-  const base = _base ?? Object.assign({}, defaults[0])
+  const base = _base ?? klona(defaults[0])
 
   return createDefu((obj, key, value) => {
     if (key === 'content') {