Enable URL rewriting for PostCSS

tailwindlabs · philipp-spiess · Mar 7, 2025 · Mar 5, 2025 · Mar 6, 2025 · Mar 6, 2025
commit f8ebd54524f3c818b0191a9ce74f7cfd99086e95
@@ -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

@@ -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`
+        <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
+          <rect width="100%" height="100%" fill="red" />
+          <circle cx="200" cy="100" r="80" fill="green" />
+          <rect width="100%" height="100%" fill="red" />
+          <circle cx="200" cy="100" r="80" fill="green" />
+        </svg>
+      `,
+      'src/dir-1/dir-2/dir-3/vector-2.svg': svg`
+        <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
+          <rect width="100%" height="100%" fill="blue" />
+          <circle cx="200" cy="100" r="80" fill="green" />
+          <rect width="100%" height="100%" fill="red" />
+          <circle cx="200" cy="100" r="80" fill="pink" />
+        </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');
+      }
+      "
+    `)
+  },
+)
@@ -42,31 +42,36 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
             </head>
             <body>
               <div id="app"></div>
-              <script type="module" src="./src/main.ts"></script>
             </body>
           </html>
         `,
-        '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`
           <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
@@ -76,6 +81,14 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
             <circle cx="200" cy="100" r="80" fill="green" />
           </svg>
         `,
+        'src/dir-1/dir-2/dir-3/vector-2.svg': svg`
+          <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
+            <rect width="100%" height="100%" fill="blue" />
+            <circle cx="200" cy="100" r="80" fill="green" />
+            <rect width="100%" height="100%" fill="red" />
+            <circle cx="200" cy="100" r="80" fill="pink" />
+          </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/])
     },

@@ -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({

@@ -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)
               },