fix(css): run rewrite plugin if postcss plugin exists (#19371)

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

@@ -1389,10 +1389,11 @@ async function compileCSS(
 
   if (
     urlResolver &&
-    // if there's an @import, we need to add this plugin
-    // regradless of whether it contains url() or image-set(),
-    // because we don't know the content referenced by @import
-    (needInlineImport || hasUrl)
+    // when a postcss plugin is used (including the internal postcss plugins),
+    // we need to add this plugin regardless of whether
+    // this file contains url() or image-set(),
+    // because we don't know the content injected by those plugins
+    (postcssPlugins.length > 0 || isModule || hasUrl)
   ) {
     postcssPlugins.push(
       UrlRewritePostcssPlugin({

playground/css/__tests__/css.spec.ts

@@ -76,6 +76,14 @@ test('postcss config', async () => {
   await untilUpdated(() => getColor(imported), 'red')
 })
 
+test('postcss plugin that injects url()', async () => {
+  const imported = await page.$('.postcss-inject-url')
+  // alias should be resolved
+  expect(await getBg(imported)).toMatch(
+    /localhost(?::\d+)?\/(?:assets\/)?ok.*\.png/,
+  )
+})
+
 sassTest()
 
 test('less', async () => {

playground/css/index.html

@@ -21,6 +21,9 @@ <h1>CSS</h1>
   <p class="postcss">
     <span class="nesting">PostCSS nesting plugin: this should be pink</span>
   </p>
+  <p class="postcss-inject-url">
+    PostCSS plugin: 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

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

playground/css/postcss-inject-url.css

@@ -0,0 +1 @@
+@inject-url;

playground/css/postcss.config.js

@@ -5,7 +5,7 @@ import { normalizePath } from 'vite'
 import postcssNested from 'postcss-nested'
 
 export default {
-  plugins: [postcssNested, testDirDep, testSourceInput],
+  plugins: [postcssNested, testDirDep, testSourceInput, testInjectUrl],
 }
 
 /**
@@ -61,3 +61,25 @@ function testSourceInput() {
   }
 }
 testSourceInput.postcss = true
+
+function testInjectUrl() {
+  return {
+    postcssPlugin: 'inject-url',
+    Once(root, { Rule }) {
+      root.walkAtRules('inject-url', (atRule) => {
+        const rule = new Rule({
+          selector: '.postcss-inject-url',
+          source: atRule.source,
+        })
+        rule.append({
+          prop: 'background',
+          value: "url('=/ok.png')",
+          source: atRule.source,
+        })
+        atRule.after(rule)
+        atRule.remove()
+      })
+    },
+  }
+}
+testInjectUrl.postcss = true