From 1bbff16ff8c65d980d3843316ecbad8b1ec4e67a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=B1=84=EC=A4=80=20-=20CJ=20Lee?=
 <chaejunlee@knu.ac.kr>
Date: Fri, 15 Dec 2023 07:35:39 -0800
Subject: [PATCH] fix(build): use base64 for inline SVG if it contains both
 single and double quotes (#15271)

---
 packages/vite/src/node/plugins/asset.ts        |  5 ++++-
 playground/data-uri/__tests__/data-uri.spec.ts | 12 ++++++++++++
 .../data-uri/double-quote-in-single-quotes.svg |  1 +
 .../double-quotes-in-single-quotes.svg         |  1 +
 playground/data-uri/index.html                 |  7 +++++++
 playground/data-uri/main.js                    | 18 ++++++++++++++++++
 .../data-uri/single-quote-in-double-quotes.svg |  1 +
 .../single-quotes-in-double-quotes.svg         |  1 +
 8 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 playground/data-uri/double-quote-in-single-quotes.svg
 create mode 100644 playground/data-uri/double-quotes-in-single-quotes.svg
 create mode 100644 playground/data-uri/main.js
 create mode 100644 playground/data-uri/single-quote-in-double-quotes.svg
 create mode 100644 playground/data-uri/single-quotes-in-double-quotes.svg

diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
index 4484978a60f784..afc0cb8a9b8d47 100644
--- a/packages/vite/src/node/plugins/asset.ts
+++ b/packages/vite/src/node/plugins/asset.ts
@@ -415,6 +415,8 @@ export async function urlToBuiltUrl(
   )
 }
 
+const nestedQuotesRE = /"[^"']*'[^"]*"|'[^'"]*"[^']*'/
+
 // Inspired by https://github.com/iconify/iconify/blob/main/packages/utils/src/svg/url.ts
 function svgToDataURL(content: Buffer): string {
   const stringContent = content.toString()
@@ -422,7 +424,8 @@ function svgToDataURL(content: Buffer): string {
   // need to be escaped, the gain to use a data URI would be ridiculous if not negative
   if (
     stringContent.includes('<text') ||
-    stringContent.includes('<foreignObject')
+    stringContent.includes('<foreignObject') ||
+    nestedQuotesRE.test(stringContent)
   ) {
     return `data:image/svg+xml;base64,${content.toString('base64')}`
   } else {
diff --git a/playground/data-uri/__tests__/data-uri.spec.ts b/playground/data-uri/__tests__/data-uri.spec.ts
index 7d9ab64594c663..b18012e59d380c 100644
--- a/playground/data-uri/__tests__/data-uri.spec.ts
+++ b/playground/data-uri/__tests__/data-uri.spec.ts
@@ -9,6 +9,18 @@ test('base64', async () => {
   expect(await page.textContent('.base64')).toBe('hi')
 })
 
+test('svg data uri minify', async () => {
+  const sqdqs = await page.getByTestId('sqdqs').boundingBox()
+  const sqsdqs = await page.getByTestId('sqsdqs').boundingBox()
+  const dqsqs = await page.getByTestId('dqsqs').boundingBox()
+  const dqssqs = await page.getByTestId('dqssqs').boundingBox()
+
+  expect(sqdqs.height).toBe(100)
+  expect(sqsdqs.height).toBe(100)
+  expect(dqsqs.height).toBe(100)
+  expect(dqssqs.height).toBe(100)
+})
+
 test.runIf(isBuild)('should compile away the import for build', async () => {
   const file = findAssetFile('index')
   expect(file).not.toMatch('import')
diff --git a/playground/data-uri/double-quote-in-single-quotes.svg b/playground/data-uri/double-quote-in-single-quotes.svg
new file mode 100644
index 00000000000000..d3a5ffc19e3701
--- /dev/null
+++ b/playground/data-uri/double-quote-in-single-quotes.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="100" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path data-test='and then I said "does this work?' fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path></svg>
\ No newline at end of file
diff --git a/playground/data-uri/double-quotes-in-single-quotes.svg b/playground/data-uri/double-quotes-in-single-quotes.svg
new file mode 100644
index 00000000000000..fb8f151a23a598
--- /dev/null
+++ b/playground/data-uri/double-quotes-in-single-quotes.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="100" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path data-test='and then I said "does this work?"' fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path></svg>
\ No newline at end of file
diff --git a/playground/data-uri/index.html b/playground/data-uri/index.html
index 32cc458940e60c..597c3a204f36c9 100644
--- a/playground/data-uri/index.html
+++ b/playground/data-uri/index.html
@@ -12,3 +12,10 @@
     document.querySelector(el).textContent = text
   }
 </script>
+
+<script type="module" src="./main.js"></script>
+
+<div id="sqdqs"></div>
+<div id="sqsdqs"></div>
+<div id="dqsqs"></div>
+<div id="dqssqs"></div>
diff --git a/playground/data-uri/main.js b/playground/data-uri/main.js
new file mode 100644
index 00000000000000..63326fdb1b4781
--- /dev/null
+++ b/playground/data-uri/main.js
@@ -0,0 +1,18 @@
+import sqdqs from './single-quote-in-double-quotes.svg'
+import sqsdqs from './single-quotes-in-double-quotes.svg'
+import dqsqs from './double-quote-in-single-quotes.svg'
+import dqssqs from './double-quotes-in-single-quotes.svg'
+
+document.querySelector('#sqdqs').innerHTML = `
+  <img data-testid="sqdqs" src="${sqdqs}" class="sqdqs" alt="load failed" />
+`
+document.querySelector('#sqsdqs').innerHTML = `
+  <img data-testid="sqsdqs" src="${sqsdqs}" class="sqsdqs" alt="load failed" />
+`
+
+document.querySelector('#dqsqs').innerHTML = `
+  <img data-testid="dqsqs" src="${dqsqs}" class="dqsqs" alt="load failed" />
+`
+document.querySelector('#dqssqs').innerHTML = `
+  <img data-testid="dqssqs" src="${dqssqs}" class="dqssqs" alt="load failed" />
+`
diff --git a/playground/data-uri/single-quote-in-double-quotes.svg b/playground/data-uri/single-quote-in-double-quotes.svg
new file mode 100644
index 00000000000000..69974c97773921
--- /dev/null
+++ b/playground/data-uri/single-quote-in-double-quotes.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="100" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path data-test="vite's the world's best" fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path></svg>
\ No newline at end of file
diff --git a/playground/data-uri/single-quotes-in-double-quotes.svg b/playground/data-uri/single-quotes-in-double-quotes.svg
new file mode 100644
index 00000000000000..0489e7b39e8b5a
--- /dev/null
+++ b/playground/data-uri/single-quotes-in-double-quotes.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="100" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path data-test="(\''/)"  fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path></svg>
\ No newline at end of file