From aaa2c022df352191cbdaf26f906bd2190af6b2df Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Thu, 30 Jan 2025 13:06:20 +0100 Subject: [PATCH 1/6] Don't invalidate roots on rebuilds --- packages/@tailwindcss-vite/src/index.ts | 29 ++++++++++--------------- 1 file changed, 11 insertions(+), 18 deletions(-) diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index c8976c0276da..48b07b7d7bac 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/packages/@tailwindcss-vite/src/index.ts @@ -63,7 +63,7 @@ export default function tailwindcss(): Plugin[] { ) }) - function scanFile(id: string, content: string, extension: string, isSSR: boolean) { + function scanFile(id: string, content: string, extension: string) { for (let dependency of IGNORED_DEPENDENCIES) { // We validated that Vite IDs always use posix style path separators, even on Windows. // In dev build, Vite precompiles dependencies @@ -83,26 +83,20 @@ export default function tailwindcss(): Plugin[] { } if (updated) { - invalidateAllRoots(isSSR) + invalidateAllRoots() } } - function invalidateAllRoots(isSSR: boolean) { + function invalidateAllRoots() { + let rootsFound = new Set() + for (let server of servers) { let updates: Update[] = [] - for (let [id, root] of roots.entries()) { + for (let [id] of roots.entries()) { let module = server.moduleGraph.getModuleById(id) - if (!module) { - // Note: Removing this during SSR is not safe and will produce - // inconsistent results based on the timing of the removal and - // the order / timing of transforms. - if (!isSSR) { - // It is safe to remove the item here since we're iterating on a copy - // of the keys. - roots.delete(id) - } - continue - } + if (!module) continue + + rootsFound.add(id) roots.get(id).requiresRebuild = false server.moduleGraph.invalidateModule(module) @@ -113,7 +107,6 @@ export default function tailwindcss(): Plugin[] { timestamp: Date.now(), }) } - if (updates.length > 0) { server.hot.send({ type: 'update', updates }) } @@ -210,12 +203,12 @@ export default function tailwindcss(): Plugin[] { // Scan all non-CSS files for candidates transformIndexHtml(html, { path }) { - scanFile(path, html, 'html', isSSR) + scanFile(path, html, 'html') }, transform(src, id, options) { let extension = getExtension(id) if (isPotentialCssRootFile(id)) return - scanFile(id, src, extension, options?.ssr ?? false) + scanFile(id, src, extension) }, }, From 92e540549f73892d6602154c26ed9a1c280ab921 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Thu, 30 Jan 2025 13:06:36 +0100 Subject: [PATCH 2/6] Ignore html resouces without a path --- packages/@tailwindcss-vite/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index 48b07b7d7bac..1b828844ccaf 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/packages/@tailwindcss-vite/src/index.ts @@ -203,6 +203,7 @@ export default function tailwindcss(): Plugin[] { // Scan all non-CSS files for candidates transformIndexHtml(html, { path }) { + if (!path) return scanFile(path, html, 'html') }, transform(src, id, options) { From 81e5f04afb36678414d2ec43eb3e2f702d42a31f Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Thu, 30 Jan 2025 13:06:48 +0100 Subject: [PATCH 3/6] Add SolidStart test --- integrations/vite/solidstart.test.ts | 108 +++++++++++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 integrations/vite/solidstart.test.ts diff --git a/integrations/vite/solidstart.test.ts b/integrations/vite/solidstart.test.ts new file mode 100644 index 000000000000..bbe9ccc8868d --- /dev/null +++ b/integrations/vite/solidstart.test.ts @@ -0,0 +1,108 @@ +import { candidate, css, fetchStyles, js, json, retryAssertion, test, ts } from '../utils' + +const WORKSPACE = { + 'package.json': json` + { + "type": "module", + "dependencies": { + "@solidjs/start": "^1", + "solid-js": "^1", + "vinxi": "^0", + "@tailwindcss/vite": "workspace:^", + "tailwindcss": "workspace:^" + } + } + `, + 'jsconfig.json': json` + { + "compilerOptions": { + "jsx": "preserve", + "jsxImportSource": "solid-js" + } + } + `, + 'app.config.js': ts` + import { defineConfig } from '@solidjs/start/config' + import tailwindcss from '@tailwindcss/vite' + + export default defineConfig({ + vite: { + plugins: [tailwindcss()], + }, + }) + `, + 'src/entry-server.jsx': js` + // @refresh reload + import { createHandler, StartServer } from '@solidjs/start/server' + + export default createHandler(() => ( + ( + + {assets} + +
{children}
+ {scripts} + + + )} + /> + )) + `, + 'src/entry-client.jsx': js` + // @refresh reload + import { mount, StartClient } from '@solidjs/start/client' + + mount(() => , document.getElementById('app')) + `, + 'src/app.jsx': js` + import './app.css' + export default function App() { + return

