htmlnano 2.0.0 → 2.0.2

package/lib/htmlnano.js

@@ -65,6 +65,9 @@ const optionalDependencies = {
 function htmlnano(optionsRun, presetRun) {
   let [options, preset] = loadConfig(optionsRun, presetRun);
   return function minifier(tree) {
+    const nodeHandlers = [];
+    const attrsHandlers = [];
+    const contentsHandlers = [];
     options = { ...preset,
       ...options
     };
@@ -92,12 +95,66 @@ function htmlnano(optionsRun, presetRun) {
         }
       });
 
-      let module = require('./modules/' + moduleName);
+      const module = require('./modules/' + moduleName);
 
-      promise = promise.then(tree => module.default(tree, options, moduleOptions));
+      if (typeof module.onAttrs === 'function') {
+        attrsHandlers.push(module.onAttrs(options, moduleOptions));
+      }
+
+      if (typeof module.onContent === 'function') {
+        contentsHandlers.push(module.onContent(options, moduleOptions));
+      }
+
+      if (typeof module.onNode === 'function') {
+        nodeHandlers.push(module.onNode(options, moduleOptions));
+      }
+
+      if (typeof module.default === 'function') {
+        promise = promise.then(tree => module.default(tree, options, moduleOptions));
+      }
+    }
+
+    if (attrsHandlers.length + contentsHandlers.length + nodeHandlers.length === 0) {
+      return promise;
     }
 
-    return promise;
+    return promise.then(tree => {
+      tree.walk(node => {
+        if (node) {
+          if (node.attrs && typeof node.attrs === 'object') {
+            // Convert all attrs' key to lower case
+            let newAttrsObj = {};
+            Object.entries(node.attrs).forEach(([attrName, attrValue]) => {
+              newAttrsObj[attrName.toLowerCase()] = attrValue;
+            });
+
+            for (const handler of attrsHandlers) {
+              newAttrsObj = handler(newAttrsObj, node);
+            }
+
+            node.attrs = newAttrsObj;
+          }
+
+          if (node.content) {
+            node.content = typeof node.content === 'string' ? [node.content] : node.content;
+
+            if (Array.isArray(node.content) && node.content.length > 0) {
+              for (const handler of contentsHandlers) {
+                const result = handler(node.content, node);
+                node.content = typeof result === 'string' ? [result] : result;
+              }
+            }
+          }
+
+          for (const handler of nodeHandlers) {
+            node = handler(node);
+          }
+        }
+
+        return node;
+      });
+      return tree;
+    });
   };
 }
 

package/lib/modules/collapseAttributeWhitespace.js

@@ -4,14 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.attributesWithLists = void 0;
-exports.default = collapseAttributeWhitespace;
+exports.onAttrs = onAttrs;
 
 var _helpers = require("../helpers");
 
 const attributesWithLists = new Set(['class', 'dropzone', 'rel', // a, area, link
 'ping', // a, area
 'sandbox', // iframe
-'sizes', // link
+
+/**
+ * https://github.com/posthtml/htmlnano/issues/180
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-sizes
+ *
+ * "sizes" of <img> should not be modified, while "sizes" of <link> will only have one entry in most cases.
+ */
+// 'sizes', // link
 'headers' // td, th
 ]);
 /** @type Record<string, string[] | null> */
@@ -58,29 +65,22 @@ const attributesWithSingleValue = {
 };
 /** Collapse whitespaces inside list-like attributes (e.g. class, rel) */
 
