htmlnano 2.0.3 → 2.1.0

package/lib/modules/deduplicateAttributeValues.mjs

@@ -0,0 +1,40 @@
+import { attributesWithLists } from './collapseAttributeWhitespace.mjs';
+
+/** Deduplicate values inside list-like attributes (e.g. class, rel) */
+export function onAttrs() {
+    return (attrs) => {
+        const newAttrs = attrs;
+        Object.keys(attrs).forEach(attrName => {
+            if (! attributesWithLists.has(attrName)) {
+                return;
+            }
+
+            if (typeof attrs[attrName] !== 'string') {
+                return;
+            }
+
+            const attrValues = attrs[attrName].split(/\s/);
+            const uniqeAttrValues = new Set();
+            const deduplicatedAttrValues = [];
+
+            attrValues.forEach((attrValue) => {
+                if (! attrValue) {
+                    // Keep whitespaces
+                    deduplicatedAttrValues.push('');
+                    return;
+                }
+
+                if (uniqeAttrValues.has(attrValue)) {
+                    return;
+                }
+
+                deduplicatedAttrValues.push(attrValue);
+                uniqeAttrValues.add(attrValue);
+            });
+
+            newAttrs[attrName] = deduplicatedAttrValues.join(' ');
+        });
+
+        return newAttrs;
+    };
+}

package/lib/modules/example.cjs

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = example;
+exports.onAttrs = onAttrs;
+exports.onContent = onContent;
+exports.onNode = onNode;
+/**
+ * It is an example htmlnano module.
+ *
+ * A htmlnano module can be modify the attributes of every node (through a "onAttrs" named export),
+ * modify the content of every node (through an optional "onContent" named export), modify the node
+ * itself (through an optional "onNode" named export), or modify the entire tree (through an optional
+ * default export).
+ */
+
+/**
+ * Modify attributes of node. Optional.
+ *
+ * @param {object} options - Options that were passed to htmlnano
+ * @param moduleOptions — Module options. For most modules this is just "true" (indication that the module was enabled)
+ * @return {Function} - Return a function that takes attribute object and the node (for the context), and returns the modified attribute object
+ */
+function onAttrs(options, moduleOptions) {
+  return (attrs, node) => {
+    // You can modify "attrs" based on "node"
+    const newAttrs = {
+      ...attrs
+    };
+    return newAttrs; // ... then return the modified attrs
+  };
+}
+
+/**
+ * Modify content of node. Optional.
+ *
+ * @param {object} options - Options that were passed to htmlnano
+ * @param moduleOptions — Module options. For most modules this is just "true" (indication that the module was enabled)
+ * @return {Function} - Return a function that takes contents (an array of node and string) and the node (for the context), and returns the modified content array.
+ */
+function onContent(options, moduleOptions) {
+  return (content, node) => {
+    // Same goes the "content"
+
+    return content; // ... return modified content here
+  };
+}
+
+/**
+ * It is possible to modify entire ndde as well. Optional.
+ * @param {object} options - Options that were passed to htmlnano
+ * @param moduleOptions — Module options. For most modules this is just "true" (indication that the module was enabled)
+ * @return {Function} - Return a function that takes the node, and returns the new, modified node.
+ */
+function onNode(options, moduleOptions) {
+  return node => {
+    return node; // ... return new node here
+  };
+}
+
+/**
+ * Modify the entire tree. Optional.
+ *
+ * @param {object} tree - PostHTML tree (https://github.com/posthtml/posthtml/blob/master/README.md)
+ * @param {object} options - Options that were passed to htmlnano
+ * @param moduleOptions — Module options. For most modules this is just "true" (indication that the module was enabled)
+ * @return {object | Proimse} - Return the modified tree.
+ */
+function example(tree, options, moduleOptions) {
+  // Module filename (example.es6), exported default function name (example),
+  // and test filename (example.js) must be the same.
+
+  // You can traverse the tree...
+  tree.walk(node => {
+    // ...and make some minification
+  });
+
+  // At the end you must return the tree
+  return tree;
+
+  // Or a promise with the tree
+  return somePromise.then(() => tree);
+}

package/lib/modules/example.mjs

