fix(assets): fix svg inline in css url (#14714)

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

@@ -165,6 +165,7 @@ const inlineRE = /[?&]inline\b/
 const inlineCSSRE = /[?&]inline-css\b/
 const styleAttrRE = /[?&]style-attr\b/
 const varRE = /^var\(/i
+const nonEscapedDoubleQuoteRe = /(?<!\\)(")/g
 
 const cssBundleName = 'style.css'
 
@@ -1512,10 +1513,19 @@ async function doUrlReplace(
     return matched
   }
 
-  const newUrl = await replacer(rawUrl)
+  let newUrl = await replacer(rawUrl)
+  // The new url might need wrapping even if the original did not have it, e.g. if a space was added during replacement
   if (wrap === '' && newUrl !== encodeURI(newUrl)) {
-    // The new url might need wrapping even if the original did not have it, e.g. if a space was added during replacement
-    wrap = "'"
+    wrap = '"'
+  }
+  // If wrapping in single quotes and newUrl also contains single quotes, switch to double quotes.
+  // Give preference to double quotes since SVG inlining converts double quotes to single quotes.
+  if (wrap === "'" && newUrl.includes("'")) {
+    wrap = '"'
+  }
+  // Escape double quotes if they exist (they also tend to be rarer than single quotes)
+  if (wrap === '"' && newUrl.includes('"')) {
+    newUrl = newUrl.replace(nonEscapedDoubleQuoteRe, '\\"')
   }
   return `${funcName}(${wrap}${newUrl}${wrap})`
 }

playground/assets/__tests__/assets.spec.ts

@@ -253,6 +253,18 @@ describe('css url() references', () => {
     // generate non-relative base for public path in CSS
     expect(css).not.toMatch(`../icon.png`)
   })
+
+  test('url() with svg', async () => {
+    expect(await getBg('.css-url-svg')).toMatch(
+      isBuild ? /data:image\/svg\+xml,.+/ : '/foo/bar/nested/fragment-bg.svg',
+    )
+  })
+
+  test('image-set() with svg', async () => {
+    expect(await getBg('.css-image-set-svg')).toMatch(
+      isBuild ? /data:image\/svg\+xml,.+/ : '/foo/bar/nested/fragment-bg.svg',
+    )
+  })
 })
 
 describe('image', () => {

playground/assets/index.html

@@ -115,6 +115,14 @@ <h2>CSS url references</h2>
   <span style="background: #fff">CSS background (aliased)</span>
 </div>
 
+<div class="css-url-svg">
+  <span style="background: #fff">CSS SVG background</span>
+</div>
+
+<div class="css-image-set-svg">
+  <span style="background: #fff">CSS SVG background with image-set</span>
+</div>
+
 <h2>Unicode URL</h2>
 <div>
   <code class="unicode-url"></code>