htmlnano 0.2.5 → 0.2.9

package/lib/modules/minifyCss.js

@@ -1,60 +1,78 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 exports.default = minifyCss;
 
-var _helpers = require('../helpers');
+var _helpers = require("../helpers");
 
-var _cssnano = require('cssnano');
-
-var _cssnano2 = _interopRequireDefault(_cssnano);
+var _cssnano = _interopRequireDefault(require("cssnano"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var 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
+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 */
+
 function minifyCss(tree, options, cssnanoOptions) {
-    var promises = [];
-    tree.walk(function (node) {
-        if ((0, _helpers.isStyleNode)(node)) {
-            promises.push(processStyleNode(node, cssnanoOptions));
-        } else if (node.attrs && node.attrs.style) {
-            promises.push(processStyleAttr(node, cssnanoOptions));
-        }
-
-        return node;
-    });
-
-    return Promise.all(promises).then(function () {
-        return tree;
-    });
+  let promises = [];
+  tree.walk(node => {
+    if ((0, _helpers.isStyleNode)(node)) {
+      promises.push(processStyleNode(node, cssnanoOptions));
+    } else if (node.attrs && node.attrs.style) {
+      promises.push(processStyleAttr(node, cssnanoOptions));
+    }
+
+    return node;
+  });
+  return Promise.all(promises).then(() => tree);
 }
 
 function processStyleNode(styleNode, cssnanoOptions) {
-    var css = (0, _helpers.extractCssFromStyleNode)(styleNode);
-    return _cssnano2.default.process(css, postcssOptions, cssnanoOptions).then(function (result) {
-        return styleNode.content = [result.css];
-    });
+  let css = (0, _helpers.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 _cssnano.default.process(css, postcssOptions, cssnanoOptions).then(result => {
+    if (isCdataWrapped) {
+      return styleNode.content = ['<![CDATA[' + result + ']]>'];
+    }
+
+    return styleNode.content = [result.css];
+  });
 }
 
 function processStyleAttr(node, cssnanoOptions) {
-    // CSS "color: red;" is invalid. Therefore it should be wrapped inside some selector:
-    // a{color: red;}
-    var wrapperStart = 'a{';
-    var wrapperEnd = '}';
-    var wrappedStyle = wrapperStart + (node.attrs.style || '') + wrapperEnd;
-
-    return _cssnano2.default.process(wrappedStyle, postcssOptions, cssnanoOptions).then(function (result) {
-        var 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);
-    });
+  // 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 _cssnano.default.process(wrappedStyle, postcssOptions, cssnanoOptions).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

@@ -1,94 +1,109 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 exports.default = minifyJs;
 
-var _terser = require('terser');
+var _terser = _interopRequireDefault(require("terser"));
 
-var _terser2 = _interopRequireDefault(_terser);
+var _removeRedundantAttributes = require("./removeRedundantAttributes");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /** Minify JS with Terser */
 function minifyJs(tree, options, terserOptions) {
+  let promises = [];
+  tree.walk(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));
+      }
+    }
 
-    tree.match({ tag: 'script' }, function (node) {
-        var nodeAttrs = node.attrs || {};
-        var mimeType = nodeAttrs.type || 'text/javascript';
-        if (mimeType === 'text/javascript' || mimeType === 'application/javascript') {
-            return processScriptNode(node, terserOptions);
-        }
+    if (node.attrs) {
+      promises = promises.concat(processNodeWithOnAttrs(node, terserOptions));
+    }
 
-        return node;
-    });
+    return node;
+  });
+  return Promise.all(promises).then(() => tree);
+}
 
