From c26f9d5692bc41ddb59edcad7172c03d70a479ca Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 2 Dec 2024 16:52:52 +0100 Subject: [PATCH 1/9] Vite: Simplify preprocessor to make it work with Svelte 5 and Vite 6 --- CHANGELOG.md | 4 +- integrations/vite/svelte.test.ts | 8 +- packages/@tailwindcss-vite/package.json | 3 +- packages/@tailwindcss-vite/src/index.ts | 22 +-- pnpm-lock.yaml | 238 ++++++++++++------------ 5 files changed, 131 insertions(+), 144 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 14cc77dbfb59..dad820574b61 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -- Nothing yet! +### Fixed + +- Fix issues with dev servers using Svelte 5 with the Vite plugin ([#15250](https://github.com/tailwindlabs/tailwindcss/issues/15250)) ## [4.0.0-beta.4] - 2024-11-29 diff --git a/integrations/vite/svelte.test.ts b/integrations/vite/svelte.test.ts index 12acd63a579d..b0950f9f9cd2 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 546f047bc13c..5213f9d7734e 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 || ^6" } } diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index cc89775eae32..82f3290929c7 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/packages/@tailwindcss-vite/src/index.ts @@ -4,7 +4,7 @@ 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 +609,8 @@ class Root { } } -// Register a plugin that can hook into the Svelte preprocessor if svelte is -// enabled. This allows us to transform CSS in `