From 46102e8a4ebee70450fe88c136321475bd6d5966 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 16 Jun 2025 10:07:03 -0400 Subject: [PATCH 1/4] Allow users to disable url rewriting in the PostCSS plugin --- integrations/postcss/url-rewriting.test.ts | 75 ++++++++++++++++++++++ packages/@tailwindcss-postcss/src/index.ts | 7 +- 2 files changed, 81 insertions(+), 1 deletion(-) diff --git a/integrations/postcss/url-rewriting.test.ts b/integrations/postcss/url-rewriting.test.ts index b07632583a3e..fdfca84a8c41 100644 --- a/integrations/postcss/url-rewriting.test.ts +++ b/integrations/postcss/url-rewriting.test.ts @@ -72,3 +72,78 @@ test( `) }, ) + +test( + 'url rewriting can be disabled', + { + fs: { + 'package.json': json` + { + "dependencies": { + "postcss": "^8", + "postcss-cli": "^10", + "tailwindcss": "workspace:^", + "@tailwindcss/postcss": "workspace:^" + } + } + `, + 'postcss.config.js': js` + module.exports = { + plugins: { + '@tailwindcss/postcss': { + rewriteUrls: false, + }, + }, + } + `, + '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'); + } + `, + }, + }, + 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('./vector-2.svg'); + } + .test3 { + background-image: url('../../../resources/vector.svg'); + } + " + `) + }, +) diff --git a/packages/@tailwindcss-postcss/src/index.ts b/packages/@tailwindcss-postcss/src/index.ts index 8a37f542c94f..e5932d7a6628 100644 --- a/packages/@tailwindcss-postcss/src/index.ts +++ b/packages/@tailwindcss-postcss/src/index.ts @@ -53,11 +53,16 @@ export type PluginOptions = { // Optimize and minify the output CSS. optimize?: boolean | { minify?: boolean } + + // Whether or not we should rewrite any encountered urls + // default: true + rewriteUrls?: boolean } function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin { let base = opts.base ?? process.cwd() let optimize = opts.optimize ?? process.env.NODE_ENV === 'production' + let shouldRewriteUrls = opts.rewriteUrls ?? true return { postcssPlugin: '@tailwindcss/postcss', @@ -123,7 +128,7 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin { let compiler = await compileAst(ast, { from: result.opts.from, base: inputBasePath, - shouldRewriteUrls: true, + shouldRewriteUrls, onDependency: (path) => context.fullRebuildPaths.push(path), // In CSS Module files, we have to disable the `@property` polyfill since these will // emit global `*` rules which are considered to be non-pure and will cause builds From 011375682224820b3f202d157fc75f3e2110f60e Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 16 Jun 2025 10:18:06 -0400 Subject: [PATCH 2/4] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index eace875c6b94..43ac38748a2e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fix trailing `)` from interfering with extraction in Clojure keywords ([#18345](https://github.com/tailwindlabs/tailwindcss/pull/18345)) - Detect classes inside Elixir charlist, word list, and string sigils ([#18432](https://github.com/tailwindlabs/tailwindcss/pull/18432)) - Track source locations through `@plugin` and `@config` ([#18345](https://github.com/tailwindlabs/tailwindcss/pull/18345)) +- Add option to disable url rewriting in `@tailwindcss/postcss` ([#18321](https://github.com/tailwindlabs/tailwindcss/pull/18321)) ## [4.1.11] - 2025-06-26 From 2b7c1abaeeb80efbb190186847df3011d1349d62 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 7 Jul 2025 13:09:44 -0400 Subject: [PATCH 3/4] Update comments for plugin options --- packages/@tailwindcss-postcss/src/index.ts | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/@tailwindcss-postcss/src/index.ts b/packages/@tailwindcss-postcss/src/index.ts index e5932d7a6628..6e6ac632b914 100644 --- a/packages/@tailwindcss-postcss/src/index.ts +++ b/packages/@tailwindcss-postcss/src/index.ts @@ -48,14 +48,23 @@ function getContextFromCache(inputFile: string, opts: PluginOptions): CacheEntry } export type PluginOptions = { - // The base directory to scan for class candidates. + /** + * The base directory to scan for class candidates. + * + * Defaults to the current working directory. + */ base?: string - // Optimize and minify the output CSS. + /** + * Optimize and minify the output CSS. + */ optimize?: boolean | { minify?: boolean } - // Whether or not we should rewrite any encountered urls - // default: true + /** + * Enable or disable asset URL rewriting. + * + * Defaults to `true`. + */ rewriteUrls?: boolean } From 24573e4638326e4cdb4ef6a97942aa7ebd9f94d5 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 8 Jul 2025 15:08:35 -0400 Subject: [PATCH 4/4] Tweak API name --- integrations/postcss/url-rewriting.test.ts | 2 +- packages/@tailwindcss-postcss/src/index.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/integrations/postcss/url-rewriting.test.ts b/integrations/postcss/url-rewriting.test.ts index fdfca84a8c41..bac9d95d58f9 100644 --- a/integrations/postcss/url-rewriting.test.ts +++ b/integrations/postcss/url-rewriting.test.ts @@ -91,7 +91,7 @@ test( module.exports = { plugins: { '@tailwindcss/postcss': { - rewriteUrls: false, + transformAssetUrls: false, }, }, } diff --git a/packages/@tailwindcss-postcss/src/index.ts b/packages/@tailwindcss-postcss/src/index.ts index 6e6ac632b914..c0fa5fe971c6 100644 --- a/packages/@tailwindcss-postcss/src/index.ts +++ b/packages/@tailwindcss-postcss/src/index.ts @@ -65,13 +65,13 @@ export type PluginOptions = { * * Defaults to `true`. */ - rewriteUrls?: boolean + transformAssetUrls?: boolean } function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin { let base = opts.base ?? process.cwd() let optimize = opts.optimize ?? process.env.NODE_ENV === 'production' - let shouldRewriteUrls = opts.rewriteUrls ?? true + let shouldRewriteUrls = opts.transformAssetUrls ?? true return { postcssPlugin: '@tailwindcss/postcss',