htmlnano 2.0.4 → 2.1.1

package/lib/modules/removeEmptyAttributes.mjs

@@ -0,0 +1,121 @@
+import { isEventHandler } from '../helpers.mjs';
+
+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']
+};
+
+export function onAttrs() {
+    return (attrs, node) => {
+        const newAttrs = { ...attrs };
+        Object.entries(attrs).forEach(([attrName, attrValue]) => {
+            if (
+                isEventHandler(attrName)
+                || (
+                    Object.hasOwnProperty.call(safeToRemoveAttrs, attrName)
+                    && (
+                        safeToRemoveAttrs[attrName] === null
+                        || safeToRemoveAttrs[attrName].includes(node.tag)
+                    )
+                )
+            ) {
+                if (typeof attrValue === 'string') {
+                    if (attrValue === '' || attrValue.trim() === '') {
+                        delete newAttrs[attrName];
+                    }
+                }
+            }
+        });
+
+        return newAttrs;
+    };
+}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = removeOptionalTags;
-var _helpers = require("../helpers");
+var _helpers = require("../helpers.cjs");
 const startWithWhitespacePattern = /^\s+/;
 const bodyStartTagCantBeOmittedWithFirstChildTags = new Set(['meta', 'link', 'script', 'style']);
 const tbodyStartTagCantBeOmittedWithPrecededTags = new Set(['tbody', 'thead', 'tfoot']);

package/lib/modules/removeOptionalTags.mjs

