Content: srcset in markdown

[giticon]

Version

@nuxt/content: 1.9.0
nuxt: v2.14

Steps to reproduce

<div class="blogImg">
  <img srcset="/img/imgtest_576.jpg 576w, 
                       /img/imgtest_992.jpg 992w, 
                       /img/imgtest.jpg 1920w" 
            sizes="(max-width: 576px) 576px, (max-width: 992px) 992px, 1920px" 
            src="/img/imgtest.jpg" alt="img test 1920">
</div>

What is Expected?

Responsive image

What is actually happening?

Inside a .vue page it's ok.
Inside a .md page doesn't work.

Console error

Failed parsing 'srcset' attribute value since it has an unknown descriptor.
Dropped srcset candidate "/img/imgtest_576.jpg"

basically the commas disappear inside srcset

<img srcset="/img/imgtest_576.jpg 576w /img/imgtest_992.jpg 992w /img/imgtest.jpg 1920w" sizes="(max-width: 576px) 576px, (max-width: 992px) 992px, 1920px" src="/img/imgtest.jpg" alt="img test 1920">

[Atinux]

Hi @giticon

Could you create a small reproduction by forking this template? https://codesandbox.io/s/nuxt-content-playground-l164h?from-embed

It will help a lot resolving this issue ASAP.

[giticon]

You big @Atinux !

Try to resize and reload the page

https://xyf6b.sse.codesandbox.io/

https://codesandbox.io/s/icy-bird-xyf6b

With FF

.md -> error
.vue -> ok

With Chrome I get 6 console errors.

.md -> error
.vue -> error

[NozomuIkuta]

@giticon @Atinux

You may have already found it, but here are what I found.

basically the commas disappear inside srcset

<img srcset="/img/imgtest_576.jpg 576w /img/imgtest_992.jpg 992w /img/imgtest.jpg 1920w" sizes="(max-width: 576px) 576px, (max-width: 992px) 992px, 1920px" src="/img/imgtest.jpg" alt="img test 1920">

Yes, this is invalid syntax and warning messages are logged in the console (I also validated the code with WHATWG's HTML validator).

The reason commas disappear is that, srcset attribute is represented as an array srcSet in the AST (document.body), and Nuxt Content component's propsToData() joins it with whitespace instead of comma followed by whitespace (code).

I believe joining array-properties with whitespace itself is appropriate for such cases as class prop.

---

By the way, it would be irrelevant to the syntax issue itself, but the app doesn't switch images on my PC browser, although I fixed the line of code of the component... 🤔
It depends on how browsers decide which image to show, doesn't it?