htmlnano 1.0.0 → 2.0.0

package/lib/modules/normalizeAttributeValues.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = normalizeAttributeValues;
+const caseInsensitiveAttributes = {
+  autocomplete: ['form'],
+  charset: ['meta', 'script'],
+  contenteditable: null,
+  crossorigin: ['audio', 'img', 'link', 'script', 'video'],
+  dir: null,
+  draggable: null,
+  dropzone: null,
+  formmethod: ['button', 'input'],
+  inputmode: ['input', 'textarea'],
+  kind: ['track'],
+  method: ['form'],
+  preload: ['audio', 'video'],
+  referrerpolicy: ['a', 'area', 'iframe', 'img', 'link'],
+  sandbox: ['iframe'],
+  spellcheck: null,
+  scope: ['th'],
+  shape: ['area'],
+  sizes: ['link'],
+  step: ['input'],
+  translate: null,
+  type: ['a', 'link', 'button', 'embed', 'object', 'script', 'source', 'style', 'input', 'menu', 'menuitem'],
+  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;
+      }
+    });
+    return node;
+  });
+  return tree;
+}

package/lib/modules/removeComments.js

@@ -11,7 +11,7 @@ const MATCH_EXCERPT_REGEXP = /<!-- ?more ?-->/i;
 /** Removes HTML comments */
 
 function removeComments(tree, options, removeType) {
-  if (removeType !== 'all' && removeType !== 'safe') {
+  if (removeType !== 'all' && removeType !== 'safe' && !isMatcher(removeType)) {
     removeType = 'safe';
   }
 
@@ -68,5 +68,29 @@ function isCommentToRemove(text, removeType) {
     }
   }
 
+  if (isMatcher(removeType)) {
+    return isMatch(text, removeType);
+  }
+
   return true;
+}
+
+function isMatch(input, matcher) {
+  if (matcher instanceof RegExp) {
+    return matcher.test(input);
+  }
+
+  if (typeof matcher === 'function') {
+    return Boolean(matcher(input));
+  }
+
+  return false;
+}
+
+function isMatcher(matcher) {
+  if (matcher instanceof RegExp || typeof matcher === 'function') {
+    return true;
+  }
+
+  return false;
 }

package/lib/modules/removeEmptyAttributes.js

@@ -4,8 +4,54 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = removeEmptyAttributes;
-// Source: https://www.w3.org/TR/html4/sgml/dtd.html#events (Generic Attributes)
-const safeToRemoveAttrs = new Set(['id', 'class', 'style', 'title', 'lang', 'dir', 'onclick', 'ondblclick', 'onmousedown', 'onmouseup', 'onmouseover', 'onmousemove', 'onmouseout', 'onkeypress', 'onkeydown', 'onkeyup']);
+const safeToRemoveAttrs = {
+  id: null,
+  class: null,
+  style: null,
+  title: null,
+  lang: null,
+  dir: null,
+  abbr: ['th'],
+  accept: ['input'],
+  'accept-charset': ['form'],
+  charset: ['meta', 'script'],
+  action: ['form'],
+  cols: ['textarea'],
+  colspan: ['td', 'th'],
+  coords: ['area'],
+  dirname: ['input', 'textarea'],
+  dropzone: null,
+  headers: ['td', 'th'],
+  form: ['button', 'fieldset', 'input', 'keygen', 'object', 'output', 'select', 'textarea'],
+  formaction: ['button', 'input'],
+  height: ['canvas', 'embed', 'iframe', 'img', 'input', 'object', 'video'],
+  high: 'meter',
+  href: 'link',
+  list: 'input',
+  low: 'meter',
+  manifest: 'html',
+  max: ['meter', 'progress'],
+  maxLength: ['input', 'textarea'],
+  menu: 'button',
+  min: 'meter',
+  minLength: ['input', 'textarea'],
+  name: ['button', 'fieldset', 'input', 'keygen', 'output', 'select', 'textarea', 'form', 'map', 'meta', 'param', 'slot'],
+  pattern: ['input'],
+  ping: ['a', 'area'],
+  placeholder: ['input', 'textarea'],
+  poster: ['video'],
+  rel: ['a', 'area', 'link'],
+  rows: 'textarea',
+  rowspan: ['td', 'th'],
+  size: ['input', 'select'],
+  span: ['col', 'colgroup'],
+  src: ['audio', 'embed', 'iframe', 'img', 'input', 'script', 'source', 'track', 'video'],
+  start: 'ol',
+  tabindex: null,
+  type: ['a', 'link', 'button', 'embed', 'object', 'script', 'source', 'style', 'input', 'menu', 'menuitem', 'ol'],
+  value: ['button', 'input', 'li'],
+  width: ['canvas', 'embed', 'iframe', 'img', 'input', 'object', 'video']
+};
 /** Removes empty attributes */
 
 function removeEmptyAttributes(tree) {
@@ -17,12 +63,11 @@ function removeEmptyAttributes(tree) {
     Object.entries(node.attrs).forEach(([attrName, attrValue]) => {
       const attrNameLower = attrName.toLowerCase();
 
-      if (!safeToRemoveAttrs.has(attrNameLower)) {
-        return;
-      }
-
-      if (attrValue === '' || (attrValue || '').match(/^\s+$/)) {
-        delete node.attrs[attrName];
+      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))) {
+        if (attrValue === '' || (attrValue || '').match(/^\s+$/)) {
+          delete node.attrs[attrName];
+        }
       }
     });
     return node;

