feat: first class hmr

docs/content/1.getting-started/2.configuration.md

@@ -167,13 +167,13 @@ You can edit the endpoint by `viewer.endpoint` and if you'd like to export the v
 
 - Default: `false`
 
-You can take advantage of some DX utilities this modules provide to you as you develop your Nuxt applicatio with Tailwind. Read more in [Editor Support](/tailwind/editor-support).
+You can take advantage of some DX utilities this modules provide to you as you develop your Nuxt application with Tailwind. Read more in [Editor Support](/tailwind/editor-support).
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   tailwindcss: {
     editorSupport: true
-    // editorSupport: { autocompleteUtil: { as: 'tailwindClasses' }, generateConfig: true }
+    // editorSupport: { autocompleteUtil: { as: 'tailwindClasses' } }
   }
 })
 ```

docs/content/2.tailwind/3.editor-support.md

@@ -20,7 +20,7 @@ Add the following configuration to your `.vscode/settings.json` file, so that Ta
 
 If you use pnpm, ensure that tailwindcss is installed in your top-level node_modules folder.
 
-## Autocomplete
+## String Classes Autocomplete
 
 When using strings of Tailwind classes, you can enable IntelliSense suggestions using the [`editorSupport.autocompleteUtil`](/getting-started/configuration#editorsupport) option. You will have to add the following VSCode setting:
 
@@ -44,9 +44,20 @@ const variantClasses = {
 </script>
 ```
 
-## Load Config File
+## Configuration IntelliSense
 
