wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Fix Vite watch loops for custom output dirs

Browse source
This commit is contained in:
yiheng-kkk 2026-08-29 18:19:49 +08:00
parent 90f8ff41c8
commit dfc07e9bd9
2 changed files with 156 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

121
integrations/vite/index.test.ts
View file

@ -1266,6 +1266,127 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
)
})
describe.each([
[
'build.outDir',
`
outDir: 'assets',
rollupOptions: {
output: {
entryFileNames: 'entry.js',
chunkFileNames: 'chunk.js',
assetFileNames: 'style.css',
},
},
`,
],
[
'a nested build.outDir',
`
outDir: 'build/assets',
rollupOptions: {
output: {
entryFileNames: 'entry.js',
chunkFileNames: 'chunk.js',
assetFileNames: 'style.css',
},
},
`,
],
[
'rollupOptions.output.dir',
`
rollupOptions: {
output: {
dir: 'assets',
entryFileNames: 'entry.js',
chunkFileNames: 'chunk.js',
assetFileNames: 'style.css',
},
},
`,
],
[
'an array of rollupOptions.output.dir values',
`
rollupOptions: {
output: [
{
dir: 'assets',
entryFileNames: 'entry.js',
chunkFileNames: 'chunk.js',
assetFileNames: 'style.css',
},
{
dir: 'assets-secondary',
entryFileNames: 'entry.js',
chunkFileNames: 'chunk.js',
assetFileNames: 'style.css',
},
],
},
`,
],
])('watch mode with %s', (_, outputOptions) => {
// https://github.com/tailwindlabs/tailwindcss/issues/17412
test(
'does not rebuild when writing build output',
{
fs: {
'package.json': json`
{
"type": "module",
"dependencies": {
"@tailwindcss/vite": "workspace:^",
"tailwindcss": "workspace:^"
},
"devDependencies": {
"vite": "6.2.3"
}
}
`,
'vite.config.ts': ts`
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'
export default defineConfig({
build: {
cssMinify: false,
emptyOutDir: false,
${outputOptions}
},
plugins: [tailwindcss()],
})
`,
'index.html': html`
<main class="underline">Hello, world!</main>
<script type="module" src="./src/app.js"></script>
`,
'src/app.js': js`import './app.css'`,
'src/app.css': css`@import 'tailwindcss';`,
'assets/entry.js': js`console.log('previous build')`,
'assets/style.css': css`/* Previous build */`,
'assets-secondary/entry.js': js`console.log('previous build')`,
'assets-secondary/style.css': css`/* Previous build */`,
'build/assets/entry.js': js`console.log('previous build')`,
'build/assets/style.css': css`/* Previous build */`,
},
},
async ({ spawn, expect }) => {
let process = await spawn('pnpm vite build --watch')
await process.onStdout((message) => message.includes('built in'))
process.flush()
let result = await Promise.race([
process.onStdout((message) => message.includes('built in')).then(() => 'rebuilt'),
new Promise((resolve) => setTimeout(() => resolve('idle'), 2_000)),
])
expect(result).toBe('idle')
},
)
})
test(
`demote Tailwind roots to regular CSS files and back to Tailwind roots`,
{

36
packages/@tailwindcss-vite/src/index.ts
View file

@ -64,6 +64,31 @@ function createCustomResolver(
}
}
function getResolvedOutputDirectories(config: ResolvedConfig) {
let defaultOutputDirectory = path.resolve(config.root, config.build.outDir)
let outputOptions = config.build.rollupOptions.output
let outputDirectories = outputOptions
? Array.from(
new Set(
(Array.isArray(outputOptions) ? outputOptions : [outputOptions]).map((output) =>
output.dir ? path.resolve(config.root, output.dir) : defaultOutputDirectory,
),
),
)
: [defaultOutputDirectory]
return outputDirectories.filter((directory) => {
let relative = path.relative(config.root, directory)
return (
relative !== '' &&
relative !== '..' &&
!relative.startsWith(`..${path.sep}`) &&
!path.isAbsolute(relative)
)
})
}
export default function tailwindcss(opts: PluginOptions = {}): Plugin[] {
let config: ResolvedConfig | null = null
let rootsByEnv = new DefaultMap<string, Map<string, Root>>((env: string) => new Map())
@ -75,6 +100,7 @@ export default function tailwindcss(opts: PluginOptions = {}): Plugin[] {
function createRoot(env: Environment | null, id: string) {
type ResolveFn = (id: string, base: string) => Promise<string | false | undefined>
let resolvedConfig = env?.config ?? config!
let customCssResolver: ResolveFn
let customJsResolver: ResolveFn
@ -165,7 +191,10 @@ export default function tailwindcss(opts: PluginOptions = {}): Plugin[] {
return new Root(
id,
config!.root,
resolvedConfig.root,
resolvedConfig.command === 'build' && resolvedConfig.build.watch && resolvedConfig.build.write
? getResolvedOutputDirectories(resolvedConfig)
: [],
// Currently, Vite only supports CSS source maps in development and they
// are off by default. Check to see if we need them or not.
config?.css.devSourcemap ?? false,
@ -350,6 +379,7 @@ class Root {
constructor(
private id: string,
private base: string,
private excludedDirectories: string[],
private enableSourceMaps: boolean,
private customCssResolver: (id: string, base: string) => Promise<string | false | undefined>,
@ -431,6 +461,10 @@ class Root {
return [{ ...this.compiler.root, negated: false }]
})().concat(this.compiler.sources)
for (let directory of this.excludedDirectories) {
sources.push({ base: directory, pattern: '**/*', negated: true })
}
this.scanner = new Scanner({ sources })
DEBUG && I.end('Setup scanner')
} else {