From 89f291c0074331f8e6c5d177170b19b409d6ce18 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 2 Dec 2024 20:48:00 +0100 Subject: [PATCH] Vite: Simplify preprocessor to make it work with Svelte 5 and Vite 6 (#15274) Closes #15250 This PR simplifies our Vite integration even more. It turns out that in some projects (see #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 #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 --- CHANGELOG.md | 2 + integrations/vite/svelte.test.ts | 8 +- packages/@tailwindcss-vite/package.json | 3 +- packages/@tailwindcss-vite/src/index.ts | 21 ++-- pnpm-lock.yaml | 150 +----------------------- 5 files changed, 20 insertions(+), 164 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6755c89c5..8b1c70ddf 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/integrations/vite/svelte.test.ts b/integrations/vite/svelte.test.ts index 12acd63a5..b0950f9f9 100644 --- a/integrations/vite/svelte.test.ts +++ b/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" } diff --git a/packages/@tailwindcss-vite/package.json b/packages/@tailwindcss-vite/package.json index 546f047bc..00a020e93 100644 --- a/packages/@tailwindcss-vite/package.json +++ b/packages/@tailwindcss-vite/package.json @@ -31,7 +31,6 @@ "@tailwindcss/node": "workspace:^", "@tailwindcss/oxide": "workspace:^", "lightningcss": "catalog:", - "svelte-preprocess": "^6.0.2", "tailwindcss": "workspace:*" }, "devDependencies": { @@ -39,6 +38,6 @@ "vite": "catalog:" }, "peerDependencies": { - "vite": "^5.2.0" + "vite": "^5.2.0 || ^6" } } diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index cc89775ea..9c92699fa 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/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 `