-Since Tailwind CSS v3.3, [ESM/TS configuration has been supported](https://tailwindcss.com/blog/tailwindcss-v3-3#esm-and-type-script-support) so your editor should automatically configure autocomplete based on your `tailwind.config`. If you happen to use a lower version and/or require to generate a flat configuration, you can do so using [`editorSupport.generateConfig`](/getting-started/configuration#editorsupport) option, or you can use the `tailwindcss:resolvedConfig` hook and a custom Nuxt module:
+Since Tailwind CSS v3.3, [ESM/TS configuration has been supported](https://tailwindcss.com/blog/tailwindcss-v3-3#esm-and-type-script-support) so your editor should automatically configure autocomplete based on your `tailwind.config`. If you have a complex Nuxt project with multiple Tailwind configurations that are within layers, passed from hooks or inline `nuxt.config` and want to use a merged configuration, the module generates it in `.nuxt/tailwind.config.cjs` that you can use by adding the following VSCode setting:
+
+```diff [.vscode/settings.json]
+// ...
++ "tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.cjs",
+"files.associations": {
+    "*.css": "tailwindcss"
+},
+// ...
+```
+
+If you require more customisation to what configuration the IntelliSense extension reads, you can take advantage of hooks, especially the `tailwindcss:resolvedConfig` hook that runs the configuration through [`tailwindcss/resolveConfig`](https://github.com/tailwindlabs/tailwindcss/blob/master/resolveConfig.js) to provide the complete config object.
 
 ```ts [modules/tw-cjs-config.ts]
 import { defineNuxtModule, addTemplate } from '@nuxt/kit'
@@ -55,8 +66,11 @@ export default defineNuxtModule({
   setup (options, nuxt) {
     nuxt.hook('tailwindcss:resolvedConfig', (config) => {
       addTemplate({
-        filename: 'tailwind.config.cjs', // gets prepended by .nuxt/
-        getContents: () => `module.exports = ${JSON.stringify(config)}`,
+        filename: 'intellisense-tw.cjs', // gets prepended by .nuxt/
+        getContents: () => `
+          /* my-comment */
+          module.exports = ${JSON.stringify(config)}
+        `,
         write: true
       })
     })
@@ -65,12 +79,3 @@ export default defineNuxtModule({
 ```
 
 This hook allows you to customize your generated template in different ways (e.g., different filename, contents, etc.) through a module. Please be aware that using `JSON.stringify` will remove plugins from your configuration.
-
-```diff [.vscode/settings.json]
-// ...
-+ "tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.cjs",
-"files.associations": {
-    "*.css": "tailwindcss"
-},
-// ...
-```

playground/modules/resolved.ts

@@ -0,0 +1,30 @@
+import { defineNuxtModule, addTemplate, updateTemplates } from '@nuxt/kit'
+import { resolve } from 'pathe'
+import loadConfig from 'tailwindcss/loadConfig.js'
+import resolveConfig from 'tailwindcss/resolveConfig.js'
+
+export default defineNuxtModule({
+  setup (_options, nuxt) {
+    // logger.info('Creating test-tailwind.config.cjs...')
+    nuxt.hook('tailwindcss:resolvedConfig', (config) =>
+        addTemplate({
+            filename: 'resolved-config.cjs',
+            getContents: () => `module.exports = ${JSON.stringify(config, null, 2)}`,
+            write: true
+        })
+    )
+
+    // const template = addTemplate({
+    //   filename: 'resolved-config.config.cjs', // gets prepended by .nuxt/
+    //   getContents: ({ nuxt }) => {
+    //     const config = loadConfig(resolve(nuxt.options.buildDir, 'tailwind.config.cjs'))
+    //     return `module.exports = ${JSON.stringify(resolveConfig(config), null, 2)}`
+    //   },
+    //   write: true
+    // })
+
+    // nuxt.hook('app:templatesGenerated', (_app, templates) => {
+    //   templates.map(t => t.dst).includes(resolve(nuxt.options.buildDir, 'tailwind.config.cjs')) && updateTemplates({ filter: t => t.dst === template.dst })
+    // })
+  }
+})

playground/modules/template.js

@@ -0,0 +1,27 @@
+import { defineNuxtModule, addTemplate } from '@nuxt/kit'
+
+export default defineNuxtModule((_, nuxt) => {
+  const template = addTemplate({
+    filename: 'my-tw-config.cjs',
+    write: true,
+    getContents: () => `
+    const colors = require('tailwindcss/colors')
+
+    module.exports = {
+      theme: {
+        extend: {
+          colors: {
+            accent: colors.fuchsia['500']
+          }
+        }
+      }
+    }
+    `
+  })
+
+  nuxt.options.tailwindcss = nuxt.options.tailwindcss ?? {}
+  if (!Array.isArray(nuxt.options.tailwindcss.configPath)) {
+    nuxt.options.tailwindcss.configPath = nuxt.options.tailwindcss.configPath ? [nuxt.options.tailwindcss.configPath] : ['tailwind.config']
+  }
+  nuxt.options.tailwindcss.configPath.push(template.dst)
+})

playground/nuxt.config.ts

@@ -1,5 +1,9 @@
 import { existsSync } from 'node:fs'
 import { resolve } from 'pathe'
+import { consola } from 'consola'
+import type { ModuleHooks, ModuleOptions } from '../src/types'
+
+const logger = consola.withTag('nuxt:tailwindcss:playground')
 
 export default defineNuxtConfig({
   extends: ['./theme'],
@@ -13,7 +17,34 @@ export default defineNuxtConfig({
     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 })
+
+      if (idx === 0 && config) {
+        config.theme = config.theme ?? {}
+        config.theme.extend = config.theme.extend ?? {}
+        config.theme.extend.screens = { md2: '100px' }
+      } else if (idx === 1 && config) {
+        config.content = config.content ?? []
+        Array.isArray(config.content) ? config.content.push('my-content') : config.content.files.push('my-file-content')
+      }
+    },
+    'tailwindcss:config': (config) => {
+      logger.info('Running `tailwindcss:config` hook...')
+
+      config.theme = config.theme ?? {}
+      config.theme.extend = config.theme.extend ?? {}
+      config.theme.extend.colors = config.theme.extend.colors ?? {}
+      // @ts-ignore
+      config.theme.extend.colors.extendedColor = '#f0ff0f'
+    },
+    'tailwindcss:resolvedConfig': (_config) => {
+      // @ts-ignore
+      logger.info('Running `tailwindcss:resolvedConfig` hook...', { typography: Boolean(_config.theme.typography) })
+    }
+  } satisfies Partial<ModuleHooks>,
   content: {
     documentDriven: true
   },

playground/pages/index.vue

@@ -9,8 +9,14 @@
         <span class="text-blue-500">meow!</span>
       </div>
       <p class="text-brand">
+        This color comes from the `./tailwind.config`
+      </p>
+      <p class="text-secondary">
         This color comes from the `./theme` layer
       </p>
+      <p class="text-brand">
+        This color comes from the `./modules/template` module
+      </p>
       <div>
         <NuxtLink
           to="/content"
@@ -35,5 +41,6 @@
 import { tw } from '#imports'
 import tailwindConfig from '#tailwind-config'
 
+// const tw = <T>(s: T) => s
 const mainDivClass = tw`max-w-screen-lg p-4 mx-auto space-y-4`
 </script>

playground/theme/tailwind.config.cjs

@@ -4,7 +4,8 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        brand: colors.fuchsia['500']
+        brand: colors.fuchsia['500'],
+        secondary: colors.fuchsia['500']
       }
     }
   }

