htmlnano 2.0.4 → 2.1.1

package/lib/modules/removeUnusedCss.mjs

@@ -0,0 +1,122 @@
+import { isStyleNode, extractCssFromStyleNode, optionalImport } from '../helpers.mjs';
+
+// 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, uncss) {
+    const css = extractCssFromStyleNode(styleNode);
+
+    return runUncss(html, css, uncssOptions, uncss).then(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, uncss) {
+    if (typeof userOptions !== 'object') {
+        userOptions = {};
+    }
+
+    const options = { ...userOptions, ...uncssOptions };
+    return new Promise((resolve, reject) => {
+        options.raw = css;
+        uncss(html, options, (error, output) => {
+            if (error) {
+                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
+    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, purgecss) {
+    const css = extractCssFromStyleNode(styleNode);
+    return runPurgecss(tree, css, purgecssOptions, purgecss)
+        .then(css => {
+            if (css.trim().length === 0) {
+                styleNode.tag = false;
+                styleNode.content = [];
+                return;
+            }
+            styleNode.content = [css];
+        });
+}
+
+function runPurgecss(tree, css, userOptions, purgecss) {
+    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.PurgeCSS()
+        .purge(options)
+        .then((result) => {
+            return result[0].css;
+        });
+}
+
+/** Remove unused CSS */
+export default async function removeUnusedCss(tree, options, userOptions) {
+    const promises = [];
+    const html = userOptions.tool !== 'purgeCSS' && tree.render(tree);
+
+    const purgecss = await optionalImport('purgecss');
+    const uncss = await optionalImport('uncss');
+
+    tree.walk(node => {
+        if (isStyleNode(node)) {
+            if (userOptions.tool === 'purgeCSS') {
+                if (purgecss) {
+                    promises.push(processStyleNodePurgeCSS(tree, node, userOptions, purgecss));
+                }
+            } else {
+                if (uncss) {
+                    promises.push(processStyleNodeUnCSS(html, node, userOptions, uncss));
+                }
+            }
+        }
+        return node;
+    });
+
+    return Promise.all(promises).then(() => tree);
+}

package/lib/modules/{sortAttributes.js → sortAttributes.cjs}

@@ -14,7 +14,6 @@ class AttributeTokenChain {
   constructor() {
     this.freqData = new Map(); // <attr, frequency>[]
   }
-
   addFromNodeAttrs(nodeAttrs) {
     Object.keys(nodeAttrs).forEach(attrName => {
       const attrNameLower = attrName.toLowerCase();

package/lib/modules/sortAttributes.mjs

@@ -0,0 +1,121 @@
+import { sort as timSort } from '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 = [...this.freqData.entries()];
+        timSort(_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] != null) {
+                newAttrs[attrNameLower] = loweredNodeAttrs[attrNameLower];
+            }
+        });
+
+        return newAttrs;
+    }
+}
+
+/** Sort attibutes */
+export default 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 → sortAttributesWithLists.cjs}

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = collapseAttributeWhitespace;
 var _timsort = require("timsort");
-var _collapseAttributeWhitespace = require("./collapseAttributeWhitespace");
+var _collapseAttributeWhitespace = require("./collapseAttributeWhitespace.cjs");
 // class, rel, ping
 
 const validOptions = new Set(['frequency', 'alphabetical']);
@@ -17,7 +17,6 @@ class AttributeTokenChain {
   constructor() {
     this.freqData = new Map(); // <attrValue, frequency>[]
   }
-
   addFromNodeAttrsArray(attrValuesArray) {
     attrValuesArray.forEach(attrValue => {
       if (this.freqData.has(attrValue)) {

package/lib/modules/sortAttributesWithLists.mjs

@@ -0,0 +1,135 @@
+// class, rel, ping
+import { sort as timSort } from 'timsort';
+import { attributesWithLists } from './collapseAttributeWhitespace.mjs';
+
+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 = [...this.freqData.entries()];
+        timSort(_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) */
+export default 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 (!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 (!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 (!attributesWithLists.has(attrNameLower)) {
+                return;
+            }
+
+            if (tokenChainObj[attrNameLower]) {
+                node.attrs[attrName] = tokenChainObj[attrNameLower].sortFromNodeAttrsArray(attrValues.split(/\s/)).join(' ');
+            }
+        });
+
+        return node;
+    });
+}

package/lib/presets/{ampSafe.js → ampSafe.cjs}

@@ -4,20 +4,15 @@ 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
-  };
-}
+var _safe = _interopRequireDefault(require("./safe.cjs"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * A safe preset for AMP pages (https://www.ampproject.org)
  */
-var _default = {
+var _default = exports.default = {
   ..._safe.default,
   collapseBooleanAttributes: {
     amphtml: true
   },
   minifyJs: false
-};
-exports.default = _default;
+};

package/lib/presets/ampSafe.mjs

@@ -0,0 +1,11 @@
+import safePreset from './safe.mjs';
+
+/**
+ * A safe preset for AMP pages (https://www.ampproject.org)
+ */
+export default { ...safePreset,
+    collapseBooleanAttributes: {
+        amphtml: true,
+    },
+    minifyJs: false,
+};

package/lib/presets/{max.js → max.cjs}

@@ -4,16 +4,12 @@ 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
-  };
-}
+var _safe = _interopRequireDefault(require("./safe.cjs"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Maximal minification (might break some pages)
  */
-var _default = {
+var _default = exports.default = {
   ..._safe.default,
   collapseWhitespace: 'all',
   removeComments: 'all',
@@ -28,5 +24,4 @@ var _default = {
   minifySvg: {},
   minifyConditionalComments: true,
   removeOptionalTags: true
-};
-exports.default = _default;
+};

package/lib/presets/max.mjs

@@ -0,0 +1,20 @@
+import safePreset from './safe.mjs';
+
+/**
+ * Maximal minification (might break some pages)
+ */
+export default { ...safePreset,
+    collapseWhitespace: 'all',
+    removeComments: 'all',
+    removeAttributeQuotes: true,
+    removeRedundantAttributes: true,
+    mergeScripts: true,
+    mergeStyles: true,
+    removeUnusedCss: {},
+    minifyCss: {
+        preset: 'default',
+    },
+    minifySvg: {},
+    minifyConditionalComments: true,
+    removeOptionalTags: true,
+};

package/lib/presets/{safe.js → safe.cjs}

@@ -7,7 +7,7 @@ exports.default = void 0;
 /**
  * Minify HTML in a safe way without breaking anything.
  */
-var _default = {
+var _default = exports.default = {
   /* ----------------------------------------
    * Attributes
    * ---------------------------------------- */
@@ -62,5 +62,4 @@ var _default = {
    * Miscellaneous
    * ---------------------------------------- */
   custom: []
-};
-exports.default = _default;
+};

package/lib/presets/safe.mjs

@@ -0,0 +1,65 @@
+/**
+ * Minify HTML in a safe way without breaking anything.
+ */
+export default {
+    /* ----------------------------------------
+     * 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,
+    },
+    deduplicateAttributeValues: true,
+
+    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,
+    mergeScripts: false,
+    minifyCss: {
+        preset: 'default',
+    },
+    minifyJs: {},
+    minifyJson: {},
+    minifySvg: {
+        plugins: [
+            {
+                name: 'preset-default',
+                params: {
+                    overrides: {
+                        collapseGroups: false,
+                        convertShapeToPath: false,
+                    },
+                },
+            },
+        ]
+    },
+    removeUnusedCss: false,
+
+    /* ----------------------------------------
+     * Miscellaneous
+     * ---------------------------------------- */
+    custom: []
+};

package/package.json

@@ -1,14 +1,29 @@
 {
   "name": "htmlnano",
-  "version": "2.0.4",
+  "version": "2.1.1",
   "description": "Modular HTML minifier, built on top of the PostHTML",
-  "main": "index.js",
+  "main": "index.cjs",
+  "module": "index.mjs",
+  "source": "index.mjs",
+  "exports": {
+    ".": {
+      "require": "./index.cjs",
+      "import": "./index.mjs"
+    },
+    "./index.mjs": {
+      "import": "./index.mjs"
+    },
+    "./index.cjs": {
+      "require": "./index.cjs"
+    }
+  },
   "types": "index.d.ts",
   "author": "Kirill Maltsev <maltsevkirill@gmail.com>",
   "license": "MIT",
   "scripts": {
-    "compile": "rimraf lib/*.js && rimraf lib/modules/*.js && babel -d lib/ lib/",
-    "lint": "eslint *.js lib/*.es6 lib/modules/*.es6 lib/presets/*.es6 test/",
+    "clean": "rimraf lib/*.cjs lib/**/*.cjs",
+    "compile": "npm run clean && babel -d lib/ lib/ --out-file-extension .cjs",
+    "lint": "eslint --fix *.mjs lib/*.mjs lib/**/*.mjs test/*.mjs test/**/*.mjs",
     "pretest": "npm run lint && npm run compile",
     "test": ":",
     "posttest": "mocha --timeout 5000 --require @babel/register --recursive --check-leaks --globals addresses",
@@ -31,10 +46,20 @@
           }
         }
       ]
+    ],
+    "plugins": [
+      [
+        "@aminya/babel-plugin-replace-import-extension",
+        {
+          "extMapping": {
+            ".mjs": ".cjs"
+          }
+        }
+      ]
     ]
   },
   "dependencies": {
-    "cosmiconfig": "^8.0.0",
+    "cosmiconfig": "^9.0.0",
     "posthtml": "^0.16.5",
     "timsort": "^0.3.0"
   },
@@ -44,25 +69,28 @@
     "@babel/eslint-parser": "^7.17.0",
     "@babel/preset-env": "^7.15.6",
     "@babel/register": "^7.15.3",
-    "cssnano": "^6.0.0",
+    "@aminya/babel-plugin-replace-import-extension": "1.2.0",
+    "cssnano": "^7.0.0",
     "eslint": "^8.12.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-path-import-extension": "^0.9.0",
     "expect": "^29.0.0",
     "mocha": "^10.1.0",
     "postcss": "^8.3.11",
-    "purgecss": "^5.0.0",
+    "purgecss": "^6.0.0",
     "relateurl": "^0.2.7",
     "rimraf": "^5.0.0",
-    "srcset": "4.0.0",
+    "srcset": "5.0.1",
     "svgo": "^3.0.2",
-    "terser": "^5.10.0",
+    "terser": "^5.21.0",
     "uncss": "^0.17.3"
   },
   "peerDependencies": {
-    "cssnano": "^6.0.0",
+    "cssnano": "^7.0.0",
     "postcss": "^8.3.11",
-    "purgecss": "^5.0.0",
+    "purgecss": "^6.0.0",
     "relateurl": "^0.2.7",
-    "srcset": "4.0.0",
+    "srcset": "5.0.1",
     "svgo": "^3.0.2",
     "terser": "^5.10.0",
     "uncss": "^0.17.3"

package/index.js

@@ -1 +0,0 @@
-module.exports = require('./lib/htmlnano').default;