fix(assets): avoid splitting , inside base64 value of srcset attr…

…ibute (#15422)
vitejs · Dec 30, 2023 · 8de7bd2 · 8de7bd2
1 parent 56ae92c
commit 8de7bd2
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/packages/vite/src/node/__tests__/utils.spec.ts b/packages/vite/src/node/__tests__/utils.spec.ts
@@ -332,6 +332,12 @@ describe('processSrcSetSync', () => {
       ),
     ).toBe('/base/nested/asset.png 1x, /base/nested/asset.png 2x')
   })
+
+  test('should not split the comma inside base64 value', async () => {
+    const base64 =
+      'data:image/avif;base64,aA+/0= 400w, data:image/avif;base64,bB+/9= 800w'
+    expect(processSrcSetSync(base64, ({ url }) => url)).toBe(base64)
+  })
 })
 
 describe('flattenId', () => {

diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
@@ -787,10 +787,10 @@ export function processSrcSetSync(
 }
 
 const cleanSrcSetRE =
-  /(?:url|image|gradient|cross-fade)\([^)]*\)|"([^"]|(?<=\\)")*"|'([^']|(?<=\\)')*'/g
+  /(?:url|image|gradient|cross-fade)\([^)]*\)|"([^"]|(?<=\\)")*"|'([^']|(?<=\\)')*'|data:\w+\/[\w.+\-]+;base64,[\w+/=]+/g
 function splitSrcSet(srcs: string) {
   const parts: string[] = []
-  // There could be a ',' inside of url(data:...), linear-gradient(...) or "data:..."
+  // There could be a ',' inside of url(data:...), linear-gradient(...), "data:..." or data:...
   const cleanedSrcs = srcs.replace(cleanSrcSetRE, blankReplacer)
   let startIndex = 0
   let splitIndex: number