Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-ruqamh (Open reproduction)

Thanks for providing this use case. It's one I hadn't considered when fixing #16081.

Now having spent some time in the srcset parsing code, the solution to your use case is not immediately obvious to me. The parser uses a regex to strip out patterns that contain commas, replaces those patterns with spaces, then adds the pattern back into the string after each srcset has been split by a ,. These regex patterns match characters containing commas that supersede something specific. https://github.com/caseycarroll/vite/blob/1cb74f8944abc344fc37d180671d605031b8fe4f/packages/vite/src/node/utils.ts#L772

In my case, I stripped out characters that were in the middle of a word, superseded a ? and contained a ,. For your case, the pattern isn't as clear to me since image URLs can be relative paths.

There is the srcset package, but it's output doesn't align with what Vite expects. Vite wants: [{url: 'some url', descriptor: '100vw'}] and this package returns:

 [
  { url: "hifi-cat.jpeg",  density: 3 },
   { url: "lowfi-cat.jpeg", width: 128 },
 ]

So, some paths forward are:

• figure out a pattern that will account for this use case in the existing parseSrcset function
• leverage srcset package and add code to convert things like { url: "hifi-cat.jpeg", density: 3 }, to { url: "hifi-cat.jpeg", descriptor: '3x' },
• write a new parseSrcset function modeled after the srcset package's solution

In my case, the URLs are always with protocol, never relative. But it should be generic; otherwise you will end up with other cases also broken. The srcset package uses regex conforming to the HTML spec and is much simpler than special cases in the current solution.