From f6063988d94542aa5f804e6c34763a6ca339dd68 Mon Sep 17 00:00:00 2001
From: Inesh Bose <dev@inesh.xyz>
Date: Thu, 11 Jul 2024 16:27:00 +0530
Subject: [PATCH] chore: use klona and content configuration as object

---
 package.json              | 1 +
 playground/nuxt.config.ts | 9 ++++++++-
 pnpm-lock.yaml            | 3 +++
 src/context.ts            | 4 ++--
 src/runtime/merger.js     | 3 ++-
 5 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 6d60163b..3665d57a 100755
--- a/package.json
+++ b/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",
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index 4530f83d..84e76702 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -11,11 +11,13 @@ 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: {},
@@ -23,6 +25,7 @@ export default defineNuxtConfig({
     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',
+})
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a2b82cef..fddbe8ae 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ importers:
       h3:
         specifier: ^1.12.0
         version: 1.12.0
+      klona:
+        specifier: ^2.0.6
+        version: 2.0.6
       pathe:
         specifier: ^1.1.2
         version: 1.1.2
diff --git a/src/context.ts b/src/context.ts
index c08c5629..9a013021 100644
--- a/src/context.ts
+++ b/src/context.ts
@@ -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')
       },
diff --git a/src/runtime/merger.js b/src/runtime/merger.js
index 7d5303ea..68da5b0a 100644
--- a/src/runtime/merger.js
+++ b/src/runtime/merger.js
@@ -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') {