@@ -0,0 +1,225 @@
+import { isComment } from '../helpers.mjs';
+
+const startWithWhitespacePattern = /^\s+/;
+
+const bodyStartTagCantBeOmittedWithFirstChildTags = new Set(['meta', 'link', 'script', 'style']);
+const tbodyStartTagCantBeOmittedWithPrecededTags = new Set(['tbody', 'thead', 'tfoot']);
+const tbodyEndTagCantBeOmittedWithFollowedTags = new Set(['tbody', 'tfoot']);
+
+function isEmptyTextNode(node) {
+    if (typeof node === 'string' && node.trim() === '') {
+        return true;
+    }
+
+    return false;
+}
+
+function isEmptyNode(node) {
+    if (!node.content) {
+        return true;
+    }
+
+    if (node.content.length) {
+        return !node.content.filter(n => typeof n === 'string' && isEmptyTextNode(n) ? false : true).length;
+    }
+
+    return true;
+}
+
+function getFirstChildTag(node, nonEmpty = true) {
+    if (node.content && node.content.length) {
+        if (nonEmpty) {
+            for (const childNode of node.content) {
+                if (childNode.tag) return childNode;
+                if (typeof childNode === 'string' && !isEmptyTextNode(childNode)) return childNode;
+            }
+        } else {
+            return node.content[0] || null;
+        }
+    }
+
+    return null;
+}
+
+function getPrevNode(tree, currentNodeIndex, nonEmpty = false) {
+    if (nonEmpty) {
+        for (let i = currentNodeIndex - 1; i >= 0; i--) {
+            const node = tree[i];
+            if (node.tag) return node;
+            if (typeof node === 'string' && !isEmptyTextNode(node)) return node;
+        }
+    } else {
+        return tree[currentNodeIndex - 1] || null;
+    }
+
+    return null;
+}
+
+function getNextNode(tree, currentNodeIndex, nonEmpty = false) {
+    if (nonEmpty) {
+        for (let i = currentNodeIndex + 1; i < tree.length; i++) {
+            const node = tree[i];
+            if (node.tag) return node;
+            if (typeof node === 'string' && !isEmptyTextNode(node)) return node;
+        }
+    } else {
+        return tree[currentNodeIndex + 1] || null;
+    }
+
+    return null;
+}
+
+// Specification https://html.spec.whatwg.org/multipage/syntax.html#optional-tags
+/** Remove optional tag in the DOM */
+export default function removeOptionalTags(tree) {
+    tree.forEach((node, index) => {
+        if (!node.tag) return node;
+
+        if (node.attrs && Object.keys(node.attrs).length) return node;
+
+        // const prevNode = getPrevNode(tree, index);
+        const prevNonEmptyNode = getPrevNode(tree, index, true);
+        const nextNode = getNextNode(tree, index);
+        const nextNonEmptyNode = getNextNode(tree, index, true);
+        const firstChildNode = getFirstChildTag(node, false);
+        const firstNonEmptyChildNode = getFirstChildTag(node);
+
+        /**
+         * An "html" element's start tag may be omitted if the first thing inside the "html" element is not a comment.
+         * An "html" element's end tag may be omitted if the "html" element is not IMMEDIATELY followed by a comment.
+         */
+        if (node.tag === 'html') {
+            let isHtmlStartTagCanBeOmitted = true;
+            let isHtmlEndTagCanBeOmitted = true;
+
+            if (typeof firstNonEmptyChildNode === 'string' && isComment(firstNonEmptyChildNode)) {
+                isHtmlStartTagCanBeOmitted = false;
+            }
+
+            if (typeof nextNonEmptyNode === 'string' && isComment(nextNonEmptyNode)) {
+                isHtmlEndTagCanBeOmitted = false;
+            }
+
+            if (isHtmlStartTagCanBeOmitted && isHtmlEndTagCanBeOmitted) {
+                node.tag = false;
+            }
+        }
+
+        /**
+         * A "head" element's start tag may be omitted if the element is empty, or if the first thing inside the "head" element is an element.
+         * A "head" element's end tag may be omitted if the "head" element is not IMMEDIATELY followed by ASCII whitespace or a comment.
+         */
+        if (node.tag === 'head') {
+            let isHeadStartTagCanBeOmitted = false;
+            let isHeadEndTagCanBeOmitted = true;
+
+            if (
+                isEmptyNode(node) ||
+                firstNonEmptyChildNode && firstNonEmptyChildNode.tag
+            ) {
+                isHeadStartTagCanBeOmitted = true;
+            }
+
+            if (
+                (nextNode && typeof nextNode === 'string' && startWithWhitespacePattern.test(nextNode)) ||
+                (nextNonEmptyNode && typeof nextNonEmptyNode === 'string' && isComment(nextNode))
+            ) {
+                isHeadEndTagCanBeOmitted = false;
+            }
+
+            if (isHeadStartTagCanBeOmitted && isHeadEndTagCanBeOmitted) {
+                node.tag = false;
+            }
+        }
+
+
+        /**
+         * A "body" element's start tag may be omitted if the element is empty, or if the first thing inside the "body" element is not ASCII whitespace or a comment, except if the first thing inside the "body" element is a "meta", "link", "script", "style", or "template" element.
+         * A "body" element's end tag may be omitted if the "body" element is not IMMEDIATELY followed by a comment.
+         */
+        if (node.tag === 'body') {
+            let isBodyStartTagCanBeOmitted = true;
+            let isBodyEndTagCanBeOmitted = true;
+
+            if (
+                (typeof firstChildNode === 'string' && startWithWhitespacePattern.test(firstChildNode)) ||
+                (typeof firstNonEmptyChildNode === 'string' && isComment(firstNonEmptyChildNode))
+            ) {
+                isBodyStartTagCanBeOmitted = false;
+            }
+
+            if (firstNonEmptyChildNode && firstNonEmptyChildNode.tag && bodyStartTagCantBeOmittedWithFirstChildTags.has(firstNonEmptyChildNode.tag)) {
+                isBodyStartTagCanBeOmitted = false;
+            }
+
+            if (nextNode && typeof nextNode === 'string' && isComment(nextNode)) {
+                isBodyEndTagCanBeOmitted = false;
+            }
+
+            if (isBodyStartTagCanBeOmitted && isBodyEndTagCanBeOmitted) {
+                node.tag = false;
+            }
+        }
+
+        /**
+         * A "colgroup" element's start tag may be omitted if the first thing inside the "colgroup" element is a "col" element, and if the element is not IMMEDIATELY preceded by another "colgroup" element. It can't be omitted if the element is empty.
+         * A "colgroup" element's end tag may be omitted if the "colgroup" element is not IMMEDIATELY followed by ASCII whitespace or a comment.
+         */
+        if (node.tag === 'colgroup') {
+            let isColgroupStartTagCanBeOmitted = false;
+            let isColgroupEndTagCanBeOmitted = true;
+
+            if (firstNonEmptyChildNode && firstNonEmptyChildNode.tag && firstNonEmptyChildNode.tag === 'col') {
+                isColgroupStartTagCanBeOmitted = true;
+            }
+
+            if (prevNonEmptyNode && prevNonEmptyNode.tag && prevNonEmptyNode.tag === 'colgroup') {
+                isColgroupStartTagCanBeOmitted = false;
+            }
+
+            if (
+                (nextNode && typeof nextNode === 'string' && startWithWhitespacePattern.test(nextNode)) ||
+                (nextNonEmptyNode && typeof nextNonEmptyNode === 'string' && isComment(nextNonEmptyNode))
+            ) {
+                isColgroupEndTagCanBeOmitted = false;
+            }
+
+            if (isColgroupStartTagCanBeOmitted && isColgroupEndTagCanBeOmitted) {
+                node.tag = false;
+            }
+        }
+
+        /**
+         * A "tbody" element's start tag may be omitted if the first thing inside the "tbody" element is a "tr" element, and if the element is not immediately preceded by another "tbody", "thead" or "tfoot" element. It can't be omitted if the element is empty.
+         * A "tbody" element's end tag may be omitted if the "tbody" element is not IMMEDIATELY followed by a "tbody" or "tfoot" element.
+         */
+        if (node.tag === 'tbody') {
+            let isTbodyStartTagCanBeOmitted = false;
+            let isTbodyEndTagCanBeOmitted = true;
+
+            if (firstNonEmptyChildNode && firstNonEmptyChildNode.tag && firstNonEmptyChildNode.tag === 'tr') {
+                isTbodyStartTagCanBeOmitted = true;
+            }
+
+            if (prevNonEmptyNode && prevNonEmptyNode.tag && tbodyStartTagCantBeOmittedWithPrecededTags.has(prevNonEmptyNode.tag)) {
+                isTbodyStartTagCanBeOmitted = false;
+            }
+
+            if (nextNonEmptyNode && nextNonEmptyNode.tag && tbodyEndTagCantBeOmittedWithFollowedTags.has(nextNonEmptyNode.tag)) {
+                isTbodyEndTagCanBeOmitted = false;
+            }
+
+            if (isTbodyStartTagCanBeOmitted && isTbodyEndTagCanBeOmitted) {
+                node.tag = false;
+            }
+        }
+
+        if (node.content && node.content.length) {
+            removeOptionalTags(node.content);
+        }
+
+        return node;
+    });
+
+    return tree;
+}

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

