Vite: Support Tailwind in Vue <style> blocks (#14158)

philipp-spiess · RobinMalfait · web-flow · commit b01ff53f2ae8 · 2024-08-09T12:41:58.000+02:00
This PR adds support to transforming `<style>` blocks emitted by Vue components with tailwindcss when the `@tailwindcss/vite` is used. Example: ```vue <style> @import 'tailwindcss/utilities'; @import 'tailwindcss/theme' theme(reference); .foo { @apply text-red-500; } </style> <template> <div class="underline foo">Hello Vue!</div> </template> ``` Additionally, this PR also adds an integration test. --------- Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add support for `inline` option when defining `@theme` values ([#14095](https://github.com/tailwindlabs/tailwindcss/pull/14095))
 - Add `inert` variant ([#14129](https://github.com/tailwindlabs/tailwindcss/pull/14129))
 - Add support for explicitly registering content paths using new `@source` at-rule ([#14078](https://github.com/tailwindlabs/tailwindcss/pull/14078))
+- Add support for scanning `<style>` tags in Vue files to the Vite plugin ([#14158](https://github.com/tailwindlabs/tailwindcss/pull/14158))
 
 ## [4.0.0-alpha.18] - 2024-07-25
 
diff --git a/integrations/utils.ts b/integrations/utils.ts
@@ -286,7 +286,13 @@ export function test(
       }
 
       try {
-        context.exec('pnpm install')
+        // In debug mode, the directory is going to be inside the pnpm workspace
+        // of the tailwindcss package. This means that `pnpm install` will run
+        // pnpm install on the workspace instead (expect if the root dir defines
+        // a separate workspace). We work around this by using the
+        // `--ignore-workspace` flag.
+        let ignoreWorkspace = debug && !config.fs['pnpm-workspace.yaml']
+        context.exec(`pnpm install${ignoreWorkspace ? ' --ignore-workspace' : ''}`)
       } catch (error: any) {
         console.error(error)
         throw error
diff --git a/integrations/vite/vue.test.ts b/integrations/vite/vue.test.ts
@@ -0,0 +1,69 @@
+import { expect } from 'vitest'
+import { candidate, html, json, test, ts } from '../utils'
+
+test(
+  'production build',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "vue": "^3.4.37",
+            "tailwindcss": "workspace:^"
+          },
+          "devDependencies": {
+            "@vitejs/plugin-vue": "^5.1.2",
+            "@tailwindcss/vite": "workspace:^",
+            "vite": "^5.3.5"
+          }
+        }
+      `,
+      'vite.config.ts': ts`
+        import { defineConfig } from 'vite'
+        import vue from '@vitejs/plugin-vue'
+        import tailwindcss from '@tailwindcss/vite'
+
+        export default defineConfig({
+          plugins: [vue(), tailwindcss()],
+        })
+      `,
+      'index.html': html`
+        <!doctype html>
+        <html>
+          <body>
+            <div id="app"></div>
+            <script type="module" src="./src/main.ts"></script>
+          </body>
+        </html>
+      `,
+      'src/main.ts': ts`
+        import { createApp } from 'vue'
+        import App from './App.vue'
+
+        createApp(App).mount('#app')
+      `,
+      'src/App.vue': html`
+        <style>
+          @import 'tailwindcss/utilities';
+          @import 'tailwindcss/theme' theme(reference);
+          .foo {
+            @apply text-red-500;
+          }
+        </style>
+
+        <template>
+          <div class="underline foo">Hello Vue!</div>
+        </template>
+      `,
+    },
+  },
+  async ({ fs, exec }) => {
+    await exec('pnpm vite build')
+
+    let files = await fs.glob('dist/**/*.css')
+    expect(files).toHaveLength(1)
+
+    await fs.expectFileToContain(files[0][0], [candidate`underline`, candidate`foo`])
+  },
+)
diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts
@@ -1,14 +1,11 @@
 import { scanDir } from '@tailwindcss/oxide'
 import fixRelativePathsPlugin, { normalizePath } from 'internal-postcss-fix-relative-paths'
 import { Features, transform } from 'lightningcss'
-import { fileURLToPath } from 'node:url'
 import path from 'path'
 import postcssrc from 'postcss-load-config'
 import { compile } from 'tailwindcss'
 import type { Plugin, ResolvedConfig, Rollup, Update, ViteDevServer } from 'vite'
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-
 export default function tailwindcss(): Plugin[] {
   let server: ViteDevServer | null = null
   let config: ResolvedConfig | null = null
@@ -349,8 +346,9 @@ function getExtension(id: string) {
 }
 
 function isTailwindCssFile(id: string, src: string) {
-  if (id.includes('/.vite/')) return
-  return getExtension(id) === 'css' && src.includes('@tailwind')
+  let extension = getExtension(id)
+  let isCssFile = extension === 'css' || (extension === 'vue' && id.includes('&lang.css'))
+  return isCssFile && src.includes('@tailwind')
 }
 
 function optimizeCss(
