fix(css): handle url replacing when preprocessing with lightningcss (#…

…17364)
vitejs · Jun 3, 2024 · 6fbb5e0 · 6fbb5e0
1 parent f2d52f1
commit 6fbb5e0
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 0 deletions.
diff --git a/packages/vite/src/node/__tests__/plugins/css.spec.ts b/packages/vite/src/node/__tests__/plugins/css.spec.ts
@@ -9,6 +9,7 @@ import {
  cssUrlRE,
  getEmptyChunkReplacer,
  hoistAtRules,
+ preprocessCSS,
 } from '../../plugins/css'
 
 describe('search css url function', () => {
@@ -65,6 +66,7 @@ background: #f0f;
 }`,
  },
  {
+ configFile: false,
  resolve: {
  alias: [
  {
@@ -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]',
@@ -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");
+ }
+ "
+ `)
+ })
+})
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
@@ -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: