Skip to content

Commit

Permalink
fix(css): handle url replacing when preprocessing with lightningcss (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
bluwy authored Jun 3, 2024
1 parent f2d52f1 commit 6fbb5e0
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 0 deletions.
50 changes: 50 additions & 0 deletions packages/vite/src/node/__tests__/plugins/css.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
cssUrlRE,
getEmptyChunkReplacer,
hoistAtRules,
preprocessCSS,
} from '../../plugins/css'

describe('search css url function', () => {
Expand Down Expand Up @@ -65,6 +66,7 @@ background: #f0f;
}`,
},
{
configFile: false,
resolve: {
alias: [
{
Expand Down Expand Up @@ -101,6 +103,7 @@ position: fixed;

test('custom generateScopedName', async () => {
const { transform, resetMock } = await createCssPluginTransform(undefined, {
configFile: false,
css: {
modules: {
generateScopedName: 'custom__[hash:base64:5]',
Expand Down Expand Up @@ -338,3 +341,50 @@ require("other-module");`
)
})
})

describe('preprocessCSS', () => {
test('works', async () => {
const resolvedConfig = await resolveConfig({ configFile: false }, 'serve')
const result = await preprocessCSS(
`\
.foo {
color:red;
background: url(./foo.png);
}`,
'foo.css',
resolvedConfig,
)
expect(result.code).toMatchInlineSnapshot(`
".foo {
color:red;
background: url(./foo.png);
}"
`)
})

test('works with lightningcss', async () => {
const resolvedConfig = await resolveConfig(
{
configFile: false,
css: { transformer: 'lightningcss' },
},
'serve',
)
const result = await preprocessCSS(
`\
.foo {
color: red;
background: url(./foo.png);
}`,
'foo.css',
resolvedConfig,
)
expect(result.code).toMatchInlineSnapshot(`
".foo {
color: red;
background: url("./foo.png");
}
"
`)
})
})
2 changes: 2 additions & 0 deletions packages/vite/src/node/plugins/css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2780,6 +2780,8 @@ async function compileLightningCSS(
if (urlReplacer) {
const replaceUrl = await urlReplacer(dep.url, id)
css = css.replace(dep.placeholder, () => replaceUrl)
} else {
css = css.replace(dep.placeholder, () => dep.url)
}
break
default:
Expand Down

0 comments on commit 6fbb5e0

Please sign in to comment.