From a9f1bc74e2344d570b6d0a3e9e0242005d57d985 Mon Sep 17 00:00:00 2001
From: Kris Braun <kris.braun@gmail.com>
Date: Tue, 12 Mar 2024 12:15:15 -0400
Subject: [PATCH] Remove Vite plugin delay in dev mode

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](https://github.com/vitejs/vite/pull/16135) could address the FOUC and extra build.
---
 packages/@tailwindcss-vite/src/index.ts | 34 -------------------------
 1 file changed, 34 deletions(-)

diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts
index 15c205c202a4..ce6aad6fa8c9 100644
--- a/packages/@tailwindcss-vite/src/index.ts
+++ b/packages/@tailwindcss-vite/src/index.ts
@@ -115,35 +115,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
@@ -161,7 +132,6 @@ export default function tailwindcss(): Plugin[] {
 
       // Scan index.html for candidates
       transformIndexHtml(html) {
-        initialScan.tick()
         let updated = scan(html, 'html')
 
         // In dev mode, if the generated CSS contains a URL that causes the
@@ -175,7 +145,6 @@ export default function tailwindcss(): Plugin[] {
 
       // Scan all other files for candidates
       transform(src, id) {
-        initialScan.tick()
         if (id.includes('/.vite/')) return
         let [filename] = id.split('?', 2)
         let extension = path.extname(filename).slice(1)
@@ -198,9 +167,6 @@ export default function tailwindcss(): Plugin[] {
 
         cssModules.add(id)
 
-        // For the initial load we must wait for all source files to be scanned
-        await initialScan.complete
-
         let css = generateCss(src)
         css = await transformWithPlugins(this, css)
         return { code: css }