-function collapseAttributeWhitespace(tree) {
-  tree.walk(node => {
-    if (!node.attrs) {
-      return node;
-    }
-
-    Object.entries(node.attrs).forEach(([attrName, attrValue]) => {
-      const attrNameLower = attrName.toLowerCase();
-
-      if (attributesWithLists.has(attrNameLower)) {
+function onAttrs() {
+  return (attrs, node) => {
+    const newAttrs = attrs;
+    Object.entries(attrs).forEach(([attrName, attrValue]) => {
+      if (attributesWithLists.has(attrName)) {
         const newAttrValue = attrValue.replace(/\s+/g, ' ').trim();
-        node.attrs[attrName] = newAttrValue;
-        return node;
+        newAttrs[attrName] = newAttrValue;
+        return;
       }
 
-      if ((0, _helpers.isEventHandler)(attrNameLower) || Object.hasOwnProperty.call(attributesWithSingleValue, attrNameLower) && (attributesWithSingleValue[attrNameLower] === null || attributesWithSingleValue[attrNameLower].includes(node.tag))) {
-        node.attrs[attrName] = minifySingleAttributeValue(attrValue);
-        return node;
+      if ((0, _helpers.isEventHandler)(attrName) || Object.hasOwnProperty.call(attributesWithSingleValue, attrName) && (attributesWithSingleValue[attrName] === null || attributesWithSingleValue[attrName].includes(node.tag))) {
+        newAttrs[attrName] = minifySingleAttributeValue(attrValue);
       }
     });
-    return node;
-  });
-  return tree;
+    return newAttrs;
+  };
 }
 
 function minifySingleAttributeValue(value) {

package/lib/modules/collapseBooleanAttributes.js

@@ -3,42 +3,36 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = collapseBooleanAttributes;
+exports.onAttrs = onAttrs;
 // Source: https://github.com/kangax/html-minifier/issues/63
 const htmlBooleanAttributes = new Set(['allowfullscreen', 'allowpaymentrequest', 'allowtransparency', 'async', 'autofocus', 'autoplay', 'checked', 'compact', 'controls', 'declare', 'default', 'defaultchecked', 'defaultmuted', 'defaultselected', 'defer', 'disabled', 'enabled', 'formnovalidate', 'hidden', 'indeterminate', 'inert', 'ismap', 'itemscope', 'loop', 'multiple', 'muted', 'nohref', 'noresize', 'noshade', 'novalidate', 'nowrap', 'open', 'pauseonexit', 'readonly', 'required', 'reversed', 'scoped', 'seamless', 'selected', 'sortable', 'truespeed', 'typemustmatch', 'visible']);
 const amphtmlBooleanAttributes = new Set(['⚡', 'amp', '⚡4ads', 'amp4ads', '⚡4email', 'amp4email', 'amp-custom', 'amp-boilerplate', 'amp4ads-boilerplate', 'amp4email-boilerplate', 'allow-blocked-ranges', 'amp-access-hide', 'amp-access-template', 'amp-keyframes', 'animate', 'arrows', 'data-block-on-consent', 'data-enable-refresh', 'data-multi-size', 'date-template', 'disable-double-tap', 'disable-session-states', 'disableremoteplayback', 'dots', 'expand-single-section', 'expanded', 'fallback', 'first', 'fullscreen', 'inline', 'lightbox', 'noaudio', 'noautoplay', 'noloading', 'once', 'open-after-clear', 'open-after-select', 'open-button', 'placeholder', 'preload', 'reset-on-refresh', 'reset-on-resize', 'resizable', 'rotate-to-fullscreen', 'second', 'standalone', 'stereo', 'submit-error', 'submit-success', 'submitting', 'subscriptions-actions', 'subscriptions-dialog']);
 
-function collapseBooleanAttributes(tree, options, moduleOptions) {
-  tree.walk(node => {
-    if (!node.attrs) {
-      return node;
-    }
-
-    if (!node.tag) {
-      return node;
-    }
+function onAttrs(options, moduleOptions) {
+  return (attrs, node) => {
+    if (!node.tag) return attrs;
+    const newAttrs = attrs;
 
-    for (const attrName of Object.keys(node.attrs)) {
+    for (const attrName of Object.keys(attrs)) {
       if (attrName === 'visible' && node.tag.startsWith('a-')) {
         continue;
       }
 
       if (htmlBooleanAttributes.has(attrName)) {
-        node.attrs[attrName] = true;
+        newAttrs[attrName] = true;
       }
 
-      if (moduleOptions.amphtml && amphtmlBooleanAttributes.has(attrName) && node.attrs[attrName] === '') {
-        node.attrs[attrName] = true;
+      if (moduleOptions.amphtml && amphtmlBooleanAttributes.has(attrName) && attrs[attrName] === '') {
+        newAttrs[attrName] = true;
       } // collapse crossorigin attributes
       // Specification: https://html.spec.whatwg.org/multipage/urls-and-fetching.html#cors-settings-attributes
 
 
-      if (attrName.toLowerCase() === 'crossorigin' && (node.attrs[attrName] === 'anonymous' || node.attrs[attrName] === '')) {
-        node.attrs[attrName] = true;
+      if (attrName.toLowerCase() === 'crossorigin' && (attrs[attrName] === 'anonymous' || attrs[attrName] === '')) {
+        newAttrs[attrName] = true;
       }
     }
 
-    return node;
-  });
-  return tree;
+    return newAttrs;
+  };
 }

package/lib/modules/deduplicateAttributeValues.js

@@ -3,25 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = collapseAttributeWhitespace;
+exports.onAttrs = onAttrs;
 
 var _collapseAttributeWhitespace = require("./collapseAttributeWhitespace");
 
 /** Deduplicate values inside list-like attributes (e.g. class, rel) */
-function collapseAttributeWhitespace(tree) {
-  tree.walk(node => {
-    if (!node.attrs) {
-      return node;
-    }
-
-    Object.keys(node.attrs).forEach(attrName => {
-      const attrNameLower = attrName.toLowerCase();
-
-      if (!_collapseAttributeWhitespace.attributesWithLists.has(attrNameLower)) {
+function onAttrs() {
+  return attrs => {
+    const newAttrs = attrs;
+    Object.keys(attrs).forEach(attrName => {
+      if (!_collapseAttributeWhitespace.attributesWithLists.has(attrName)) {
         return;
       }
 
-      const attrValues = node.attrs[attrName].split(/\s/);
+      const attrValues = attrs[attrName].split(/\s/);
       const uniqeAttrValues = new Set();
       const deduplicatedAttrValues = [];
       attrValues.forEach(attrValue => {
@@ -38,9 +33,8 @@ function collapseAttributeWhitespace(tree) {
         deduplicatedAttrValues.push(attrValue);
         uniqeAttrValues.add(attrValue);
       });
-      node.attrs[attrName] = deduplicatedAttrValues.join(' ');
+      newAttrs[attrName] = deduplicatedAttrValues.join(' ');
     });
-    return node;
-  });
-  return tree;
+    return newAttrs;
+  };
 }

package/lib/modules/minifyJson.js

@@ -3,31 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = minifyJson;
+exports.onContent = onContent;
+const rNodeAttrsTypeJson = /(\/|\+)json/;
 
-/* Minify JSON inside <script> tags */
-function minifyJson(tree) {
-  // Match all <script> tags which have JSON mime type
-  tree.match({
-    tag: 'script',
-    attrs: {
-      type: /(\/|\+)json/
+function onContent() {
+  return (content, node) => {
+    if (node.attrs && node.attrs.type && rNodeAttrsTypeJson.test(node.attrs.type)) {
+      try {
+        // cast minified JSON to an array
+        return [JSON.stringify(JSON.parse((content || []).join('')))];
+      } catch (error) {// Invalid JSON
+      }
     }
-  }, node => {
-    let content = (node.content || []).join('');
 
-    if (!content) {
-      return node;
-    }
-
-    try {
-      content = JSON.stringify(JSON.parse(content));
-    } catch (error) {
-      return node;
-    }
-
-    node.content = [content];
-    return node;
-  });
-  return tree;
+    return content;
+  };
 }

package/lib/modules/minifySvg.js

@@ -21,8 +21,9 @@ function minifySvg(tree, options, svgoOptions = {}) {
     });
     const result = svgo.optimize(svgStr, svgoOptions);
     node.tag = false;
-    node.attrs = {};
-    node.content = result.data;
+    node.attrs = {}; // result.data is a string, we need to cast it to an array
+
+    node.content = [result.data];
     return node;
   });
   return tree;

package/lib/modules/normalizeAttributeValues.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = normalizeAttributeValues;
+exports.onAttrs = onAttrs;
 const caseInsensitiveAttributes = {
   autocomplete: ['form'],
   charset: ['meta', 'script'],
@@ -29,20 +29,14 @@ const caseInsensitiveAttributes = {
   wrap: ['textarea']
 };
 
-function normalizeAttributeValues(tree) {
-  tree.walk(node => {
-    if (!node.attrs) {
-      return node;
-    }
-
-    Object.entries(node.attrs).forEach(([attrName, attrValue]) => {
-      const attrNameLower = attrName.toLowerCase();
-
-      if (Object.hasOwnProperty.call(caseInsensitiveAttributes, attrNameLower) && (caseInsensitiveAttributes[attrNameLower] === null || caseInsensitiveAttributes[attrNameLower].includes(node.tag))) {
-        node.attrs[attrName] = attrValue.toLowerCase ? attrValue.toLowerCase() : attrValue;
+function onAttrs() {
+  return (attrs, node) => {
+    const newAttrs = attrs;
+    Object.entries(attrs).forEach(([attrName, attrValue]) => {
+      if (Object.hasOwnProperty.call(caseInsensitiveAttributes, attrName) && (caseInsensitiveAttributes[attrName] === null || caseInsensitiveAttributes[attrName].includes(node.tag))) {
+        newAttrs[attrName] = attrValue.toLowerCase ? attrValue.toLowerCase() : attrValue;
       }
     });
-    return node;
-  });
-  return tree;
+    return newAttrs;
+  };
 }

package/lib/modules/removeComments.js

@@ -3,28 +3,36 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = removeComments;
+exports.onContent = onContent;
+exports.onNode = onNode;
 
 var _helpers = require("../helpers");
 
 const MATCH_EXCERPT_REGEXP = /<!-- ?more ?-->/i;
 /** Removes HTML comments */
 
-function removeComments(tree, options, removeType) {
+function onNode(options, removeType) {
   if (removeType !== 'all' && removeType !== 'safe' && !isMatcher(removeType)) {
     removeType = 'safe';
   }
 
-  tree.walk(node => {
-    if (node.contents && node.contents.length) {
-      node.contents = node.contents.filter(content => !isCommentToRemove(content, removeType));
-    } else if (isCommentToRemove(node, removeType)) {
-      node = '';
+  return node => {
+    if (isCommentToRemove(node, removeType)) {
+      return '';
     }
 
     return node;
-  });
-  return tree;
+  };
+}
+
+function onContent(options, removeType) {
+  if (removeType !== 'all' && removeType !== 'safe' && !isMatcher(removeType)) {
+    removeType = 'safe';
+  }
+
+  return contents => {
+    return contents.filter(content => !isCommentToRemove(content, removeType));
+  };
 }
 
 function isCommentToRemove(text, removeType) {

package/lib/modules/removeEmptyAttributes.js

@@ -3,7 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = removeEmptyAttributes;
+exports.onAttrs = onAttrs;
+
+var _helpers = require("../helpers");
+
 const safeToRemoveAttrs = {
   id: null,
   class: null,
@@ -52,25 +55,18 @@ const safeToRemoveAttrs = {
   value: ['button', 'input', 'li'],
   width: ['canvas', 'embed', 'iframe', 'img', 'input', 'object', 'video']
 };
-/** Removes empty attributes */
-
-function removeEmptyAttributes(tree) {
-  tree.walk(node => {
-    if (!node.attrs) {
-      return node;
-    }
-
-    Object.entries(node.attrs).forEach(([attrName, attrValue]) => {
-      const attrNameLower = attrName.toLowerCase();
 
-      if (attrNameLower.slice(0, 2).toLowerCase() === 'on' && attrName.length >= 5 // Event Handler
-      || Object.hasOwnProperty.call(safeToRemoveAttrs, attrNameLower) && (safeToRemoveAttrs[attrNameLower] === null || safeToRemoveAttrs[attrNameLower].includes(node.tag))) {
+function onAttrs() {
+  return (attrs, node) => {
+    const newAttrs = { ...attrs
+    };
+    Object.entries(attrs).forEach(([attrName, attrValue]) => {
+      if ((0, _helpers.isEventHandler)(attrName) || Object.hasOwnProperty.call(safeToRemoveAttrs, attrName) && (safeToRemoveAttrs[attrName] === null || safeToRemoveAttrs[attrName].includes(node.tag))) {
         if (attrValue === '' || (attrValue || '').match(/^\s+$/)) {
-          delete node.attrs[attrName];
+          delete newAttrs[attrName];
         }
       }
     });
-    return node;
-  });
-  return tree;
+    return newAttrs;
+  };
 }

package/lib/modules/removeRedundantAttributes.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = removeRedundantAttributes;
+exports.onAttrs = onAttrs;
 exports.redundantScriptTypes = void 0;
 // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types
 const redundantScriptTypes = new Set(['application/javascript', 'application/ecmascript', 'application/x-ecmascript', 'application/x-javascript', 'text/javascript', 'text/ecmascript', 'text/javascript1.0', 'text/javascript1.1', 'text/javascript1.2', 'text/javascript1.3', 'text/javascript1.4', 'text/javascript1.5', 'text/jscript', 'text/livescript', 'text/x-ecmascript', 'text/x-javascript']);
@@ -20,8 +20,8 @@ const redundantAttributes = {
   },
   'script': {
     'language': 'javascript',
-    'type': node => {
-      for (const [attrName, attrValue] of Object.entries(node.attrs)) {
+    'type': attrs => {
+      for (const [attrName, attrValue] of Object.entries(attrs)) {
         if (attrName.toLowerCase() !== 'type') {
           continue;
         }
@@ -32,10 +32,10 @@ const redundantAttributes = {
       return false;
     },
     // Remove attribute if the function returns false
-    'charset': node => {
+    'charset': attrs => {
       // The charset attribute only really makes sense on “external” SCRIPT elements:
       // http://perfectionkills.com/optimizing-html/#8_script_charset
-      return node.attrs && !node.attrs.src;
+      return !attrs.src;
     }
   },
   'style': {
@@ -44,13 +44,13 @@ const redundantAttributes = {
   },
   'link': {
     'media': 'all',
-    'type': node => {
+    'type': attrs => {
       // https://html.spec.whatwg.org/multipage/links.html#link-type-stylesheet
       let isRelStyleSheet = false;
       let isTypeTextCSS = false;
 
-      if (node.attrs) {
-        for (const [attrName, attrValue] of Object.entries(node.attrs)) {
+      if (attrs) {
+        for (const [attrName, attrValue] of Object.entries(attrs)) {
           if (attrName.toLowerCase() === 'rel' && attrValue === 'stylesheet') {
             isRelStyleSheet = true;
           }
@@ -115,13 +115,10 @@ const tagsHaveRedundantAttributes = new Set(Object.keys(redundantAttributes));
 const tagsHaveMissingValueDefaultAttributes = new Set(Object.keys(canBeReplacedWithEmptyStringAttributes));
 /** Removes redundant attributes */
 
-function removeRedundantAttributes(tree) {
-  tree.walk(node => {
-    if (!node.tag) {
-      return node;
-    }
-
-    node.attrs = node.attrs || {};
+function onAttrs() {
+  return (attrs, node) => {
+    if (!node.tag) return attrs;
+    const newAttrs = attrs;
 
     if (tagsHaveRedundantAttributes.has(node.tag)) {
       const tagRedundantAttributes = redundantAttributes[node.tag];
@@ -131,13 +128,13 @@ function removeRedundantAttributes(tree) {
         let isRemove = false;
 
         if (typeof tagRedundantAttributeValue === 'function') {
-          isRemove = tagRedundantAttributeValue(node);
-        } else if (node.attrs[redundantAttributeName] === tagRedundantAttributeValue) {
+          isRemove = tagRedundantAttributeValue(attrs);
+        } else if (attrs[redundantAttributeName] === tagRedundantAttributeValue) {
           isRemove = true;
         }
 
         if (isRemove) {
-          delete node.attrs[redundantAttributeName];
+          delete newAttrs[redundantAttributeName];
         }
       }
     }
@@ -149,17 +146,16 @@ function removeRedundantAttributes(tree) {
         let tagMissingValueDefaultAttribute = tagMissingValueDefaultAttributes[canBeReplacedWithEmptyStringAttributeName];
         let isReplace = false;
 
-        if (node.attrs[canBeReplacedWithEmptyStringAttributeName] === tagMissingValueDefaultAttribute) {
+        if (attrs[canBeReplacedWithEmptyStringAttributeName] === tagMissingValueDefaultAttribute) {
           isReplace = true;
         }
 
         if (isReplace) {
-          node.attrs[canBeReplacedWithEmptyStringAttributeName] = '';
+          newAttrs[canBeReplacedWithEmptyStringAttributeName] = '';
         }
       }
     }
 
-    return node;
-  });
-  return tree;
+    return newAttrs;
+  };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "htmlnano",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Modular HTML minifier, built on top of the PostHTML",
   "main": "index.js",
   "author": "Kirill Maltsev <maltsevkirill@gmail.com>",
@@ -46,11 +46,11 @@
   "devDependencies": {
     "@babel/cli": "^7.15.7",
     "@babel/core": "^7.15.5",
+    "@babel/eslint-parser": "^7.17.0",
     "@babel/preset-env": "^7.15.6",
     "@babel/register": "^7.15.3",
-    "babel-eslint": "^10.1.0",
     "cssnano": "^5.0.11",
-    "eslint": "^7.32.0",
+    "eslint": "^8.12.0",
     "expect": "^27.2.0",
     "mocha": "^9.1.0",
     "postcss": "^8.3.11",