@@ -6,10 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.onAttrs = onAttrs;
 exports.redundantScriptTypes = void 0;
 // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types
-const redundantScriptTypes = new Set(['application/javascript', 'application/ecmascript', 'application/x-ecmascript', 'application/x-javascript', 'text/javascript', 'text/ecmascript', 'text/javascript1.0', 'text/javascript1.1', 'text/javascript1.2', 'text/javascript1.3', 'text/javascript1.4', 'text/javascript1.5', 'text/jscript', 'text/livescript', 'text/x-ecmascript', 'text/x-javascript']);
+const redundantScriptTypes = exports.redundantScriptTypes = new Set(['application/javascript', 'application/ecmascript', 'application/x-ecmascript', 'application/x-javascript', 'text/javascript', 'text/ecmascript', 'text/javascript1.0', 'text/javascript1.1', 'text/javascript1.2', 'text/javascript1.3', 'text/javascript1.4', 'text/javascript1.5', 'text/jscript', 'text/livescript', 'text/x-ecmascript', 'text/x-javascript']);
 
 // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#missing-value-default
-exports.redundantScriptTypes = redundantScriptTypes;
 const missingValueDefaultAttributes = {
   'form': {
     'method': 'get'

package/lib/modules/removeRedundantAttributes.mjs

@@ -0,0 +1,141 @@
+// https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types
+export const redundantScriptTypes = new Set([
+    'application/javascript',
+    'application/ecmascript',
+    'application/x-ecmascript',
+    'application/x-javascript',
+    'text/javascript',
+    'text/ecmascript',
+    'text/javascript1.0',
+    'text/javascript1.1',
+    'text/javascript1.2',
+    'text/javascript1.3',
+    'text/javascript1.4',
+    'text/javascript1.5',
+    'text/jscript',
+    'text/livescript',
+    'text/x-ecmascript',
+    'text/x-javascript'
+]);
+
+// https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#missing-value-default
+const missingValueDefaultAttributes = {
+    'form': {
+        'method': 'get'
+    },
+
+    input: {
+        type: 'text'
+    },
+
+    button: {
+        // https://html.spec.whatwg.org/multipage/form-elements.html#attr-button-type
+        type: 'submit'
+    },
+
+    'script': {
+        'language': 'javascript',
+        'type': attrs => {
+            for (const [attrName, attrValue] of Object.entries(attrs)) {
+                if (attrName.toLowerCase() !== 'type') {
+                    continue;
+                }
+
+                return redundantScriptTypes.has(attrValue);
+            }
+
+            return false;
+        },
+        // Remove attribute if the function returns false
+        'charset': attrs => {
+            // The charset attribute only really makes sense on “external” SCRIPT elements:
+            // http://perfectionkills.com/optimizing-html/#8_script_charset
+            return !attrs.src;
+        }
+    },
+
+    'style': {
+        'media': 'all',
+        'type': 'text/css'
+    },
+
+    'link': {
+        media: 'all',
+        'type': attrs => {
+            // https://html.spec.whatwg.org/multipage/links.html#link-type-stylesheet
+            let isRelStyleSheet = false;
+            let isTypeTextCSS = false;
+
+            if (attrs) {
+                for (const [attrName, attrValue] of Object.entries(attrs)) {
+                    if (attrName.toLowerCase() === 'rel' && attrValue === 'stylesheet') {
+                        isRelStyleSheet = true;
+                    }
+                    if (attrName.toLowerCase() === 'type' && attrValue === 'text/css') {
+                        isTypeTextCSS = true;
+                    }
+                }
+            }
+
+            // Only "text/css" is redudant for link[rel=stylesheet]. Otherwise "type" shouldn't be removed
+            return isRelStyleSheet && isTypeTextCSS;
+        }
+    },
+
+    // See: https://html.spec.whatwg.org/#lazy-loading-attributes
+    img: {
+        'loading': 'eager',
+        // https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decoding
+        decoding: 'auto'
+    },
+    iframe: {
+        'loading': 'eager'
+    },
+
+    // https://html.spec.whatwg.org/multipage/media.html#htmltrackelement
+    track: {
+        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'
+    }
+};
+
+const tagsHaveMissingValueDefaultAttributes = new Set(Object.keys(missingValueDefaultAttributes));
+
+/** Removes redundant attributes */
+export function onAttrs() {
+    return (attrs, node) => {
+        if (!node.tag) return attrs;
+
+        const newAttrs = attrs;
+
+        if (tagsHaveMissingValueDefaultAttributes.has(node.tag)) {
+            const tagRedundantAttributes = missingValueDefaultAttributes[node.tag];
+
+            for (const redundantAttributeName of Object.keys(tagRedundantAttributes)) {
+                let tagRedundantAttributeValue = tagRedundantAttributes[redundantAttributeName];
+                let isRemove = false;
+
+                if (typeof tagRedundantAttributeValue === 'function') {
+                    isRemove = tagRedundantAttributeValue(attrs);
+                } else if (attrs[redundantAttributeName] === tagRedundantAttributeValue) {
+                    isRemove = true;
+                }
+
+                if (isRemove) {
+                    delete newAttrs[redundantAttributeName];
+                }
+            }
+        }
+
+        return newAttrs;
+    };
+}

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

@@ -4,18 +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');
-
+var _helpers = require("../helpers.cjs");
 // 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) {
+function processStyleNodeUnCSS(html, styleNode, uncssOptions, uncss) {
   const css = (0, _helpers.extractCssFromStyleNode)(styleNode);
-  return runUncss(html, css, uncssOptions).then(css => {
+  return runUncss(html, css, uncssOptions, uncss).then(css => {
     // uncss may have left some style tags empty
     if (css.trim().length === 0) {
       styleNode.tag = false;
@@ -25,7 +22,7 @@ function processStyleNodeUnCSS(html, styleNode, uncssOptions) {
     styleNode.content = [css];
   });
 }
-function runUncss(html, css, userOptions) {
+function runUncss(html, css, userOptions, uncss) {
   if (typeof userOptions !== 'object') {
     userOptions = {};
   }
@@ -57,9 +54,9 @@ const purgeFromHtml = function (tree) {
   });
   return () => selectors;
 };
-function processStyleNodePurgeCSS(tree, styleNode, purgecssOptions) {
+function processStyleNodePurgeCSS(tree, styleNode, purgecssOptions, purgecss) {
   const css = (0, _helpers.extractCssFromStyleNode)(styleNode);
-  return runPurgecss(tree, css, purgecssOptions).then(css => {
+  return runPurgecss(tree, css, purgecssOptions, purgecss).then(css => {
     if (css.trim().length === 0) {
       styleNode.tag = false;
       styleNode.content = [];
@@ -68,7 +65,7 @@ function processStyleNodePurgeCSS(tree, styleNode, purgecssOptions) {
     styleNode.content = [css];
   });
 }
-function runPurgecss(tree, css, userOptions) {
+function runPurgecss(tree, css, userOptions, purgecss) {
   if (typeof userOptions !== 'object') {
     userOptions = {};
   }
@@ -93,18 +90,20 @@ function runPurgecss(tree, css, userOptions) {
 }
 
 /** Remove unused CSS */
-function removeUnusedCss(tree, options, userOptions) {
+async function removeUnusedCss(tree, options, userOptions) {
   const promises = [];
   const html = userOptions.tool !== 'purgeCSS' && tree.render(tree);
+  const purgecss = await (0, _helpers.optionalImport)('purgecss');
+  const uncss = await (0, _helpers.optionalImport)('uncss');
   tree.walk(node => {
     if ((0, _helpers.isStyleNode)(node)) {
       if (userOptions.tool === 'purgeCSS') {
         if (purgecss) {
-          promises.push(processStyleNodePurgeCSS(tree, node, userOptions));
+          promises.push(processStyleNodePurgeCSS(tree, node, userOptions, purgecss));
         }
       } else {
         if (uncss) {
-          promises.push(processStyleNodeUnCSS(html, node, userOptions));
+          promises.push(processStyleNodeUnCSS(html, node, userOptions, uncss));
         }
       }
     }