mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
c09bb5e256
Fixes #16045 This PR fixes two Vite issues found with SolidStart: - SolidStart seems to emit an empty HTML chunk (where the content is literally just `/`) with _no pathname_. Since we use the path to generate an `id` for HTML chunks, this would currently cause a crash. This was reported in #16045 - While testing the fix for the above, we also found that hot reloading was not working in SolidStart since `4.0.0-alpha.22`. After doing some bisecting we found that this is happening as SolidStart has the same module ID in different servers and we were invalidating the root when we shouldn't. After trying to restructure this code so that it only cleans up the root when it is _no longer part of any server_, we noticed some other compatibility issues with Nuxt and SvelteKit. It seems that the safest bet is to no longer update a root at all during rebuilds in the SSR step. This makes `invalidateAllRoots` a function that only notifiers the servers about a change which is conceptually also less confusing. ## Test plan - Added an integration test for SolidStart dev mode - Manually tested the dev mode across all Vite based templates in https://github.com/philipp-spiess/tailwindcss-playgrounds: Astro, Nuxt, Remix, Solid, SvelteKit, and Vue. --------- Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
109 lines
2.5 KiB
TypeScript
109 lines
2.5 KiB
TypeScript
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(() => (
|
|
<StartServer
|
|
document={({ assets, children, scripts }) => (
|
|
<html lang="en">
|
|
<head>{assets}</head>
|
|
<body>
|
|
<div id="app">{children}</div>
|
|
{scripts}
|
|
</body>
|
|
</html>
|
|
)}
|
|
/>
|
|
))
|
|
`,
|
|
'src/entry-client.jsx': js`
|
|
// @refresh reload
|
|
import { mount, StartClient } from '@solidjs/start/client'
|
|
|
|
mount(() => <StartClient />, document.getElementById('app'))
|
|
`,
|
|
'src/app.jsx': js`
|
|
import './app.css'
|
|
export default function App() {
|
|
return <h1 class="underline">Hello world!</h1>
|
|
}
|
|
`,
|
|
'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 <h1 class="underline font-bold">Hello world!</h1>
|
|
}
|
|
`,
|
|
)
|
|
|
|
let css = await fetchStyles(url)
|
|
expect(css).toContain(candidate`underline`)
|
|
expect(css).toContain(candidate`font-bold`)
|
|
})
|
|
},
|
|
)
|