htmlnano 0.2.4 → 0.2.8

package/lib/modules/removeUnusedCss.js

@@ -1,75 +1,127 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
 exports.default = removeUnusedCss;
 
-var _helpers = require('../helpers');
+var _helpers = require("../helpers");
 
-var _uncss = require('uncss');
+var _uncss = _interopRequireDefault(require("uncss"));
 
-var _uncss2 = _interopRequireDefault(_uncss);
+var _purgecss = _interopRequireDefault(require("purgecss"));
 
-var _posthtmlRender = require('posthtml-render');
-
-var _posthtmlRender2 = _interopRequireDefault(_posthtmlRender);
+var _posthtmlRender = _interopRequireDefault(require("posthtml-render"));
 
 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.
-var uncssOptions = {
-    ignoreSheets: [/\s*/],
-    stylesheets: []
+const uncssOptions = {
+  ignoreSheets: [/\s*/],
+  stylesheets: []
 };
 
-/** Remove unused CSS using uncss */
-function removeUnusedCss(tree, options, uncssOptions) {
-    var promises = [];
-    var html = (0, _posthtmlRender2.default)(tree);
-    tree.walk(function (node) {
-        if ((0, _helpers.isStyleNode)(node)) {
-            promises.push(processStyleNode(html, node, uncssOptions));
-        }
-        return node;
-    });
+function processStyleNodeUnCSS(html, styleNode, uncssOptions) {
+  const css = (0, _helpers.extractCssFromStyleNode)(styleNode);
+  return runUncss(html, css, uncssOptions).then(css => {
+    // uncss may have left some style tags empty
+    if (css.trim().length === 0) {
+      styleNode.tag = false;
+      styleNode.content = [];
+      return;
+    }
 
-    return Promise.all(promises).then(function () {
-        return tree;
-    });
+    styleNode.content = [css];
+  });
 }
 
-function processStyleNode(html, styleNode, uncssOptions) {
-    var css = (0, _helpers.extractCssFromStyleNode)(styleNode);
-
-    return runUncss(html, css, uncssOptions).then(function (css) {
-        // uncss may have left some style tags empty
-        if (css.trim().length === 0) {
-            styleNode.tag = false;
-            styleNode.content = [];
-            return;
-        }
-        styleNode.content = [css];
+function runUncss(html, css, userOptions) {
+  if (typeof userOptions !== 'object') {
+    userOptions = {};
+  }
+
+  const options = { ...userOptions,
+    ...uncssOptions
+  };
+  return new Promise((resolve, reject) => {
+    options.raw = css;
+    (0, _uncss.default)(html, options, (error, output) => {
+      if (error) {
+        reject(error);
+        return;
+      }
+
+      resolve(output);
     });
+  });
 }
 
-function runUncss(html, css, userOptions) {
-    if ((typeof userOptions === 'undefined' ? 'undefined' : _typeof(userOptions)) !== 'object') {
-        userOptions = {};
+const purgeFromHtml = function (tree) {
+  // content is not used as we can directly used the parsed HTML,
+  // making the process faster
+  const selectors = [];
+  tree.walk(node => {
+    const classes = node.attrs && node.attrs.class && node.attrs.class.split(' ') || [];
+    const ids = node.attrs && node.attrs.id && node.attrs.id.split(' ') || [];
+    selectors.push(...classes, ...ids);
+    node.tag && selectors.push(node.tag);
+    return node;
+  });
+  return () => selectors;
+};
+
+function processStyleNodePurgeCSS(tree, styleNode, purgecssOptions) {
+  const css = (0, _helpers.extractCssFromStyleNode)(styleNode);
+  return runPurgecss(tree, css, purgecssOptions).then(css => {
+    if (css.trim().length === 0) {
+      styleNode.tag = false;
+      styleNode.content = [];
+      return;
     }
 
-    var options = Object.assign({}, userOptions, uncssOptions);
-    return new Promise(function (resolve, reject) {
-        options.raw = css;
-        (0, _uncss2.default)(html, options, function (error, output) {
-            if (error) {
-                reject(error);
-                return;
-            }
-            resolve(output);
-        });
-    });
+    styleNode.content = [css];
+  });
+}
+
+function runPurgecss(tree, css, userOptions) {
+  if (typeof userOptions !== 'object') {
+    userOptions = {};
+  }
+
+  const options = { ...userOptions,
+    content: [{
+      raw: tree,
+      extension: 'html'
+    }],
+    css: [{
+      raw: css,
+      extension: 'css'
+    }],
+    extractors: [{
+      extractor: purgeFromHtml(tree),
+      extensions: ['html']
+    }]
+  };
+  return new _purgecss.default().purge(options).then(result => {
+    return result[0].css;
+  });
+}
+/** Remove unused CSS */
+
+
+function removeUnusedCss(tree, options, userOptions) {
+  const promises = [];
+  const html = userOptions.tool !== 'purgeCSS' && (0, _posthtmlRender.default)(tree);
+  tree.walk(node => {
+    if ((0, _helpers.isStyleNode)(node)) {
+      if (userOptions.tool === 'purgeCSS') {
+        promises.push(processStyleNodePurgeCSS(tree, node, userOptions));
+      } else {
+        promises.push(processStyleNodeUnCSS(html, node, userOptions));
+      }
+    }
+
+    return node;
+  });
+  return Promise.all(promises).then(() => tree);
 }

package/lib/modules/sortAttributes.js

@@ -0,0 +1,120 @@
+"use strict";
+
+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>[]
+  }
+
+  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 {
+        this.freqData.set(attrNameLower, 1);
+      }
+    });
+  }
+
+  createSortOrder() {
+    let _sortOrder = [];
+
+    for (const item of this.freqData.entries()) {
+      _sortOrder.push(item);
+    }
+
+    (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 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]) {
+        newAttrs[attrNameLower] = loweredNodeAttrs[attrNameLower];
+      }
+    });
+    return newAttrs;
+  }
+
+}
+/** 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
+
+
+  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;
+    return node;
+  });
+  return tree;
+}
+
+function sortAttributesByFrequency(tree) {
+  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
+
+  tree.walk(node => {
+    if (!node.attrs) {
+      return node;
+    }
+
+    node.attrs = tokenchain.sortFromNodeAttrs(node.attrs);
+    return node;
+  });
+  return tree;
+}

package/lib/modules/sortAttributesWithLists.js

@@ -0,0 +1,143 @@
+"use strict";
+
+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 processModuleOptions = options => {
+  if (options === true) return 'alphabetical';
+  return validOptions.has(options) ? options : false;
+};
+
+class AttributeTokenChain {
+  constructor() {
+    this.freqData = new Map(); // <attrValue, frequency>[]
+  }
+
+  addFromNodeAttrsArray(attrValuesArray) {
+    attrValuesArray.forEach(attrValue => {
+      if (this.freqData.has(attrValue)) {
+        this.freqData.set(attrValue, this.freqData.get(attrValue) + 1);
+      } else {
+        this.freqData.set(attrValue, 1);
+      }
+    });
+  }
+
+  createSortOrder() {
+    let _sortOrder = [];
+
+    for (const item of this.freqData.entries()) {
+      _sortOrder.push(item);
+    }
+
+    (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);
+      }
+    });
+    return resultArray;
+  }
+
+}
+/** 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
+
+
+  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;
+      }).join(' ');
+    });
+    return node;
+  });
+  return tree;
+}
+
+function sortAttributesWithListsByFrequency(tree) {
+  const tokenChainObj = {}; // <attrNameLower: AttributeTokenChain>[]
+  // 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
+
+  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(' ');
+      }
+    });
+    return node;
+  });
+}

package/lib/presets/ampSafe.js

@@ -1,27 +1,26 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
+exports.default = void 0;
 
-var _objectAssign = require('object-assign');
-
-var _objectAssign2 = _interopRequireDefault(_objectAssign);
-
-var _safe = require('./safe');
-
-var _safe2 = _interopRequireDefault(_safe);
+var _safe = _interopRequireDefault(require("./safe"));
 
 function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : { default: obj };
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
 }
-
 /**
  * A safe preset for AMP pages (https://www.ampproject.org)
  */
