fix #987: srcset not working for source-element (#992)

parcel-bundler · Mar 14, 2018 · 506c97b · 506c97b
1 parent bb08b92
commit 506c97b
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 6 deletions.
diff --git a/packages/core/parcel/src/assets/HTMLAsset.js b/packages/core/parcel/src/assets/HTMLAsset.js
@@ -19,6 +19,7 @@ const ATTRS = {
  'iframe',
  'embed'
  ],
+ srcset: ['img', 'source'],
  href: ['link', 'a'],
  poster: ['video'],
  'xlink:href': ['use'],
@@ -92,6 +93,13 @@ class HTMLAsset extends Asset {
  return newSources.join(',');
  }
 
+ getAttrDepHandler(attr) {
+ if (attr === 'srcset') {
+ return this.collectSrcSetDependencies;
+ }
+ return this.processSingleDependency;
+ }
+
  collectDependencies() {
  this.ast.walk(node => {
  if (node.attrs) {
@@ -107,18 +115,14 @@ class HTMLAsset extends Asset {
  }
 
  for (let attr in node.attrs) {
- if (node.tag === 'img' && attr === 'srcset') {
- node.attrs[attr] = this.collectSrcSetDependencies(node.attrs[attr]);
- this.isAstDirty = true;
- continue;
- }
  let elements = ATTRS[attr];
  // Check for virtual paths
  if (node.tag === 'a' && node.attrs[attr].lastIndexOf('.') < 1) {
  continue;
  }
  if (elements && elements.includes(node.tag)) {
- node.attrs[attr] = this.processSingleDependency(node.attrs[attr]);
+ let depHandler = this.getAttrDepHandler(attr);
+ node.attrs[attr] = depHandler.call(this, node.attrs[attr]);
  this.isAstDirty = true;
  }
  }

diff --git a/packages/core/parcel/test/html.js b/packages/core/parcel/test/html.js
@@ -470,6 +470,34 @@ describe('html', function() {
  });
  });
 
+ it('should detect srcset attribute of source element', async function() {
+ let b = await bundle(
+ __dirname + '/integration/html-source-srcset/index.html'
+ );
+
+ assertBundleTree(b, {
+ name: 'index.html',
+ assets: ['index.html'],
+ childBundles: [
+ {
+ type: 'png',
+ assets: ['100x100.png'],
+ childBundles: []
+ },
+ {
+ type: 'png',
+ assets: ['200x200.png'],
+ childBundles: []
+ },
+ {
+ type: 'png',
+ assets: ['300x300.png'],
+ childBundles: []
+ }
+ ]
+ });
+ });
+
  it('should support webmanifest', async function() {
  let b = await bundle(__dirname + '/integration/webmanifest/index.html');
 

diff --git a/packages/core/parcel/test/integration/html-source-srcset/100x100.png b/packages/core/parcel/test/integration/html-source-srcset/100x100.png
diff --git a/packages/core/parcel/test/integration/html-source-srcset/200x200.png b/packages/core/parcel/test/integration/html-source-srcset/200x200.png
diff --git a/packages/core/parcel/test/integration/html-source-srcset/300x300.png b/packages/core/parcel/test/integration/html-source-srcset/300x300.png
diff --git a/packages/core/parcel/test/integration/html-source-srcset/index.html b/packages/core/parcel/test/integration/html-source-srcset/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+</head>
+
+<body>
+ <picture>
+ <source srcset="100x100.png 100w, 200x200.png 250w, 300x300.png 500w">
+ </picture>
+</body>
+
+</html>