From 2dcb94565dd9f2c37c6904f6ee9a47859d02a882 Mon Sep 17 00:00:00 2001 From: Alem Tuzlak Date: Mon, 2 Dec 2024 21:34:45 +0100 Subject: [PATCH 1/7] fix: Added support for vite build --ssr to the tailwind vite plugin --- packages/@tailwindcss-vite/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index 9c92699faf89..a6ba5db3f2bb 100644 --- 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) From edca4a2f0460f58fe14039b96bcd23757933d883 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 2 Dec 2024 16:11:10 -0500 Subject: [PATCH 2/7] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8b1c70ddf920..1d460d1ac346 100644 --- 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 From 2a69c881bfc89ee609808fbc4ef5226d041d5992 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 2 Dec 2024 16:28:07 -0500 Subject: [PATCH 3/7] Add SSR tests for Vite 5 and 6 --- integrations/vite/ssr.test.ts | 141 ++++++++++++++++++++++++++++++++++ 1 file changed, 141 insertions(+) create mode 100644 integrations/vite/ssr.test.ts diff --git a/integrations/vite/ssr.test.ts b/integrations/vite/ssr.test.ts new file mode 100644 index 000000000000..5ec3e176ef14 --- /dev/null +++ b/integrations/vite/ssr.test.ts @@ -0,0 +1,141 @@ +import { describe, expect } from 'vitest' +import { candidate, css, html, json, test, ts } from '../utils' + +describe('SSR + Vite 5', () => { + 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` + +
Hello, world!
+ + + `, + 'src/index.css': css`@import 'tailwindcss';`, + 'src/index.ts': ts` + import './index.css' + + document.querySelector('#app').innerHTML = \` +
Hello, world!
+ \` + `, + 'server.ts': ts` + import css from './src/index.css?url' + + document.querySelector('#app').innerHTML = \` + +
Hello, world!
+ \` + `, + }, + }, + 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` + +
Hello, world!
+ + + `, + 'src/index.css': css`@import 'tailwindcss';`, + 'src/index.ts': ts` + import './index.css' + + document.querySelector('#app').innerHTML = \` +
Hello, world!
+ \` + `, + 'server.ts': ts` + import css from './src/index.css?url' + + document.querySelector('#app').innerHTML = \` + +
Hello, world!
+ \` + `, + }, + }, + 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`, + ]) + }, + ) +}) From 41dd7a5664924ca548c6d5691447ba23b0b0f48d Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 2 Dec 2024 16:29:29 -0500 Subject: [PATCH 4/7] Update test --- integrations/vite/ssr.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/integrations/vite/ssr.test.ts b/integrations/vite/ssr.test.ts index 5ec3e176ef14..a12c3f76295e 100644 --- a/integrations/vite/ssr.test.ts +++ b/integrations/vite/ssr.test.ts @@ -34,7 +34,7 @@ describe('SSR + Vite 5', () => { `, 'index.html': html` -
Hello, world!
+
`, @@ -102,7 +102,7 @@ describe('SSR + Vite 5', () => { `, 'index.html': html` -
Hello, world!
+
`, From 975cca0e4e2d3c01d23d5159048ac1f048e0a263 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 2 Dec 2024 16:41:20 -0500 Subject: [PATCH 5/7] Rrun macOS and Windows CI --- .github/workflows/ci.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index d28a1e1e0660..36e77c685ee1 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -19,9 +19,9 @@ jobs: on-next-branch: - ${{ github.ref == 'refs/heads/next' }} exclude: - - on-next-branch: false + - on-next-branch: true runner: windows-latest - - on-next-branch: false + - on-next-branch: true runner: macos-14 runs-on: ${{ matrix.runner }} From 9cdf4c63c999f3e1f57e7b0b8245af0da916c537 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 2 Dec 2024 16:57:37 -0500 Subject: [PATCH 6/7] Update tests MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The describe block isn’t necessary --- integrations/vite/ssr.test.ts | 246 +++++++++++++++++----------------- 1 file changed, 122 insertions(+), 124 deletions(-) diff --git a/integrations/vite/ssr.test.ts b/integrations/vite/ssr.test.ts index a12c3f76295e..e66970f8834f 100644 --- a/integrations/vite/ssr.test.ts +++ b/integrations/vite/ssr.test.ts @@ -1,141 +1,139 @@ -import { describe, expect } from 'vitest' +import { expect } from 'vitest' import { candidate, css, html, json, test, ts } from '../utils' -describe('SSR + Vite 5', () => { - 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" - } +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' + } + `, + '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` - -
- - - `, - 'src/index.css': css`@import 'tailwindcss';`, - 'src/index.ts': ts` - import './index.css' + export default defineConfig({ + build: { + cssMinify: false, + ssrEmitAssets: true, + }, + plugins: [tailwindcss()], + ssr: { resolve: { conditions: [] } }, + }) + `, + 'index.html': html` + +
+ + + `, + 'src/index.css': css`@import 'tailwindcss';`, + 'src/index.ts': ts` + import './index.css' - document.querySelector('#app').innerHTML = \` -
Hello, world!
- \` - `, - 'server.ts': ts` - import css from './src/index.css?url' + document.querySelector('#app').innerHTML = \` +
Hello, world!
+ \` + `, + 'server.ts': ts` + import css from './src/index.css?url' - document.querySelector('#app').innerHTML = \` - -
Hello, world!
- \` - `, - }, + document.querySelector('#app').innerHTML = \` + +
Hello, world!
+ \` + `, }, - async ({ fs, exec }) => { - await exec('pnpm vite build --ssr server.ts') + }, + 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] + let files = await fs.glob('dist/**/*.css') + expect(files).toHaveLength(1) + let [filename] = files[0] - await fs.expectFileToContain(filename, [ - // - candidate`underline`, - candidate`m-2`, - ]) - }, - ) + 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" - } +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' + } + `, + '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` - -
- - - `, - 'src/index.css': css`@import 'tailwindcss';`, - 'src/index.ts': ts` - import './index.css' + export default defineConfig({ + build: { + cssMinify: false, + ssrEmitAssets: true, + }, + plugins: [tailwindcss()], + ssr: { resolve: { conditions: [] } }, + }) + `, + 'index.html': html` + +
+ + + `, + 'src/index.css': css`@import 'tailwindcss';`, + 'src/index.ts': ts` + import './index.css' - document.querySelector('#app').innerHTML = \` -
Hello, world!
- \` - `, - 'server.ts': ts` - import css from './src/index.css?url' + document.querySelector('#app').innerHTML = \` +
Hello, world!
+ \` + `, + 'server.ts': ts` + import css from './src/index.css?url' - document.querySelector('#app').innerHTML = \` - -
Hello, world!
- \` - `, - }, + document.querySelector('#app').innerHTML = \` + +
Hello, world!
+ \` + `, }, - async ({ fs, exec }) => { - await exec('pnpm vite build --ssr server.ts') + }, + 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] + let files = await fs.glob('dist/**/*.css') + expect(files).toHaveLength(1) + let [filename] = files[0] - await fs.expectFileToContain(filename, [ - // - candidate`underline`, - candidate`m-2`, - ]) - }, - ) -}) + await fs.expectFileToContain(filename, [ + // + candidate`underline`, + candidate`m-2`, + ]) + }, +) From 6a66fa1db7615bea36903e8173af6a313a24798f Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 2 Dec 2024 16:57:45 -0500 Subject: [PATCH 7/7] Disable win/mac tests --- .github/workflows/ci.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 36e77c685ee1..d28a1e1e0660 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -19,9 +19,9 @@ jobs: on-next-branch: - ${{ github.ref == 'refs/heads/next' }} exclude: - - on-next-branch: true + - on-next-branch: false runner: windows-latest - - on-next-branch: true + - on-next-branch: false runner: macos-14 runs-on: ${{ matrix.runner }}