-    tree.match({ attrs: true }, function (node) {
-        return processNodeWithOnAttrs(node, terserOptions);
-    });
+function stripCdata(js) {
+  const leftStrippedJs = js.replace(/\/\/\s*<!\[CDATA\[/, '').replace(/\/\*\s*<!\[CDATA\[\s*\*\//, '');
 
-    return tree;
+  if (leftStrippedJs === js) {
+    return js;
+  }
+
+  const strippedJs = leftStrippedJs.replace(/\/\/\s*\]\]>/, '').replace(/\/\*\s*\]\]>\s*\*\//, '');
+  return leftStrippedJs === strippedJs ? js : strippedJs;
 }
 
 function processScriptNode(scriptNode, terserOptions) {
-    var js = (scriptNode.content || []).join(' ').trim();
-    if (!js) {
-        return scriptNode;
-    }
+  let js = (scriptNode.content || []).join('').trim();
+
+  if (!js) {
+    return scriptNode;
+  } // Improve performance by avoiding calling stripCdata again and again
+
 
-    var result = _terser2.default.minify(js, terserOptions);
+  let isCdataWrapped = false;
+
+  if (js.includes('CDATA')) {
+    const strippedJs = stripCdata(js);
+    isCdataWrapped = js !== strippedJs;
+    js = strippedJs;
+  }
+
+  return _terser.default.minify(js, terserOptions).then(result => {
     if (result.error) {
-        throw new Error(result.error);
+      throw new Error(result.error);
     }
+
     if (result.code === undefined) {
-        return scriptNode;
+      return;
     }
 
-    scriptNode.content = [result.code];
+    let content = result.code;
 
-    return scriptNode;
+    if (isCdataWrapped) {
+      content = '/*<![CDATA[*/' + content + '/*]]>*/';
+    }
+
+    scriptNode.content = [content];
+  });
 }
 
 function processNodeWithOnAttrs(node, terserOptions) {
-    var jsWrapperStart = 'function _(){';
-    var jsWrapperEnd = '}';
-
-    var _iteratorNormalCompletion = true;
-    var _didIteratorError = false;
-    var _iteratorError = undefined;
-
-    try {
-        for (var _iterator = Object.keys(node.attrs || {})[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-            var attrName = _step.value;
-
-            if (attrName.search('on') !== 0) {
-                continue;
-            }
-
-            // For example onclick="return false" is valid,
-            // but "return false;" is invalid (error: 'return' outside of function)
-            // Therefore the attribute's code should be wrapped inside function:
-            // "function _(){return false;}"
-            var wrappedJs = jsWrapperStart + node.attrs[attrName] + jsWrapperEnd;
-            var wrappedMinifiedJs = _terser2.default.minify(wrappedJs, terserOptions).code;
-            var minifiedJs = wrappedMinifiedJs.substring(jsWrapperStart.length, wrappedMinifiedJs.length - jsWrapperEnd.length);
-            node.attrs[attrName] = minifiedJs;
-        }
-    } catch (err) {
-        _didIteratorError = true;
-        _iteratorError = err;
-    } finally {
-        try {
-            if (!_iteratorNormalCompletion && _iterator.return) {
-                _iterator.return();
-            }
-        } finally {
-            if (_didIteratorError) {
-                throw _iteratorError;
-            }
-        }
-    }
+  const jsWrapperStart = 'function _(){';
+  const jsWrapperEnd = '}';
+  const promises = [];
+
+  for (const attrName of Object.keys(node.attrs || {})) {
+    if (!attrName.startsWith('on')) {
+      continue;
+    } // For example onclick="return false" is valid,
+    // but "return false;" is invalid (error: 'return' outside of function)
+    // Therefore the attribute's code should be wrapped inside function:
+    // "function _(){return false;}"
+
+
+    let wrappedJs = jsWrapperStart + node.attrs[attrName] + jsWrapperEnd;
+
+    let promise = _terser.default.minify(wrappedJs, terserOptions).then(({
+      code
+    }) => {
+      let minifiedJs = code.substring(jsWrapperStart.length, code.length - jsWrapperEnd.length);
+      node.attrs[attrName] = minifiedJs;
+    });
 
-    return node;
+    promises.push(promise);
+  }
+
+  return promises;
 }

package/lib/modules/minifyJson.js

@@ -1,27 +1,33 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 exports.default = minifyJson;
+
 /* Minify JSON inside <script> tags */
 function minifyJson(tree) {
-    // Match all <script> tags which have JSON mime type
-    tree.match({ tag: 'script', attrs: { type: /(\/|\+)json/ } }, function (node) {
-        var content = (node.content || []).join('');
-        if (!content) {
-            return node;
-        }
+  // Match all <script> tags which have JSON mime type
+  tree.match({
+    tag: 'script',
+    attrs: {
+      type: /(\/|\+)json/
+    }
+  }, node => {
+    let content = (node.content || []).join('');
 
-        try {
-            content = JSON.stringify(JSON.parse(content));
-        } catch (error) {
-            return node;
-        }
+    if (!content) {
+      return node;
+    }
 
-        node.content = [content];
-        return node;
-    });
+    try {
+      content = JSON.stringify(JSON.parse(content));
+    } catch (error) {
+      return node;
+    }
 
-    return tree;
+    node.content = [content];
+    return node;
+  });
+  return tree;
 }

package/lib/modules/minifySvg.js

@@ -1,40 +1,32 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 exports.default = minifySvg;
 
-var _svgo = require('svgo');
-
-var _svgo2 = _interopRequireDefault(_svgo);
-
-var _posthtmlRender = require('posthtml-render');
-
-var _posthtmlRender2 = _interopRequireDefault(_posthtmlRender);
+var _svgo = _interopRequireDefault(require("svgo"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /** Minify SVG with SVGO */
-function minifySvg(tree, options) {
-    var svgoOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-
-    var promises = [];
-    var svgo = new _svgo2.default(svgoOptions);
-
-    tree.match({ tag: 'svg' }, function (node) {
-        var svgStr = (0, _posthtmlRender2.default)(node);
-        var promise = svgo.optimize(svgStr).then(function (result) {
-            node.tag = false;
-            node.attrs = {};
-            node.content = result.data;
-        });
-        promises.push(promise);
-
-        return node;
+function minifySvg(tree, options, svgoOptions = {}) {
+  let promises = [];
+  const svgo = new _svgo.default(svgoOptions);
+  tree.match({
+    tag: 'svg'
+  }, node => {
+    let svgStr = tree.render(node, {
+      closingSingleTag: 'slash',
+      quoteAllAttributes: true
     });
-
-    return Promise.all(promises).then(function () {
-        return tree;
+    let promise = svgo.optimize(svgStr).then(result => {
+      node.tag = false;
+      node.attrs = {};
+      node.content = result.data;
     });
+    promises.push(promise);
+    return node;
+  });
+  return Promise.all(promises).then(() => tree);
 }

package/lib/modules/minifyUrls.js

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = minifyUrls;
+
+var _relateurl = _interopRequireDefault(require("relateurl"));
+
+var _srcset = _interopRequireDefault(require("srcset"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Adopts from https://github.com/kangax/html-minifier/blob/51ce10f4daedb1de483ffbcccecc41be1c873da2/src/htmlminifier.js#L209-L221
+const tagsHaveUriValuesForAttributes = new Set(['a', 'area', 'link', 'base', 'img', 'object', 'q', 'blockquote', 'ins', 'form', 'input', 'head', 'script']);
+const tagsHasHrefAttributes = new Set(['a', 'area', 'link', 'base']);
+const attributesOfImgTagHasUriValues = new Set(['src', 'longdesc', 'usemap']);
+const attributesOfObjectTagHasUriValues = new Set(['classid', 'codebase', 'data', 'usemap']);
+
+const isUriTypeAttribute = (tag, attr) => {
+  return tagsHasHrefAttributes.has(tag) && attr === 'href' || tag === 'img' && attributesOfImgTagHasUriValues.has(attr) || tag === 'object' && attributesOfObjectTagHasUriValues.has(attr) || tag === 'q' && attr === 'cite' || tag === 'blockquote' && attr === 'cite' || (tag === 'ins' || tag === 'del') && attr === 'cite' || tag === 'form' && attr === 'action' || tag === 'input' && (attr === 'src' || attr === 'usemap') || tag === 'head' && attr === 'profile' || tag === 'script' && (attr === 'src' || attr === 'for') ||
+  /**
+   * https://html.spec.whatwg.org/#attr-source-src
+   *
+   * Although most of browsers recommend not to use "src" in <source>,
+   * but technically it does comply with HTML Standard.
+   */
+  tag === 'source' && attr === 'src';
+};
+
+const isSrcsetAttribute = (tag, attr) => {
+  return tag === 'source' && attr === 'srcset' || tag === 'img' && attr === 'srcset' || tag === 'link' && attr === 'imagesrcset';
+};
+
+const processModuleOptions = options => {
+  // FIXME!
+  // relateurl@1.0.0-alpha only supports URL while stable version (0.2.7) only supports string
+  // should convert input into URL instance after relateurl@1 is stable
+  if (typeof options === 'string') return options;
+  if (options instanceof URL) return options.toString();
+  return false;
+};
+
+const isLinkRelCanonical = ({
+  tag,
+  attrs
+}) => {
+  // Return false early for non-"link" tag
+  if (tag !== 'link') return false;
+
+  for (const [attrName, attrValue] of Object.entries(attrs)) {
+    if (attrName.toLowerCase() === 'rel' && attrValue === 'canonical') return true;
+  }
+
+  return false;
+};
+
+let relateUrlInstance;
+let STORED_URL_BASE;
+/** Convert absolute url into relative url */
+
+function minifyUrls(tree, options, moduleOptions) {
+  const urlBase = processModuleOptions(moduleOptions); // Invalid configuration, return tree directly
+
+  if (!urlBase) return tree;
+  /** Bring up a reusable RelateUrl instances (only once)
+   *
+   * STORED_URL_BASE is used to invalidate RelateUrl instances,
+   * avoiding require.cache acrossing multiple htmlnano instance with different configuration,
+   * e.g. unit tests cases.
+   */
+
+  if (!relateUrlInstance || STORED_URL_BASE !== urlBase) {
+    relateUrlInstance = new _relateurl.default(urlBase);
+    STORED_URL_BASE = urlBase;
+  }
+
+  tree.walk(node => {
+    if (!node.attrs) return node;
+    if (!node.tag) return node;
+    if (!tagsHaveUriValuesForAttributes.has(node.tag)) return node; // Prevent link[rel=canonical] being processed
+    // Can't be excluded by isUriTypeAttribute()
+
+    if (isLinkRelCanonical(node)) return node;
+
+    for (const [attrName, attrValue] of Object.entries(node.attrs)) {
+      const attrNameLower = attrName.toLowerCase();
+
+      if (isUriTypeAttribute(node.tag, attrNameLower)) {
+        // FIXME!
+        // relateurl@1.0.0-alpha only supports URL while stable version (0.2.7) only supports string
+        // the WHATWG URL API is very strict while attrValue might not be a valid URL
+        // new URL should be used, and relateUrl#relate should be wrapped in try...catch after relateurl@1 is stable
+        node.attrs[attrName] = relateUrlInstance.relate(attrValue);
+        continue;
+      }
+
+      if (isSrcsetAttribute(node.tag, attrNameLower)) {
+        try {
+          const parsedSrcset = _srcset.default.parse(attrValue);
+
+          node.attrs[attrName] = _srcset.default.stringify(parsedSrcset.map(srcset => {
+            srcset.url = relateUrlInstance.relate(srcset.url);
+            return srcset;
+          }));
+        } catch (e) {// srcset will throw an Error for invalid srcset.
+        }
+
+        continue;
+      }
+    }
+
+    return node;
+  });
+  return tree;
+}

package/lib/modules/removeAttributeQuotes.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = removeAttributeQuotes;
+
+// Specification: https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
+// See also: https://github.com/posthtml/posthtml-render/pull/30
+// See also: https://github.com/posthtml/htmlnano/issues/6#issuecomment-707105334
+
+/** Disable quoteAllAttributes while not overriding the configuration */
+function removeAttributeQuotes(tree) {
+  if (tree.options && typeof tree.options.quoteAllAttributes === 'undefined') {
+    tree.options.quoteAllAttributes = false;
+  }
+
+  return tree;
+}

package/lib/modules/removeComments.js

@@ -1,54 +1,72 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 exports.default = removeComments;
 
-var _helpers = require('../helpers');
+var _helpers = require("../helpers");
 
+const MATCH_EXCERPT_REGEXP = /<!-- ?more ?-->/i;
 /** Removes HTML comments */
-function removeComments(tree, options, removeType) {
-    if (removeType !== 'all' && removeType !== 'safe') {
-        removeType = 'safe';
-    }
 
-    tree.walk(function (node) {
-        if (node.contents && node.contents.length) {
-            node.contents = node.contents.filter(function (content) {
-                return !isCommentToRemove(content, removeType);
-            });
-        } else if (isCommentToRemove(node, removeType)) {
-            node = '';
-        }
+function removeComments(tree, options, removeType) {
+  if (removeType !== 'all' && removeType !== 'safe') {
+    removeType = 'safe';
+  }
 
-        return node;
-    });
+  tree.walk(node => {
+    if (node.contents && node.contents.length) {
+      node.contents = node.contents.filter(content => !isCommentToRemove(content, removeType));
+    } else if (isCommentToRemove(node, removeType)) {
+      node = '';
+    }
 
-    return tree;
+    return node;
+  });
+  return tree;
 }
 
 function isCommentToRemove(text, removeType) {
-    if (typeof text !== 'string') {
-        return false;
-    }
+  if (typeof text !== 'string') {
+    return false;
+  }
 
-    if (!(0, _helpers.isComment)(text)) {
-        // Not HTML comment
-        return false;
-    }
+  if (!(0, _helpers.isComment)(text)) {
+    // Not HTML comment
+    return false;
+  }
+
+  if (removeType === 'safe') {
+    const isNoindex = text === '<!--noindex-->' || text === '<!--/noindex-->'; // Don't remove noindex comments.
+    // See: https://yandex.com/support/webmaster/controlling-robot/html.xml
 
-    var isNoindex = text === '<!--noindex-->' || text === '<!--/noindex-->';
-    if (removeType === 'safe' && isNoindex) {
-        // Don't remove noindex comments.
-        // See: https://yandex.com/support/webmaster/controlling-robot/html.xml
-        return false;
+    if (isNoindex) {
+      return false;
     }
 
-    // https://en.wikipedia.org/wiki/Conditional_comment
-    if (removeType === 'safe' && (0, _helpers.isConditionalComment)(text)) {
-        return false;
+    const isServerSideExclude = text === '<!--sse-->' || text === '<!--/sse-->'; // Don't remove sse comments.
+    // See: https://support.cloudflare.com/hc/en-us/articles/200170036-What-does-Server-Side-Excludes-SSE-do-
+
+    if (isServerSideExclude) {
+      return false;
+    } // https://en.wikipedia.org/wiki/Conditional_comment
+
+
+    if ((0, _helpers.isConditionalComment)(text)) {
+      return false;
+    } // Hexo: https://hexo.io/docs/tag-plugins#Post-Excerpt
+    // Hugo: https://gohugo.io/content-management/summaries/#manual-summary-splitting
+    // WordPress: https://wordpress.com/support/wordpress-editor/blocks/more-block/2/
+    // Jekyll: https://jekyllrb.com/docs/posts/#post-excerpts
+
+
+    const isCMSExcerptComment = MATCH_EXCERPT_REGEXP.test(text);
+
+    if (isCMSExcerptComment) {
+      return false;
     }
+  }
 
-    return true;
+  return true;
 }