Hello world!

+ } + `, + 'src/app.css': css`@import 'tailwindcss';`, +} + +test( + 'dev mode', + { + fs: WORKSPACE, + }, + async ({ fs, spawn, expect }) => { + let process = await spawn('pnpm vinxi dev', { + env: { + TEST: 'false', // VERY IMPORTANT OTHERWISE YOU WON'T GET OUTPUT + NODE_ENV: 'development', + }, + }) + + let url = '' + await process.onStdout((m) => { + let match = /Local:\s*(http.*)\//.exec(m) + if (match) url = match[1] + return Boolean(url) + }) + + await retryAssertion(async () => { + let css = await fetchStyles(url) + expect(css).toContain(candidate`underline`) + }) + + await retryAssertion(async () => { + await fs.write( + 'src/app.jsx', + js` + import './app.css' + export default function App() { + return

Hello world!

+ } + `, + ) + + let css = await fetchStyles(url) + expect(css).toContain(candidate`underline`) + expect(css).toContain(candidate`font-bold`) + }) + }, +) From 48871b47e2bc2e625f60d26934f073f2a9b3cb90 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Thu, 30 Jan 2025 13:14:50 +0100 Subject: [PATCH 4/6] add change log --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e3481c52a7ba..66665398a91c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Only generate positive `grid-cols-*` and `grid-rows-*` utilities ([#16020](https://github.com/tailwindlabs/tailwindcss/pull/16020)) +- Vite: Ensure hot-reloading works with SolidStart setups ([#16052](https://github.com/tailwindlabs/tailwindcss/pull/16052)) +- Vite: Fix a crash happening in SolidStart setups ([#16052](https://github.com/tailwindlabs/tailwindcss/pull/16052)) ## [4.0.1] - 2025-01-29 From 075d2020149308d5eb8b6fac0d0b432be6b446ee Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Thu, 30 Jan 2025 14:58:36 +0100 Subject: [PATCH 5/6] Add comment --- packages/@tailwindcss-vite/src/index.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index 1b828844ccaf..86d5d6142d5c 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/packages/@tailwindcss-vite/src/index.ts @@ -88,16 +88,12 @@ export default function tailwindcss(): Plugin[] { } function invalidateAllRoots() { - let rootsFound = new Set() - for (let server of servers) { let updates: Update[] = [] for (let [id] of roots.entries()) { let module = server.moduleGraph.getModuleById(id) if (!module) continue - rootsFound.add(id) - roots.get(id).requiresRebuild = false server.moduleGraph.invalidateModule(module) updates.push({ @@ -203,7 +199,9 @@ export default function tailwindcss(): Plugin[] { // Scan all non-CSS files for candidates transformIndexHtml(html, { path }) { + // SolidStart emits HTML chunks with an undefined path and the html content of `\`. if (!path) return + scanFile(path, html, 'html') }, transform(src, id, options) { From 25edeb1652f775e401a1fa6bc02cb66c16b13c01 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Thu, 30 Jan 2025 15:08:57 +0100 Subject: [PATCH 6/6] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 66665398a91c..5457968cbc4f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,7 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Only generate positive `grid-cols-*` and `grid-rows-*` utilities ([#16020](https://github.com/tailwindlabs/tailwindcss/pull/16020)) - Vite: Ensure hot-reloading works with SolidStart setups ([#16052](https://github.com/tailwindlabs/tailwindcss/pull/16052)) -- Vite: Fix a crash happening in SolidStart setups ([#16052](https://github.com/tailwindlabs/tailwindcss/pull/16052)) +- Vite: Fix a crash when starting the development server in SolidStart setups ([#16052](https://github.com/tailwindlabs/tailwindcss/pull/16052)) ## [4.0.1] - 2025-01-29