htmlnano 0.2.4 → 0.2.8

package/lib/modules/mergeStyles.js

@@ -1,41 +1,42 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 exports.default = mergeStyles;
 
-var _helpers = require('../helpers');
+var _helpers = require("../helpers");
 
 /* Merge multiple <style> into one */
 function mergeStyles(tree) {
-    var styleNodes = {};
-
-    tree.match({ tag: 'style' }, function (node) {
-        var nodeAttrs = node.attrs || {};
-        // Skip <style scoped></style>
-        // https://developer.mozilla.org/en/docs/Web/HTML/Element/style
-        if (nodeAttrs.scoped !== undefined) {
-            return node;
-        }
-
-        if ((0, _helpers.isAmpBoilerplate)(node)) {
-            return node;
-        }
-
-        var styleType = nodeAttrs.type || 'text/css';
-        var styleMedia = nodeAttrs.media || 'all';
-        var styleKey = styleType + '_' + styleMedia;
-        if (styleNodes[styleKey]) {
-            var styleContent = (node.content || []).join(' ');
-            styleNodes[styleKey].content.push(' ' + styleContent);
-            return '';
-        }
-
-        node.content = node.content || [];
-        styleNodes[styleKey] = node;
-        return node;
-    });
-
-    return 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
+
+    if (nodeAttrs.scoped !== undefined) {
+      return node;
+    }
+
+    if ((0, _helpers.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

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = minifyConditionalComments;
+
+var _htmlnano = _interopRequireDefault(require("../htmlnano"));
+
+var _helpers = require("../helpers");
+
+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;
+/** Minify content inside conditional comments */
+
+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' && (0, _helpers.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.default.process(match[1], htmlnanoOptions, {}, {});
+    return match[0] + result.html + match[2];
+  }));
+}

package/lib/modules/minifyCss.js

@@ -1,60 +1,52 @@
-'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];
-    });
+  const css = (0, _helpers.extractCssFromStyleNode)(styleNode);
+  return _cssnano.default.process(css, postcssOptions, cssnanoOptions).then(result => 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);
+  });
 }

package/lib/modules/minifyJs.js

@@ -1,94 +1,98 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 exports.default = minifyJs;
 
-var _terser = require('terser');
-
-var _terser2 = _interopRequireDefault(_terser);
+var _terser = _interopRequireDefault(require("terser"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /** Minify JS with Terser */
 function minifyJs(tree, options, terserOptions) {
+  tree.match({
+    tag: 'script'
+  }, node => {
+    const nodeAttrs = node.attrs || {};
+    const mimeType = nodeAttrs.type || 'text/javascript';
+
+    if (mimeType === 'text/javascript' || mimeType === 'application/javascript') {
+      return 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);
-        }
+    return node;
+  });
+  tree.match({
+    attrs: true
+  }, node => {
+    return processNodeWithOnAttrs(node, terserOptions);
+  });
+  return tree;
+}
 
-        return node;
-    });
+function stripCdata(js) {
+  const leftStrippedJs = js.replace(/\/\/\s*<!\[CDATA\[/, '');
 
-    tree.match({ attrs: true }, function (node) {
-        return processNodeWithOnAttrs(node, terserOptions);
-    });
+  if (leftStrippedJs === js) {
+    return js;
+  }
 
-    return tree;
+  const strippedJs = leftStrippedJs.replace(/\/\/\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();
 
-    var result = _terser2.default.minify(js, terserOptions);
-    if (result.error) {
-        throw new Error(result.error);
-    }
-    if (result.code === undefined) {
-        return scriptNode;
-    }
+  if (!js) {
+    return scriptNode;
+  }
+
+  const strippedJs = stripCdata(js);
+  const isCdataWrapped = js !== strippedJs;
+  js = strippedJs;
+
+  const result = _terser.default.minify(js, terserOptions);
 
-    scriptNode.content = [result.code];
+  if (result.error) {
+    throw new Error(result.error);
+  }
 
+  if (result.code === undefined) {
     return scriptNode;
+  }
+
+  let content = result.code;
+
+  if (isCdataWrapped) {
+    content = '//<![CDATA[' + content + '//]]>';
+  }
+
+  scriptNode.content = [content];
+  return scriptNode;
 }
 
 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 = '}';
 
-    return node;
+  for (const attrName of Object.keys(node.attrs || {})) {
+    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;}"
+
+
+    let wrappedJs = jsWrapperStart + node.attrs[attrName] + jsWrapperEnd;
+
+    let wrappedMinifiedJs = _terser.default.minify(wrappedJs, terserOptions).code;
+
+    let minifiedJs = wrappedMinifiedJs.substring(jsWrapperStart.length, wrappedMinifiedJs.length - jsWrapperEnd.length);
+    node.attrs[attrName] = minifiedJs;
+  }
+
+  return node;
 }

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,31 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 exports.default = minifySvg;
 
-var _svgo = require('svgo');
+var _svgo = _interopRequireDefault(require("svgo"));
 
-var _svgo2 = _interopRequireDefault(_svgo);
-
-var _posthtmlRender = require('posthtml-render');
-
-var _posthtmlRender2 = _interopRequireDefault(_posthtmlRender);
+var _posthtmlRender = _interopRequireDefault(require("posthtml-render"));
 
 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;
-    });
-
-    return Promise.all(promises).then(function () {
-        return tree;
+function minifySvg(tree, options, svgoOptions = {}) {
+  let promises = [];
+  let svgo = new _svgo.default(svgoOptions);
+  tree.match({
+    tag: 'svg'
+  }, node => {
+    let svgStr = (0, _posthtmlRender.default)(node);
+    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,117 @@
+"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 REGEXP_TAGS_HAVE_URI_VSLUES_FOR_ATTRIBUTES = new RegExp('^(' + [...tagsHaveUriValuesForAttributes].join('|') + ')$');
+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.match({
+    tag: REGEXP_TAGS_HAVE_URI_VSLUES_FOR_ATTRIBUTES
+  }, node => {
+    if (!node.attrs) 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;
+}