-exports.default = (0, _objectAssign2.default)({}, _safe2.default, {
-    collapseBooleanAttributes: {
-        amphtml: true
-    },
-    minifyJs: false
-});
+
+
+var _default = { ..._safe.default,
+  collapseBooleanAttributes: {
+    amphtml: true
+  },
+  minifyJs: false
+};
+exports.default = _default;

package/lib/presets/max.js

@@ -1,31 +1,33 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
+exports.default = void 0;
 
-var _objectAssign = require('object-assign');
-
-var _objectAssign2 = _interopRequireDefault(_objectAssign);
-
-var _safe = require('./safe');
-
-var _safe2 = _interopRequireDefault(_safe);
+var _safe = _interopRequireDefault(require("./safe"));
 
 function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : { default: obj };
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
 }
-
 /**
  * Maximal minification (might break some pages)
  */
-exports.default = (0, _objectAssign2.default)({}, _safe2.default, {
-    collapseWhitespace: 'all',
-    removeComments: 'all',
-    removeRedundantAttributes: true,
-    removeUnusedCss: {},
-    minifyCss: {
-        preset: 'default'
-    },
-    minifySvg: {}
-});
+
+
+var _default = { ..._safe.default,
+  collapseWhitespace: 'all',
+  removeComments: 'all',
+  removeAttributeQuotes: true,
+  removeRedundantAttributes: true,
+  removeUnusedCss: {},
+  minifyCss: {
+    preset: 'default'
+  },
+  minifySvg: {},
+  minifyConditionalComments: true,
+  removeOptionalTags: true
+};
+exports.default = _default;

