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

parcel-bundler · Mar 14, 2018 · c469751 · c469751
1 parent f9aa325
commit c469751
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 6 deletions.
diff --git a/src/assets/HTMLAsset.js b/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/test/html.js b/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/test/integration/html-source-srcset/100x100.png b/test/integration/html-source-srcset/100x100.png
diff --git a/test/integration/html-source-srcset/200x200.png b/test/integration/html-source-srcset/200x200.png
diff --git a/test/integration/html-source-srcset/300x300.png b/test/integration/html-source-srcset/300x300.png
diff --git a/test/integration/html-source-srcset/index.html b/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>