Skip to content

Commit b01ff53

Browse files
Vite: Support Tailwind in Vue <style> blocks (#14158)
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>
1 parent 1fdf679 commit b01ff53

File tree

4 files changed

+80
-6
lines changed

4 files changed

+80
-6
lines changed

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1212
- Add support for `inline` option when defining `@theme` values ([#14095](https://github.com/tailwindlabs/tailwindcss/pull/14095))
1313
- Add `inert` variant ([#14129](https://github.com/tailwindlabs/tailwindcss/pull/14129))
1414
- Add support for explicitly registering content paths using new `@source` at-rule ([#14078](https://github.com/tailwindlabs/tailwindcss/pull/14078))
15+
- Add support for scanning `<style>` tags in Vue files to the Vite plugin ([#14158](https://github.com/tailwindlabs/tailwindcss/pull/14158))
1516

1617
## [4.0.0-alpha.18] - 2024-07-25
1718

integrations/utils.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -286,7 +286,13 @@ export function test(
286286
}
287287

288288
try {
289-
context.exec('pnpm install')
289+
// In debug mode, the directory is going to be inside the pnpm workspace
290+
// of the tailwindcss package. This means that `pnpm install` will run
291+
// pnpm install on the workspace instead (expect if the root dir defines
292+
// a separate workspace). We work around this by using the
293+
// `--ignore-workspace` flag.
294+
let ignoreWorkspace = debug && !config.fs['pnpm-workspace.yaml']
295+
context.exec(`pnpm install${ignoreWorkspace ? ' --ignore-workspace' : ''}`)
290296
} catch (error: any) {
291297
console.error(error)
292298
throw error

integrations/vite/vue.test.ts

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { expect } from 'vitest'
2+
import { candidate, html, json, test, ts } from '../utils'
3+
4+
test(
5+
'production build',
6+
{
7+
fs: {
8+
'package.json': json`
9+
{
10+
"type": "module",
11+
"dependencies": {
12+
"vue": "^3.4.37",
13+
"tailwindcss": "workspace:^"
14+
},
15+
"devDependencies": {
16+
"@vitejs/plugin-vue": "^5.1.2",
17+
"@tailwindcss/vite": "workspace:^",
18+
"vite": "^5.3.5"
19+
}
20+
}
21+
`,
22+
'vite.config.ts': ts`
23+
import { defineConfig } from 'vite'
24+
import vue from '@vitejs/plugin-vue'
25+
import tailwindcss from '@tailwindcss/vite'
26+
27+
export default defineConfig({
28+
plugins: [vue(), tailwindcss()],
29+
})
30+
`,
31+
'index.html': html`
32+
<!doctype html>
33+
<html>
34+
<body>
35+
<div id="app"></div>
36+
<script type="module" src="./src/main.ts"></script>
37+
</body>
38+
</html>
39+
`,
40+
'src/main.ts': ts`
41+
import { createApp } from 'vue'
42+
import App from './App.vue'
43+
44+
createApp(App).mount('#app')
45+
`,
46+
'src/App.vue': html`
47+
<style>
48+
@import 'tailwindcss/utilities';
49+
@import 'tailwindcss/theme' theme(reference);
50+
.foo {
51+
@apply text-red-500;
52+
}
53+
</style>
54+
55+
<template>
56+
<div class="underline foo">Hello Vue!</div>
57+
</template>
58+
`,
59+
},
60+
},
61+
async ({ fs, exec }) => {
62+
await exec('pnpm vite build')
63+
64+
let files = await fs.glob('dist/**/*.css')
65+
expect(files).toHaveLength(1)
66+
67+
await fs.expectFileToContain(files[0][0], [candidate`underline`, candidate`foo`])
68+
},
69+
)

packages/@tailwindcss-vite/src/index.ts

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
import { scanDir } from '@tailwindcss/oxide'
22
import fixRelativePathsPlugin, { normalizePath } from 'internal-postcss-fix-relative-paths'
33
import { Features, transform } from 'lightningcss'
4-
import { fileURLToPath } from 'node:url'
54
import path from 'path'
65
import postcssrc from 'postcss-load-config'
76
import { compile } from 'tailwindcss'
87
import type { Plugin, ResolvedConfig, Rollup, Update, ViteDevServer } from 'vite'
98

10-
const __dirname = path.dirname(fileURLToPath(import.meta.url))
11-
129
export default function tailwindcss(): Plugin[] {
1310
let server: ViteDevServer | null = null
1411
let config: ResolvedConfig | null = null
@@ -349,8 +346,9 @@ function getExtension(id: string) {
349346
}
350347

351348
function isTailwindCssFile(id: string, src: string) {
352-
if (id.includes('/.vite/')) return
353-
return getExtension(id) === 'css' && src.includes('@tailwind')
349+
let extension = getExtension(id)
350+
let isCssFile = extension === 'css' || (extension === 'vue' && id.includes('&lang.css'))
351+
return isCssFile && src.includes('@tailwind')
354352
}
355353

356354
function optimizeCss(

0 commit comments

Comments
 (0)