feat: handle more link and meta attributes

Author: evilebottnawi

README.md

@@ -72,7 +72,6 @@ Supported tags and attributes:
 - the `src` attribute of the `img` tag
 - the `srcset` attribute of the `img` tag
 - the `src` attribute of the `input` tag
-- the `href` attribute of the `link` tag (only for stylesheets)
 - the `data` attribute of the `object` tag
 - the `src` attribute of the `script` tag
 - the `href` attribute of the `script` tag
@@ -86,6 +85,8 @@ Supported tags and attributes:
 - the `href` attribute of the `image` tag
 - the `xlink:href` attribute of the `use` tag
 - the `href` attribute of the `use` tag
+- the `href` attribute of the `link` tag when the `rel` attribute contains `stylesheet`, `icon`, `shortcut icon`, `mask-icon`, `apple-touch-icon`, `apple-touch-icon-precomposed`, `apple-touch-startup-image`
+- the `content` attribute of the `meta` tag when the `name` attribute is `msapplication-tileimage`, `msapplication-square70x70logo`, `msapplication-square150x150logo`, `msapplication-wide310x150logo`, `msapplication-square310x310logo`, `msapplication-config`
 
 #### `Boolean`
 

package-lock.json

@@ -49,34 +49,34 @@
     "schema-utils": "^3.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.11.6",
-    "@babel/core": "^7.11.6",
-    "@babel/preset-env": "^7.11.5",
+    "@babel/cli": "^7.12.1",
+    "@babel/core": "^7.12.3",
+    "@babel/preset-env": "^7.12.1",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@webpack-contrib/defaults": "^6.3.0",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
-    "babel-jest": "^26.5.2",
+    "babel-jest": "^26.6.3",
     "cross-env": "^7.0.2",
     "del": "^6.0.0",
     "del-cli": "^3.0.1",
-    "es-check": "^5.1.1",
-    "eslint": "^7.10.0",
-    "eslint-config-prettier": "^6.12.0",
+    "es-check": "^5.1.2",
+    "eslint": "^7.13.0",
+    "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-import": "^2.22.1",
-    "file-loader": "^6.1.1",
+    "file-loader": "^6.2.0",
     "handlebars": "^4.7.6",
     "husky": "^4.3.0",
-    "jest": "^26.5.2",
-    "lint-staged": "^10.4.0",
+    "jest": "^26.6.3",
+    "lint-staged": "^10.5.1",
     "memfs": "^3.2.0",
     "npm-run-all": "^4.1.5",
-    "posthtml": "^0.13.3",
+    "posthtml": "^0.14.0",
     "posthtml-webp": "^2.1.0",
     "prettier": "^2.1.2",
     "standard-version": "^9.0.0",
     "url-loader": "^4.1.1",
-    "webpack": "^4.44.2"
+    "webpack": "^5.5.0"
   },
   "keywords": [
     "webpack",

package.json

@@ -24,13 +24,21 @@ export default (options) =>
           typeof element.tag === 'undefined' ||
           (typeof element.tag !== 'undefined' &&
             element.tag.toLowerCase() === tag.toLowerCase());
+
+        if (!foundTag) {
+          return false;
+        }
+
         const foundAttribute =
           element.attribute.toLowerCase() === attribute.toLowerCase();
-        const isNotFiltered = element.filter
+
+        if (!foundAttribute) {
+          return false;
+        }
+
+        return element.filter
           ? element.filter(tag, attribute, attributes, resourcePath)
           : true;
-
-        return foundTag && foundAttribute && isNotFiltered;
       });
     };
     const { resourcePath } = options;

src/plugins/source-plugin.js

@@ -428,22 +428,87 @@ function getAttributeValue(attributes, name) {
   return attributes[lowercasedAttributes[name.toLowerCase()]];
 }
 
-function scriptFilter(tag, attribute, attributes) {
-  if (attributes.type) {
-    const type = getAttributeValue(attributes, 'type').trim().toLowerCase();
-
-    if (
-      type !== 'module' &&
-      type !== 'text/javascript' &&
-      type !== 'application/javascript'
-    ) {
-      return false;
-    }
+// TODO refactor
+function scriptSrcFilter(tag, attribute, attributes) {
+  let type = getAttributeValue(attributes, 'type');
+
+  if (!type) {
+    return true;
+  }
+
+  type = type.trim();
+
+  if (!type) {
+    return false;
+  }
+
+  if (
+    type !== 'module' &&
+    type !== 'text/javascript' &&
+    type !== 'application/javascript'
+  ) {
+    return false;
   }
 
   return true;
 }
 
+function linkHrefFilter(tag, attribute, attributes) {
+  let rel = getAttributeValue(attributes, 'rel');
+
+  if (!rel) {
+    return false;
+  }
+
+  rel = rel.trim();
+
+  if (!rel) {
+    return false;
+  }
+
+  rel = rel.toLowerCase();
+
+  const usedRels = rel.split(' ').filter((value) => value);
+  const allowedRels = [
+    'stylesheet',
+    'icon',
+    'mask-icon',
+    'apple-touch-icon',
+    'apple-touch-icon-precomposed',
+    'apple-touch-startup-image',
+  ];
+
+  return allowedRels.filter((value) => usedRels.includes(value));
+}
+
+function metaContentFilter(tag, attribute, attributes) {
+  let name = getAttributeValue(attributes, 'name');
+
+  if (!name) {
+    return false;
+  }
+
+  name = name.trim();
+
+  if (!name) {
+    return false;
+  }
+
+  name = name.toLowerCase();
+
+  const allowedNames = [
+    // msapplication-TileImage
+    'msapplication-tileimage',
+    'msapplication-square70x70logo',
+    'msapplication-square150x150logo',
+    'msapplication-wide310x150logo',
+    'msapplication-square310x310logo',
+    'msapplication-config',
+  ];
+
+  return allowedNames.includes(name);
+}
+
 const defaultAttributes = [
   {
     tag: 'audio',
@@ -474,21 +539,13 @@ const defaultAttributes = [
     tag: 'link',
     attribute: 'href',
     type: 'src',
-    filter: (tag, attribute, attributes) => {
-      if (!/stylesheet/i.test(getAttributeValue(attributes, 'rel'))) {
-        return false;
-      }
-
-      if (
-        attributes.type &&
-        getAttributeValue(attributes, 'type').trim().toLowerCase() !==
-          'text/css'
-      ) {
-        return false;
-      }
-
-      return true;
-    },
+    filter: linkHrefFilter,
+  },
+  {
+    tag: 'meta',
+    attribute: 'content',
+    type: 'src',
+    filter: metaContentFilter,
   },
   {
     tag: 'object',
@@ -499,20 +556,20 @@ const defaultAttributes = [
     tag: 'script',
     attribute: 'src',
     type: 'src',
-    filter: scriptFilter,
+    filter: scriptSrcFilter,
   },
   // Using href with <script> is described here: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/script
   {
     tag: 'script',
     attribute: 'href',
     type: 'src',
-    filter: scriptFilter,
+    filter: scriptSrcFilter,
   },
   {
     tag: 'script',
     attribute: 'xlink:href',
     type: 'src',
-    filter: scriptFilter,
+    filter: scriptSrcFilter,
   },
   {
     tag: 'source',

src/utils.js

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