Parser incorrectly reads image srcset when containing commas in image URL

[colbyfayock]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

8.0.3

Link to runnable example

No response

Steps to reproduce

The issue occurs when there is a comma included in the image URLs of the srcset field

My current flow of data:

• WordPress GraphQL API via WPGraphQL
• HTML is retrieved as raw HTML string
• HTML is passed into unified pipeline that uses rehype https://github.com/colbyfayock/spacejelly.dev/blob/main/src/lib/parse.js#L21
• result is rendered via React with dangerously set inner HTML

Example raw HTML:

<img loading=\"lazy\" width=\"2560\" height=\"1504\" src=\"https://res.cloudinary.com/colbycloud/images/w_2560,h_1504/f_auto,q_auto/v1636561367/nextjs-app-stranger-things-wiki/nextjs-app-stranger-things-wiki.jpg?_i=AA\" alt=\"Website with grid of characters from Stranger Things\" class=\"wp-image-847\" srcset=\"https://res.cloudinary.com/colbycloud/images/w_2560,h_1504/f_auto,q_auto/v1636561367/nextjs-app-stranger-things-wiki/nextjs-app-stranger-things-wiki.jpg?_i=AA 2560w, https://res.cloudinary.com/colbycloud/images/w_300,h_176,c_scale/f_auto,q_auto/v1636561367/nextjs-app-stranger-things-wiki/nextjs-app-stranger-things-wiki-300x176.jpg?_i=AA 300w, https://res.cloudinary.com/colbycloud/images/w_1024,h_601,c_scale/f_auto,q_auto/v1636561367/nextjs-app-stranger-things-wiki/nextjs-app-stranger-things-wiki-1024x601.jpg?_i=AA 1024w, https://res.cloudinary.com/colbycloud/images/w_768,h_451,c_scale/f_auto,q_auto/v1636561367/nextjs-app-stranger-things-wiki/nextjs-app-stranger-things-wiki-768x451.jpg?_i=AA 768w, https://res.cloudinary.com/colbycloud/images/w_1536,h_902,c_scale/f_auto,q_auto/v1636561367/nextjs-app-stranger-things-wiki/nextjs-app-stranger-things-wiki-1536x902.jpg?_i=AA 1536w, https://res.cloudinary.com/colbycloud/images/w_2048,h_1203,c_scale/f_auto,q_auto/v1636561367/nextjs-app-stranger-things-wiki/nextjs-app-stranger-things-wiki-2048x1203.jpg?_i=AA 2048w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" />

Expected behavior

Parsed srcset property should include a way to distinguish the value that relates multiple values of an image URL to a size

What the parsed values may look like if still following a similar comma delimited pattern:

[
  'https://res.cloudinary.com/colbycloud/images/w_2560,h_829/f_auto,q_auto/v1636561853/stranger-things-characters-images/stranger-things-characters-images.jpg?_i=AA 2560w',
  'https://res.cloudinary.com/colbycloud/images/w_300,h_97,c_scale/f_auto,q_auto/v1636561853/stranger-things-characters-images/stranger-things-characters-images-300x97.jpg?_i=AA 300w',
  'https://res.cloudinary.com/colbycloud/images/w_1024,h_332,c_scale/f_auto,q_auto/v1636561853/stranger-things-characters-images/stranger-things-characters-images-1024x332.jpg?_i=AA 1024w',
  'https://res.cloudinary.com/colbycloud/images/w_768,h_249,c_scale/f_auto,q_auto/v1636561853/stranger-things-characters-images/stranger-things-characters-images-768x249.jpg?_i=AA 768w',
  'https://res.cloudinary.com/colbycloud/images/w_1536,h_498,c_scale/f_auto,q_auto/v1636561853/stranger-things-characters-images/stranger-things-characters-images-1536x498.jpg?_i=AA 1536w',
  'https://res.cloudinary.com/colbycloud/images/w_2048,h_664,c_scale/f_auto,q_auto/v1636561853/stranger-things-characters-images/stranger-things-characters-images-2048x664.jpg?_i=AA 2048w'
]

Actual behavior

When a comma is included in the URL of images, the srcset sees that as a delimiting character and incorrectly parses the values

Example when parsed:

[
  'https://res.cloudinary.com/colbycloud/images/w_2560',
  'h_829/f_auto',
  'q_auto/v1636561853/stranger-things-characters-images/stranger-things-characters-images.jpg?_i=AA 2560w',
  'https://res.cloudinary.com/colbycloud/images/w_300',
  'h_97',
  'c_scale/f_auto',
  'q_auto/v1636561853/stranger-things-characters-images/stranger-things-characters-images-300x97.jpg?_i=AA 300w',
  'https://res.cloudinary.com/colbycloud/images/w_1024',
  'h_332',
  'c_scale/f_auto',
  'q_auto/v1636561853/stranger-things-characters-images/stranger-things-characters-images-1024x332.jpg?_i=AA 1024w',
  'https://res.cloudinary.com/colbycloud/images/w_768',
  'h_249',
  'c_scale/f_auto',
  'q_auto/v1636561853/stranger-things-characters-images/stranger-things-characters-images-768x249.jpg?_i=AA 768w',
  'https://res.cloudinary.com/colbycloud/images/w_1536',
  'h_498',
  'c_scale/f_auto',
  'q_auto/v1636561853/stranger-things-characters-images/stranger-things-characters-images-1536x498.jpg?_i=AA 1536w',
  'https://res.cloudinary.com/colbycloud/images/w_2048',
  'h_664',
  'c_scale/f_auto',
  'q_auto/v1636561853/stranger-things-characters-images/stranger-things-characters-images-2048x664.jpg?_i=AA 2048w'
]

Runtime

Node v14

Package manager

yarn v1

OS

macOS

Build and bundle tools

Next.js

[colbyfayock]

See related discussion: #78

[wooorm]

Solved, thanks! :)

[colbyfayock]

and thank you!!