feat: handle more tags with the src attribute (#226)

BREAKING CHANGE: the `src` attribute of `audio`, `video`, `track`, `embed`, `source`, `input` now handled

Author: evilebottnawi

README.md

@@ -55,18 +55,18 @@ You may need to specify loaders for images in your configuration (recommended `f
 
 ## Options
 
-|               Name                |        Type         |                   Default                    | Description                              |
-| :-------------------------------: | :-----------------: | :------------------------------------------: | :--------------------------------------- |
-|  **[`attributes`](#attributes)**  |  `{Array\|String}`  |           `['img:src', ':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      |
-|    **[`esModule`](#esmodule)**    |     `{Boolean}`     |                   `false`                    | Use ES modules syntax                    |
+|               Name                |        Type         |                                                Default                                                 | Description                              |
+| :-------------------------------: | :-----------------: | :----------------------------------------------------------------------------------------------------: | :--------------------------------------- |
+|  **[`attributes`](#attributes)**  |  `{Array\|String}`  | `[':srcset', 'img:src', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src','input:src']` | 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      |
+|    **[`esModule`](#esmodule)**    |     `{Boolean}`     |                                                `false`                                                 | Use ES modules syntax                    |
 
 ### `attributes`
 
 Type: `Array|String`
-Default: `['img:src', ':srcset']`
+Default: `[':srcset', 'img:src', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src','input:src']`
 
 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,16 @@ import Parser from 'fastparse';
 const IDENT_REGEX = /___HTML_LOADER_IDENT_[0-9.]+___/g;
 
 function getTagsAndAttributes(attributes) {
-  const defaultAttributes = ['img:src', ':srcset'];
+  const defaultAttributes = [
+    ':srcset',
+    'img:src',
+    'audio:src',
+    'video:src',
+    'track:src',
+    'embed:src',
+    'source:src',
+    'input:src',
+  ];
 
   if (typeof attributes !== 'undefined') {
     if (typeof attributes === 'string') {
@@ -378,7 +387,7 @@ export function parseAttributes(html, isRelevantTagAttr) {
       return;
     }
 
-    if (this.currentTag === 'img' && name === 'srcset') {
+    if (name === 'srcset') {
       let sourceSet;
 
       try {

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

@@ -40,7 +40,7 @@ describe("'attributes' option", () => {
               ],
             },
             {
-              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/i,
+              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|ogg|pdf|vtt)$/i,
               loader: 'file-loader',
               options: { esModule: false, name: '[name].[ext]' },
             },
@@ -75,7 +75,7 @@ describe("'attributes' option", () => {
               ],
             },
             {
-              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/i,
+              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|ogg|pdf|vtt)$/i,
               loader: 'file-loader',
               options: { esModule: true, name: '[name].[ext]' },
             },
@@ -110,7 +110,7 @@ describe("'attributes' option", () => {
               ],
             },
             {
-              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/i,
+              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|ogg|pdf|vtt)$/i,
               loader: 'file-loader',
               options: { esModule: false, name: '[name].[ext]' },
             },
@@ -145,7 +145,7 @@ describe("'attributes' option", () => {
               ],
             },
             {
-              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/i,
+              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|ogg|pdf|vtt)$/i,
               loader: 'file-loader',
               options: { esModule: true, name: '[name].[ext]' },
             },