fix: support the srcset attribute for the source tag (#224)

BREAKING CHANGE: the `srcset` attribute for the `source` tag is now supported by default

Author: evilebottnawi

README.md

@@ -57,7 +57,7 @@ You may need to specify loaders for images in your configuration (recommended `f
 
 |               Name                |        Type         |                   Default                    | Description                              |
 | :-------------------------------: | :-----------------: | :------------------------------------------: | :--------------------------------------- |
-|  **[`attributes`](#attributes)**  |  `{Array\|String}`  |                `['img:src']`                 | Enables/Disables attributes handling     |
+|  **[`attributes`](#attributes)**  |  `{Array\|String}`  |        `['img:src', 'source:srcset']`        | Enables/Disables attributes handling     |
 |        **[`root`](#root)**        |     `{String}`      |                 `undefiend`                  | Allow to handle root-relative attributes |
 | **[`interpolate`](#interpolate)** | `{Boolean\|String}` |                   `false`                    | Allow to use expressions in HTML syntax  |
 |    **[`minimize`](#minimize)**    | `{Boolean\|Object}` | `true` in production mode, otherwise `false` | Tell `html-loader` to minimize HTML      |
@@ -66,7 +66,7 @@ You may need to specify loaders for images in your configuration (recommended `f
 ### `attributes`
 
 Type: `Array|String`
-Default: `['img:src']`
+Default: `['img:src', 'source:srcset']`
 
 You can specify which tag-attribute combination should be processed by this loader via the query parameter `attributes`.
 Pass an array or a space-separated list of `<tag>:<attribute>` combinations. (Default: `attributes=img:src`)

src/utils.js

@@ -4,7 +4,7 @@ import parseAttributes from './parseAttributes';
 import { IDENT_REGEX } from './constants';
 
 export function getTagsAndAttributes(attributes) {
-  const defaultAttributes = ['img:src'];
+  const defaultAttributes = ['img:src', 'source:srcset'];
 
   if (typeof attributes !== 'undefined') {
     if (typeof attributes === 'string') {

test/__snapshots__/attributes-option.test.js.snap

@@ -30,8 +30,13 @@ var ___HTML_LOADER_IDENT_1___ = require(\\"./image.png\\");
 var ___HTML_LOADER_IDENT_2___ = require(\\"aliasImg\\");
 var ___HTML_LOADER_IDENT_3___ = require(\\"./image.png\\");
 var ___HTML_LOADER_IDENT_4___ = require(\\"./icons.svg\\");
+var ___HTML_LOADER_IDENT_5___ = require(\\"./image.png\\");
+var ___HTML_LOADER_IDENT_6___ = require(\\"./image.png\\");
+var ___HTML_LOADER_IDENT_7___ = require(\\"./image.png\\");
+var ___HTML_LOADER_IDENT_8___ = require(\\"./image.png\\");
+var ___HTML_LOADER_IDENT_9___ = require(\\"./image.png\\");
 // Exports
-module.exports = \\"<h1>My First Heading</h1>\\\\n<p>My first paragraph.</p>\\\\n<h2>An Unordered HTML List</h2>\\\\n\\\\n<ul>\\\\n  <li>Coffee</li>\\\\n  <li>Tea</li>\\\\n  <li>Milk</li>\\\\n</ul>\\\\n\\\\n<h2>An Ordered HTML List</h2>\\\\n\\\\n<ol>\\\\n  <li>Coffee</li>\\\\n  <li>Tea</li>\\\\n  <li>Milk</li>\\\\n</ol>\\\\n\\\\n<script>console.log({\\\\\\"json\\\\\\": \\\\\\"with \\\\\\\\\\\\\\"quotes\\\\\\\\\\\\\\" in value\\\\\\"})</script>\\\\n\\\\n<!-- comment -->\\\\n\\\\n<div>Foo</div>\\\\n\\\\n\\\\n<div>BAR</div>\\\\n\\\\n<input type=\\\\\\"text\\\\\\" />\\\\n\\\\n<script>   console.log(1 + 2 + \`\${3 + 3}\`)   </script>\\\\n\\\\n<img src=\\\\\\"\\" + ___HTML_LOADER_GET_URL_IMPORT___(___HTML_LOADER_IDENT_0___) + \\"\\\\\\">\\\\n<img src=\\\\\\"\\" + ___HTML_LOADER_GET_URL_IMPORT___(___HTML_LOADER_IDENT_1___) + \\"\\\\\\">\\\\n<img src=\\\\\\"/image.png\\\\\\">\\\\n<img src=\\\\\\"\\" + ___HTML_LOADER_GET_URL_IMPORT___(___HTML_LOADER_IDENT_2___) + \\"\\\\\\">\\\\n<img src=\\\\\\"\\\\\\">\\\\n<img src=\\\\\\"\\" + ___HTML_LOADER_GET_URL_IMPORT___(___HTML_LOADER_IDENT_3___) + \\"\\\\\\">\\\\n\\\\n<script src=\\\\\\"script.js\\\\\\"></script>\\\\n\\\\n<custom-element custom-src=\\\\\\"image.png\\\\\\" />\\\\n<custom-img custom-src=\\\\\\"image.png\\\\\\"/></custom-element>\\\\n\\\\n<img src=\\\\\\"\\" + ___HTML_LOADER_GET_URL_IMPORT___(___HTML_LOADER_IDENT_4___) + \\"#hash\\\\\\">\\\\n\\\\n<a href=\\\\\\"mailto:username@exampledomain.com\\\\\\"></a>\\\\n\\";"
+module.exports = \\"<h1>My First Heading</h1>\\\\n<p>My first paragraph.</p>\\\\n<h2>An Unordered HTML List</h2>\\\\n\\\\n<ul>\\\\n  <li>Coffee</li>\\\\n  <li>Tea</li>\\\\n  <li>Milk</li>\\\\n</ul>\\\\n\\\\n<h2>An Ordered HTML List</h2>\\\\n\\\\n<ol>\\\\n  <li>Coffee</li>\\\\n  <li>Tea</li>\\\\n  <li>Milk</li>\\\\n</ol>\\\\n\\\\n<script>console.log({\\\\\\"json\\\\\\": \\\\\\"with \\\\\\\\\\\\\\"quotes\\\\\\\\\\\\\\" in value\\\\\\"})</script>\\\\n\\\\n<!-- comment -->\\\\n\\\\n<div>Foo</div>\\\\n\\\\n\\\\n<div>BAR</div>\\\\n\\\\n<input type=\\\\\\"text\\\\\\" />\\\\n\\\\n<script>   console.log(1 + 2 + \`\${3 + 3}\`)   </script>\\\\n\\\\n<img src=\\\\\\"\\" + ___HTML_LOADER_GET_URL_IMPORT___(___HTML_LOADER_IDENT_0___) + \\"\\\\\\">\\\\n<img src=\\\\\\"\\" + ___HTML_LOADER_GET_URL_IMPORT___(___HTML_LOADER_IDENT_1___) + \\"\\\\\\">\\\\n<img src=\\\\\\"/image.png\\\\\\">\\\\n<img src=\\\\\\"\\" + ___HTML_LOADER_GET_URL_IMPORT___(___HTML_LOADER_IDENT_2___) + \\"\\\\\\">\\\\n<img src=\\\\\\"\\\\\\">\\\\n<img src=\\\\\\"\\" + ___HTML_LOADER_GET_URL_IMPORT___(___HTML_LOADER_IDENT_3___) + \\"\\\\\\">\\\\n\\\\n<script src=\\\\\\"script.js\\\\\\"></script>\\\\n\\\\n<custom-element custom-src=\\\\\\"image.png\\\\\\" />\\\\n<custom-img custom-src=\\\\\\"image.png\\\\\\"/></custom-element>\\\\n\\\\n<img src=\\\\\\"\\" + ___HTML_LOADER_GET_URL_IMPORT___(___HTML_LOADER_IDENT_4___) + \\"#hash\\\\\\">\\\\n\\\\n<a href=\\\\\\"mailto:username@exampledomain.com\\\\\\"></a>\\\\n\\\\n<img srcset=\\\\\\"image.png 480w, image.png 800w\\\\\\" sizes=\\\\\\"(max-width: 600px) 480px, 800px\\\\\\" src=\\\\\\"\\" + ___HTML_LOADER_GET_URL_IMPORT___(___HTML_LOADER_IDENT_5___) + \\"\\\\\\" alt=\\\\\\"Elva dressed as a fairy\\\\\\">\\\\n<img srcset=\\\\\\"   image.png   480w   ,   image.png   800w   \\\\\\" sizes=\\\\\\"(max-width: 600px) 480px, 800px\\\\\\" src=\\\\\\"\\" + ___HTML_LOADER_GET_URL_IMPORT___(___HTML_LOADER_IDENT_6___) + \\"\\\\\\" alt=\\\\\\"Elva dressed as a fairy\\\\\\">\\\\n\\\\n<picture>\\\\n  <source media=\\\\\\"(min-width: 650px)\\\\\\" srcset=\\\\\\"\\" + ___HTML_LOADER_GET_URL_IMPORT___(___HTML_LOADER_IDENT_7___) + \\"\\\\\\">\\\\n  <source media=\\\\\\"(min-width: 465px)\\\\\\" srcset=\\\\\\"\\" + ___HTML_LOADER_GET_URL_IMPORT___(___HTML_LOADER_IDENT_8___) + \\"\\\\\\">\\\\n  <img src=\\\\\\"\\" + ___HTML_LOADER_GET_URL_IMPORT___(___HTML_LOADER_IDENT_9___) + \\"\\\\\\" alt=\\\\\\"Flowers\\\\\\" style=\\\\\\"width:auto;\\\\\\">\\\\n</picture>\\\\n\\";"
 `;
 
 exports[`loader should work: result 1`] = `
@@ -81,6 +86,15 @@ exports[`loader should work: result 1`] = `
 <img src=\\"/webpack/public/path/icons.svg#hash\\">
 
 <a href=\\"mailto:username@exampledomain.com\\"></a>
+
+<img srcset=\\"image.png 480w, image.png 800w\\" sizes=\\"(max-width: 600px) 480px, 800px\\" src=\\"/webpack/public/path/image.png\\" alt=\\"Elva dressed as a fairy\\">
+<img srcset=\\"   image.png   480w   ,   image.png   800w   \\" sizes=\\"(max-width: 600px) 480px, 800px\\" src=\\"/webpack/public/path/image.png\\" alt=\\"Elva dressed as a fairy\\">
+
+<picture>
+  <source media=\\"(min-width: 650px)\\" srcset=\\"/webpack/public/path/image.png\\">
+  <source media=\\"(min-width: 465px)\\" srcset=\\"/webpack/public/path/image.png\\">
+  <img src=\\"/webpack/public/path/image.png\\" alt=\\"Flowers\\" style=\\"width:auto;\\">
+</picture>
 "
 `;