Skip to content

Vite: Don't register the current CSS file as a dependency on itself #17533

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 3, 2025
Merged

Vite: Don't register the current CSS file as a dependency on itself #17533

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- PostCSS: Ensure files containing `@tailwind utilities` are processed ([#17514](https://github.com/tailwindlabs/tailwindcss/pull/17514))
- Ensure the `color-mix(…)` polyfill creates fallbacks even when using colors that cannot be statically analyzed ([#17513](https://github.com/tailwindlabs/tailwindcss/pull/17513))
- Fix slow incremental builds with `@tailwindcss/vite` and `@tailwindcss/postscss` (especially on Windows) ([#17511](https://github.com/tailwindlabs/tailwindcss/pull/17511))
- Vite: Fix an issue with Qwik setups ([#17533](https://github.com/tailwindlabs/tailwindcss/pull/17533))

## [4.1.1] - 2025-04-02

Expand Down
100 changes: 100 additions & 0 deletions integrations/vite/qwik.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import { candidate, css, fetchStyles, json, retryAssertion, test, ts } from '../utils'

test(
'dev mode',
{
fs: {
'package.json': json`
{
"type": "module",
"dependencies": {
"@builder.io/qwik": "^1",
"@builder.io/qwik-city": "^1",
"vite": "^5",
"@tailwindcss/vite": "workspace:^",
"tailwindcss": "workspace:^"
}
}
`,
'vite.config.ts': ts`
import { defineConfig } from 'vite'
import { qwikVite } from '@builder.io/qwik/optimizer'
import { qwikCity } from '@builder.io/qwik-city/vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig(() => {
return {
plugins: [tailwindcss(), qwikCity(), qwikVite()],
}
})
`,
'src/root.tsx': ts`
import { component$ } from '@builder.io/qwik'
import { QwikCityProvider, RouterOutlet } from '@builder.io/qwik-city'

import './global.css'

export default component$(() => {
return (
<QwikCityProvider>
<head></head>
<body>
<RouterOutlet />
</body>
</QwikCityProvider>
)
})
`,
'src/global.css': css`@import 'tailwindcss/utilities.css';`,
'src/entry.ssr.tsx': ts`
import { renderToStream, type RenderToStreamOptions } from '@builder.io/qwik/server'
import Root from './root'

export default function (opts: RenderToStreamOptions) {
return renderToStream(<Root />, opts)
}
`,
'src/routes/index.tsx': ts`
import { component$ } from '@builder.io/qwik'

export default component$(() => {
return <h1 class="underline">Hello World!</h1>
})
`,
},
},
async ({ fs, spawn, expect }) => {
let process = await spawn('pnpm vite --mode ssr')
await process.onStdout((m) => m.includes('ready in'))

let url = ''
await process.onStdout((m) => {
console.log(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/routes/index.tsx',
ts`
import { component$ } from '@builder.io/qwik'

export default component$(() => {
return <h1 class="underline flex">Hello World!</h1>
})
`,
)

let css = await fetchStyles(url)
expect(css).toContain(candidate`underline`)
expect(css).toContain(candidate`flex`)
})
},
)
9 changes: 8 additions & 1 deletion packages/@tailwindcss-vite/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,15 @@ class Root {
_addWatchFile: (file: string) => void,
I: Instrumentation,
): Promise<string | false> {
let inputPath = idToPath(this.id)

function addWatchFile(file: string) {
// Don't watch the input file since it's already a dependency anc causes
// issues with some setups (e.g. Qwik).
if (file === inputPath) {
return
}

// Scanning `.svg` file containing a `#` or `?` in the path will
// crash Vite. We work around this for now by ignoring updates to them.
//
Expand All @@ -196,7 +204,6 @@ class Root {
}

let requiresBuildPromise = this.requiresBuild()
let inputPath = idToPath(this.id)
let inputBase = path.dirname(path.resolve(inputPath))

if (!this.compiler || !this.scanner || (await requiresBuildPromise)) {
Expand Down