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

[caseycarroll]

fixes #16077

Description

When building list of image candidates, splitSrcSet breaks image URIs that contain query parameters with comma delimited values i.e. asset.png?param1=test,param2=test.

Current implementation looks at srcset string and splits it at comma delimiters, including commas found in imageURIs. As a result, this srcset:

asset.png?param1=test,param2=test 400w, asset.png?param1=test,param2=test 800w,

...is split into

["asset.png?param1=test,", "param2=test 400w", "asset.png?param1=test,", "param2=test 800w", ]

...creating invalid image links that do not match the original HTML.

Additional context

Update splitSrcSet to split string of srcs by commas followed by whitespace characters. This excludes commas found in the imageURI.

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines, especially the Pull Request Guidelines.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Update the corresponding documentation if needed.
• Ideally, include relevant tests that fail without this PR but pass with it.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[caseycarroll]

I'm not sure what the protocol is for adding new dependencies. This package covers the case my PR aims to solve. It also covers the base64 cases. https://github.com/sindresorhus/srcset/

Should Vite leverage this package instead of hand writing a srcset parser?

[caseycarroll]

Here is an alternative solution that uses the srcset package. caseycarroll/vite@main...caseycarroll:vite:add-srcset-dep

[caseycarroll]

Decided to change my original approach. srcs is split using a regex that matches commas followed by whitespace.

[patak-dev]

It seems the algorithm is a bit more complex, see:

If present, its value must consist of one or more image candidate strings, each separated from the next by a U+002C COMMA character (,). If an image candidate string contains no descriptors and no ASCII whitespace after the URL, the following image candidate string, if there is one, must begin with one or more ASCII whitespace.

From https://html.spec.whatwg.org/multipage/images.html#srcset-attribute

[caseycarroll]

Ah, good callout. If I understand the spec correctly, image candidate strings can be separated by a comma with 0 whitespace. My solution expects a comma and whitespace after each image candidate string. My solution would fail to parse:

image.jpg/400 400w,image.jpg/500 500w

[caseycarroll]

I updated my PR with a different approach. I added an additional pattern in the cleanSrSetRE RegEx. This pattern matches a string that contains a question mark followed by a comma. This pattern is intended to match the part of image URLs with query strings that contain commas.

If matched, the string is replaced by blank spaces so the following code can split the srcset by commas that specifically follow descriptors.