htmlnano 2.0.2 → 2.0.3

package/lib/modules/removeUnusedCss.js

@@ -4,17 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = removeUnusedCss;
-
 var _helpers = require("../helpers");
-
 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.
+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.
 const uncssOptions = {
   ignoreSheets: [/\s*/],
   stylesheets: []
 };
-
 function processStyleNodeUnCSS(html, styleNode, uncssOptions) {
   const css = (0, _helpers.extractCssFromStyleNode)(styleNode);
   return runUncss(html, css, uncssOptions).then(css => {
@@ -24,17 +22,15 @@ function processStyleNodeUnCSS(html, styleNode, uncssOptions) {
       styleNode.content = [];
       return;
     }
-
     styleNode.content = [css];
   });
 }
-
 function runUncss(html, css, userOptions) {
   if (typeof userOptions !== 'object') {
     userOptions = {};
   }
-
-  const options = { ...userOptions,
+  const options = {
+    ...userOptions,
     ...uncssOptions
   };
   return new Promise((resolve, reject) => {
@@ -44,12 +40,10 @@ function runUncss(html, css, userOptions) {
         reject(error);
         return;
       }
-
       resolve(output);
     });
   });
 }
-
 const purgeFromHtml = function (tree) {
   // content is not used as we can directly used the parsed HTML,
   // making the process faster
@@ -63,7 +57,6 @@ const purgeFromHtml = function (tree) {
   });
   return () => selectors;
 };
-
 function processStyleNodePurgeCSS(tree, styleNode, purgecssOptions) {
   const css = (0, _helpers.extractCssFromStyleNode)(styleNode);
   return runPurgecss(tree, css, purgecssOptions).then(css => {
@@ -72,17 +65,15 @@ function processStyleNodePurgeCSS(tree, styleNode, purgecssOptions) {
       styleNode.content = [];
       return;
     }
-
     styleNode.content = [css];
   });
 }
-
 function runPurgecss(tree, css, userOptions) {
   if (typeof userOptions !== 'object') {
     userOptions = {};
   }
-
-  const options = { ...userOptions,
+  const options = {
+    ...userOptions,
     content: [{
       raw: tree,
       extension: 'html'
@@ -100,9 +91,8 @@ function runPurgecss(tree, css, userOptions) {
     return result[0].css;
   });
 }
-/** Remove unused CSS */
-
 
+/** Remove unused CSS */
 function removeUnusedCss(tree, options, userOptions) {
   const promises = [];
   const html = userOptions.tool !== 'purgeCSS' && tree.render(tree);
@@ -118,7 +108,6 @@ function removeUnusedCss(tree, options, userOptions) {
         }
       }
     }
-
     return node;
   });
   return Promise.all(promises).then(() => tree);

package/lib/modules/sortAttributes.js

@@ -4,16 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = sortAttributes;
-
 var _timsort = require("timsort");
-
 const validOptions = new Set(['frequency', 'alphabetical']);
-
 const processModuleOptions = options => {
   if (options === true) return 'alphabetical';
   return validOptions.has(options) ? options : false;
 };
