fix(assets): avoid splitting , inside query parameter of image URI in srcset property (#16081)

Author: caseycarroll

packages/vite/src/node/__tests__/utils.spec.ts

@@ -339,6 +339,20 @@ describe('processSrcSetSync', () => {
     expect(processSrcSetSync(base64, ({ url }) => url)).toBe(base64)
   })
 
+  test('should not split the comma inside image URI', async () => {
+    const imageURIWithComma =
+      'asset.png?param1=true,param2=false 400w, asset.png?param1=true,param2=false 800w'
+    expect(processSrcSetSync(imageURIWithComma, ({ url }) => url)).toBe(
+      imageURIWithComma,
+    )
+  })
+
+  test('should handle srcset when descriptor is not present', async () => {
+    const srcsetNoDescriptor = 'asset.png, test.png 400w'
+    const result = 'asset.png, test.png 400w'
+    expect(processSrcSetSync(srcsetNoDescriptor, ({ url }) => url)).toBe(result)
+  })
+
   test('should not break a regular URL in srcSet', async () => {
     const source = 'https://anydomain/image.jpg'
     expect(

packages/vite/src/node/utils.ts

@@ -772,10 +772,17 @@ export function processSrcSetSync(
 }
 
 const cleanSrcSetRE =
-  /(?:url|image|gradient|cross-fade)\([^)]*\)|"([^"]|(?<=\\)")*"|'([^']|(?<=\\)')*'|data:\w+\/[\w.+\-]+;base64,[\w+/=]+/g
+  /(?:url|image|gradient|cross-fade)\([^)]*\)|"([^"]|(?<=\\)")*"|'([^']|(?<=\\)')*'|data:\w+\/[\w.+\-]+;base64,[\w+/=]+|\?\S+,/g
 function splitSrcSet(srcs: string) {
   const parts: string[] = []
-  // There could be a ',' inside of url(data:...), linear-gradient(...), "data:..." or data:...
+  /**
+   * There could be a ',' inside of:
+   * - url(data:...)
+   * - linear-gradient(...)
+   * - "data:..."
+   * - data:...
+   * - query parameter ?...
+   */
   const cleanedSrcs = srcs.replace(cleanSrcSetRE, blankReplacer)
   let startIndex = 0
   let splitIndex: number