srcSet with URLs that have commas

[cloudinarycolby]

I'm running into an issue where it seems like image srcSet properties aren't getting correctly parsed when the URLs include commas.

The HTML string I'm working with includes image URLs that have commas (,) within them, particularly Cloudinary URLs, such as:

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

This includes responsive images via srcSet, like:

<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\" />

The issue is when running this HTML through rehype-parse, it doesn't correctly parse the values, returning an array for srcSet like:

[
  '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'
]

When later recombined, the srcSet property then includes additional spaces which then prevent the images from working because of the commas:

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?resize=640%2C376&ssl=1

I'm currently solving this by escaping the commas any time I run the parser, which feels a bit hacky.

.use(() => {
  return (tree) => {
    visit(tree, testNodeIsImage(), (node) => {
      const { properties } = node;

      if (!properties.src.includes(CLOUDINARY_HOST)) return;

      let srcSet = properties.srcSet.join(',').split(`,https://${CLOUDINARY_HOST}`);

      srcSet[0] = srcSet[0].replace(`https://${CLOUDINARY_HOST}`, '');

      srcSet = srcSet.map((set) => `https://${CLOUDINARY_HOST}${set.replace(',', '%2C')}`);

      node.properties.srcSet = srcSet;
    });
    return;
  };
})

I'm wondering if there's a better approach to this or if it's a bug in how it's being parsed?

[wooorm]

Who is doing the parsing and how?

[colbyfayock]

created the discussion on my wrong account 🤦

i'm doing the parsing, here's the flow:

• 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

I confirmed that the raw HTML is showing up correctly, an example is the first snippet at the top of the original post.

The array of problematic parsing was before I was doing anything additional to the HTML.

[wooorm]

Thanks for the repro.
The problem is that property-information classifies srcSet (and imageSrcSet) as comma separated, whereas their actual values are more complex https://html.spec.whatwg.org/#srcset-attribute (note: link to giant webpage).
Perhaps the best course of action is to change that in property-information

[colbyfayock]

cool okay, ill create an Issue then. thanks

Edit: #79