fix(css): read the live root in the OnceExit url rewriter (fix #23348)

packages/vite/src/node/plugins/css.ts

@@ -2104,7 +2104,13 @@ const UrlRewritePostcssPlugin: PostCSS.PluginCreator<{
 
   return {
     postcssPlugin: 'vite-url-rewrite',
-    OnceExit(root) {
+    OnceExit(root, { result }) {
+      // a plugin earlier in the pipeline (e.g. postcss-lightningcss) may
+      // reassign `result.root` to a freshly parsed tree from its own
+      // OnceExit hook. PostCSS keeps passing the pre-reassignment `root` to
+      // subsequently run OnceExit hooks, so read the live root off `result`
+      // instead of trusting the argument.
+      root = result.root
       const promises: Promise<void>[] = []
       root.walkDecls((declaration) => {
         const importer = declaration.source?.input.file

playground/css/__tests__/css.spec.ts

@@ -12,3 +12,13 @@ test('postcss plugin that injects url() at OnceExit', async () => {
     isBundled ? /base64/ : '/injected-source/injected-bg.png',
   )
 })
+
+// a plugin that reassigns `result.root` at OnceExit (like postcss-lightningcss
+// does) instead of mutating the existing root in place
+test('postcss plugin that reassigns result.root at OnceExit', async () => {
+  await page.goto(viteTestUrl)
+  const imported = await page.waitForSelector('.replace-root-once-exit')
+  expect(await getBg(imported)).toMatch(
+    isBundled ? /base64/ : '/injected-source/injected-bg.png',
+  )
+})

playground/css/index.html

@@ -27,6 +27,10 @@ <h1>CSS</h1>
   <p class="inject-url-once-exit">
     PostCSS plugin injecting at OnceExit: this should have a background image
   </p>
+  <p class="replace-root-once-exit">
+    PostCSS plugin replacing result.root at OnceExit: this should have a
+    background image
+  </p>
 
   <p class="sass">SASS: This should be orange</p>
   <p class="sass-at-import">

playground/css/main.js

@@ -7,6 +7,7 @@ import './less-plugin.less'
 import './stylus.styl'
 import './manual-chunk.css'
 import './postcss-inject-url.css'
+import './replace-root.css'
 
 import urlCss from './url-imported.css?url'
 appendLinkStylesheet(urlCss)

playground/css/postcss.config.js

@@ -11,6 +11,7 @@ export default {
     testSourceInput,
     testInjectUrl,
     testInjectUrlOnceExit,
+    testReplaceRootOnceExit,
   ],
 }
 
@@ -116,3 +117,26 @@ function testInjectUrlOnceExit() {
   }
 }
 testInjectUrlOnceExit.postcss = true
+
+/**
+ * A plugin for testing url() rewriting when a plugin reassigns `result.root`
+ * to a freshly parsed tree at OnceExit instead of mutating the existing root
+ * in place (this is what postcss-lightningcss does)
+ */
+function testReplaceRootOnceExit() {
+  return {
+    postcssPlugin: 'replace-root-once-exit',
+    OnceExit(root, { result, postcss }) {
+      if (!root.source?.input.file?.endsWith('replace-root.css')) return
+      root.walkAtRules('replace-root-once-exit', (atRule) => {
+        atRule.replaceWith(
+          '.replace-root-once-exit { background: url("./injected-source/injected-bg.png") }',
+        )
+      })
+      result.root = postcss.parse(root.toString(), {
+        from: root.source.input.file,
+      })
+    },
+  }
+}
+testReplaceRootOnceExit.postcss = true

playground/css/replace-root.css

@@ -0,0 +1 @@
+@replace-root-once-exit;