chore: add layer support

Author: ineshbose

playground/layers/theme/nuxt.config.ts

@@ -0,0 +1,11 @@
+import { defineNuxtConfig } from 'nuxt/config'
+
+export default defineNuxtConfig({
+  modules: [
+    '@nuxtjs/tailwindcss',
+  ],
+  css: [],
+  future: {
+    compatibilityVersion: 4,
+  },
+})

playground/nuxt.config.ts

@@ -1,6 +1,9 @@
 import { defineNuxtConfig } from 'nuxt/config'
 
 export default defineNuxtConfig({
+  extends: [
+    './layers/theme',
+  ],
   modules: [
     '@nuxtjs/tailwindcss',
   ],

src/import-css.ts

@@ -10,7 +10,15 @@ const getDefaults = (nuxt = useNuxt()) => [
 
 export default async function importCSS(nuxt = useNuxt()) {
   const defaultCSSFiles = getDefaults(nuxt)
-  const resolvedCSSFiles = await Promise.all(nuxt.options.css.map(p => resolvePath(p))).then(arr => arr.reverse())
+  const resolvedCSSFiles = await Promise.all(nuxt.options.css.map(p => resolvePath(p)))
+
+  const layerSourcesTemplate = addTemplate({
+    filename: 'tailwind/layer-sources.css',
+    getContents: () => {
+      return nuxt.options._layers.slice(1).map(layer => `@source ${JSON.stringify(layer.config.srcDir || layer.cwd)};`).join('\n')
+    },
+    write: true,
+  })
 
   const analyzedFiles = await Promise.all([...new Set([...resolvedCSSFiles, ...defaultCSSFiles])].map(async (file) => {
     const fileContents = await readFile(file, { encoding: 'utf-8' }).catch(() => '')
@@ -20,12 +28,21 @@ export default async function importCSS(nuxt = useNuxt()) {
   const filesImportingTailwind = analyzedFiles.filter(file => file[1].hasImport)
 
   const [file, { isInNuxt } = {}] = filesImportingTailwind.length === 0
-    ? [addTemplate({ filename: 'tailwind.css', getContents: () => `@import 'tailwindcss';`, write: true }).dst]
+    ? [
+        addTemplate({
+          filename: 'tailwind.css',
+          getContents: () => {
+            return [`@import 'tailwindcss';`, `@import ${JSON.stringify(layerSourcesTemplate.dst)};`].join('\n')
+          },
+          write: true,
+        }).dst,
+      ]
     : filesImportingTailwind.find(file => file[1].isInNuxt) || filesImportingTailwind.pop()!
 
   if (!isInNuxt) {
     nuxt.options.css.push(file)
   }
 
   nuxt.options.alias['#tailwind'] = file
+  nuxt.options.alias['#tailwind-layer-sources'] = layerSourcesTemplate.dst
 }

src/install-plugin.ts

@@ -12,8 +12,6 @@ export default async function installPlugin(nuxt = useNuxt()) {
 
     if (!existsTailwindPlugin()) {
       await import('@tailwindcss/vite').then(r => addVitePlugin(r.default()))
-    } else {
-      console.log('already installed')
     }
   }
   else {