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

Author: bluwy

Diff for: 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 for: 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: