fix(build): use base64 for inline SVG if it contains both single and double quotes (#15271)

chaejunlee · web-flow · commit 1bbff16ff8c6 · 2023-12-15T16:35:39.000+01:00
diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
@@ -415,14 +415,17 @@ 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()
   // If the SVG contains some text or HTML, any transformation is unsafe, and given that double quotes would then
   // 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
@@ -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
@@ -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>
diff --git a/playground/data-uri/double-quotes-in-single-quotes.svg 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>
diff --git 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
@@ -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
@@ -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>
diff --git a/playground/data-uri/single-quotes-in-double-quotes.svg 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>
