htmlnano 2.0.4 → 2.1.0

package/lib/htmlnano.mjs

@@ -0,0 +1,196 @@
+import posthtml from 'posthtml';
+import { cosmiconfigSync } from 'cosmiconfig';
+import safePreset from './presets/safe.mjs';
+import ampSafePreset from './presets/ampSafe.mjs';
+import maxPreset from './presets/max.mjs';
+
+const presets = {
+    safe: safePreset,
+    ampSafe: ampSafePreset,
+    max: maxPreset,
+};
+
+export function loadConfig(options, preset, configPath) {
+    let { skipConfigLoading = false, ...rest } = options || {};
+
+    if (!skipConfigLoading) {
+        const explorer = cosmiconfigSync('htmlnano');
+        const rc = configPath ? explorer.load(configPath) : explorer.search();
+        if (rc) {
+            const { preset: presetName } = rc.config;
+            if (presetName) {
+                if (!preset && presets[presetName]) {
+                    preset = presets[presetName];
+                }
+
+                delete rc.config.preset;
+            }
+
+            if (!options) {
+                rest = rc.config;
+            }
+        }
+    }
+
+    return [
+        rest || {},
+        preset || safePreset,
+    ];
+}
+
+const optionalDependencies = {
+    minifyCss: ['cssnano', 'postcss'],
+    minifyJs: ['terser'],
+    minifyUrl: ['relateurl', 'srcset', 'terser'],
+    minifySvg: ['svgo'],
+};
+
+
+const modules = {
+    collapseAttributeWhitespace: () => import('./modules/collapseAttributeWhitespace.mjs'),
+    collapseBooleanAttributes: () => import('./modules/collapseBooleanAttributes.mjs'),
+    collapseWhitespace: () => import('./modules/collapseWhitespace.mjs'),
+    custom: () => import('./modules/custom.mjs'),
+    deduplicateAttributeValues: () => import('./modules/deduplicateAttributeValues.mjs'),
+    example: () => import('./modules/example.mjs'),
+    mergeScripts: () => import('./modules/mergeScripts.mjs'),
+    mergeStyles: () => import('./modules/mergeStyles.mjs'),
+    minifyConditionalComments: () => import('./modules/minifyConditionalComments.mjs'),
+    minifyCss: () => import('./modules/minifyCss.mjs'),
+    minifyJs: () => import('./modules/minifyJs.mjs'),
+    minifyJson: () => import('./modules/minifyJson.mjs'),
+    minifySvg: () => import('./modules/minifySvg.mjs'),
+    minifyUrls: () => import('./modules/minifyUrls.mjs'),
+    normalizeAttributeValues: () => import('./modules/normalizeAttributeValues.mjs'),
+    removeAttributeQuotes: () => import('./modules/removeAttributeQuotes.mjs'),
+    removeComments: () => import('./modules/removeComments.mjs'),
+    removeEmptyAttributes: () => import('./modules/removeEmptyAttributes.mjs'),
+    removeOptionalTags: () => import('./modules/removeOptionalTags.mjs'),
+    removeRedundantAttributes: () => import('./modules/removeRedundantAttributes.mjs'),
+    removeUnusedCss: () => import('./modules/removeUnusedCss.mjs'),
+    sortAttributes: () => import('./modules/sortAttributes.mjs'),
+    sortAttributesWithLists: () => import('./modules/sortAttributesWithLists.mjs'),
+};
+
+function htmlnano(optionsRun, presetRun) {
+    let [options, preset] = loadConfig(optionsRun, presetRun);
+
+    return async function minifier(tree) {
+        const nodeHandlers = [];
+        const attrsHandlers = [];
+        const contentsHandlers = [];
+
+        options = { ...preset, ...options };
+        let promise = Promise.resolve(tree);
+
+        for (const [moduleName, moduleOptions] of Object.entries(options)) {
+            if (!moduleOptions) {
+                // The module is disabled
+                continue;
+            }
+
+            if (safePreset[moduleName] === undefined) {
+                throw new Error('Module "' + moduleName + '" is not defined');
+            }
+
+            (optionalDependencies[moduleName] || []).forEach(async dependency => {
+                try {
+                    await import(dependency);
+                } catch (e) {
+                    if (e.code === 'MODULE_NOT_FOUND' || e.code === 'ERR_MODULE_NOT_FOUND') {
+                        console.warn(`You have to install "${dependency}" in order to use htmlnano's "${moduleName}" module`);
+                    } else {
+                        throw e;
+                    }
+                }
+            });
+
+            const module = moduleName in modules ?
+                await (modules[moduleName]()) :
+                await import(`./modules/${moduleName}.mjs`);
+
+            if (typeof module.onAttrs === 'function') {
+                attrsHandlers.push(module.onAttrs(options, moduleOptions));
+            }
+            if (typeof module.onContent === 'function') {
+                contentsHandlers.push(module.onContent(options, moduleOptions));
+            }
+            if (typeof module.onNode === 'function') {
+                nodeHandlers.push(module.onNode(options, moduleOptions));
+            }
+            if (typeof module.default === 'function') {
+                promise = promise.then(async tree => await module.default(tree, options, moduleOptions));
+            }
+        }
+
+        if (attrsHandlers.length + contentsHandlers.length + nodeHandlers.length === 0) {
+            return promise;
+        }
+
+        return promise.then(tree => {
+            tree.walk(node => {
+                if (node) {
+                    if (node.attrs && typeof node.attrs === 'object') {
+                        // Convert all attrs' key to lower case
+                        let newAttrsObj = {};
+                        Object.entries(node.attrs).forEach(([attrName, attrValue]) => {
+                            newAttrsObj[attrName.toLowerCase()] = attrValue;
+                        });
+
+                        for (const handler of attrsHandlers) {
+                            newAttrsObj = handler(newAttrsObj, node);
+                        }
+
+                        node.attrs = newAttrsObj;
+                    }
+
+                    if (node.content) {
+                        node.content = typeof node.content === 'string' ? [node.content] : node.content;
+
+                        if (Array.isArray(node.content) && node.content.length > 0) {
+                            for (const handler of contentsHandlers) {
+                                const result = handler(node.content, node);
+                                node.content = typeof result === 'string' ? [result] : result;
+                            }
+                        }
+                    }
+
+                    for (const handler of nodeHandlers) {
+                        node = handler(node);
+                    }
+                }
+
+                return node;
+            });
+
+            return tree;
+        });
+    };
+}
+
+htmlnano.getRequiredOptionalDependencies = function (optionsRun, presetRun) {
+    const [options] = loadConfig(optionsRun, presetRun);
+
+    return [...new Set(Object.keys(options).filter(moduleName => options[moduleName]).map(moduleName => optionalDependencies[moduleName]).flat())];
+};
+
+
+htmlnano.process = function (html, options, preset, postHtmlOptions) {
+    return posthtml([htmlnano(options, preset)])
+        .process(html, postHtmlOptions);
+};
+
+// https://github.com/webpack-contrib/html-minimizer-webpack-plugin/blob/faca00f2219514bc671c5942685721f0b5dbaa70/src/utils.js#L74
+htmlnano.htmlMinimizerWebpackPluginMinify = function htmlNano(input, minimizerOptions = {}) {
+    const [[, code]] = Object.entries(input);
+    return htmlnano.process(code, minimizerOptions, presets.safe)
+        .then(result => {
+            return {
+                code: result.html
+            };
+        });
+};
+
+htmlnano.presets = presets;
+
+export default htmlnano;

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.attributesWithLists = void 0;
 exports.onAttrs = onAttrs;
