Don't swallow spaces in a srcset attribute

Spaced in a srcset attribute are removed

I’m using a remark plugin to add responsive images. It adds image tags with a srcset attribute like this:

srcset="/mdx_files/basting-1000.jpg, /mdx_files/basting-2000.jpg 2x"

MDX picks up the attribute and converts it to a prop:

{
  srcset: [
    "/mdx_files/basting-1000.jpg", 
    "/mdx_files/basting-2000.jpg 2x"
  ]
}

MDX then feeds that to React.CreateElement which will concat the array and render this:

srcset="/mdx_files/basting-1000.jpg,/mdx_files/basting-2000.jpg 2x"

The problem is that it’s dropping the space, and as a comma is a valid character in a URL, the browser reads this as a single entry in the srcset: /mdx_files/basting-1000.jpg,/mdx_files/basting-2000.jpg

Your environment

• OS: Linux
• Packages: “@mdx-js/react”: “^1.6.22”, “@mdx-js/runtime”: “^1.6.22”
• Env: Node 14.16.0 (lts/fermium), browser independent

Steps to reproduce

I didn’t setup a repo for this because I felt it was pretty obvious what’s happening.

Expected behaviour

What we need is to not trim the splitted parts of the string, or simply prefixed each srcset entry with a space:

{
  srcset: [
    " /mdx_files/basting-1000.jpg", 
    " /mdx_files/basting-2000.jpg 2x"
  ]
}

Leading whitespace is ok in the srcset attribute.

Actual behaviour

The whitespace after the comma in the srcset list is swallowed by splitting it into an array and then joining it.

[joostdecock]

Thank you @wooorm for your help in getting to the bottom of this, much appreciated. 🙏

I will close this and see if @florianeckerstorfer would be willing to update the plugin 🤞

If not, I might fork it 🤔

Keep up the great work! ♥️

[wooorm]

This seems to be because the plugin in question, @fec/remark-responsive-images, builds a string of HTML. mdx-js/mdx@1 tried to allow that but didn’t always do a good job, hence this issue. For mdx-js/mdx@2, it by default doesn’t understand / even throws an error on unknown nodes (e.g., Error: Cannot handle unknown node `raw`).

It might be able to work with mdx-js/mdx@2 if rehypeRaw is used, and it does work with xdm

xdm

import path from 'node:path'
import remarkResponsiveImages from '@fec/remark-responsive-images'
import rehypeRaw from 'rehype-raw'
import {compile} from 'xdm'

main()

async function main() {
  const compiled = await compile(
    '![This is an image](/example.jpg "This is the image title")',
    {
      remarkPlugins: [
        [
          remarkResponsiveImages,
          {
            srcDir: path.resolve('.', 'public'),
            targetDir: path.resolve('.', 'public'),
            blurredBackground: false,
            imageSizes: [500, 1000, 1500],
            resolutions: [1, 2, 3]
          }
        ]
      ],
      rehypePlugins: [rehypeRaw]
    }
  )
  console.log(String(compiled))
}

But I would recommend that the plugin were changed. Or a new plugin written. It’s operating in the markdown phase and injecting HTML, which is not logical. There’s an HTML phase specifically for changing HTML (so a rehype plugin could do it cleaner)