htmlnano 0.2.9 → 1.1.1

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,10 @@ 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 || 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/presets/safe.js

@@ -27,14 +27,19 @@ var _default = {
   minifyJson: {},
   minifySvg: {
     plugins: [{
-      collapseGroups: false
-    }, {
-      convertShapeToPath: false
+      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": "0.2.9",
+  "version": "1.1.1",
   "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,26 +39,28 @@
     ]
   },
   "dependencies": {
-    "cssnano": "^4.1.11",
-    "posthtml": "^0.15.1",
-    "purgecss": "^2.3.0",
+    "cosmiconfig": "^7.0.1",
+    "cssnano": "^5.0.8",
+    "postcss": "^8.3.6",
+    "posthtml": "^0.16.5",
+    "purgecss": "^4.0.0",
     "relateurl": "^0.2.7",
-    "srcset": "^3.0.0",
-    "svgo": "^1.3.2",
-    "terser": "^5.6.1",
+    "srcset": "^4.0.0",
+    "svgo": "^2.6.1",
+    "terser": "^5.8.0",
     "timsort": "^0.3.0",
     "uncss": "^0.17.3"
   },
   "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.23.0",
-    "expect": "^26.6.2",
-    "mocha": "^8.3.2",
-    "release-it": "^14.5.1",
+    "eslint": "^7.32.0",
+    "expect": "^27.2.0",
+    "mocha": "^9.1.0",
+    "release-it": "^14.11.5",
     "rimraf": "^3.0.2"
   },
   "repository": {

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);

package/uncss-fork.patch

@@ -0,0 +1,13 @@
+diff --git a/package.json b/package.json
+index a127c0f..66455bb 100644
+--- a/package.json
++++ b/package.json
+@@ -49,7 +49,7 @@
+     "svgo": "^2.4.0",
+     "terser": "^5.7.0",
+     "timsort": "^0.3.0",
+-    "uncss": "^0.17.3"
++    "@novaatwarren/uncss": "^0.17.4"
+   },
+   "devDependencies": {
+     "@babel/cli": "^7.14.3",