From cd009f6be0d2f0115b4dc54680e71f07c48a9b12 Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Tue, 12 Nov 2024 18:28:23 +0100
Subject: [PATCH 1/4] Vite: Don't track candidate changes for Svelte `<style>`
 tags

---
 packages/@tailwindcss-vite/src/index.ts | 90 +++++++++++++++----------
 1 file changed, 56 insertions(+), 34 deletions(-)

diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts
index 422437d60f4e..4bfa63a04331 100644
--- a/packages/@tailwindcss-vite/src/index.ts
+++ b/packages/@tailwindcss-vite/src/index.ts
@@ -59,7 +59,7 @@ export default function tailwindcss(): Plugin[] {
         if (!module) {
           // The module for this root might not exist yet
           if (root.builtBeforeTransform) {
-            return
+            continue
           }
 
           // Note: Removing this during SSR is not safe and will produce
@@ -196,17 +196,17 @@ export default function tailwindcss(): Plugin[] {
 
         let root = roots.get(id)
 
+        // If the root was built outside of the transform hook (e.g. in the
+        // Svelte preprocessor), we still want to mark all dependencies of the
+        // root as watched files.
         if (root.builtBeforeTransform) {
           root.builtBeforeTransform.forEach((file) => this.addWatchFile(file))
           root.builtBeforeTransform = undefined
-          // When a root was built before this transform hook, the candidate
-          // list might be outdated already by the time the transform hook is
-          // called.
-          //
-          // This requires us to build the CSS file again. However, we do not
-          // expect dependencies to have changed, so we can avoid a full
-          // rebuild.
-          root.requiresRebuild = false
+        }
+
+        // We only process Svelte `<style>` tags in the `sveltePreprocessor`
+        if (isSvelteStyle(id)) {
+          return src
         }
 
         if (!options?.ssr) {
@@ -240,16 +240,17 @@ export default function tailwindcss(): Plugin[] {
 
         let root = roots.get(id)
 
+        // If the root was built outside of the transform hook (e.g. in the
+        // Svelte preprocessor), we still want to mark all dependencies of the
+        // root as watched files.
         if (root.builtBeforeTransform) {
           root.builtBeforeTransform.forEach((file) => this.addWatchFile(file))
           root.builtBeforeTransform = undefined
-          // When a root was built before this transform hook, the candidate
-          // list might be outdated already by the time the transform hook is
-          // called.
-          //
-          // Since we already do a second render pass in build mode, we don't
-          // need to do any more work here.
-          return
+        }
+
+        // We only process Svelte `<style>` tags in the `sveltePreprocessor`
+        if (isSvelteStyle(id)) {
+          return src
         }
 
         // We do a first pass to generate valid CSS for the downstream plugins.
@@ -268,6 +269,9 @@ export default function tailwindcss(): Plugin[] {
       // by vite:css-post.
       async renderStart() {
         for (let [id, root] of roots.entries()) {
+          // Do not do a second render pass on Svelte `<style>` tags.
+          if (isSvelteStyle(id)) continue
+
           let generated = await regenerateOptimizedCss(
             root,
             // During the renderStart phase, we can not add watch files since
@@ -304,13 +308,18 @@ function isPotentialCssRootFile(id: string) {
     (extension === 'css' ||
       (extension === 'vue' && id.includes('&lang.css')) ||
       (extension === 'astro' && id.includes('&lang.css')) ||
-      (extension === 'svelte' && id.includes('&lang.css'))) &&
+      isSvelteStyle(id)) &&
     // Don't intercept special static asset resources
     !SPECIAL_QUERY_RE.test(id)
 
   return isCssFile
 }
 
+function isSvelteStyle(id: string) {
+  let extension = getExtension(id)
+  return extension === 'svelte' && id.includes('&lang.css')
+}
+
 function optimizeCss(
   input: string,
   { file = 'input.css', minify = false }: { file?: string; minify?: boolean } = {},
@@ -552,50 +561,63 @@ class Root {
 // enabled. This allows us to transform CSS in `<style>` tags and create a
 // stricter version of CSS that passes the Svelte compiler.
 //
-// Note that these files will undergo a second pass through the vite transpiler
-// later. This is necessary to compute `@tailwind utilities;` with the right
-// candidate list.
+// Note that these files will not undergo a second pass through the vite
+// transpiler later. This means that `@tailwind utilities;` will not be up to
+// date.
 //
-// In practice, it is not recommended to use `@tailwind utilities;` inside
-// Svelte components. Use an external `.css` file instead.
+// In practice, it is discouraged to use `@tailwind utilities;` inside Svelte
+// components, as the styles it create would be scoped anyways. Use an external
+// `.css` file instead.
 function svelteProcessor(roots: DefaultMap<string, Root>) {
+  let preprocessor = sveltePreprocess()
+
   return {
     name: '@tailwindcss/svelte',
     api: {
-      sveltePreprocess: sveltePreprocess({
-        aliases: [
-          ['postcss', 'tailwindcss'],
-          ['css', 'tailwindcss'],
-        ],
-        async tailwindcss({
+      sveltePreprocess: {
+        markup: preprocessor.markup,
+        script: preprocessor.script,
+        async style({
           content,
-          attributes,
           filename,
+          ...rest
         }: {
           content: string
-          attributes: Record<string, string>
           filename?: string
+          attributes: Record<string, string | boolean>
+          markup: string
         }) {
-          if (!filename) return
+          if (!filename) return preprocessor.style?.({ ...rest, content, filename })
+
+          // Create the ID used by Vite to identify the `<style>` contents. This
+          // way, the Vite `transform` hook can find the right root and thus
+          // track the right dependencies.
           let id = filename + '?svelte&type=style&lang.css'
 
           let root = roots.get(id)
+
+          // Since a Svelte pre-processor call means that the CSS has changed,
+          // we need to trigger a rebuild.
+          root.requiresRebuild = true
+
           // Mark this root as being built before the Vite transform hook is
           // called. We capture all eventually added dependencies so that we can
           // connect them to the vite module graph later, when the transform
           // hook is called.
           root.builtBeforeTransform = []
+
           let generated = await root.generate(content, (file) =>
             root?.builtBeforeTransform?.push(file),
           )
 
           if (!generated) {
             roots.delete(id)
-            return { code: content, attributes }
+            return preprocessor.style?.({ ...rest, content, filename })
           }
-          return { code: generated, attributes }
+
+          return preprocessor.style?.({ ...rest, content: generated, filename })
         },
-      }),
+      },
     },
   }
 }

From 7328d3624660a56e4a527e075eaf932dca645a8a Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Wed, 13 Nov 2024 14:24:44 +0100
Subject: [PATCH 2/4] Update tests

---
 integrations/utils.ts            |   2 +-
 integrations/vite/svelte.test.ts | 127 +++++++++++++++++++++++++------
 2 files changed, 103 insertions(+), 26 deletions(-)

diff --git a/integrations/utils.ts b/integrations/utils.ts
index 0a881ba367f6..e98a7c2c8989 100644
--- a/integrations/utils.ts
+++ b/integrations/utils.ts
@@ -46,7 +46,7 @@ interface TestContext {
     dumpFiles(pattern: string): Promise<string>
     expectFileToContain(
       filePath: string,
-      contents: string | string[] | RegExp | RegExp[],
+      contents: string | RegExp | (string | RegExp)[],
     ): Promise<void>
     expectFileNotToContain(filePath: string, contents: string | string[]): Promise<void>
   }
diff --git a/integrations/vite/svelte.test.ts b/integrations/vite/svelte.test.ts
index 990ede3aadb3..ed0a6f9cb368 100644
--- a/integrations/vite/svelte.test.ts
+++ b/integrations/vite/svelte.test.ts
@@ -48,22 +48,50 @@ test(
           target: document.body,
         })
       `,
+      'src/index.css': css`
+        @import 'tailwindcss/theme' theme(reference);
+        @import 'tailwindcss/utilities';
+      `,
       'src/App.svelte': html`
         <script>
+          import './index.css'
           let name = 'world'
         </script>
 
-        <h1 class="foo underline">Hello {name}!</h1>
+        <h1 class="global local underline">Hello {name}!</h1>
 
-        <style global>
-          @import 'tailwindcss/utilities';
+        <style>
           @import 'tailwindcss/theme' theme(reference);
-          @import './components.css';
+          @import './other.css';
         </style>
       `,
-      'src/components.css': css`
-        .foo {
+      'src/other.css': css`
+        .local {
           @apply text-red-500;
+          animation: 2s ease-in-out 0s infinite localKeyframes;
+        }
+
+        :global(.global) {
+          @apply text-green-500;
+          animation: 2s ease-in-out 0s infinite globalKeyframes;
+        }
+
+        @keyframes -global-globalKeyframes {
+          0% {
+            opacity: 0;
+          }
+          100% {
+            opacity: 100%;
+          }
+        }
+
+        @keyframes localKeyframes {
+          0% {
+            opacity: 0;
+          }
+          100% {
+            opacity: 100%;
+          }
         }
       `,
     },
@@ -74,7 +102,13 @@ test(
     let files = await fs.glob('dist/**/*.css')
     expect(files).toHaveLength(1)
 
-    await fs.expectFileToContain(files[0][0], [candidate`underline`, candidate`foo`])
+    await fs.expectFileToContain(files[0][0], [
+      candidate`underline`,
+      '.global{color:var(--color-green-500);animation:2s ease-in-out 0s infinite globalKeyframes}',
+      /\.local.svelte-.*\{color:var\(--color-red-500\);animation:2s ease-in-out 0s infinite svelte-.*-localKeyframes\}/,
+      /@keyframes globalKeyframes\{/,
+      /@keyframes svelte-.*-localKeyframes\{/,
+    ])
   },
 )
 
@@ -127,20 +161,48 @@ test(
       `,
       'src/App.svelte': html`
         <script>
+          import './index.css'
           let name = 'world'
         </script>
 
-        <h1 class="foo underline">Hello {name}!</h1>
+        <h1 class="local global underline">Hello {name}!</h1>
 
-        <style global>
-          @import 'tailwindcss/utilities';
+        <style>
           @import 'tailwindcss/theme' theme(reference);
-          @import './components.css';
+          @import './other.css';
         </style>
       `,
-      'src/components.css': css`
-        .foo {
+      'src/index.css': css`
+        @import 'tailwindcss/theme' theme(reference);
+        @import 'tailwindcss/utilities';
+      `,
+      'src/other.css': css`
+        .local {
           @apply text-red-500;
+          animation: 2s ease-in-out 0s infinite localKeyframes;
+        }
+
+        :global(.global) {
+          @apply text-green-500;
+          animation: 2s ease-in-out 0s infinite globalKeyframes;
+        }
+
+        @keyframes -global-globalKeyframes {
+          0% {
+            opacity: 0;
+          }
+          100% {
+            opacity: 100%;
+          }
+        }
+
+        @keyframes localKeyframes {
+          0% {
+            opacity: 0;
+          }
+          100% {
+            opacity: 100%;
+          }
         }
       `,
     },
@@ -148,30 +210,45 @@ test(
   async ({ fs, spawn }) => {
     await spawn(`pnpm vite build --watch`)
 
-    let filename = ''
     await retryAssertion(async () => {
       let files = await fs.glob('dist/**/*.css')
       expect(files).toHaveLength(1)
-      filename = files[0][0]
+      let [, css] = files[0]
+      expect(css).toContain(candidate`underline`)
+      expect(css).toContain(
+        '.global{color:var(--color-green-500);animation:2s ease-in-out 0s infinite globalKeyframes}',
+      )
+      expect(css).toMatch(
+        /\.local.svelte-.*\{color:var\(--color-red-500\);animation:2s ease-in-out 0s infinite svelte-.*-localKeyframes\}/,
+      )
+      expect(css).toMatch(/@keyframes globalKeyframes\{/)
+      expect(css).toMatch(/@keyframes svelte-.*-localKeyframes\{/)
     })
 
-    await fs.expectFileToContain(filename, [candidate`foo`, candidate`underline`])
+    await fs.write(
+      'src/App.svelte',
+      (await fs.read('src/App.svelte')).replace('underline', 'font-bold bar'),
+    )
 
     await fs.write(
-      'src/components.css',
-      css`
-        .bar {
-          @apply text-green-500;
-        }
-      `,
+      'src/other.css',
+      `${await fs.read('src/other.css')}\n.bar { @apply text-pink-500; }`,
     )
+
     await retryAssertion(async () => {
       let files = await fs.glob('dist/**/*.css')
       expect(files).toHaveLength(1)
       let [, css] = files[0]
-      expect(css).toContain(candidate`underline`)
-      expect(css).toContain(candidate`bar`)
-      expect(css).not.toContain(candidate`foo`)
+      expect(css).toContain(candidate`font-bold`)
+      expect(css).toContain(
+        '.global{color:var(--color-green-500);animation:2s ease-in-out 0s infinite globalKeyframes}',
+      )
+      expect(css).toMatch(
+        /\.local.svelte-.*\{color:var\(--color-red-500\);animation:2s ease-in-out 0s infinite svelte-.*-localKeyframes\}/,
+      )
+      expect(css).toMatch(/@keyframes globalKeyframes\{/)
+      expect(css).toMatch(/@keyframes svelte-.*-localKeyframes\{/)
+      expect(css).toMatch(/\.bar.svelte-.*\{color:var\(--color-pink-500\)\}/)
     })
   },
 )

From 7b4f59c58a4d2c11bb81b4b12ef1956b3fc12bde Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Wed, 13 Nov 2024 14:58:42 +0100
Subject: [PATCH 3/4] Add changelog

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 52cc9042cc3c..f8f8fb83ecf1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Support opacity values in increments of `0.25` by default ([#14980](https://github.com/tailwindlabs/tailwindcss/pull/14980))
 
+### Fixed
+
+- Ensure that CSS inside Svelte `<style>` blocks always run the expected Svelte processors when using the Vite extension ([#14981](https://github.com/tailwindlabs/tailwindcss/pull/14981))
+
 ## [4.0.0-alpha.33] - 2024-11-11
 
 ### Fixed

From b0dc926cef447822ae38bb22297bf9fda2de408d Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Wed, 13 Nov 2024 15:43:40 +0100
Subject: [PATCH 4/4] Only consider candidates from the same `.svelte` file

---
 packages/@tailwindcss-vite/src/index.ts | 41 ++++++++++++++++++-------
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts
index 4bfa63a04331..1eaf1d0f6fff 100644
--- a/packages/@tailwindcss-vite/src/index.ts
+++ b/packages/@tailwindcss-vite/src/index.ts
@@ -308,6 +308,8 @@ function isPotentialCssRootFile(id: string) {
     (extension === 'css' ||
       (extension === 'vue' && id.includes('&lang.css')) ||
       (extension === 'astro' && id.includes('&lang.css')) ||
+      // We want to process Svelte `<style>` tags to properly add dependency
+      // tracking for imported files.
       isSvelteStyle(id)) &&
     // Don't intercept special static asset resources
     !SPECIAL_QUERY_RE.test(id)
@@ -412,6 +414,8 @@ class Root {
   // The resolved path given to `source(…)`. When not given this is `null`.
   private basePath: string | null = null
 
+  public overwriteCandidates: string[] | null = null
+
   constructor(
     private id: string,
     private getSharedCandidates: () => Map<string, Set<string>>,
@@ -462,14 +466,16 @@ class Root {
       this.scanner = new Scanner({ sources })
     }
 
-    // This should not be here, but right now the Vite plugin is setup where we
-    // setup a new scanner and compiler every time we request the CSS file
-    // (regardless whether it actually changed or not).
-    env.DEBUG && console.time('[@tailwindcss/vite] Scan for candidates')
-    for (let candidate of this.scanner.scan()) {
-      this.candidates.add(candidate)
+    if (!this.overwriteCandidates) {
+      // This should not be here, but right now the Vite plugin is setup where we
+      // setup a new scanner and compiler every time we request the CSS file
+      // (regardless whether it actually changed or not).
+      env.DEBUG && console.time('[@tailwindcss/vite] Scan for candidates')
+      for (let candidate of this.scanner.scan()) {
+        this.candidates.add(candidate)
+      }
+      env.DEBUG && console.timeEnd('[@tailwindcss/vite] Scan for candidates')
     }
-    env.DEBUG && console.timeEnd('[@tailwindcss/vite] Scan for candidates')
 
     // Watch individual files found via custom `@source` paths
     for (let file of this.scanner.files) {
@@ -515,7 +521,11 @@ class Root {
     this.requiresRebuild = true
 
     env.DEBUG && console.time('[@tailwindcss/vite] Build CSS')
-    let result = this.compiler.build([...this.sharedCandidates(), ...this.candidates])
+    let result = this.compiler.build(
+      this.overwriteCandidates
+        ? this.overwriteCandidates
+        : [...this.sharedCandidates(), ...this.candidates],
+    )
     env.DEBUG && console.timeEnd('[@tailwindcss/vite] Build CSS')
 
     return result
@@ -580,6 +590,7 @@ function svelteProcessor(roots: DefaultMap<string, Root>) {
         async style({
           content,
           filename,
+          markup,
           ...rest
         }: {
           content: string
@@ -587,7 +598,7 @@ function svelteProcessor(roots: DefaultMap<string, Root>) {
           attributes: Record<string, string | boolean>
           markup: string
         }) {
-          if (!filename) return preprocessor.style?.({ ...rest, content, filename })
+          if (!filename) return preprocessor.style?.({ ...rest, content, filename, markup })
 
           // Create the ID used by Vite to identify the `<style>` contents. This
           // way, the Vite `transform` hook can find the right root and thus
@@ -606,16 +617,24 @@ function svelteProcessor(roots: DefaultMap<string, Root>) {
           // hook is called.
           root.builtBeforeTransform = []
 
+          // We only want to consider candidates from the current template file,
+          // this ensures that no one can depend on this having the full candidate
+          // list in some builds (as this is undefined behavior).
+          let scanner = new Scanner({})
+          root.overwriteCandidates = scanner.scanFiles([
+            { content: markup, file: filename, extension: 'svelte' },
+          ])
+
           let generated = await root.generate(content, (file) =>
             root?.builtBeforeTransform?.push(file),
           )
 
           if (!generated) {
             roots.delete(id)
-            return preprocessor.style?.({ ...rest, content, filename })
+            return preprocessor.style?.({ ...rest, content, filename, markup })
           }
 
-          return preprocessor.style?.({ ...rest, content: generated, filename })
+          return preprocessor.style?.({ ...rest, content: generated, filename, markup })
         },
       },
     },