src/context.ts

@@ -0,0 +1,139 @@
+import { getContext } from 'unctx'
+import type { ModuleOptions, TWConfig } from './types'
+import { addTemplate, createResolver, updateTemplates, useNuxt } from '@nuxt/kit'
+import { resolveModulePaths } from './resolvers'
+import logger from './logger'
+import { join, relative } from 'pathe'
+import _loadConfig from 'tailwindcss/loadConfig.js'
+import configMerger from './runtime/merger.mjs'
+import resolveConfig from 'tailwindcss/resolveConfig.js'
+
+const CONFIG_TEMPLATE_NAME = 'tailwind.config.cjs'
+
+export const twCtx = getContext<TWConfig>('twcss')
+
+export const createInternalContext = async (moduleOptions: ModuleOptions, nuxt = useNuxt()) => {
+  const [configPaths, contentPaths] = await resolveModulePaths(moduleOptions.configPath, nuxt)
+  const configUpdatedHook = Object.fromEntries(configPaths.map((p) => [p, '']))
+
+  const trackProxy = (configPath: string, path: (string | symbol)[] = []): ProxyHandler<Partial<TWConfig>> => ({
+    get: (target, key: string) => {
+      return (typeof target[key] === 'object' && target[key] !== null)
+        ? new Proxy(target[key], trackProxy(configPath, path.concat(key)))
+        : target[key]
+    },
+
+    set(target, key, value) {
+      if (JSON.stringify(target[key as string]) === JSON.stringify(value)) {
+        return Reflect.set(target, key, value)
+      }
+
+      if (key === 'plugins' && typeof value === 'function') {
+        logger.warn(
+          'You have injected a functional plugin into your Tailwind Config which cannot be serialized.',
+          'Please use a configuration file/template instead.'
+        )
+        return false
+      }
+
+      configUpdatedHook[configPath] += `cfg${path.concat(key).map((k) => `[${JSON.stringify(k)}]`).join('')} = ${JSON.stringify(value)};`
+      return Reflect.set(target, key, value)
+    },
+
+    deleteProperty(target, key) {
+      configUpdatedHook[configPath] += `delete cfg${path.concat(key).map((k) => `[${JSON.stringify(k)}]`).join('')};`
+      return Reflect.deleteProperty(target, key)
+    },
+  })
+
+  const loadConfig = async () => {
+    configPaths.forEach((p) => configUpdatedHook[p] = '')
+
+    const tailwindConfig = await Promise.all((
+      configPaths.map(async (configPath, idx, paths) => {
+        let _tailwindConfig: Partial<TWConfig> | undefined
+
+        try {
+          _tailwindConfig = _loadConfig(configPath)
+        } catch (e) {
+          configUpdatedHook[configPath] = 'return {};'
+          console.log(configPath, 'error')
+          !configPath.startsWith(nuxt.options.buildDir) && logger.warn(`Failed to load Tailwind config at: \`./${relative(nuxt.options.rootDir, configPath)}\``, e)
+        }
+
+        // Transform purge option from Array to object with { content }
+        if (_tailwindConfig && _tailwindConfig.purge && !_tailwindConfig.content) {
+          configUpdatedHook[configPath] += 'cfg.content = cfg.purge;'
+        }
+
+        await nuxt.callHook('tailwindcss:loadConfig', _tailwindConfig && new Proxy(_tailwindConfig, trackProxy(configPath)), configPath, idx, paths)
+        return _tailwindConfig || {}
+      }))
+    ).then((configs) => configs.reduce(
+      (prev, curr) => configMerger(curr, prev),
+      // internal default tailwind config
+      configMerger(moduleOptions.config, { content: contentPaths })
+    )) as TWConfig
+
+    // Allow extending tailwindcss config by other modules
+    configUpdatedHook['main-config'] = ''
+    await nuxt.callHook('tailwindcss:config', new Proxy(tailwindConfig, trackProxy('main-config')))
+
+    const resolvedConfig = resolveConfig(tailwindConfig)
+    await nuxt.callHook('tailwindcss:resolvedConfig', resolvedConfig)
+
+    twCtx.set(resolvedConfig as unknown as TWConfig, true)
+}
+
+  const generateConfig = () => addTemplate({
+    filename: CONFIG_TEMPLATE_NAME,
+    write: true,
+    getContents: () => {
+      console.log('yeeeee')
+      const serializeConfig = <T extends Partial<TWConfig>>(config: T) =>
+        JSON.stringify(
+          Array.isArray(config.plugins) && config.plugins.length > 0 ? configMerger({ plugins: (defaultPlugins: TWConfig['plugins']) => defaultPlugins?.filter((p) => p && typeof p !== 'function') }, config) : config,
+          (_, v) => typeof v === 'function' ? `() => (${JSON.stringify(v())})` : v).replace(/"(\(\) => \(.*\))"/g, (_, substr) => substr.replace(/\\"/g, '"')
+        )
+
+      const layerConfigs = configPaths.map((configPath) => {
+        const configImport = `require(${JSON.stringify(/[/\\]node_modules[/\\]/.test(configPath) ? configPath : './' + relative(nuxt.options.buildDir, configPath))})`
+        console.log({ configPath }, configUpdatedHook[configPath])
+        return configUpdatedHook[configPath] ? configUpdatedHook[configPath].startsWith('return {};') ? '' : `(() => {const cfg=${configImport};${configUpdatedHook[configPath]};return cfg;})()` : configImport
+      }).filter(Boolean)
+
+      return [
+        `// generated by the @nuxtjs/tailwindcss <https://github.com/nuxt-modules/tailwindcss> module at ${(new Date()).toLocaleString()}`,
+        `const configMerger = require(${JSON.stringify(createResolver(import.meta.url).resolve('./runtime/merger.mjs'))});`,
+        `\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`,
+        `module.exports = ${configUpdatedHook['main-config'] ? `(() => {const cfg=config;${configUpdatedHook['main-config']};return cfg;})()` : 'config'}\n`
+      ].join('\n')
+    }
+  })
+
+  const registerHooks = () => {
+    nuxt.hook('app:templatesGenerated', async (_app, templates) => {
+      if (templates.some((t) => configPaths.includes(t.dst))) {
+        console.log('its here')
+        await loadConfig()
+        setTimeout(async () => {
+          await updateTemplates({ filter: template => template.filename === CONFIG_TEMPLATE_NAME })
+          await nuxt.callHook('tailwindcss:internal:regenerateTemplates')
+        }, 100)
+      }
+    })
+
+    moduleOptions.exposeConfig && nuxt.hook('builder:watch', (_, path) => {
+      configPaths.includes(join(nuxt.options.rootDir, path)) && nuxt.callHook('tailwindcss:internal:regenerateTemplates')
+    })
+  }
+
+  return {
+    loadConfig,
+    generateConfig,
+    registerHooks
+  }
+}