WIP

philipp-spiess · philipp-spiess · commit 6d0cae729d17 · 2025-01-30T12:54:25.000+01:00
diff --git a/integrations/vite/solidstart.test.ts 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(() => (
+      <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`)
+    })
+  },
+)
diff --git 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,13 @@ export default function tailwindcss(): Plugin[] {
 
       // Scan all non-CSS files for candidates
       transformIndexHtml(html, { path }) {
-        scanFile(path, html, 'html', isSSR)
+        if (!path) return
+        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)
       },
     },
 
