Merge dfc07e9bd9 into 41d9cae8e5

integrations/vite/index.test.ts

@@ -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`,
   {

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

@@ -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 {