@@ -0,0 +1,75 @@
+/**
+ * It is an example htmlnano module.
+ *
+ * A htmlnano module can be modify the attributes of every node (through a "onAttrs" named export),
+ * modify the content of every node (through an optional "onContent" named export), modify the node
+ * itself (through an optional "onNode" named export), or modify the entire tree (through an optional
+ * default export).
+ */
+
+/**
+ * Modify attributes of node. Optional.
+ *
+ * @param {object} options - Options that were passed to htmlnano
+ * @param moduleOptions — Module options. For most modules this is just "true" (indication that the module was enabled)
+ * @return {Function} - Return a function that takes attribute object and the node (for the context), and returns the modified attribute object
+ */
+export function onAttrs(options, moduleOptions) {
+    return (attrs, node) => {
+        // You can modify "attrs" based on "node"
+        const newAttrs = { ...attrs };
+
+        return newAttrs; // ... then return the modified attrs
+    };
+}
+
+/**
+ * Modify content of node. Optional.
+ *
+ * @param {object} options - Options that were passed to htmlnano
+ * @param moduleOptions — Module options. For most modules this is just "true" (indication that the module was enabled)
+ * @return {Function} - Return a function that takes contents (an array of node and string) and the node (for the context), and returns the modified content array.
+ */
+export function onContent(options, moduleOptions) {
+    return (content, node) => {
+        // Same goes the "content"
+
+        return content; // ... return modified content here
+    };
+}
+
+/**
+ * It is possible to modify entire ndde as well. Optional.
+ * @param {object} options - Options that were passed to htmlnano
+ * @param moduleOptions — Module options. For most modules this is just "true" (indication that the module was enabled)
+ * @return {Function} - Return a function that takes the node, and returns the new, modified node.
+ */
+export function onNode(options, moduleOptions) {
+    return (node) => {
+        return node; // ... return new node here
+    };
+}
+
+/**
+ * Modify the entire tree. Optional.
+ *
+ * @param {object} tree - PostHTML tree (https://github.com/posthtml/posthtml/blob/master/README.md)
+ * @param {object} options - Options that were passed to htmlnano
+ * @param moduleOptions — Module options. For most modules this is just "true" (indication that the module was enabled)
+ * @return {object | Proimse} - Return the modified tree.
+ */
+export default function example(tree, options, moduleOptions) {
+    // Module filename (example.es6), exported default function name (example),
+    // and test filename (example.js) must be the same.
+
+    // You can traverse the tree...
+    tree.walk(node => {
+        // ...and make some minification
+    });
+
+    // At the end you must return the tree
+    return tree;
+
+    // Or a promise with the tree
+    return somePromise.then(() => tree);
+}

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

