From f8ebd54524f3c818b0191a9ce74f7cfd99086e95 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Wed, 5 Mar 2025 17:04:27 +0100 Subject: [PATCH 1/5] Enable URL rewriting for PostCSS --- CHANGELOG.md | 5 ++ integrations/postcss/url-rewriting.test.ts | 93 ++++++++++++++++++++++ integrations/vite/url-rewriting.test.ts | 25 ++++-- packages/@tailwindcss-node/src/compile.ts | 4 +- packages/@tailwindcss-postcss/src/index.ts | 1 + 5 files changed, 120 insertions(+), 8 deletions(-) create mode 100644 integrations/postcss/url-rewriting.test.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 5e6ba791a9f2..05d4cc7d6776 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - _Experimental_: Add `user-valid` and `user-invalid` variants ([#12370](https://github.com/tailwindlabs/tailwindcss/pull/12370)) - _Experimental_: Add `wrap-anywhere`, `wrap-break-word`, and `wrap-normal` utilities ([#12128](https://github.com/tailwindlabs/tailwindcss/pull/12128)) +### Fixed + +- Vite: Fix an issue where `url(…)` rebasing in transitively imported CSS files is not resolved correctly +- PostCSS: Rebase `url(…)` in CSS imported CSS files + ## [4.0.11] - 2025-03-06 ### Fixed diff --git a/integrations/postcss/url-rewriting.test.ts b/integrations/postcss/url-rewriting.test.ts new file mode 100644 index 000000000000..3cd92c323ddd --- /dev/null +++ b/integrations/postcss/url-rewriting.test.ts @@ -0,0 +1,93 @@ +import { binary, css, js, json, svg, test } from '../utils' + +const SIMPLE_IMAGE = `iVBORw0KGgoAAAANSUhEUgAAADAAAAAlAQAAAAAsYlcCAAAACklEQVR4AWMYBQABAwABRUEDtQAAAABJRU5ErkJggg==` + +test.debug( + 'can rewrite urls in production builds', + { + fs: { + 'package.json': json` + { + "dependencies": { + "postcss": "^8", + "postcss-cli": "^10", + "tailwindcss": "workspace:^", + "@tailwindcss/postcss": "workspace:^" + } + } + `, + 'postcss.config.js': js` + module.exports = { + plugins: { + '@tailwindcss/postcss': {}, + }, + } + `, + 'src/index.css': css` + @reference 'tailwindcss'; + @import './dir-1/bar.css'; + @import './dir-1/dir-2/baz.css'; + @import './dir-1/dir-2/vector.css'; + `, + 'src/dir-1/bar.css': css` + .test1 { + background-image: url('../../resources/image.png'); + } + `, + 'src/dir-1/dir-2/baz.css': css` + .test2 { + background-image: url('../../../resources/image.png'); + } + `, + 'src/dir-1/dir-2/vector.css': css` + @import './dir-3/vector.css'; + .test3 { + background-image: url('../../../resources/vector.svg'); + } + `, + 'src/dir-1/dir-2/dir-3/vector.css': css` + .test4 { + background-image: url('./vector-2.svg'); + } + `, + 'resources/image.png': binary(SIMPLE_IMAGE), + 'resources/vector.svg': svg` + + + + + + + `, + 'src/dir-1/dir-2/dir-3/vector-2.svg': svg` + + + + + + + `, + }, + }, + async ({ fs, exec, expect }) => { + await exec('pnpm postcss src/index.css --output dist/out.css') + + expect(await fs.dumpFiles('dist/out.css')).toMatchInlineSnapshot(` + " + --- dist/out.css --- + .test1 { + background-image: url('../resources/image.png'); + } + .test2 { + background-image: url('../resources/image.png'); + } + .test4 { + background-image: url('./dir-1/dir-2/dir-3/vector-2.svg'); + } + .test3 { + background-image: url('../resources/vector.svg'); + } + " + `) + }, +) diff --git a/integrations/vite/url-rewriting.test.ts b/integrations/vite/url-rewriting.test.ts index a7c6433d4d87..4077df16dd8a 100644 --- a/integrations/vite/url-rewriting.test.ts +++ b/integrations/vite/url-rewriting.test.ts @@ -42,31 +42,36 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
- `, - 'src/main.ts': ts``, 'src/app.css': css` + @reference 'tailwindcss'; @import './dir-1/bar.css'; @import './dir-1/dir-2/baz.css'; @import './dir-1/dir-2/vector.css'; `, 'src/dir-1/bar.css': css` - .bar { + .test1 { background-image: url('../../resources/image.png'); } `, 'src/dir-1/dir-2/baz.css': css` - .baz { + .test2 { background-image: url('../../../resources/image.png'); } `, 'src/dir-1/dir-2/vector.css': css` - .baz { + @import './dir-3/vector.css'; + .test3 { background-image: url('../../../resources/vector.svg'); } `, + 'src/dir-1/dir-2/dir-3/vector.css': css` + .test4 { + background-image: url('./vector-2.svg'); + } + `, 'resources/image.png': binary(SIMPLE_IMAGE), 'resources/vector.svg': svg` @@ -76,6 +81,14 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => { `, + 'src/dir-1/dir-2/dir-3/vector-2.svg': svg` + + + + + + + `, }, }, async ({ fs, exec, expect }) => { @@ -87,7 +100,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => { await fs.expectFileToContain(files[0][0], [SIMPLE_IMAGE]) let images = await fs.glob('dist/**/*.svg') - expect(images).toHaveLength(1) + expect(images).toHaveLength(2) await fs.expectFileToContain(files[0][0], [/\/assets\/vector-.*?\.svg/]) }, diff --git a/packages/@tailwindcss-node/src/compile.ts b/packages/@tailwindcss-node/src/compile.ts index 9f11f1d5a91c..54e0256b96e4 100644 --- a/packages/@tailwindcss-node/src/compile.ts +++ b/packages/@tailwindcss-node/src/compile.ts @@ -40,8 +40,8 @@ function createCompileOptions({ async loadModule(id: string, base: string) { return loadModule(id, base, onDependency, customJsResolver) }, - async loadStylesheet(id: string, base: string) { - let sheet = await loadStylesheet(id, base, onDependency, customCssResolver) + async loadStylesheet(id: string, sheetBase: string) { + let sheet = await loadStylesheet(id, sheetBase, onDependency, customCssResolver) if (shouldRewriteUrls) { sheet.content = await rewriteUrls({ diff --git a/packages/@tailwindcss-postcss/src/index.ts b/packages/@tailwindcss-postcss/src/index.ts index d027fbd9ca67..e21217f12b86 100644 --- a/packages/@tailwindcss-postcss/src/index.ts +++ b/packages/@tailwindcss-postcss/src/index.ts @@ -110,6 +110,7 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin { DEBUG && I.start('Create compiler') let compiler = await compileAst(ast, { base: inputBasePath, + shouldRewriteUrls: true, onDependency: (path) => { context.fullRebuildPaths.push(path) }, From e989430674cd80409cd918a790c4733a98fb8c40 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Thu, 6 Mar 2025 14:44:14 +0100 Subject: [PATCH 2/5] Simplify PostCSS integration test --- integrations/postcss/url-rewriting.test.ts | 23 ++-------------------- 1 file changed, 2 insertions(+), 21 deletions(-) diff --git a/integrations/postcss/url-rewriting.test.ts b/integrations/postcss/url-rewriting.test.ts index 3cd92c323ddd..b07632583a3e 100644 --- a/integrations/postcss/url-rewriting.test.ts +++ b/integrations/postcss/url-rewriting.test.ts @@ -1,8 +1,6 @@ -import { binary, css, js, json, svg, test } from '../utils' +import { css, js, json, test } from '../utils' -const SIMPLE_IMAGE = `iVBORw0KGgoAAAANSUhEUgAAADAAAAAlAQAAAAAsYlcCAAAACklEQVR4AWMYBQABAwABRUEDtQAAAABJRU5ErkJggg==` - -test.debug( +test( 'can rewrite urls in production builds', { fs: { @@ -50,23 +48,6 @@ test.debug( background-image: url('./vector-2.svg'); } `, - 'resources/image.png': binary(SIMPLE_IMAGE), - 'resources/vector.svg': svg` - - - - - - - `, - 'src/dir-1/dir-2/dir-3/vector-2.svg': svg` - - - - - - - `, }, }, async ({ fs, exec, expect }) => { From a1ca7688efc7120ad24f5ea2f24a7208e5071a83 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 6 Mar 2025 17:26:25 +0100 Subject: [PATCH 3/5] Update CHANGELOG.md Co-authored-by: Jordan Pittman --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3d7a4190badf..0ef52fec00f7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,7 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Vite: Fix an issue where `url(…)` rebasing in transitively imported CSS files is not resolved correctly -- PostCSS: Rebase `url(…)` in CSS imported CSS files +- PostCSS: Rebase `url(…)`s in imported CSS files - Ensure utilities are sorted based on their actual property order ([#16995](https://github.com/tailwindlabs/tailwindcss/pull/16995)) ## [4.0.11] - 2025-03-06 From bd4129a3779561ce670b709f084c71632ca9098e Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 6 Mar 2025 17:26:33 +0100 Subject: [PATCH 4/5] Update CHANGELOG.md Co-authored-by: Jordan Pittman --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0ef52fec00f7..b1cd9e084f40 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,7 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed -- Vite: Fix an issue where `url(…)` rebasing in transitively imported CSS files is not resolved correctly +- Vite: Fix `url(…)` rebasing in transitively imported CSS files - PostCSS: Rebase `url(…)`s in imported CSS files - Ensure utilities are sorted based on their actual property order ([#16995](https://github.com/tailwindlabs/tailwindcss/pull/16995)) From 74bebab16de7b4338409a92303f3f4f01a504c4d Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Fri, 7 Mar 2025 12:02:13 +0100 Subject: [PATCH 5/5] Add change log numbers --- CHANGELOG.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a654f6c1cd5b..39f27449f89d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,8 +19,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed -- Vite: Fix `url(…)` rebasing in transitively imported CSS files -- PostCSS: Rebase `url(…)`s in imported CSS files +- Vite: Fix `url(…)` rebasing in transitively imported CSS files ([#16965](https://github.com/tailwindlabs/tailwindcss/pull/16965)) +- PostCSS: Rebase `url(…)`s in imported CSS files ([#16965](https://github.com/tailwindlabs/tailwindcss/pull/16965)) - Ensure utilities are sorted based on their actual property order ([#16995](https://github.com/tailwindlabs/tailwindcss/pull/16995)) - Ensure strings in Pug and Slim templates are handled correctly ([#17000](https://github.com/tailwindlabs/tailwindcss/pull/17000))