package/lib/presets/safe.js

@@ -1,31 +1,44 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
+exports.default = void 0;
 /**
  * Minify HTML in a safe way without breaking anything.
  */
-exports.default = {
-    collapseAttributeWhitespace: true,
-    collapseBooleanAttributes: {
-        amphtml: false
-    },
-    collapseWhitespace: 'conservative',
-    custom: [],
-    deduplicateAttributeValues: true,
-    mergeScripts: true,
-    mergeStyles: true,
-    removeUnusedCss: false,
-    minifyCss: {
-        preset: 'default'
-    },
-    minifyJs: {},
-    minifyJson: {},
-    minifySvg: {
-        plugins: [{ collapseGroups: false }, { convertShapeToPath: false }]
-    },
-    removeEmptyAttributes: true,
-    removeRedundantAttributes: false,
-    removeComments: 'safe'
-};
+
+var _default = {
+  sortAttributes: false,
+  collapseAttributeWhitespace: true,
+  collapseBooleanAttributes: {
+    amphtml: false
+  },
+  collapseWhitespace: 'conservative',
+  custom: [],
+  deduplicateAttributeValues: true,
+  mergeScripts: true,
+  mergeStyles: true,
+  removeUnusedCss: false,
+  minifyCss: {
+    preset: 'default'
+  },
+  minifyJs: {},
+  minifyJson: {},
+  minifySvg: {
+    plugins: [{
+      collapseGroups: false
+    }, {
+      convertShapeToPath: false
+    }]
+  },
+  minifyConditionalComments: false,
+  removeEmptyAttributes: true,
+  removeRedundantAttributes: false,
+  removeComments: 'safe',
+  removeAttributeQuotes: false,
+  sortAttributesWithLists: 'alphabetical',
+  minifyUrls: false,
+  removeOptionalTags: false
+};
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "htmlnano",
-  "version": "0.2.4",
+  "version": "0.2.8",
   "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-core/register --recursive --check-leaks --globals addresses",
+    "posttest": "mocha --require @babel/register --recursive --check-leaks --globals addresses",
     "prepare": "npm run compile",
     "release:patch": "release-it patch -n"
   },
@@ -28,29 +28,39 @@
   ],
   "babel": {
     "presets": [
-      "env"
+      [
+        "@babel/env",
+        {
+          "targets": {
+            "node": 10
+          }
+        }
+      ]
     ]
   },
   "dependencies": {
     "cssnano": "^4.1.10",
-    "normalize-html-whitespace": "^1.0.0",
-    "object-assign": "^4.0.1",
-    "posthtml": "^0.11.4",
-    "posthtml-render": "^1.1.5",
-    "svgo": "^1.2.2",
-    "terser": "^4.1.2",
-    "uncss": "^0.17.0"
+    "posthtml": "^0.13.4",
+    "posthtml-render": "^1.3.0",
+    "purgecss": "^2.3.0",
+    "relateurl": "^0.2.7",
+    "srcset": "^3.0.0",
+    "svgo": "^1.3.2",
+    "terser": "^4.8.0",
+    "timsort": "^0.3.0",
+    "uncss": "^0.17.3"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^10.0.2",
-    "babel-preset-env": "^1.7.0",
-    "eslint": "^6.0.1",
-    "expect": "^24.8.0",
-    "mocha": "^6.1.0",
-    "release-it": "^12.3.3",
-    "rimraf": "^2.6.3"
+    "@babel/cli": "^7.12.1",
+    "@babel/core": "^7.12.3",
+    "@babel/preset-env": "^7.12.1",
+    "@babel/register": "^7.12.1",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.13.0",
+    "expect": "^26.6.2",
+    "mocha": "^8.2.1",
+    "release-it": "^14.2.1",
+    "rimraf": "^3.0.2"
   },
   "repository": {
     "type": "git",