@@ -12,7 +12,9 @@ function mergeScripts(tree) {
     tag: 'script'
   }, node => {
     const nodeAttrs = node.attrs || {};
-    if (nodeAttrs.src) {
+    if ('src' in nodeAttrs
+    // Skip SRI, reasons are documented in "minifyJs" module
+    || 'integrity' in nodeAttrs) {
       scriptSrcIndex++;
       return node;
     }

package/lib/modules/mergeScripts.mjs

@@ -0,0 +1,56 @@
+/* Merge multiple <script> into one */
+export default function mergeScripts (tree) {
+    let scriptNodesIndex = {};
+    let scriptSrcIndex = 1;
+
+    tree.match({ tag: 'script' }, node => {
+        const nodeAttrs = node.attrs || {};
+        if (
+            'src' in nodeAttrs
+            // Skip SRI, reasons are documented in "minifyJs" module
+            || 'integrity' in nodeAttrs
+        ) {
+            scriptSrcIndex++;
+            return node;
+        }
+
+        const scriptType = nodeAttrs.type || 'text/javascript';
+        if (scriptType !== 'text/javascript' && scriptType !== 'application/javascript') {
+            return node;
+        }
+
+        const scriptKey = JSON.stringify({
+            id: nodeAttrs.id,
+            class: nodeAttrs.class,
+            type: scriptType,
+            defer: nodeAttrs.defer !== undefined,
+            async: nodeAttrs.async !== undefined,
+            index: scriptSrcIndex,
+        });
+        if (!scriptNodesIndex[scriptKey]) {
+            scriptNodesIndex[scriptKey] = [];
+        }
+
+        scriptNodesIndex[scriptKey].push(node);
+        return node;
+    });
+
+    for (const scriptNodes of Object.values(scriptNodesIndex)) {
+        let lastScriptNode = scriptNodes.pop();
+        scriptNodes.reverse().forEach(scriptNode => {
+            let scriptContent = (scriptNode.content || []).join(' ');
+            scriptContent = scriptContent.trim();
+            if (scriptContent.slice(-1) !== ';') {
+                scriptContent += ';';
+            }
+
+            lastScriptNode.content = lastScriptNode.content || [];
+            lastScriptNode.content.unshift(scriptContent);
+
+            scriptNode.tag = false;
+            scriptNode.content = [];
+        });
+    }
+
+    return tree;
+}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = mergeStyles;
-var _helpers = require("../helpers");
+var _helpers = require("../helpers.cjs");
 /* Merge multiple <style> into one */
 function mergeStyles(tree) {
   const styleNodes = {};
@@ -14,7 +14,9 @@ function mergeStyles(tree) {
     const nodeAttrs = node.attrs || {};
     // Skip <style scoped></style>
     // https://developer.mozilla.org/en/docs/Web/HTML/Element/style
-    if (nodeAttrs.scoped !== undefined) {
+    //
+    // Also skip SRI, reasons are documented in "minifyJs" module
+    if ('scoped' in nodeAttrs || 'integrity' in nodeAttrs) {
       return node;
     }
     if ((0, _helpers.isAmpBoilerplate)(node)) {

package/lib/modules/mergeStyles.mjs

@@ -0,0 +1,36 @@
+import { isAmpBoilerplate } from '../helpers.mjs';
+
+/* Merge multiple <style> into one */
+export default function mergeStyles(tree) {
+    const styleNodes = {};
+
+    tree.match({tag: 'style'}, node => {
+        const nodeAttrs = node.attrs || {};
+        // Skip <style scoped></style>
+        // https://developer.mozilla.org/en/docs/Web/HTML/Element/style
+        //
+        // Also skip SRI, reasons are documented in "minifyJs" module
+        if ('scoped' in nodeAttrs || 'integrity' in nodeAttrs) {
+            return node;
+        }
+
+        if (isAmpBoilerplate(node)) {
+            return node;
+        }
+
+        const styleType = nodeAttrs.type || 'text/css';
+        const styleMedia = nodeAttrs.media || 'all';
+        const styleKey = styleType + '_' + styleMedia;
+        if (styleNodes[styleKey]) {
+            const styleContent = (node.content || []).join(' ');
+            styleNodes[styleKey].content.push(' ' + styleContent);
+            return '';
+        }
+
+        node.content = node.content || [];
+        styleNodes[styleKey] = node;
+        return node;
+    });
+
+    return tree;
+}

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = minifyConditionalComments;
-var _htmlnano = _interopRequireDefault(require("../htmlnano"));
-var _helpers = require("../helpers");
+var _htmlnano = _interopRequireDefault(require("../htmlnano.cjs"));
+var _helpers = require("../helpers.cjs");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // Spec: https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537512(v=vs.85)
 const CONDITIONAL_COMMENT_REGEXP = /(<!--\[if\s+?[^<>[\]]+?]>)([\s\S]+?)(<!\[endif\]-->)/gm;

package/lib/modules/minifyConditionalComments.mjs

@@ -0,0 +1,49 @@
+import htmlnano from '../htmlnano.mjs';
+import { isConditionalComment } from '../helpers.mjs';
+
+// Spec: https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537512(v=vs.85)
+const CONDITIONAL_COMMENT_REGEXP = /(<!--\[if\s+?[^<>[\]]+?]>)([\s\S]+?)(<!\[endif\]-->)/gm;
+
+/** Minify content inside conditional comments */
+export default async function minifyConditionalComments(tree, htmlnanoOptions) {
+    // forEach, tree.walk, tree.match just don't support Promise.
+    for (let i = 0, len = tree.length; i < len; i++) {
+        const node = tree[i];
+
+        if (typeof node === 'string' && isConditionalComment(node)) {
+            tree[i] = await minifycontentInsideConditionalComments(node, htmlnanoOptions);
+        }
+
+        if (node.content && node.content.length) {
+            tree[i].content = await minifyConditionalComments(node.content, htmlnanoOptions);
+        }
+    }
+
+    return tree;
+}
+
+async function minifycontentInsideConditionalComments(text, htmlnanoOptions) {
+    let match;
+    const matches = [];
+
+    // FIXME!
+    // String#matchAll is supported since Node.js 12
+    while ((match = CONDITIONAL_COMMENT_REGEXP.exec(text)) !== null) {
+        matches.push([match[1], match[2], match[3]]);
+    }
+
+    if (!matches.length) {
+        return Promise.resolve(text);
+    }
+
+    return Promise.all(matches.map(async match => {
+        const result = await htmlnano.process(match[1], htmlnanoOptions, {}, {});
+        let minified = result.html;
+
+        if (match[1].includes('<html') && minified.includes('</html>')) {
+            minified = minified.replace('</html>', '');
+        }
+
+        return match[0] + minified + match[2];
+    }));
+}

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

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = minifyCss;
-var _helpers = require("../helpers");
-const cssnano = (0, _helpers.optionalRequire)('cssnano');
-const postcss = (0, _helpers.optionalRequire)('postcss');
+var _helpers = require("../helpers.cjs");
 const postcssOptions = {
   // Prevent the following warning from being shown:
   // > Without `from` option PostCSS could generate wrong source map and will not find Browserslist config.
@@ -15,22 +13,28 @@ const postcssOptions = {
 };
 
 /** Minify CSS with cssnano */
-function minifyCss(tree, options, cssnanoOptions) {
+async function minifyCss(tree, options, cssnanoOptions) {
+  const cssnano = await (0, _helpers.optionalImport)('cssnano');
+  const postcss = await (0, _helpers.optionalImport)('postcss');
   if (!cssnano || !postcss) {
     return tree;
   }
   let promises = [];
   tree.walk(node => {
+    // Skip SRI, reasons are documented in "minifyJs" module
+    if (node.attrs && 'integrity' in node.attrs) {
+      return node;
+    }
     if ((0, _helpers.isStyleNode)(node)) {
-      promises.push(processStyleNode(node, cssnanoOptions));
+      promises.push(processStyleNode(node, cssnanoOptions, cssnano, postcss));
     } else if (node.attrs && node.attrs.style) {
-      promises.push(processStyleAttr(node, cssnanoOptions));
+      promises.push(processStyleAttr(node, cssnanoOptions, cssnano, postcss));
     }
     return node;
   });
   return Promise.all(promises).then(() => tree);
 }
-function processStyleNode(styleNode, cssnanoOptions) {
+function processStyleNode(styleNode, cssnanoOptions, cssnano, postcss) {
   let css = (0, _helpers.extractCssFromStyleNode)(styleNode);
 
   // Improve performance by avoiding calling stripCdata again and again
@@ -47,7 +51,7 @@ function processStyleNode(styleNode, cssnanoOptions) {
     return styleNode.content = [result.css];
   });
 }
-function processStyleAttr(node, cssnanoOptions) {
+function processStyleAttr(node, cssnanoOptions, cssnano, postcss) {
   // CSS "color: red;" is invalid. Therefore it should be wrapped inside some selector:
   // a{color: red;}
   const wrapperStart = 'a{';

package/lib/modules/minifyCss.mjs

@@ -0,0 +1,88 @@
+import { isStyleNode, extractCssFromStyleNode, optionalImport } from '../helpers.mjs';
+
+const postcssOptions = {
+    // Prevent the following warning from being shown:
+    // > Without `from` option PostCSS could generate wrong source map and will not find Browserslist config.
+    // > Set it to CSS file path or to `undefined` to prevent this warning.
+    from: undefined,
+};
+
+/** Minify CSS with cssnano */
+export default async function minifyCss(tree, options, cssnanoOptions) {
+    const cssnano = await optionalImport('cssnano');
+    const postcss = await optionalImport('postcss');
+
+    if (!cssnano || !postcss) {
+        return tree;
+    }
+
+    let promises = [];
+    tree.walk(node => {
+        // Skip SRI, reasons are documented in "minifyJs" module
+        if (node.attrs && 'integrity' in node.attrs) {
+            return node;
+        }
+
+        if (isStyleNode(node)) {
+            promises.push(processStyleNode(node, cssnanoOptions, cssnano, postcss));
+        } else if (node.attrs && node.attrs.style) {
+            promises.push(processStyleAttr(node, cssnanoOptions, cssnano, postcss));
+        }
+
+        return node;
+    });
+
+    return Promise.all(promises).then(() => tree);
+}
+
+
+function processStyleNode(styleNode, cssnanoOptions, cssnano, postcss) {
+    let css = extractCssFromStyleNode(styleNode);
+
+    // Improve performance by avoiding calling stripCdata again and again
+    let isCdataWrapped = false;
+    if (css.includes('CDATA')) {
+        const strippedCss = stripCdata(css);
+        isCdataWrapped = css !== strippedCss;
+        css = strippedCss;
+    }
+
+    return postcss([cssnano(cssnanoOptions)])
+        .process(css, postcssOptions)
+        .then(result => {
+            if (isCdataWrapped) {
+                return styleNode.content = ['<![CDATA[' + result + ']]>'];
+            }
+            return styleNode.content = [result.css];
+        });
+}
+
+
+function processStyleAttr(node, cssnanoOptions, cssnano, postcss) {
+    // CSS "color: red;" is invalid. Therefore it should be wrapped inside some selector:
+    // a{color: red;}
+    const wrapperStart = 'a{';
+    const wrapperEnd = '}';
+    const wrappedStyle = wrapperStart + (node.attrs.style || '') + wrapperEnd;
+
+    return postcss([cssnano(cssnanoOptions)])
+        .process(wrappedStyle, postcssOptions)
+        .then(result => {
+            const minifiedCss = result.css;
+            // Remove wrapperStart at the start and wrapperEnd at the end of minifiedCss
+            node.attrs.style = minifiedCss.substring(
+                wrapperStart.length,
+                minifiedCss.length - wrapperEnd.length
+            );
+        });
+}
+
+function stripCdata(css) {
+    const leftStrippedCss = css.replace('<![CDATA[', '');
+    if (leftStrippedCss === css) {
+        return css;
+    }
+
+    const strippedCss = leftStrippedCss.replace(']]>', '');
+    return leftStrippedCss === strippedCss ? css : strippedCss;
+}

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

@@ -4,24 +4,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = minifyJs;
-var _helpers = require("../helpers");
-var _removeRedundantAttributes = require("./removeRedundantAttributes");
-const terser = (0, _helpers.optionalRequire)('terser');
-
+var _helpers = require("../helpers.cjs");
+var _removeRedundantAttributes = require("./removeRedundantAttributes.cjs");
 /** Minify JS with Terser */
-function minifyJs(tree, options, terserOptions) {
+async function minifyJs(tree, options, terserOptions) {
+  const terser = await (0, _helpers.optionalImport)('terser');
   if (!terser) return tree;
   let promises = [];
   tree.walk(node => {
+    const nodeAttrs = node.attrs || {};
+
+    /**
+     * Skip SRI
+     *
+     * If the input <script /> has an SRI attribute, it means that the original <script /> could be trusted,
+     * and should not be altered anymore.
+     *
+     * htmlnano is exactly an MITM that SRI is designed to protect from. If htmlnano or its dependencies get
+     * compromised and introduces malicious code, then it is up to the original SRI to protect the end user.
+     *
+     * So htmlnano will simply skip <script /> that has SRI.
+     * If developers do trust htmlnano, they should generate SRI after htmlnano modify the <script />.
+     */
+    if ('integrity' in nodeAttrs) {
+      return node;
+    }
     if (node.tag && node.tag === 'script') {
-      const nodeAttrs = node.attrs || {};
       const mimeType = nodeAttrs.type || 'text/javascript';
       if (_removeRedundantAttributes.redundantScriptTypes.has(mimeType) || mimeType === 'module') {
-        promises.push(processScriptNode(node, terserOptions));
+        promises.push(processScriptNode(node, terserOptions, terser));
       }
     }
     if (node.attrs) {
-      promises = promises.concat(processNodeWithOnAttrs(node, terserOptions));
+      promises = promises.concat(processNodeWithOnAttrs(node, terserOptions, terser));
     }
     return node;
   });
@@ -35,7 +50,7 @@ function stripCdata(js) {
   const strippedJs = leftStrippedJs.replace(/\/\/\s*\]\]>/, '').replace(/\/\*\s*\]\]>\s*\*\//, '');
   return leftStrippedJs === strippedJs ? js : strippedJs;
 }
-function processScriptNode(scriptNode, terserOptions) {
+function processScriptNode(scriptNode, terserOptions, terser) {
   let js = (scriptNode.content || []).join('').trim();
   if (!js) {
     return scriptNode;
@@ -62,7 +77,7 @@ function processScriptNode(scriptNode, terserOptions) {
     scriptNode.content = [content];
   });
 }
-function processNodeWithOnAttrs(node, terserOptions) {
+function processNodeWithOnAttrs(node, terserOptions, terser) {
   const jsWrapperStart = 'a=function(){';
   const jsWrapperEnd = '};a();';
   const promises = [];