Vite: Simplify preprocessor to make it work with Svelte 5 and Vite 6 (tailwindlabs#15274)

Closes tailwindlabs#15250

This PR simplifies our Vite integration even more. It turns out that in
some projects (see tailwindlabs#15250 for the exact repro), the way we invoke
`svelte-preprocess` was actually causing issues in Vite since with Vite,
it's expected to use the `sveltePreprocess` version exported by
`sveltejs/vite-plugin-svelte`.

While trying to change this we noticed that there are different versions
of `sveltejs/vite-plugin-svelte` for Vite 5 and Vite 6 which caused us
to investigate even more and we noticed that we do not even need to
recursively call into the `sveltePreprocess()` as every plugin is run
after each other anyways. This allows us to drop the dependency on
`svelte-preprocess` and simplify the code a bit more, registering only a
`(string) => string` style transformer.

## Test Plan

This was tsted on the repro repo from tailwindlabs#15250 as well as the SvelteKit
setup from [my
playgrounds](https://github.com/philipp-spiess/tailwindcss-playgrounds).
Furthermore we tested various combinations of `svelte`,
`@sveltejs/vite-plugin-svelte` and `vite` in our integration test to
ensure everything works as expected.

---------

Co-authored-by: Jordan Pittman <jordan@cryptica.me>

Author: philipp-spiess

CHANGELOG.md

@@ -10,10 +10,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Ensure absolute `url()`s inside imported CSS files are not rebased when using `@tailwindcss/vite`
+- Fix issues with dev servers using Svelte 5 with the Vite plugin ([#15274](https://github.com/tailwindlabs/tailwindcss/issues/15274))
 
 ### Added
 
 - Parallelize parsing of individual source files ([#15270](https://github.com/tailwindlabs/tailwindcss/pull/15270))
+- Support Vite 6 in the Vite plugin ([#15274](https://github.com/tailwindlabs/tailwindcss/issues/15274))
 
 ## [4.0.0-beta.4] - 2024-11-29
 

integrations/vite/svelte.test.ts

@@ -9,11 +9,11 @@ test(
         {
           "type": "module",
           "dependencies": {
-            "svelte": "^4.2.18",
+            "svelte": "^5",
             "tailwindcss": "workspace:^"
           },
           "devDependencies": {
-            "@sveltejs/vite-plugin-svelte": "^3.1.1",
+            "@sveltejs/vite-plugin-svelte": "^5",
             "@tailwindcss/vite": "workspace:^",
             "vite": "^6"
           }
@@ -120,11 +120,11 @@ test(
         {
           "type": "module",
           "dependencies": {
-            "svelte": "^4.2.18",
+            "svelte": "^5",
             "tailwindcss": "workspace:^"
           },
           "devDependencies": {
-            "@sveltejs/vite-plugin-svelte": "^3.1.1",
+            "@sveltejs/vite-plugin-svelte": "^5",
             "@tailwindcss/vite": "workspace:^",
             "vite": "^6"
           }

packages/@tailwindcss-vite/package.json

@@ -31,14 +31,13 @@
     "@tailwindcss/node": "workspace:^",
     "@tailwindcss/oxide": "workspace:^",
     "lightningcss": "catalog:",
-    "svelte-preprocess": "^6.0.2",
     "tailwindcss": "workspace:*"
   },
   "devDependencies": {
     "@types/node": "catalog:",
     "vite": "catalog:"
   },
   "peerDependencies": {
-    "vite": "^5.2.0"
+    "vite": "^5.2.0 || ^6"
   }
 }

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

@@ -4,7 +4,6 @@ import { Scanner } from '@tailwindcss/oxide'
 import { Features as LightningCssFeatures, transform } from 'lightningcss'
 import fs from 'node:fs/promises'
 import path from 'node:path'
-import { sveltePreprocess } from 'svelte-preprocess'
 import type { Plugin, ResolvedConfig, Rollup, Update, ViteDevServer } from 'vite'
 
 const SPECIAL_QUERY_RE = /[?&](raw|url)\b/
@@ -609,8 +608,8 @@ class Root {
   }
 }
 
-// Register a plugin that can hook into the Svelte preprocessor if svelte is
-// enabled. This allows us to transform CSS in `<style>` tags and create a
+// Register a plugin that can hook into the Svelte preprocessor if Svelte is
+// configured. 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 not undergo a second pass through the vite
@@ -620,27 +619,21 @@ class Root {
 // 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()
-
+function svelteProcessor(roots: DefaultMap<string, Root>): Plugin {
   return {
     name: '@tailwindcss/svelte',
     api: {
       sveltePreprocess: {
-        markup: preprocessor.markup,
-        script: preprocessor.script,
         async style({
           content,
           filename,
           markup,
-          ...rest
         }: {
           content: string
           filename?: string
-          attributes: Record<string, string | boolean>
           markup: string
         }) {
-          if (!filename) return preprocessor.style?.({ ...rest, content, filename, markup })
+          if (!filename) return
 
           // Create the ID used by Vite to identify the `<style>` contents. This
           // way, the Vite `transform` hook can find the right root and thus
@@ -668,15 +661,15 @@ function svelteProcessor(roots: DefaultMap<string, Root>) {
           ])
 
           let generated = await root.generate(content, (file) =>
-            root?.builtBeforeTransform?.push(file),
+            root.builtBeforeTransform?.push(file),
           )
 
           if (!generated) {
             roots.delete(id)
-            return preprocessor.style?.({ ...rest, content, filename, markup })
+            return
           }
 
-          return preprocessor.style?.({ ...rest, content: generated, filename, markup })
+          return { code: generated }
         },
       },
     },