Vite: Emit build dependencies on partial rebuilds

philipp-spiess · philipp-spiess · commit e5abcc76684a · 2025-03-24T11:19:51.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add support for literal values in `--value('…')` and `--modifier('…')` ([#17304](https://github.com/tailwindlabs/tailwindcss/pull/17304))
 - Add suggestions when `--spacing(--value(integer, number))` is used ([#17308](https://github.com/tailwindlabs/tailwindcss/pull/17308))
 
+### Fixed
+
+- Vite: Ensure that updates to an imported CSS file are properly propagated after updating templates
+
 ### [4.0.15] - 2025-03-20
 
 ### Fixed
diff --git a/integrations/vite/index.test.ts b/integrations/vite/index.test.ts
@@ -149,9 +149,15 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
         'project-a/src/index.css': css`
           @reference 'tailwindcss/theme';
           @import 'tailwindcss/utilities';
+          @import './imported.css';
           @config '../tailwind.config.js';
           @source '../../project-b/src/**/*.html';
         `,
+        'project-a/src/imported.css': css`
+          .imported {
+            color: red;
+          }
+        `,
         'project-b/src/index.html': html`
           <div class="flex" />
         `,
@@ -179,6 +185,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
         expect(styles).toContain(candidate`underline`)
         expect(styles).toContain(candidate`flex`)
         expect(styles).toContain(candidate`font-bold`)
+        expect(styles).toContain(candidate`imported`)
       })
 
       await retryAssertion(async () => {
@@ -199,6 +206,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
         expect(styles).toContain(candidate`underline`)
         expect(styles).toContain(candidate`flex`)
         expect(styles).toContain(candidate`font-bold`)
+        expect(styles).toContain(candidate`imported`)
         expect(styles).toContain(candidate`m-2`)
       })
 
@@ -216,6 +224,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
         expect(styles).toContain(candidate`underline`)
         expect(styles).toContain(candidate`flex`)
         expect(styles).toContain(candidate`font-bold`)
+        expect(styles).toContain(candidate`imported`)
         expect(styles).toContain(candidate`m-2`)
         expect(styles).toContain(candidate`[.changed_&]:content-['project-b/src/index.js']`)
       })
@@ -234,13 +243,52 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
           `,
         )
 
+        let styles = await fetchStyles(url)
+        expect(styles).toContain(candidate`red`)
+        expect(styles).toContain(candidate`flex`)
+        expect(styles).toContain(candidate`imported`)
+        expect(styles).toContain(candidate`m-2`)
+        expect(styles).toContain(candidate`underline`)
+        expect(styles).toContain(candidate`[.changed_&]:content-['project-b/src/index.js']`)
+        expect(styles).toContain(candidate`font-bold`)
+      })
+
+      await retryAssertion(async () => {
+        // Trigger a partial rebuild for the next test
+        await fs.write(
+          'project-a/index.html',
+          html`
+            <head>
+              <link rel="stylesheet" href="./src/index.css" />
+            </head>
+            <body>
+              <div class="m-4">Hello, world!</div>
+            </body>
+          `,
+        )
+        let styles = await fetchStyles(url)
+        expect(styles).toContain(candidate`m-4`)
+      })
+
+      await retryAssertion(async () => {
+        // Changing an `@imported` CSS file after a partial rebuild also triggers the correct update
+        await fs.write(
+          'project-a/src/imported.css',
+          css`
+            .imported-updated {
+              color: red;
+            }
+          `,
+        )
+
         let styles = await fetchStyles(url)
         expect(styles).toContain(candidate`red`)
         expect(styles).toContain(candidate`flex`)
         expect(styles).toContain(candidate`m-2`)
         expect(styles).toContain(candidate`underline`)
         expect(styles).toContain(candidate`[.changed_&]:content-['project-b/src/index.js']`)
         expect(styles).toContain(candidate`font-bold`)
+        expect(styles).toContain(candidate`imported-updated`)
       })
     },
   )
diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts
@@ -277,6 +277,10 @@ class Root {
 
       this.scanner = new Scanner({ sources })
       DEBUG && I.end('Setup scanner')
+    } else {
+      for (let buildDependency of this.buildDependencies.keys()) {
+        addWatchFile(buildDependency)
+      }
     }
 
     if (

Original file line number	Diff line number	Diff line change
`@@ -277,6 +277,10 @@ class Root {`
`277`	`277`
`278`	`278`	`this.scanner = new Scanner({ sources })`
`279`	`279`	`DEBUG && I.end('Setup scanner')`
	`280`	`+ } else {`
	`281`	`+ for (let buildDependency of this.buildDependencies.keys()) {`
	`282`	`+ addWatchFile(buildDependency)`
	`283`	`+ }`
`280`	`284`	`}`
`281`	`285`
`282`	`286`	`if (`