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?= 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(' { 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 @@ + \ 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 @@ + \ 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 } + + + +
+
+
+
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 = ` + load failed +` +document.querySelector('#sqsdqs').innerHTML = ` + load failed +` + +document.querySelector('#dqsqs').innerHTML = ` + load failed +` +document.querySelector('#dqssqs').innerHTML = ` + 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 @@ + \ 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 @@ + \ No newline at end of file