Image sizes attribute is corrupted

[AndrewKvalheim]

🐛 bug report

Some sizes attributes are corrupted.

🎛 Configuration and 💻 Code Sample

Minimal reproduction:

$ yarn add --dev parcel@2.4.0
$ echo '<img sizes="(min-width: 300px) 200px, 100px">' > index.html
$ parcel build index.html
$ cat dist/index.html

🤔 Expected Behavior

Expected output:

<img sizes="(min-width: 300px) 200px, 100px">

i.e. “on viewports at least 300px wide, use the 200px source, otherwise use the 100px source”

😯 Current Behavior

Actual output:

<img sizes="(min-width: 100px 200px, 300px)">

i.e. “nonsense; fall back to the 100vw source”

💁 Possible Solution

Not sure; I searched Parcel’s codebase for sizes but don’t see where it’s manipulating this value.

🔦 Context

This causes the browser to download the incorrect image source, resulting in either excess data usage (if the display size is narrower than 100vw) or blurry images (if the display size is wider than 100vw).

🌍 Your Environment

Software	Version(s)
Parcel	2.4.0, 2.3.2, 2.2.1, 2.0.1
Node	16.14.2
Yarn	1.22.17
Operating System	NixOS 21.11

[mischnic]

This is caused by htmlnano: posthtml/htmlnano#180

As a workaround, you can add a .htmlnanorc with

{
    "sortAttributesWithLists": false
}

[AndrewKvalheim]

Ah of course, thanks!