fix srcset parsing (#8671)

christianhaller · web-flow · commit eed1e2ca5f4b · 2022-12-20T19:35:57.000+01:00
diff --git a/flow-libs/srcset.js.flow b/flow-libs/srcset.js.flow
@@ -0,0 +1,22 @@
+// @flow
+declare module 'srcset' {
+  declare type SrcSetDefinition = {|
+    url: string,
+    width?: number,
+    density?: number,
+  |};
+
+  declare type Options = {|
+    strict?: boolean,
+  |};
+
+  declare export function parse(
+    srcset: string,
+    options?: Options,
+  ): SrcSetDefinition[];
+
+  declare export function stringify(
+    srcSetDefinitions: SrcSetDefinition[],
+    options?: Options,
+  ): string;
+}
diff --git a/packages/core/integration-tests/test/integration/html-srcset/index.html b/packages/core/integration-tests/test/integration/html-srcset/index.html
@@ -4,6 +4,6 @@
 <meta charset="utf-8">
 </head>
 <body>
-<img src="100x100.png" srcset="200x200.png 250w, 300x300.png 500w">
+<img src="100x100.png" srcset="200x200.png?lat=1,lng=2 250w, 300x300.png 500w">
 </body>
-</html>
+</html>
diff --git a/packages/transformers/html/package.json b/packages/transformers/html/package.json
@@ -27,6 +27,7 @@
     "posthtml": "^0.16.5",
     "posthtml-parser": "^0.10.1",
     "posthtml-render": "^3.0.0",
-    "semver": "^5.7.1"
+    "semver": "^5.7.1",
+    "srcset": "4"
   }
 }
diff --git a/packages/transformers/html/src/dependencies.js b/packages/transformers/html/src/dependencies.js
@@ -3,6 +3,7 @@
 import type {AST, MutableAsset} from '@parcel/types';
 import type {PostHTMLNode} from 'posthtml';
 import PostHTML from 'posthtml';
+import {parse, stringify} from 'srcset';
 // A list of all attributes that may produce a dependency
 // Based on https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
 const ATTRS = {
@@ -85,24 +86,11 @@ const OPTIONS = {
 };
 
 function collectSrcSetDependencies(asset, srcset, opts) {
-  let newSources = [];
-  for (const source of srcset.split(',')) {
-    let pair = source.trim().split(' ');
-    if (pair.length === 0) {
-      continue;
-    }
-
-    pair[0] = asset.addURLDependency(pair[0], opts);
-    newSources.push(pair.join(' '));
-  }
-
-  /**
-   * https://html.spec.whatwg.org/multipage/images.html#srcset-attribute
-   *
-   * If an image candidate string in srcset contains a width descriptor or a pixel density descriptor or ASCII whitespace, the following image candidate string must begin with whitespace.
-   * So we need to join each image candidate string with ", ".
-   */
-  return newSources.join(', ');
+  let parsed = parse(srcset).map(({url, ...v}) => ({
+    url: asset.addURLDependency(url, opts),
+    ...v,
+  }));
+  return stringify(parsed);
 }
 
 function getAttrDepHandler(attr) {
diff --git a/yarn.lock b/yarn.lock
@@ -12086,6 +12086,11 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
+srcset@4:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/srcset/-/srcset-4.0.0.tgz#336816b665b14cd013ba545b6fe62357f86e65f4"
+  integrity sha512-wvLeHgcVHKO8Sc/H/5lkGreJQVeYMm9rlmt8PuR1xE31rIuXhuzznUUqAt8MqLhB3MqJdFzlNAfpcWnxiFUcPw==
+
 sshpk@^1.7.0:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877"

Original file line number	Diff line number	Diff line change
`@@ -27,6 +27,7 @@`
`27`	`27`	`"posthtml": "^0.16.5",`
`28`	`28`	`"posthtml-parser": "^0.10.1",`
`29`	`29`	`"posthtml-render": "^3.0.0",`
`30`		`- "semver": "^5.7.1"`
	`30`	`+ "semver": "^5.7.1",`
	`31`	`+ "srcset": "4"`
`31`	`32`	`}`
`32`	`33`	`}`