package/lib/modules/removeRedundantAttributes.js

@@ -72,8 +72,47 @@ const redundantAttributes = {
   'iframe': {
     'loading': 'eager'
   }
+}; // See: https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#missing-value-default
+
+const canBeReplacedWithEmptyStringAttributes = {
+  audio: {
+    // https://html.spec.whatwg.org/#attr-media-preload
+    preload: 'auto'
+  },
+  video: {
+    preload: 'auto'
+  },
+  form: {
+    // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute
+    autocomplete: 'on'
+  },
+  img: {
+    // https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decoding
+    decoding: 'auto'
+  },
+  track: {
+    // https://html.spec.whatwg.org/multipage/media.html#htmltrackelement
+    kind: 'subtitles'
+  },
+  textarea: {
+    // https://html.spec.whatwg.org/multipage/form-elements.html#dom-textarea-wrap
+    wrap: 'soft'
+  },
+  area: {
+    // https://html.spec.whatwg.org/multipage/image-maps.html#attr-area-shape
+    shape: 'rect'
+  },
+  button: {
+    // https://html.spec.whatwg.org/multipage/form-elements.html#attr-button-type
+    type: 'submit'
+  },
+  input: {
+    // https://html.spec.whatwg.org/multipage/input.html#states-of-the-type-attribute
+    type: 'text'
+  }
 };
 const tagsHaveRedundantAttributes = new Set(Object.keys(redundantAttributes));