-var _helpers = require("../helpers");
-const attributesWithLists = new Set(['class', 'dropzone', 'rel',
+var _helpers = require("../helpers.cjs");
+const attributesWithLists = exports.attributesWithLists = new Set(['class', 'dropzone', 'rel',
 // a, area, link
 'ping',
 // a, area
@@ -23,7 +23,6 @@ const attributesWithLists = new Set(['class', 'dropzone', 'rel',
 ]);
 
 /** @type Record<string, string[] | null> */
-exports.attributesWithLists = attributesWithLists;
 const attributesWithSingleValue = {
   accept: ['input'],
   action: ['form'],

package/lib/modules/collapseAttributeWhitespace.mjs

@@ -0,0 +1,104 @@
+import { isEventHandler } from '../helpers.mjs';
+
+export const attributesWithLists = new Set([
+    'class',
+    'dropzone',
+    'rel', // a, area, link
+    'ping', // a, area
+    'sandbox', // iframe
+    /**
+     * https://github.com/posthtml/htmlnano/issues/180
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-sizes
+     *
+     * "sizes" of <img> should not be modified, while "sizes" of <link> will only have one entry in most cases.
+     */
+    // 'sizes', // link
+    'headers' // td, th
+]);
+
+/** @type Record<string, string[] | null> */
+const attributesWithSingleValue = {
+    accept: ['input'],
+    action: ['form'],
+    accesskey: null,
+    'accept-charset': ['form'],
+    cite: ['blockquote', 'del', 'ins', 'q'],
+    cols: ['textarea'],
+    colspan: ['td', 'th'],
+    data: ['object'],
+    dropzone: null,
+    formaction: ['button', 'input'],
+    height: ['canvas', 'embed', 'iframe', 'img', 'input', 'object', 'video'],
+    high: ['meter'],
+    href: ['a', 'area', 'base', 'link'],
+    itemid: null,
+    low: ['meter'],
+    manifest: ['html'],
+    max: ['meter', 'progress'],
+    maxlength: ['input', 'textarea'],
+    media: ['source'],
+    min: ['meter'],
+    minlength: ['input', 'textarea'],
+    optimum: ['meter'],
+    ping: ['a', 'area'],
+    poster: ['video'],
+    profile: ['head'],
+    rows: ['textarea'],
+    rowspan: ['td', 'th'],
+    size: ['input', 'select'],
+    span: ['col', 'colgroup'],
+    src: [
+        'audio',
+        'embed',
+        'iframe',
+        'img',
+        'input',
+        'script',
+        'source',
+        'track',
+        'video'
+    ],
+    start: ['ol'],
+    step: ['input'],
+    style: null,
+    tabindex: null,
+    usemap: ['img', 'object'],
+    value: ['li', 'meter', 'progress'],
+    width: ['canvas', 'embed', 'iframe', 'img', 'input', 'object', 'video']
+};
+
+/** Collapse whitespaces inside list-like attributes (e.g. class, rel) */
+export function onAttrs() {
+    return (attrs, node) => {
+        const newAttrs = attrs;
+
+        Object.entries(attrs).forEach(([attrName, attrValue]) => {
+            if (typeof attrValue !== 'string') return;
+
+            if (attributesWithLists.has(attrName)) {
+                const newAttrValue = attrValue.replace(/\s+/g, ' ').trim();
+                newAttrs[attrName] = newAttrValue;
+                return;
+            }
+
+            if (
+                isEventHandler(attrName)
+                || (
+                    Object.prototype.hasOwnProperty.call(attributesWithSingleValue, attrName)
+                    && (
+                        attributesWithSingleValue[attrName] === null
+                        || attributesWithSingleValue[attrName].includes(node.tag)
+                    )
+                )
+            ) {
+                newAttrs[attrName] = minifySingleAttributeValue(attrValue);
+            }
+        });
+
+        return newAttrs;
+    };
+}
+
+function minifySingleAttributeValue(value) {
+    return typeof value === 'string' ? value.trim() : value;
+}

package/lib/modules/collapseBooleanAttributes.mjs

@@ -0,0 +1,175 @@
+// Source: https://github.com/kangax/html-minifier/issues/63
+// https://html.spec.whatwg.org/#boolean-attribute
+// https://html.spec.whatwg.org/#attributes-1
+const htmlBooleanAttributes = new Set([
+    'allowfullscreen',
+    'allowpaymentrequest',
+    'allowtransparency',
+    'async',
+    'autofocus',
+    'autoplay',
+    'checked',
+    'compact',
+    'controls',
+    'declare',
+    'default',
+    'defaultchecked',
+    'defaultmuted',
+    'defaultselected',
+    'defer',
+    'disabled',
+    'enabled',
+    'formnovalidate',
+    'hidden',
+    'indeterminate',
+    'inert',
+    'ismap',
+    'itemscope',
+    'loop',
+    'multiple',
+    'muted',
+    'nohref',
+    'nomodule',
+    'noresize',
+    'noshade',
+    'novalidate',
+    'nowrap',
+    'open',
+    'pauseonexit',
+    'playsinline',
+    'readonly',
+    'required',
+    'reversed',
+    'scoped',
+    'seamless',
+    'selected',
+    'sortable',
+    'truespeed',
+    'typemustmatch',
+    'visible'
+]);
+
+const amphtmlBooleanAttributes = new Set([
+    '⚡',
+    'amp',
+    '⚡4ads',
+    'amp4ads',
+    '⚡4email',
+    'amp4email',
+
+    'amp-custom',
+    'amp-boilerplate',
+    'amp4ads-boilerplate',
+    'amp4email-boilerplate',
+
+    'allow-blocked-ranges',
+    'amp-access-hide',
+    'amp-access-template',
+    'amp-keyframes',
+    'animate',
+    'arrows',
+    'data-block-on-consent',
+    'data-enable-refresh',
+    'data-multi-size',
+    'date-template',
+    'disable-double-tap',
+    'disable-session-states',
+    'disableremoteplayback',
+    'dots',
+    'expand-single-section',
+    'expanded',
+    'fallback',
+    'first',
+    'fullscreen',
+    'inline',
+    'lightbox',
+    'noaudio',
+    'noautoplay',
+    'noloading',
+    'once',
+    'open-after-clear',
+    'open-after-select',
+    'open-button',
+    'placeholder',
+    'preload',
+    'reset-on-refresh',
+    'reset-on-resize',
+    'resizable',
+    'rotate-to-fullscreen',
+    'second',
+    'standalone',
+    'stereo',
+    'submit-error',
+    'submit-success',
+    'submitting',
+    'subscriptions-actions',
+    'subscriptions-dialog'
+]);
+
+const missingValueDefaultEmptyStringAttributes = {
+    // https://html.spec.whatwg.org/#attr-media-preload
+    audio: {
+        preload: 'auto'
+    },
+    video: {
+        preload: 'auto'
+    }
+};
+
+const tagsHasMissingValueDefaultEmptyStringAttributes = new Set(Object.keys(missingValueDefaultEmptyStringAttributes));
+
+export function onAttrs(options, moduleOptions) {
+    return (attrs, node) => {
+        if (!node.tag) return attrs;
+
+        const newAttrs = attrs;
+
+        if (tagsHasMissingValueDefaultEmptyStringAttributes.has(node.tag)) {
+            const tagAttributesCanBeReplacedWithEmptyString = missingValueDefaultEmptyStringAttributes[node.tag];
+
+            for (const attributesCanBeReplacedWithEmptyString of Object.keys(tagAttributesCanBeReplacedWithEmptyString)) {
+                if (
+                    Object.prototype.hasOwnProperty.call(attrs, attributesCanBeReplacedWithEmptyString)
+                    && attrs[attributesCanBeReplacedWithEmptyString] === tagAttributesCanBeReplacedWithEmptyString[attributesCanBeReplacedWithEmptyString]
+                ) {
+                    attrs[attributesCanBeReplacedWithEmptyString] = true;
+                }
+            }
+        }
+
+        for (const attrName of Object.keys(attrs)) {
+            if (attrName === 'visible' && node.tag.startsWith('a-')) {
+                continue;
+            }
+
+            if (htmlBooleanAttributes.has(attrName)) {
+                newAttrs[attrName] = true;
+            }
+
+            // Fast path optimization.
+            // The rest of tranformations are only for string type attrValue.
+            if (typeof newAttrs[attrName] !== 'string') continue;
+
+            if (moduleOptions.amphtml && amphtmlBooleanAttributes.has(attrName) && attrs[attrName] === '') {
+                newAttrs[attrName] = true;
+            }
+            // https://html.spec.whatwg.org/#a-quick-introduction-to-html
+            // The value, along with the "=" character, can be omitted altogether if the value is the empty string.
+            if (attrs[attrName] === '') {
+                newAttrs[attrName] = true;
+            }
+
+            // collapse crossorigin attributes
+            // Specification: https://html.spec.whatwg.org/multipage/urls-and-fetching.html#cors-settings-attributes
+            if (
+                attrName.toLowerCase() === 'crossorigin' && (
+                    attrs[attrName] === 'anonymous'
+                )
+            ) {
+                newAttrs[attrName] = true;
+            }
+        }
+
+        return newAttrs;
+    };
+}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = collapseWhitespace;
-var _helpers = require("../helpers");
+var _helpers = require("../helpers.cjs");
 const noWhitespaceCollapseElements = new Set(['script', 'style', 'pre', 'textarea']);
 const noTrimWhitespacesArroundElements = new Set([
 // non-empty tags that will maintain whitespace around them
@@ -16,7 +16,8 @@ const noTrimWhitespacesInsideElements = new Set([
 'a', 'abbr', 'acronym', 'b', 'big', 'del', 'em', 'font', 'i', 'ins', 'kbd', 'mark', 'nobr', 'rp', 's', 'samp', 'small', 'span', 'strike', 'strong', 'sub', 'sup', 'time', 'tt', 'u', 'var']);
 const startsWithWhitespacePattern = /^\s/;
 const endsWithWhitespacePattern = /\s$/;
-const multipleWhitespacePattern = /\s+/g;
+// See https://infra.spec.whatwg.org/#strip-and-collapse-ascii-whitespace and https://infra.spec.whatwg.org/#ascii-whitespace
+const multipleWhitespacePattern = /[\t\n\f\r ]+/g;
 const NONE = '';
 const SINGLE_SPACE = ' ';
 const validOptions = ['all', 'aggressive', 'conservative'];

package/lib/modules/collapseWhitespace.mjs

@@ -0,0 +1,132 @@
+import { isComment } from '../helpers.mjs';
+
+const noWhitespaceCollapseElements = new Set([
+    'script',
+    'style',
+    'pre',
+    'textarea'
+]);
+
+const noTrimWhitespacesArroundElements = new Set([
+    // non-empty tags that will maintain whitespace around them
+    'a', 'abbr', 'acronym', 'b', 'bdi', 'bdo', 'big', 'button', 'cite', 'code', 'del', 'dfn', 'em', 'font', 'i', 'ins', 'kbd', 'label', 'mark', 'math', 'nobr', 'object', 'q', 'rp', 'rt', 'rtc', 'ruby', 's', 'samp', 'select', 'small', 'span', 'strike', 'strong', 'sub', 'sup', 'svg', 'textarea', 'time', 'tt', 'u', 'var',
+    // self-closing tags that will maintain whitespace around them
+    'comment', 'img', 'input', 'wbr'
+]);
+
+const noTrimWhitespacesInsideElements = new Set([
+    // non-empty tags that will maintain whitespace within them
+    'a', 'abbr', 'acronym', 'b', 'big', 'del', 'em', 'font', 'i', 'ins', 'kbd', 'mark', 'nobr', 'rp', 's', 'samp', 'small', 'span', 'strike', 'strong', 'sub', 'sup', 'time', 'tt', 'u', 'var'
+]);
+
+const startsWithWhitespacePattern = /^\s/;
+const endsWithWhitespacePattern = /\s$/;
+// See https://infra.spec.whatwg.org/#strip-and-collapse-ascii-whitespace and https://infra.spec.whatwg.org/#ascii-whitespace
+const multipleWhitespacePattern = /[\t\n\f\r ]+/g;
+const NONE = '';
+const SINGLE_SPACE = ' ';
+const validOptions = ['all', 'aggressive', 'conservative'];
+
+/** Collapses redundant whitespaces */
+export default function collapseWhitespace(tree, options, collapseType, parent) {
+    collapseType = validOptions.includes(collapseType) ? collapseType : 'conservative';
+
+    tree.forEach((node, index) => {
+        const prevNode = tree[index - 1];
+        const nextNode = tree[index + 1];
+
+        if (typeof node === 'string') {
+            const parentNodeTag = parent && parent.node && parent.node.tag;
+            const isTopLevel = !parentNodeTag || parentNodeTag === 'html' || parentNodeTag === 'head';
+            const shouldTrim = (
+                collapseType === 'all' ||
+                isTopLevel ||
+                /*
+                 * When collapseType is set to 'aggressive', and the tag is not inside 'noTrimWhitespacesInsideElements'.
+                 * the first & last space inside the tag will be trimmed
+                 */
+                collapseType === 'aggressive'
+            );
+
+            node = collapseRedundantWhitespaces(node, collapseType, shouldTrim, parent, prevNode, nextNode);
+        }
+
+        const isAllowCollapseWhitespace = !noWhitespaceCollapseElements.has(node.tag);
+        if (node.content && node.content.length && isAllowCollapseWhitespace) {
+            node.content = collapseWhitespace(node.content, options, collapseType, {
+                node,
+                prevNode,
+                nextNode
+            });
+        }
+
+        tree[index] = node;
+    });
+
+    return tree;
+}
+
+
+function collapseRedundantWhitespaces(text, collapseType, shouldTrim = false, parent, prevNode, nextNode) {
+    if (!text || text.length === 0) {
+        return NONE;
+    }
+
+    if (!isComment(text)) {
+        text = text.replace(multipleWhitespacePattern, SINGLE_SPACE);
+    }
+
+    if (shouldTrim) {
+        if (collapseType === 'aggressive') {
+            if (!noTrimWhitespacesInsideElements.has(parent && parent.node && parent.node.tag)) {
+                if (
+                    // It is the first child node of the parent
+                    !prevNode
+                    // It is not the first child node, and prevNode not a text node, and prevNode is safe to trim around
+                    || prevNode && prevNode.tag && !noTrimWhitespacesArroundElements.has(prevNode.tag)
+                ) {
+                    text = text.trimStart();
+                } else {
+                    // previous node is a "no trim whitespaces arround element"
+                    if (
+                        // but previous node ends with a whitespace
+                        prevNode && prevNode.content && prevNode.content.length
+                        && endsWithWhitespacePattern.test(prevNode.content[prevNode.content.length - 1])
+                        && (
+                            !nextNode // either the current node is the last child of the parent
+                            || (
+                                // or the next node starts with a white space
+                                nextNode && nextNode.content && nextNode.content.length
+                                && !startsWithWhitespacePattern.test(nextNode.content[0])
+                            )
+                        )
+                    ) {
+                        text = text.trimStart();
+                    }
+                }
+
+                if (
+                    !nextNode
+                    || nextNode && nextNode.tag && !noTrimWhitespacesArroundElements.has(nextNode.tag)
+                ) {
+                    text = text.trimEnd();
+                }
+            } else {
+                // now it is a textNode inside a "no trim whitespaces inside elements" node
+                if (
+                    !prevNode // it the textnode is the first child of the node
+                    && startsWithWhitespacePattern.test(text[0]) // it starts with white space
+                    && typeof parent.prevNode === 'string' // the prev of the node is a textNode as well
+                    && endsWithWhitespacePattern.test(parent.prevNode[parent.prevNode.length - 1]) // that prev is ends with a white
+                ) {
+                    text = text.trimStart();
+                }
+            }
+        } else {
+            // collapseType is 'all', trim spaces
+            text = text.trim();
+        }
+    }
+
+    return text;
+}

package/lib/modules/custom.mjs

@@ -0,0 +1,16 @@
+/** Meta-module that runs custom modules  */
+export default function custom(tree, options, customModules) {
+    if (! customModules) {
+        return tree;
+    }
+
+    if (! Array.isArray(customModules)) {
+        customModules = [customModules];
+    }
+
+    customModules.forEach(customModule => {
+        tree = customModule(tree, options);
+    });
+
+    return tree;
+}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.onAttrs = onAttrs;
-var _collapseAttributeWhitespace = require("./collapseAttributeWhitespace");
+var _collapseAttributeWhitespace = require("./collapseAttributeWhitespace.cjs");
 /** Deduplicate values inside list-like attributes (e.g. class, rel) */
 function onAttrs() {
   return attrs => {