Vite: Don't track candidate changes for Svelte <style> tags

Author: philipp-spiess

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,19 +196,20 @@ 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 process Svelte <style> tags in the Svelte preprocessor
+        if (isSvelteStyle(id)) {
+          return src
+        }
+
         if (!options?.ssr) {
           // Wait until all other files have been processed, so we can extract
           // all candidates before generating CSS. This must not be called
@@ -252,6 +253,11 @@ export default function tailwindcss(): Plugin[] {
           return
         }
 
+        // We process Svelte <style> tags in the Svelte preprocessor
+        if (isSvelteStyle(id)) {
+          return src
+        }
+
         // We do a first pass to generate valid CSS for the downstream plugins.
         // However, since not all candidates are guaranteed to be extracted by
         // this time, we have to re-run a transform for the root later.
@@ -268,6 +274,8 @@ export default function tailwindcss(): Plugin[] {
       // by vite:css-post.
       async renderStart() {
         for (let [id, root] of roots.entries()) {
+          if (isSvelteStyle(id)) continue
+
           let generated = await regenerateOptimizedCss(
             root,
             // During the renderStart phase, we can not add watch files since
@@ -304,13 +312,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 } = {},
@@ -559,43 +572,57 @@ class Root {
 // In practice, it is not recommended to use `@tailwind utilities;` inside
 // Svelte components. 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.
           let id = filename + '?svelte&type=style&lang.css'
 
           let root = roots.get(id)
+
           // 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 = []
+
+          // Since a Svelte pre-processor call means that the CSS has changed,
+          // we need to trigger a rebuild.
+          root.requiresRebuild = true
+
           let generated = await root.generate(content, (file) =>
             root?.builtBeforeTransform?.push(file),
           )
 
+          // TODO: Warn when `@tailwind utilities;` is used inside Svelte
+          // <style> tags. Right now, we don't have a way to know if this
+          // feature is used, since core does the `@import` resolution.
+
           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 })
         },
-      }),
+      },
     },
   }
 }