+const tagsHaveMissingValueDefaultAttributes = new Set(Object.keys(canBeReplacedWithEmptyStringAttributes));
 /** Removes redundant attributes */
 
 function removeRedundantAttributes(tree) {
@@ -82,25 +121,41 @@ function removeRedundantAttributes(tree) {
       return node;
     }
 
-    if (!tagsHaveRedundantAttributes.has(node.tag)) {
-      return node;
-    }
-
-    const tagRedundantAttributes = redundantAttributes[node.tag];
     node.attrs = node.attrs || {};
 
-    for (const redundantAttributeName of Object.keys(tagRedundantAttributes)) {
-      let tagRedundantAttributeValue = tagRedundantAttributes[redundantAttributeName];
-      let isRemove = false;
+    if (tagsHaveRedundantAttributes.has(node.tag)) {
+      const tagRedundantAttributes = redundantAttributes[node.tag];
+
+      for (const redundantAttributeName of Object.keys(tagRedundantAttributes)) {
+        let tagRedundantAttributeValue = tagRedundantAttributes[redundantAttributeName];
+        let isRemove = false;
+
+        if (typeof tagRedundantAttributeValue === 'function') {
+          isRemove = tagRedundantAttributeValue(node);
+        } else if (node.attrs[redundantAttributeName] === tagRedundantAttributeValue) {
+          isRemove = true;
+        }
 
-      if (typeof tagRedundantAttributeValue === 'function') {
-        isRemove = tagRedundantAttributeValue(node);
-      } else if (node.attrs[redundantAttributeName] === tagRedundantAttributeValue) {
-        isRemove = true;
+        if (isRemove) {
+          delete node.attrs[redundantAttributeName];
+        }
       }
+    }
 
-      if (isRemove) {
-        delete node.attrs[redundantAttributeName];
+    if (tagsHaveMissingValueDefaultAttributes.has(node.tag)) {
+      const tagMissingValueDefaultAttributes = canBeReplacedWithEmptyStringAttributes[node.tag];
+
+      for (const canBeReplacedWithEmptyStringAttributeName of Object.keys(tagMissingValueDefaultAttributes)) {
+        let tagMissingValueDefaultAttribute = tagMissingValueDefaultAttributes[canBeReplacedWithEmptyStringAttributeName];
+        let isReplace = false;
+
+        if (node.attrs[canBeReplacedWithEmptyStringAttributeName] === tagMissingValueDefaultAttribute) {
+          isReplace = true;
+        }
+
+        if (isReplace) {
+          node.attrs[canBeReplacedWithEmptyStringAttributeName] = '';
+        }
       }
     }
 

package/lib/modules/removeUnusedCss.js

@@ -7,13 +7,9 @@ exports.default = removeUnusedCss;
 
 var _helpers = require("../helpers");
 
-var _uncss = _interopRequireDefault(require("uncss"));
+const uncss = (0, _helpers.optionalRequire)('uncss');
+const purgecss = (0, _helpers.optionalRequire)('purgecss'); // These options must be set and shouldn't be overriden to ensure uncss doesn't look at linked stylesheets.
 
-var _purgecss = _interopRequireDefault(require("purgecss"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-// These options must be set and shouldn't be overriden to ensure uncss doesn't look at linked stylesheets.
 const uncssOptions = {
   ignoreSheets: [/\s*/],
   stylesheets: []
@@ -43,7 +39,7 @@ function runUncss(html, css, userOptions) {
   };
   return new Promise((resolve, reject) => {
     options.raw = css;
-    (0, _uncss.default)(html, options, (error, output) => {
+    uncss(html, options, (error, output) => {
       if (error) {
         reject(error);
         return;
@@ -100,7 +96,7 @@ function runPurgecss(tree, css, userOptions) {
       extensions: ['html']
     }]
   };
-  return new _purgecss.default().purge(options).then(result => {
+  return new purgecss.PurgeCSS().purge(options).then(result => {
     return result[0].css;
   });
 }
@@ -113,9 +109,13 @@ function removeUnusedCss(tree, options, userOptions) {
   tree.walk(node => {
     if ((0, _helpers.isStyleNode)(node)) {
       if (userOptions.tool === 'purgeCSS') {
-        promises.push(processStyleNodePurgeCSS(tree, node, userOptions));
+        if (purgecss) {
+          promises.push(processStyleNodePurgeCSS(tree, node, userOptions));
+        }
       } else {
-        promises.push(processStyleNodeUnCSS(html, node, userOptions));
+        if (uncss) {
+          promises.push(processStyleNodeUnCSS(html, node, userOptions));
+        }
       }
     }
 

package/lib/presets/max.js

@@ -22,6 +22,8 @@ var _default = { ..._safe.default,
   removeComments: 'all',
   removeAttributeQuotes: true,
   removeRedundantAttributes: true,
+  mergeScripts: true,
+  mergeStyles: true,
   removeUnusedCss: {},
   minifyCss: {
     preset: 'default'

package/lib/presets/safe.js

@@ -4,13 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
-var _svgo = require("svgo");
 /**
  * Minify HTML in a safe way without breaking anything.
  */
 
-
 var _default = {
   sortAttributes: false,
   collapseAttributeWhitespace: true,
@@ -20,8 +17,8 @@ var _default = {
   collapseWhitespace: 'conservative',
   custom: [],
   deduplicateAttributeValues: true,
-  mergeScripts: true,
-  mergeStyles: true,
+  mergeScripts: false,
+  mergeStyles: false,
   removeUnusedCss: false,
   minifyCss: {
     preset: 'default'
@@ -29,17 +26,20 @@ var _default = {
   minifyJs: {},
   minifyJson: {},
   minifySvg: {
-    plugins: (0, _svgo.extendDefaultPlugins)([{
-      name: 'collapseGroups',
-      active: false
-    }, {
-      name: 'convertShapeToPath',
-      convertShapeToPath: false
-    }])
+    plugins: [{
+      name: 'preset-default',
+      params: {
+        overrides: {
+          collapseGroups: false,
+          convertShapeToPath: false
+        }
+      }
+    }]
   },
   minifyConditionalComments: false,
-  removeEmptyAttributes: true,
   removeRedundantAttributes: false,
+  normalizeAttributeValues: true,
+  removeEmptyAttributes: true,
   removeComments: 'safe',
   removeAttributeQuotes: false,
   sortAttributesWithLists: 'alphabetical',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "htmlnano",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Modular HTML minifier, built on top of the PostHTML",
   "main": "index.js",
   "author": "Kirill Maltsev <maltsevkirill@gmail.com>",
@@ -10,7 +10,7 @@
     "lint": "eslint *.js lib/*.es6 lib/modules/*.es6 lib/presets/*.es6 test/",
     "pretest": "npm run lint && npm run compile",
     "test": ":",
-    "posttest": "mocha --require @babel/register --recursive --check-leaks --globals addresses",
+    "posttest": "mocha --timeout 5000 --require @babel/register --recursive --check-leaks --globals addresses",
     "prepare": "npm run compile",
     "release:patch": "release-it patch -n"
   },
@@ -39,28 +39,65 @@
     ]
   },
   "dependencies": {
-    "cssnano": "^5.0.0",
-    "postcss": "^8.2.9",
-    "posthtml": "^0.15.2",
-    "purgecss": "^4.0.0",
-    "relateurl": "^0.2.7",
-    "srcset": "^3.0.0",
-    "svgo": "^2.3.0",
-    "terser": "^5.6.1",
-    "timsort": "^0.3.0",
-    "uncss": "^0.17.3"
+    "cosmiconfig": "^7.0.1",
+    "posthtml": "^0.16.5",
+    "timsort": "^0.3.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.14",
-    "@babel/core": "^7.13.15",
-    "@babel/preset-env": "^7.13.15",
-    "@babel/register": "^7.13.14",
+    "@babel/cli": "^7.15.7",
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.6",
+    "@babel/register": "^7.15.3",
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.24.0",
-    "expect": "^26.6.2",
-    "mocha": "^8.3.2",
-    "release-it": "^14.6.1",
-    "rimraf": "^3.0.2"
+    "cssnano": "^5.0.11",
+    "eslint": "^7.32.0",
+    "expect": "^27.2.0",
+    "mocha": "^9.1.0",
+    "postcss": "^8.3.11",
+    "purgecss": "^4.0.3",
+    "relateurl": "^0.2.7",
+    "release-it": "^14.11.5",
+    "rimraf": "^3.0.2",
+    "srcset": "^5.0.0",
+    "svgo": "^2.8.0",
+    "terser": "^5.10.0",
+    "uncss": "^0.17.3"
+  },
+  "peerDependencies": {
+    "cssnano": "^5.0.11",
+    "postcss": "^8.3.11",
+    "purgecss": "^4.0.3",
+    "relateurl": "^0.2.7",
+    "srcset": "^5.0.0",
+    "svgo": "^2.8.0",
+    "terser": "^5.10.0",
+    "uncss": "^0.17.3"
+  },
+  "peerDependenciesMeta": {
+    "cssnano": {
+      "optional": true
+    },
+    "postcss": {
+      "optional": true
+    },
+    "purgecss": {
+      "optional": true
+    },
+    "relateurl": {
+      "optional": true
+    },
+    "srcset": {
+      "optional": true
+    },
+    "svgo": {
+      "optional": true
+    },
+    "terser": {
+      "optional": true
+    },
+    "uncss": {
+      "optional": true
+    }
   },
   "repository": {
     "type": "git",

package/test.js

@@ -1,8 +1,10 @@
 const htmlnano = require('.');
-const options = {
+// const posthtml = require('posthtml');
+const safePreset = require('./lib/presets/safe');
+// const options = {
     // minifySvg: false,
     // minifyJs: false,
-};
+// };
 // // posthtml, posthtml-render, and posthtml-parse options
 // const postHtmlOptions = {
 //     sync: true, // https://github.com/posthtml/posthtml#usage
@@ -10,26 +12,33 @@ const options = {
 //     quoteAllAttributes: false, // https://github.com/posthtml/posthtml-render#options
 // };
 
+// const html = `
+// <!doctype html>
+// <html lang="en">
+// <head>
+//   <meta charset="utf-8">
+//   <title></title>
+//   <script class="fob">alert(1)</script>
+//   <script>alert(2)</script>
+// </head>
+// <body>
+//     <script>alert(3)</script>
+//     <script>alert(4)</script>
+// </body>
+// </html>
+// `;
+
+const options = {
+    minifySvg: safePreset.minifySvg,
+};
 const html = `
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title></title>
-  <script class="fob">alert(1)</script>
-  <script>alert(2)</script>
-</head>
-<body>
-    <script>alert(3)</script>
-    <script>alert(4)</script>
-</body>
-</html>
+<input type="text" class="form-control" name="testInput" autofocus="" autocomplete="off" id="testId"><a id="testId" href="#" class="testClass"></a><img width="20" src="../images/image.png" height="40" alt="image" class="cls" id="id2">
 `;
 
 htmlnano
     // "preset" arg might be skipped (see "Presets" section below for more info)
     // "postHtmlOptions" arg might be skipped
-    .process(html, options)
+    .process(html)
     .then(function (result) {
         // result.html is minified
         console.log(result.html);