Fix resolution of imported CSS files in Vite SSR builds (#15279)

AlemTuzlak · thecrypticace · web-flow · commit 93b922dcb6e4 · 2024-12-02T17:08:13.000-05:00
Fixes #15237 --------- Co-authored-by: Jordan Pittman <jordan@cryptica.me>
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Ensure absolute `url()`s inside imported CSS files are not rebased when using `@tailwindcss/vite`
 - Fix issues with dev servers using Svelte 5 with the Vite plugin ([#15274](https://github.com/tailwindlabs/tailwindcss/issues/15274))
+- Fix resolution of imported CSS files in Vite SSR builds ([#15279](https://github.com/tailwindlabs/tailwindcss/issues/15279))
 
 ### Added
 
diff --git a/integrations/vite/ssr.test.ts b/integrations/vite/ssr.test.ts
@@ -0,0 +1,139 @@
+import { expect } from 'vitest'
+import { candidate, css, html, json, test, ts } from '../utils'
+
+test(
+  `Vite 5`,
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "@tailwindcss/vite": "workspace:^",
+            "tailwindcss": "workspace:^"
+          },
+          "_comment": "This test uses Vite 5.3 on purpose. Do not upgrade it to Vite 6.",
+          "devDependencies": {
+            "vite": "^5.3"
+          }
+        }
+      `,
+      'vite.config.ts': ts`
+        import tailwindcss from '@tailwindcss/vite'
+        import { defineConfig } from 'vite'
+
+        export default defineConfig({
+          build: {
+            cssMinify: false,
+            ssrEmitAssets: true,
+          },
+          plugins: [tailwindcss()],
+          ssr: { resolve: { conditions: [] } },
+        })
+      `,
+      'index.html': html`
+        <body>
+          <div id="app"></div>
+          <script type="module" src="./src/index.ts"></script>
+        </body>
+      `,
+      'src/index.css': css`@import 'tailwindcss';`,
+      'src/index.ts': ts`
+        import './index.css'
+
+        document.querySelector('#app').innerHTML = \`
+          <div class="underline m-2">Hello, world!</div>
+        \`
+      `,
+      'server.ts': ts`
+        import css from './src/index.css?url'
+
+        document.querySelector('#app').innerHTML = \`
+          <link rel="stylesheet" href="\${css}">
+          <div class="underline m-2">Hello, world!</div>
+        \`
+      `,
+    },
+  },
+  async ({ fs, exec }) => {
+    await exec('pnpm vite build --ssr server.ts')
+
+    let files = await fs.glob('dist/**/*.css')
+    expect(files).toHaveLength(1)
+    let [filename] = files[0]
+
+    await fs.expectFileToContain(filename, [
+      //
+      candidate`underline`,
+      candidate`m-2`,
+    ])
+  },
+)
+
+test(
+  `Vite 6`,
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "@tailwindcss/vite": "workspace:^",
+            "tailwindcss": "workspace:^"
+          },
+          "devDependencies": {
+            "vite": "^6.0"
+          }
+        }
+      `,
+      'vite.config.ts': ts`
+        import tailwindcss from '@tailwindcss/vite'
+        import { defineConfig } from 'vite'
+
+        export default defineConfig({
+          build: {
+            cssMinify: false,
+            ssrEmitAssets: true,
+          },
+          plugins: [tailwindcss()],
+          ssr: { resolve: { conditions: [] } },
+        })
+      `,
+      'index.html': html`
+        <body>
+          <div id="app"></div>
+          <script type="module" src="./src/index.ts"></script>
+        </body>
+      `,
+      'src/index.css': css`@import 'tailwindcss';`,
+      'src/index.ts': ts`
+        import './index.css'
+
+        document.querySelector('#app').innerHTML = \`
+          <div class="underline m-2">Hello, world!</div>
+        \`
+      `,
+      'server.ts': ts`
+        import css from './src/index.css?url'
+
+        document.querySelector('#app').innerHTML = \`
+          <link rel="stylesheet" href="\${css}">
+          <div class="underline m-2">Hello, world!</div>
+        \`
+      `,
+    },
+  },
+  async ({ fs, exec }) => {
+    await exec('pnpm vite build --ssr server.ts')
+
+    let files = await fs.glob('dist/**/*.css')
+    expect(files).toHaveLength(1)
+    let [filename] = files[0]
+
+    await fs.expectFileToContain(filename, [
+      //
+      candidate`underline`,
+      candidate`m-2`,
+    ])
+  },
+)
diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts
@@ -44,7 +44,7 @@ export default function tailwindcss(): Plugin[] {
       preferRelative: true,
     })
     function customCssResolver(id: string, base: string) {
-      return cssResolver(id, base, false, isSSR)
+      return cssResolver(id, base, true, isSSR)
     }
 
     let jsResolver = config!.createResolver(config!.resolve)

Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@ export default function tailwindcss(): Plugin[] {`
`44`	`44`	`preferRelative: true,`
`45`	`45`	`})`
`46`	`46`	`function customCssResolver(id: string, base: string) {`
`47`		`- return cssResolver(id, base, false, isSSR)`
	`47`	`+ return cssResolver(id, base, true, isSSR)`
`48`	`48`	`}`
`49`	`49`
`50`	`50`	`let jsResolver = config!.createResolver(config!.resolve)`