Fix: join srcset in source with ", " (#7918)

parcel-bundler · Apr 11, 2022 · fdeb508 · fdeb508
1 parent 39b330e
commit fdeb508
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/packages/core/integration-tests/test/html.js b/packages/core/integration-tests/test/html.js
@@ -834,6 +834,12 @@ describe('html', function () {
         assets: ['300x300.png'],
       },
     ]);
+
+    const html = await outputFS.readFile(b.getBundles()[0].filePath, 'utf8');
+
+    const source = html.match(/<source srcset=".*>/)[0];
+
+    assert(source.split(', ').length === 3);
   });
 
   it('should detect imagesrcset attribute', async function () {

diff --git a/packages/transformers/html/src/dependencies.js b/packages/transformers/html/src/dependencies.js
@@ -96,7 +96,13 @@ function collectSrcSetDependencies(asset, srcset, opts) {
     newSources.push(pair.join(' '));
   }
 
-  return newSources.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(', ');
 }
 
 function getAttrDepHandler(attr) {