-
 class AttributeTokenChain {
   constructor() {
     this.freqData = new Map(); // <attr, frequency>[]
@@ -22,7 +18,6 @@ class AttributeTokenChain {
   addFromNodeAttrs(nodeAttrs) {
     Object.keys(nodeAttrs).forEach(attrName => {
       const attrNameLower = attrName.toLowerCase();
-
       if (this.freqData.has(attrNameLower)) {
         this.freqData.set(attrNameLower, this.freqData.get(attrNameLower) + 1);
       } else {
@@ -30,59 +25,50 @@ class AttributeTokenChain {
       }
     });
   }
-
   createSortOrder() {
     let _sortOrder = [...this.freqData.entries()];
     (0, _timsort.sort)(_sortOrder, (a, b) => b[1] - a[1]);
     this.sortOrder = _sortOrder.map(i => i[0]);
   }
-
   sortFromNodeAttrs(nodeAttrs) {
-    const newAttrs = {}; // Convert node.attrs attrName into lower case.
+    const newAttrs = {};
 
+    // Convert node.attrs attrName into lower case.
     const loweredNodeAttrs = {};
     Object.entries(nodeAttrs).forEach(([attrName, attrValue]) => {
       loweredNodeAttrs[attrName.toLowerCase()] = attrValue;
     });
-
     if (!this.sortOrder) {
       this.createSortOrder();
     }
-
     this.sortOrder.forEach(attrNameLower => {
       // The attrName inside "sortOrder" has been lowered
-      if (loweredNodeAttrs[attrNameLower]) {
+      if (loweredNodeAttrs[attrNameLower] != null) {
         newAttrs[attrNameLower] = loweredNodeAttrs[attrNameLower];
       }
     });
     return newAttrs;
   }
-
 }
-/** Sort attibutes */
-
 
+/** Sort attibutes */
 function sortAttributes(tree, options, moduleOptions) {
   const sortType = processModuleOptions(moduleOptions);
-
   if (sortType === 'alphabetical') {
     return sortAttributesInAlphabeticalOrder(tree);
   }
-
   if (sortType === 'frequency') {
     return sortAttributesByFrequency(tree);
-  } // Invalid configuration
-
+  }
 
+  // Invalid configuration
   return tree;
 }
-
 function sortAttributesInAlphabeticalOrder(tree) {
   tree.walk(node => {
     if (!node.attrs) {
       return node;
     }
-
     const newAttrs = {};
     Object.keys(node.attrs).sort((a, b) => typeof a.localeCompare === 'function' ? a.localeCompare(b) : a - b).forEach(attr => newAttrs[attr] = node.attrs[attr]);
     node.attrs = newAttrs;
@@ -90,24 +76,23 @@ function sortAttributesInAlphabeticalOrder(tree) {
   });
   return tree;
 }
-
 function sortAttributesByFrequency(tree) {
-  const tokenchain = new AttributeTokenChain(); // Traverse through tree to get frequency
+  const tokenchain = new AttributeTokenChain();
 
+  // Traverse through tree to get frequency
   tree.walk(node => {
     if (!node.attrs) {
       return node;
     }
-
     tokenchain.addFromNodeAttrs(node.attrs);
     return node;
-  }); // Traverse through tree again, this time sort the attributes
+  });
 
+  // Traverse through tree again, this time sort the attributes
   tree.walk(node => {
     if (!node.attrs) {
       return node;
     }
-
     node.attrs = tokenchain.sortFromNodeAttrs(node.attrs);
     return node;
   });

package/lib/modules/sortAttributesWithLists.js

@@ -4,19 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = collapseAttributeWhitespace;
-
 var _timsort = require("timsort");
-
 var _collapseAttributeWhitespace = require("./collapseAttributeWhitespace");
-
 // class, rel, ping
-const validOptions = new Set(['frequency', 'alphabetical']);
 
+const validOptions = new Set(['frequency', 'alphabetical']);
 const processModuleOptions = options => {
   if (options === true) return 'alphabetical';
   return validOptions.has(options) ? options : false;
 };
-
 class AttributeTokenChain {
   constructor() {
     this.freqData = new Map(); // <attrValue, frequency>[]
@@ -31,20 +27,16 @@ class AttributeTokenChain {
       }
     });
   }
-
   createSortOrder() {
     let _sortOrder = [...this.freqData.entries()];
     (0, _timsort.sort)(_sortOrder, (a, b) => b[1] - a[1]);
     this.sortOrder = _sortOrder.map(i => i[0]);
   }
-
   sortFromNodeAttrsArray(attrValuesArray) {
     const resultArray = [];
-
     if (!this.sortOrder) {
       this.createSortOrder();
     }
-
     this.sortOrder.forEach(k => {
       if (attrValuesArray.includes(k)) {
         resultArray.push(k);
@@ -52,39 +44,31 @@ class AttributeTokenChain {
     });
     return resultArray;
   }
-
 }
-/** Sort values inside list-like attributes (e.g. class, rel) */
-
 
+/** Sort values inside list-like attributes (e.g. class, rel) */
 function collapseAttributeWhitespace(tree, options, moduleOptions) {
   const sortType = processModuleOptions(moduleOptions);
-
   if (sortType === 'alphabetical') {
     return sortAttributesWithListsInAlphabeticalOrder(tree);
   }
-
   if (sortType === 'frequency') {
     return sortAttributesWithListsByFrequency(tree);
-  } // Invalid configuration
-
+  }
 
+  // Invalid configuration
   return tree;
 }
-
 function sortAttributesWithListsInAlphabeticalOrder(tree) {
   tree.walk(node => {
     if (!node.attrs) {
       return node;
     }
-
     Object.keys(node.attrs).forEach(attrName => {
       const attrNameLower = attrName.toLowerCase();
-
       if (!_collapseAttributeWhitespace.attributesWithLists.has(attrNameLower)) {
         return;
       }
-
       const attrValues = node.attrs[attrName].split(/\s/);
       node.attrs[attrName] = attrValues.sort((a, b) => {
         return typeof a.localeCompare === 'function' ? a.localeCompare(b) : a - b;
@@ -94,41 +78,35 @@ function sortAttributesWithListsInAlphabeticalOrder(tree) {
   });
   return tree;
 }
-
 function sortAttributesWithListsByFrequency(tree) {
   const tokenChainObj = {}; // <attrNameLower: AttributeTokenChain>[]
-  // Traverse through tree to get frequency
 
+  // Traverse through tree to get frequency
   tree.walk(node => {
     if (!node.attrs) {
       return node;
     }
-
     Object.entries(node.attrs).forEach(([attrName, attrValues]) => {
       const attrNameLower = attrName.toLowerCase();
-
       if (!_collapseAttributeWhitespace.attributesWithLists.has(attrNameLower)) {
         return;
       }
-
       tokenChainObj[attrNameLower] = tokenChainObj[attrNameLower] || new AttributeTokenChain();
       tokenChainObj[attrNameLower].addFromNodeAttrsArray(attrValues.split(/\s/));
     });
     return node;
-  }); // Traverse through tree again, this time sort the attribute values
+  });
 
+  // Traverse through tree again, this time sort the attribute values
   tree.walk(node => {
     if (!node.attrs) {
       return node;
     }
-
     Object.entries(node.attrs).forEach(([attrName, attrValues]) => {
       const attrNameLower = attrName.toLowerCase();
-
       if (!_collapseAttributeWhitespace.attributesWithLists.has(attrNameLower)) {
         return;
       }
-
       if (tokenChainObj[attrNameLower]) {
         node.attrs[attrName] = tokenChainObj[attrNameLower].sortFromNodeAttrsArray(attrValues.split(/\s/)).join(' ');
       }

package/lib/presets/ampSafe.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _safe = _interopRequireDefault(require("./safe"));
-
 function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : {
     default: obj
@@ -15,9 +13,8 @@ function _interopRequireDefault(obj) {
 /**
  * A safe preset for AMP pages (https://www.ampproject.org)
  */
-
-
-var _default = { ..._safe.default,
+var _default = {
+  ..._safe.default,
   collapseBooleanAttributes: {
     amphtml: true
   },

package/lib/presets/max.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _safe = _interopRequireDefault(require("./safe"));
-
 function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : {
     default: obj
@@ -15,9 +13,8 @@ function _interopRequireDefault(obj) {
 /**
  * Maximal minification (might break some pages)
  */
-
-
-var _default = { ..._safe.default,
+var _default = {
+  ..._safe.default,
   collapseWhitespace: 'all',
   removeComments: 'all',
   removeAttributeQuotes: true,

package/lib/presets/safe.js

@@ -7,19 +7,40 @@ exports.default = void 0;
 /**
  * Minify HTML in a safe way without breaking anything.
  */
-
 var _default = {
-  sortAttributes: false,
+  /* ----------------------------------------
+   * Attributes
+   * ---------------------------------------- */
+  // normalize the case of attribute names and values
+  // normalizeAttributeValues will also normalize property value with invalid value default
+  // See https://html.spec.whatwg.org/#invalid-value-default
+  normalizeAttributeValues: true,
+  removeEmptyAttributes: true,
   collapseAttributeWhitespace: true,
+  // removeRedundantAttributes will remove attributes when missing value default matches the attribute's value
+  // See https://html.spec.whatwg.org/#missing-value-default
+  removeRedundantAttributes: false,
+  // collapseBooleanAttributes will also collapse those default state can be omitted
   collapseBooleanAttributes: {
     amphtml: false
   },
-  collapseWhitespace: 'conservative',
-  custom: [],
   deduplicateAttributeValues: true,
-  mergeScripts: false,
+  minifyUrls: false,
+  sortAttributes: false,
+  sortAttributesWithLists: 'alphabetical',
+  /* ----------------------------------------
+   * Minify HTML content
+   * ---------------------------------------- */
+  collapseWhitespace: 'conservative',
+  removeComments: 'safe',
+  minifyConditionalComments: false,
+  removeOptionalTags: false,
+  removeAttributeQuotes: false,
+  /* ----------------------------------------
+   * Minify inline <style>, <script> and <svg> tag
+   * ---------------------------------------- */
   mergeStyles: false,
-  removeUnusedCss: false,
+  mergeScripts: false,
   minifyCss: {
     preset: 'default'
   },
@@ -36,14 +57,10 @@ var _default = {
       }
     }]
   },
-  minifyConditionalComments: false,
-  removeRedundantAttributes: false,
-  normalizeAttributeValues: true,
-  removeEmptyAttributes: true,
-  removeComments: 'safe',
-  removeAttributeQuotes: false,
-  sortAttributesWithLists: 'alphabetical',
-  minifyUrls: false,
-  removeOptionalTags: false
+  removeUnusedCss: false,
+  /* ----------------------------------------
+   * Miscellaneous
+   * ---------------------------------------- */
+  custom: []
 };
 exports.default = _default;

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "htmlnano",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Modular HTML minifier, built on top of the PostHTML",
   "main": "index.js",
+  "types": "index.d.ts",
   "author": "Kirill Maltsev <maltsevkirill@gmail.com>",
   "license": "MIT",
   "scripts": {
@@ -11,13 +12,7 @@
     "pretest": "npm run lint && npm run compile",
     "test": ":",
     "posttest": "mocha --timeout 5000 --require @babel/register --recursive --check-leaks --globals addresses",
-    "prepare": "npm run compile",
-    "release:patch": "release-it patch -n"
-  },
-  "release-it": {
-    "hooks": {
-      "before:init": "npm test"
-    }
+    "prepare": "npm run compile"
   },
   "keywords": [
     "posthtml",
@@ -49,16 +44,15 @@
     "@babel/eslint-parser": "^7.17.0",
     "@babel/preset-env": "^7.15.6",
     "@babel/register": "^7.15.3",
-    "cssnano": "^5.0.11",
+    "cssnano": "^5.1.12",
     "eslint": "^8.12.0",
     "expect": "^27.2.0",
-    "mocha": "^9.1.0",
+    "mocha": "^10.1.0",
     "postcss": "^8.3.11",
-    "purgecss": "^4.0.3",
+    "purgecss": "^5.0.0",
     "relateurl": "^0.2.7",
-    "release-it": "^14.11.5",
     "rimraf": "^3.0.2",
-    "srcset": "^5.0.0",
+    "srcset": "4.0.0",
     "svgo": "^2.8.0",
     "terser": "^5.10.0",
     "uncss": "^0.17.3"
@@ -66,9 +60,9 @@
   "peerDependencies": {
     "cssnano": "^5.0.11",
     "postcss": "^8.3.11",
-    "purgecss": "^4.0.3",
+    "purgecss": "^5.0.0",
     "relateurl": "^0.2.7",
-    "srcset": "^5.0.0",
+    "srcset": "4.0.0",
     "svgo": "^2.8.0",
     "terser": "^5.10.0",
     "uncss": "^0.17.3"

package/test.js

@@ -1,48 +0,0 @@
-const htmlnano = require('.');
-// 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
-//     lowerCaseTags: true, // https://github.com/posthtml/posthtml-parser#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 = `
-<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)
-    .then(function (result) {
-        // result.html is minified
-        console.log(result.html);
-    })
-    .catch(function (err) {
-        console.error(err);
-    });