From 895037664ee7c252f4117cea7d72981ea6a546f1 Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Tue, 5 Nov 2024 18:04:44 +0100
Subject: [PATCH] Handle Nuxt SSR

---
 integrations/vite/nuxt.test.ts          | 111 +++++++++++++-----------
 packages/@tailwindcss-vite/src/index.ts |   5 ++
 2 files changed, 65 insertions(+), 51 deletions(-)

diff --git a/integrations/vite/nuxt.test.ts b/integrations/vite/nuxt.test.ts
index 21876d2c7adf..8c7eedc386d7 100644
--- a/integrations/vite/nuxt.test.ts
+++ b/integrations/vite/nuxt.test.ts
@@ -1,65 +1,74 @@
 import { expect } from 'vitest'
 import { candidate, css, fetchStyles, html, json, retryAssertion, test, ts } from '../utils'
 
-test(
-  'dev mode',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "nuxt": "^3.13.1",
-            "tailwindcss": "workspace:^",
-            "vue": "latest"
-          }
+const SETUP = {
+  fs: {
+    'package.json': json`
+      {
+        "type": "module",
+        "dependencies": {
+          "@tailwindcss/vite": "workspace:^",
+          "nuxt": "^3.13.1",
+          "tailwindcss": "workspace:^",
+          "vue": "latest"
         }
-      `,
-      'nuxt.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
+      }
+    `,
+    'nuxt.config.ts': ts`
+      import tailwindcss from '@tailwindcss/vite'
 
-        // https://nuxt.com/docs/api/configuration/nuxt-config
-        export default defineNuxtConfig({
-          vite: {
-            plugins: [tailwindcss()],
-          },
+      // https://nuxt.com/docs/api/configuration/nuxt-config
+      export default defineNuxtConfig({
+        vite: {
+          plugins: [tailwindcss()],
+        },
 
-          css: ['~/assets/css/main.css'],
-          devtools: { enabled: true },
-          compatibilityDate: '2024-08-30',
-        })
-      `,
-      'app.vue': html`
+        css: ['~/assets/css/main.css'],
+        devtools: { enabled: true },
+        compatibilityDate: '2024-08-30',
+      })
+    `,
+    'app.vue': html`
         <template>
-          <div class="underline">Hello world!</div>
-        </template>
+        <div class="underline">Hello world!</div>
+      </template>
       `,
-      'assets/css/main.css': css`@import 'tailwindcss';`,
-    },
+    'assets/css/main.css': css`@import 'tailwindcss';`,
   },
-  async ({ fs, spawn, getFreePort }) => {
-    let port = await getFreePort()
-    await spawn(`pnpm nuxt dev --port ${port}`)
+}
+
+test('dev mode', SETUP, async ({ fs, spawn, getFreePort }) => {
+  let port = await getFreePort()
+  await spawn(`pnpm nuxt dev --port ${port}`)
 
-    await retryAssertion(async () => {
-      let css = await fetchStyles(port)
-      expect(css).toContain(candidate`underline`)
-    })
+  await retryAssertion(async () => {
+    let css = await fetchStyles(port)
+    expect(css).toContain(candidate`underline`)
+  })
 
-    await retryAssertion(async () => {
-      await fs.write(
-        'app.vue',
-        html`
+  await retryAssertion(async () => {
+    await fs.write(
+      'app.vue',
+      html`
           <template>
-            <div class="underline font-bold">Hello world!</div>
-          </template>
+          <div class="underline font-bold">Hello world!</div>
+        </template>
         `,
-      )
+    )
 
-      let css = await fetchStyles(port)
-      expect(css).toContain(candidate`underline`)
-      expect(css).toContain(candidate`font-bold`)
-    })
-  },
-)
+    let css = await fetchStyles(port)
+    expect(css).toContain(candidate`underline`)
+    expect(css).toContain(candidate`font-bold`)
+  })
+})
+
+test('build', SETUP, async ({ spawn, getFreePort, exec }) => {
+  let port = await getFreePort()
+  await exec(`pnpm nuxt build`)
+  await spawn(`PORT=${port} pnpm nuxt preview`)
+
+  await retryAssertion(async () => {
+    let css = await fetchStyles(port)
+    expect(css).toContain(candidate`underline`)
+  })
+})
diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts
index a0b4f27e3781..644c1382180c 100644
--- a/packages/@tailwindcss-vite/src/index.ts
+++ b/packages/@tailwindcss-vite/src/index.ts
@@ -122,6 +122,11 @@ export default function tailwindcss(): Plugin[] {
         plugin.name !== 'vite:vue'
       ) {
         continue
+      } else if (plugin.name === 'ssr-styles') {
+        // The Nuxt ssr-styles plugin emits styles from server-side rendered
+        // components, we can't run it in the `renderStart` phase so we're
+        // skipping it.
+        continue
       }
 
       let transformHandler =