From eef4aaa063ed420c213cb9e24f680230cf2132b2 Mon Sep 17 00:00:00 2001
From: Bjorn Lu <bjornlu.dev@gmail.com>
Date: Fri, 20 Oct 2023 20:53:45 +0800
Subject: [PATCH] fix(assets): fix svg inline in css url (#14714)

---
 packages/vite/src/node/plugins/css.ts      | 16 +++++++++++++---
 playground/assets/__tests__/assets.spec.ts | 12 ++++++++++++
 playground/assets/css/css-url.css          | 13 +++++++++++++
 playground/assets/index.html               |  8 ++++++++
 4 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index c7ef8e6608fac6..638c336fda74ed 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/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})`
 }
diff --git a/playground/assets/__tests__/assets.spec.ts b/playground/assets/__tests__/assets.spec.ts
index c44127ed73dd70..fb27949dd68832 100644
--- a/playground/assets/__tests__/assets.spec.ts
+++ b/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', () => {
diff --git a/playground/assets/css/css-url.css b/playground/assets/css/css-url.css
index 52a8e5c0a31194..06f998f20bfea5 100644
--- a/playground/assets/css/css-url.css
+++ b/playground/assets/css/css-url.css
@@ -107,3 +107,16 @@ urls inside comments should be ignored
   background-size: 10px;
 }
 */
+
+.css-url-svg {
+  background: url(../nested/fragment-bg.svg);
+  background-size: 10px;
+}
+
+.css-image-set-svg {
+  background: -webkit-image-set(
+    url('../nested/fragment-bg.svg') 1x,
+    url('../nested/fragment-bg.svg') 2x
+  );
+  background-size: 10px;
+}
diff --git a/playground/assets/index.html b/playground/assets/index.html
index d1d6042e9836a1..91a48470bfc9d7 100644
--- a/playground/assets/index.html
+++ b/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>