Skip to content

Commit 6fbb5e0

Browse files
authored
fix(css): handle url replacing when preprocessing with lightningcss (#17364)
1 parent f2d52f1 commit 6fbb5e0

File tree

2 files changed

+52
-0
lines changed

2 files changed

+52
-0
lines changed

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

+50
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
cssUrlRE,
1010
getEmptyChunkReplacer,
1111
hoistAtRules,
12+
preprocessCSS,
1213
} from '../../plugins/css'
1314

1415
describe('search css url function', () => {
@@ -65,6 +66,7 @@ background: #f0f;
6566
}`,
6667
},
6768
{
69+
configFile: false,
6870
resolve: {
6971
alias: [
7072
{
@@ -101,6 +103,7 @@ position: fixed;
101103

102104
test('custom generateScopedName', async () => {
103105
const { transform, resetMock } = await createCssPluginTransform(undefined, {
106+
configFile: false,
104107
css: {
105108
modules: {
106109
generateScopedName: 'custom__[hash:base64:5]',
@@ -338,3 +341,50 @@ require("other-module");`
338341
)
339342
})
340343
})
344+
345+
describe('preprocessCSS', () => {
346+
test('works', async () => {
347+
const resolvedConfig = await resolveConfig({ configFile: false }, 'serve')
348+
const result = await preprocessCSS(
349+
`\
350+
.foo {
351+
color:red;
352+
background: url(./foo.png);
353+
}`,
354+
'foo.css',
355+
resolvedConfig,
356+
)
357+
expect(result.code).toMatchInlineSnapshot(`
358+
".foo {
359+
color:red;
360+
background: url(./foo.png);
361+
}"
362+
`)
363+
})
364+
365+
test('works with lightningcss', async () => {
366+
const resolvedConfig = await resolveConfig(
367+
{
368+
configFile: false,
369+
css: { transformer: 'lightningcss' },
370+
},
371+
'serve',
372+
)
373+
const result = await preprocessCSS(
374+
`\
375+
.foo {
376+
color: red;
377+
background: url(./foo.png);
378+
}`,
379+
'foo.css',
380+
resolvedConfig,
381+
)
382+
expect(result.code).toMatchInlineSnapshot(`
383+
".foo {
384+
color: red;
385+
background: url("./foo.png");
386+
}
387+
"
388+
`)
389+
})
390+
})

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

+2
Original file line numberDiff line numberDiff line change
@@ -2780,6 +2780,8 @@ async function compileLightningCSS(
27802780
if (urlReplacer) {
27812781
const replaceUrl = await urlReplacer(dep.url, id)
27822782
css = css.replace(dep.placeholder, () => replaceUrl)
2783+
} else {
2784+
css = css.replace(dep.placeholder, () => dep.url)
27832785
}
27842786
break
27852787
default:

0 commit comments

Comments
 (0)