feat: supports link:href attribute for css (#258)

BREAKING CHANGE: `lin:href` attribute now supported by default
webpack-contrib · Mar 17, 2020 · 9835bde · 9835bde
1 parent 7af2eff
commit 9835bde
Show file tree

Hide file tree

Showing 9 changed files with 603 additions and 195 deletions.
diff --git a/README.md b/README.md
@@ -67,17 +67,19 @@ You may need to specify loaders for images in your configuration (recommended `f
 
 Supported tags and attributes:
 
-- `source:srcset`
-- `img:srcset`
-- `img:src`
 - `audio:src`
-- `video:src`
-- `track:src`
 - `embed:src`
-- `source:src`
+- `img:src`
+- `img:srcset`
 - `input:src`
+- `link:href`
 - `object:data`
 - `script:src`
+- `source:src`
+- `source:srcset`
+- `track:src`
+- `video:poster`
+- `video:src`
 
 #### `Boolean`
 

diff --git a/src/plugins/source-plugin.js b/src/plugins/source-plugin.js
@@ -375,18 +375,31 @@ function parseSrc(input) {
   return { value, startIndex };
 }
 
+function getAttributeValue(attributes, name) {
+  const lowercasedAttributes = Object.keys(attributes).reduce((keys, k) => {
+    // eslint-disable-next-line no-param-reassign
+    keys[k.toLowerCase()] = k;
+
+    return keys;
+  }, {});
+
+  return attributes[lowercasedAttributes[name.toLowerCase()]];
+}
+
 const defaultAttributes = [
-  'source:srcset',
-  'img:src',
-  'img:srcset',
   'audio:src',
-  'video:src',
-  'track:src',
   'embed:src',
-  'source:src',
+  'img:src',
+  'img:srcset',
   'input:src',
+  'link:href',
   'object:data',
   'script:src',
+  'source:src',
+  'source:srcset',
+  'track:src',
+  'video:poster',
+  'video:src',
 ];
 
 export default (options) =>
@@ -444,6 +457,21 @@ export default (options) =>
               return;
             }
 
+            if (tag.toLowerCase() === 'link') {
+              if (!/stylesheet/i.test(getAttributeValue(attributes, 'rel'))) {
+                return;
+              }
+
+              if (
+                attributes.type &&
+                getAttributeValue(attributes, 'type')
+                  .trim()
+                  .toLowerCase() !== 'text/css'
+              ) {
+                return;
+              }
+            }
+
             if (attribute.toLowerCase() === 'srcset') {
               let sourceSet;
 

diff --git a/test/__snapshots__/attributes-option.test.js.snap b/test/__snapshots__/attributes-option.test.js.snap
diff --git a/test/__snapshots__/esModule-option.test.js.snap b/test/__snapshots__/esModule-option.test.js.snap
diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap
diff --git a/test/__snapshots__/minimize-option.test.js.snap b/test/__snapshots__/minimize-option.test.js.snap
diff --git a/test/attributes-option.test.js b/test/attributes-option.test.js
@@ -184,7 +184,7 @@ describe("'attributes' option", () => {
               ],
             },
             {
-              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|ogg|pdf|vtt)$/i,
+              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|ogg|pdf|vtt|css)$/i,
               loader: 'file-loader',
               options: { esModule: false, name: '[name].[ext]' },
             },
@@ -219,7 +219,7 @@ describe("'attributes' option", () => {
               ],
             },
             {
-              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|ogg|pdf|vtt)$/i,
+              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|ogg|pdf|vtt|css)$/i,
               loader: 'file-loader',
               options: { esModule: true, name: '[name].[ext]' },
             },
@@ -254,7 +254,7 @@ describe("'attributes' option", () => {
               ],
             },
             {
-              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|ogg|pdf|vtt)$/i,
+              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|ogg|pdf|vtt|css)$/i,
               loader: 'file-loader',
               options: { esModule: false, name: '[name].[ext]' },
             },
@@ -289,7 +289,7 @@ describe("'attributes' option", () => {
               ],
             },
             {
-              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|ogg|pdf|vtt)$/i,
+              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|ogg|pdf|vtt|css)$/i,
               loader: 'file-loader',
               options: { esModule: true, name: '[name].[ext]' },
             },

diff --git a/test/fixtures/simple.html b/test/fixtures/simple.html
@@ -113,6 +113,11 @@ <h2>An Ordered HTML List</h2>
   Your browser does not support the video tag.
 </video>
 
+<video controls poster="./image.png">
+  <source src="example.ogg" type="video/ogg">
+  <track src="example.vtt" kind="subtitles" srclang="en" label="English">
+</video>
+
 <object width="400" height="400" data="example.pdf"></object>
 
 T ex t  <img 	  src =   "image.png"   >  <img
@@ -127,12 +132,24 @@ <h2>An Ordered HTML List</h2>
 
 <![CDATA[<img src="image.png">]]><img src="image.png">
 
-<link rel="stylesheet" type="text/css" href="./style.css">
+<link rel="stylesheet" type="text/css" href="./style.file.css">
+<link REL="stylesheet" type="text/css" href="./style.file.css">
+<link ReL="stylesheet" type="text/css" href="./style.file.css">
+<link rel="STYLESHEET" type="text/css" href="./style.file.css">
+<link REL="STYLESHEET" type="text/css" href="./style.file.css">
+<link REL="STYLESHEET" type="text/css" HREF="./style.file.css">
+<link rel="alternate stylesheet" type="text/css" href="./style.file.css">
+<link rel="stylesheet alternate" type="text/css" href="./style.file.css">
+<link rel="stylesheet alternate" type="   text/css   " href="./style.file.css">
+<link rel="stylesheet" href="./style.file.css">
+<link rel="stylesheet" type="text/css" href="./style.file.css">
+<link rel="stylesheet" type="text/html" href="./style.file.css">
+<link rel="stylesheet" TYPE="text/html" href="./style.file.css">
 <link rel="icon" href="./image.png" sizes="16x16">
 <link rel="apple-touch-icon" href="./image.png">
 <link rel="apple-touch-startup-image" href="./image.png">
 <link rel="shortlink" type="text/html" href="http://flic.kr/p/6XuLyD">
-<link type="text/css" href="./style.css">
+<link type="text/css" href="./style.file.css">
 <link rel="pingback" href="http://bob.example.net/xmlrpcserver">
 <a rel="author" href="./simple.html">link text</a>
 

diff --git a/test/fixtures/style.css → test/fixtures/style.file.css b/test/fixtures/style.css → test/fixtures/style.file.css