Skip to content

Commit bcdb51a

Browse files
authoredFeb 6, 2025··
fix(css): run rewrite plugin if postcss plugin exists (#19371)
1 parent 17b0f6e commit bcdb51a

File tree

6 files changed

+41
-5
lines changed

6 files changed

+41
-5
lines changed
 

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

+5-4
Original file line numberDiff line numberDiff line change
@@ -1389,10 +1389,11 @@ async function compileCSS(
13891389

13901390
if (
13911391
urlResolver &&
1392-
// if there's an @import, we need to add this plugin
1393-
// regradless of whether it contains url() or image-set(),
1394-
// because we don't know the content referenced by @import
1395-
(needInlineImport || hasUrl)
1392+
// when a postcss plugin is used (including the internal postcss plugins),
1393+
// we need to add this plugin regardless of whether
1394+
// this file contains url() or image-set(),
1395+
// because we don't know the content injected by those plugins
1396+
(postcssPlugins.length > 0 || isModule || hasUrl)
13961397
) {
13971398
postcssPlugins.push(
13981399
UrlRewritePostcssPlugin({

‎playground/css/__tests__/css.spec.ts

+8
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,14 @@ test('postcss config', async () => {
7676
await untilUpdated(() => getColor(imported), 'red')
7777
})
7878

79+
test('postcss plugin that injects url()', async () => {
80+
const imported = await page.$('.postcss-inject-url')
81+
// alias should be resolved
82+
expect(await getBg(imported)).toMatch(
83+
/localhost(?::\d+)?\/(?:assets\/)?ok.*\.png/,
84+
)
85+
})
86+
7987
sassTest()
8088

8189
test('less', async () => {

‎playground/css/index.html

+3
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ <h1>CSS</h1>
2121
<p class="postcss">
2222
<span class="nesting">PostCSS nesting plugin: this should be pink</span>
2323
</p>
24+
<p class="postcss-inject-url">
25+
PostCSS plugin: this should have a background image
26+
</p>
2427

2528
<p class="sass">SASS: This should be orange</p>
2629
<p class="sass-at-import">

‎playground/css/main.js

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import './less.less'
66
import './less-plugin.less'
77
import './stylus.styl'
88
import './manual-chunk.css'
9+
import './postcss-inject-url.css'
910

1011
import urlCss from './url-imported.css?url'
1112
appendLinkStylesheet(urlCss)

‎playground/css/postcss-inject-url.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@inject-url;

‎playground/css/postcss.config.js

+23-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { normalizePath } from 'vite'
55
import postcssNested from 'postcss-nested'
66

77
export default {
8-
plugins: [postcssNested, testDirDep, testSourceInput],
8+
plugins: [postcssNested, testDirDep, testSourceInput, testInjectUrl],
99
}
1010

1111
/**
@@ -61,3 +61,25 @@ function testSourceInput() {
6161
}
6262
}
6363
testSourceInput.postcss = true
64+
65+
function testInjectUrl() {
66+
return {
67+
postcssPlugin: 'inject-url',
68+
Once(root, { Rule }) {
69+
root.walkAtRules('inject-url', (atRule) => {
70+
const rule = new Rule({
71+
selector: '.postcss-inject-url',
72+
source: atRule.source,
73+
})
74+
rule.append({
75+
prop: 'background',
76+
value: "url('=/ok.png')",
77+
source: atRule.source,
78+
})
79+
atRule.after(rule)
80+
atRule.remove()
81+
})
82+
},
83+
}
84+
}
85+
testInjectUrl.postcss = true

0 commit comments

Comments
 (0)
Please sign in to comment.