Skip to content

Commit

Permalink
Remove Vite plugin delay in dev mode
Browse files Browse the repository at this point in the history
We were using setTimeout to wait for the initial scan to complete before generating Tailwind CSS. Now that full builds wait until the bundle stage, dev builds can simply run immediately. This might generate Tailwind CSS twice, generating a FOUC, but will be faster than waiting for the timeout.

A [proposed Vite change](vitejs/vite#16135) could address the FOUC and extra build.
  • Loading branch information
KrisBraun committed Mar 21, 2024
1 parent 47bf965 commit 4e8b9c5
Showing 1 changed file with 0 additions and 29 deletions.
29 changes: 0 additions & 29 deletions packages/@tailwindcss-vite/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -116,35 +116,6 @@ export default function tailwindcss(): Plugin[] {
return css
}

// In dev mode, there isn't a hook to signal that we've seen all files. We use
// a timer, resetting it on each file seen, and trigger CSS generation when we
// haven't seen any new files after a timeout. If this triggers too early,
// there will be a FOOC and but CSS will regenerate after we've seen more files.
let initialScan = (() => {
// If too short, we're more likely to trigger a FOOC and generate CSS
// multiple times. If too long, we delay dev builds.
let delayInMs = 50

let timer: ReturnType<typeof setTimeout>
let resolve: () => void
let resolved = false

return {
tick() {
if (resolved) return
timer && clearTimeout(timer)
timer = setTimeout(resolve, delayInMs)
},

complete: new Promise<void>((_resolve) => {
resolve = () => {
resolved = true
_resolve()
}
}),
}
})()

return [
{
// Step 1: Scan source files for candidates
Expand Down

0 comments on commit 4e8b9c5

Please sign in to comment.