fix(css): escape double quotes in url() when lightningcss is used (#18997)

Author: sapphi-red

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

@@ -3237,21 +3237,25 @@ async function compileLightningCSS(
   let css = decoder.decode(res.code)
   for (const dep of res.dependencies!) {
     switch (dep.type) {
-      case 'url':
+      case 'url': {
+        let replaceUrl: string
         if (skipUrlReplacer(dep.url)) {
-          css = css.replace(dep.placeholder, () => dep.url)
-          break
-        }
-        if (urlReplacer) {
-          const replaceUrl = await urlReplacer(
-            dep.url,
-            toAbsolute(dep.loc.filePath),
-          )
-          css = css.replace(dep.placeholder, () => replaceUrl)
+          replaceUrl = dep.url
+        } else if (urlReplacer) {
+          replaceUrl = await urlReplacer(dep.url, toAbsolute(dep.loc.filePath))
         } else {
-          css = css.replace(dep.placeholder, () => dep.url)
+          replaceUrl = dep.url
         }
+
+        css = css.replace(
+          dep.placeholder,
+          // lightningcss always generates `url("placeholder")`
+          // (`url('placeholder')`, `url(placeholder)` is not generated)
+          // so escape double quotes
+          () => replaceUrl.replaceAll('"', '\\"'),
+        )
         break
+      }
       default:
         throw new Error(`Unsupported dependency type: ${dep.type}`)
     }

playground/assets/__tests__/assets.spec.ts

@@ -276,6 +276,12 @@ describe('css url() references', () => {
     expect(bg).toMatch(assetMatch)
   })
 
+  test('preinlined SVG', async () => {
+    expect(await getBg('.css-url-preinlined-svg')).toMatch(
+      /data:image\/svg\+xml,.+/,
+    )
+  })
+
   test.runIf(isBuild)('generated paths in CSS', () => {
     const css = findAssetFile(/index-[-\w]{8}\.css$/, 'foo')
 

playground/assets/css/css-url.css

@@ -139,6 +139,9 @@ <h2>CSS url references</h2>
 <div class="css-url-aliased">
   <span style="background: #fff">CSS background (aliased)</span>
 </div>
+<div class="css-url-preinlined-svg">
+  <span style="background: #fff">CSS background (pre inlined SVG)</span>
+</div>
 <div class="css-manual-chunks-relative">
   <span style="background: #fff"
     >CSS nested manual chunks relative base background</span

playground/assets/index.html

@@ -87,3 +87,9 @@ test('aliased asset', async () => {
   const bg = await getBg('.css-url-aliased')
   expect(bg).toMatch('data:image/svg+xml,')
 })
+
+test('preinlined SVG', async () => {
+  expect(await getBg('.css-url-preinlined-svg')).toMatch(
+    /data:image\/svg\+xml,.+/,
+  )
+})

playground/css-lightningcss/__tests__/css-lightningcss.spec.ts

@@ -33,6 +33,9 @@ <h1>Lightning CSS</h1>
   <div class="css-url-aliased">
     <span style="background: #fff">CSS background (aliased)</span>
   </div>
+  <div class="css-url-preinlined-svg">
+    <span style="background: #fff">CSS background (pre inlined SVG)</span>
+  </div>
 </div>
 
 <script type="module" src="./main.js"></script>