htmlnano 1.0.0 → 2.0.0

package/docs/versioned_docs/version-2.0.0/060-contribute.md

@@ -0,0 +1,16 @@
+# Contribute
+
+Since the minifier is modular, it's very easy to add new modules:
+
+1. Create a ES6-file inside `lib/modules/` with a function that does some minification. For example you can check [`lib/modules/example.es6`](https://github.com/posthtml/htmlnano/blob/master/lib/modules/example.es6).
+
+2. Add the module's name into one of those [presets](https://github.com/posthtml/htmlnano/tree/master/lib/presets). You can choose either `ampSafe`, `max`, or `safe`.
+
+3. Create a JS-file inside `test/modules/` with some unit-tests.
+
+4. Describe your module in the section "[Modules](https://github.com/posthtml/htmlnano/blob/master/README.md#modules)".
+
+5. Send me a pull request.
+
+Other types of contribution (bug fixes, documentation improves, etc) are also welcome!
+Would like to contribute, but don't have any ideas what to do? Check out [our issues](https://github.com/posthtml/htmlnano/labels/help%20wanted).

package/docs/versioned_sidebars/version-1.1.1-sidebars.json

@@ -0,0 +1,8 @@
+{
+  "version-1.1.1/tutorialSidebar": [
+    {
+      "type": "autogenerated",
+      "dirName": "."
+    }
+  ]
+}

package/docs/versioned_sidebars/version-2.0.0-sidebars.json

@@ -0,0 +1,8 @@
+{
+  "version-2.0.0/tutorialSidebar": [
+    {
+      "type": "autogenerated",
+      "dirName": "."
+    }
+  ]
+}

package/docs/versions.json

@@ -0,0 +1,4 @@
+[
+  "2.0.0",
+  "1.1.1"
+]

package/lib/helpers.js

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.extractCssFromStyleNode = extractCssFromStyleNode;
 exports.isAmpBoilerplate = isAmpBoilerplate;
 exports.isComment = isComment;
 exports.isConditionalComment = isConditionalComment;
+exports.isEventHandler = isEventHandler;
 exports.isStyleNode = isStyleNode;
-exports.extractCssFromStyleNode = extractCssFromStyleNode;
+exports.optionalRequire = optionalRequire;
 const ampBoilerplateAttributes = ['amp-boilerplate', 'amp4ads-boilerplate', 'amp4email-boilerplate'];
 
 function isAmpBoilerplate(node) {
@@ -38,4 +40,20 @@ function isStyleNode(node) {
 
 function extractCssFromStyleNode(node) {
   return Array.isArray(node.content) ? node.content.join(' ') : node.content;
+}
+
+function isEventHandler(attributeName) {
+  return attributeName && attributeName.slice && attributeName.slice(0, 2).toLowerCase() === 'on' && attributeName.length >= 5;
+}
+
+function optionalRequire(moduleName) {
+  try {
+    return require(moduleName);
+  } catch (e) {
+    if (e.code === 'MODULE_NOT_FOUND') {
+      return null;
+    }
+
+    throw e;
+  }
 }

package/lib/htmlnano.js

@@ -4,18 +4,66 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+exports.loadConfig = loadConfig;
 
 var _posthtml = _interopRequireDefault(require("posthtml"));
 
+var _cosmiconfig = require("cosmiconfig");
+
 var _safe = _interopRequireDefault(require("./presets/safe"));
 
 var _ampSafe = _interopRequireDefault(require("./presets/ampSafe"));
 
 var _max = _interopRequireDefault(require("./presets/max"));
 
+var _package = _interopRequireDefault(require("../package.json"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function htmlnano(options = {}, preset = _safe.default) {
+const presets = {
+  safe: _safe.default,
+  ampSafe: _ampSafe.default,
+  max: _max.default
+};
+
+function loadConfig(options, preset, configPath) {
+  var _options;
+
+  if (!((_options = options) !== null && _options !== void 0 && _options.skipConfigLoading)) {
+    const explorer = (0, _cosmiconfig.cosmiconfigSync)(_package.default.name);
+    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) {
+        options = rc.config;
+      }
+    }
+  }
+
+  return [options || {}, preset || _safe.default];
+}
+
+const optionalDependencies = {
+  minifyCss: ['cssnano', 'postcss'],
+  minifyJs: ['terser'],
+  minifyUrl: ['relateurl', 'srcset', 'terser'],
+  minifySvg: ['svgo']
+};
+
+function htmlnano(optionsRun, presetRun) {
+  let [options, preset] = loadConfig(optionsRun, presetRun);
   return function minifier(tree) {
     options = { ...preset,
       ...options
@@ -32,6 +80,18 @@ function htmlnano(options = {}, preset = _safe.default) {
         throw new Error('Module "' + moduleName + '" is not defined');
       }
 
+      (optionalDependencies[moduleName] || []).forEach(dependency => {
+        try {
+          require(dependency);
+        } catch (e) {
+          if (e.code === 'MODULE_NOT_FOUND') {
+            console.warn(`You have to install "${dependency}" in order to use htmlnano's "${moduleName}" module`);
+          } else {
+            throw e;
+          }
+        }
+      });
+
       let module = require('./modules/' + moduleName);
 
       promise = promise.then(tree => module.default(tree, options, moduleOptions));
@@ -41,14 +101,15 @@ function htmlnano(options = {}, preset = _safe.default) {
   };
 }
 
+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 (0, _posthtml.default)([htmlnano(options, preset)]).process(html, postHtmlOptions);
 };
 
-htmlnano.presets = {
-  safe: _safe.default,
-  ampSafe: _ampSafe.default,
-  max: _max.default
-};
+htmlnano.presets = presets;
 var _default = htmlnano;
 exports.default = _default;

package/lib/modules/collapseAttributeWhitespace.js

@@ -3,12 +3,60 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = collapseAttributeWhitespace;
 exports.attributesWithLists = void 0;
-const attributesWithLists = new Set(['class', 'rel', 'ping']);
-/** Collapse whitespaces inside list-like attributes (e.g. class, rel) */
+exports.default = collapseAttributeWhitespace;
+
+var _helpers = require("../helpers");
+
+const attributesWithLists = new Set(['class', 'dropzone', 'rel', // a, area, link
+'ping', // a, area
+'sandbox', // iframe
+'sizes', // link
+'headers' // td, th
+]);
+/** @type Record<string, string[] | null> */
 
 exports.attributesWithLists = attributesWithLists;
+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) */
 
 function collapseAttributeWhitespace(tree) {
   tree.walk(node => {
@@ -19,14 +67,22 @@ function collapseAttributeWhitespace(tree) {
     Object.entries(node.attrs).forEach(([attrName, attrValue]) => {
       const attrNameLower = attrName.toLowerCase();
 
-      if (!attributesWithLists.has(attrNameLower)) {
-        return;
+      if (attributesWithLists.has(attrNameLower)) {
+        const newAttrValue = attrValue.replace(/\s+/g, ' ').trim();
+        node.attrs[attrName] = newAttrValue;
+        return node;
       }
 
-      const newAttrValue = attrValue.replace(/\s+/g, ' ').trim();
-      node.attrs[attrName] = newAttrValue;
+      if ((0, _helpers.isEventHandler)(attrNameLower) || Object.hasOwnProperty.call(attributesWithSingleValue, attrNameLower) && (attributesWithSingleValue[attrNameLower] === null || attributesWithSingleValue[attrNameLower].includes(node.tag))) {
+        node.attrs[attrName] = minifySingleAttributeValue(attrValue);
+        return node;
+      }
     });
     return node;
   });
   return tree;
+}
+
+function minifySingleAttributeValue(value) {
+  return typeof value === 'string' ? String(value).trim() : value;
 }

package/lib/modules/collapseWhitespace.js

@@ -13,34 +13,40 @@ const noTrimWhitespacesArroundElements = new Set([// non-empty tags that will ma
 '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 whitespacePattern = /\s+/g;
+const startsWithWhitespacePattern = /^\s/;
+const endsWithWhitespacePattern = /\s$/;
+const multipleWhitespacePattern = /\s+/g;
 const NONE = '';
 const SINGLE_SPACE = ' ';
 const validOptions = ['all', 'aggressive', 'conservative'];
 /** Collapses redundant whitespaces */
 
-function collapseWhitespace(tree, options, collapseType, tag) {
+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 prevNode = tree[index - 1];
-      const nextNode = tree[index + 1];
-      const prevNodeTag = prevNode && prevNode.tag;
-      const nextNodeTag = nextNode && nextNode.tag;
-      const isTopLevel = !tag || tag === 'html' || tag === 'head';
+      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' && !noTrimWhitespacesInsideElements.has(tag);
-      node = collapseRedundantWhitespaces(node, collapseType, shouldTrim, tag, prevNodeTag, nextNodeTag);
+      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.tag);
+      node.content = collapseWhitespace(node.content, options, collapseType, {
+        node,
+        prevNode,
+        nextNode
+      });
     }
 
     tree[index] = node;
@@ -48,23 +54,42 @@ function collapseWhitespace(tree, options, collapseType, tag) {
   return tree;
 }
 
-function collapseRedundantWhitespaces(text, collapseType, shouldTrim = false, currentTag, prevNodeTag, nextNodeTag) {
+function collapseRedundantWhitespaces(text, collapseType, shouldTrim = false, parent, prevNode, nextNode) {
   if (!text || text.length === 0) {
     return NONE;
   }
 
   if (!(0, _helpers.isComment)(text)) {
-    text = text.replace(whitespacePattern, SINGLE_SPACE);
+    text = text.replace(multipleWhitespacePattern, SINGLE_SPACE);
   }
 
   if (shouldTrim) {
     if (collapseType === 'aggressive') {
-      if (!noTrimWhitespacesArroundElements.has(prevNodeTag)) {
-        text = text.trimStart();
-      }
+      if (!noTrimWhitespacesInsideElements.has(parent && parent.node && parent.node.tag)) {
+        if (!noTrimWhitespacesArroundElements.has(prevNode && 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 (!noTrimWhitespacesArroundElements.has(nextNodeTag)) {
-        text = text.trimEnd();
+        if (!noTrimWhitespacesArroundElements.has(nextNode && 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

package/lib/modules/minifyCss.js

@@ -7,12 +7,8 @@ exports.default = minifyCss;
 
 var _helpers = require("../helpers");
 
-var _postcss = _interopRequireDefault(require("postcss"));
-
-var _cssnano = _interopRequireDefault(require("cssnano"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+const cssnano = (0, _helpers.optionalRequire)('cssnano');
+const postcss = (0, _helpers.optionalRequire)('postcss');
 const postcssOptions = {
   // Prevent the following warning from being shown:
   // > Without `from` option PostCSS could generate wrong source map and will not find Browserslist config.
@@ -22,6 +18,10 @@ const postcssOptions = {
 /** Minify CSS with cssnano */
 
 function minifyCss(tree, options, cssnanoOptions) {
+  if (!cssnano || !postcss) {
+    return tree;
+  }
+
   let promises = [];
   tree.walk(node => {
     if ((0, _helpers.isStyleNode)(node)) {
@@ -46,7 +46,7 @@ function processStyleNode(styleNode, cssnanoOptions) {
     css = strippedCss;
   }
 
-  return (0, _postcss.default)([(0, _cssnano.default)(cssnanoOptions)]).process(css, postcssOptions).then(result => {
+  return postcss([cssnano(cssnanoOptions)]).process(css, postcssOptions).then(result => {
     if (isCdataWrapped) {
       return styleNode.content = ['<![CDATA[' + result + ']]>'];
     }
@@ -61,7 +61,7 @@ function processStyleAttr(node, cssnanoOptions) {
   const wrapperStart = 'a{';
   const wrapperEnd = '}';
   const wrappedStyle = wrapperStart + (node.attrs.style || '') + wrapperEnd;
-  return (0, _postcss.default)([(0, _cssnano.default)(cssnanoOptions)]).process(wrappedStyle, postcssOptions).then(result => {
+  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);

package/lib/modules/minifyJs.js

@@ -5,14 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = minifyJs;
 
-var _terser = _interopRequireDefault(require("terser"));
+var _helpers = require("../helpers");
 
 var _removeRedundantAttributes = require("./removeRedundantAttributes");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+const terser = (0, _helpers.optionalRequire)('terser');
 /** Minify JS with Terser */
+
 function minifyJs(tree, options, terserOptions) {
+  if (!terser) return tree;
   let promises = [];
   tree.walk(node => {
     if (node.tag && node.tag === 'script') {
@@ -60,7 +61,7 @@ function processScriptNode(scriptNode, terserOptions) {
     js = strippedJs;
   }
 
-  return _terser.default.minify(js, terserOptions).then(result => {
+  return terser.minify(js, terserOptions).then(result => {
     if (result.error) {
       throw new Error(result.error);
     }
@@ -80,12 +81,12 @@ function processScriptNode(scriptNode, terserOptions) {
 }
 
 function processNodeWithOnAttrs(node, terserOptions) {
-  const jsWrapperStart = 'function _(){';
-  const jsWrapperEnd = '}';
+  const jsWrapperStart = 'function a(){';
+  const jsWrapperEnd = '}a();';
   const promises = [];
 
   for (const attrName of Object.keys(node.attrs || {})) {
-    if (!attrName.startsWith('on')) {
+    if (!(0, _helpers.isEventHandler)(attrName)) {
       continue;
     } // For example onclick="return false" is valid,
     // but "return false;" is invalid (error: 'return' outside of function)
@@ -94,14 +95,12 @@ function processNodeWithOnAttrs(node, terserOptions) {
 
 
     let wrappedJs = jsWrapperStart + node.attrs[attrName] + jsWrapperEnd;
-
-    let promise = _terser.default.minify(wrappedJs, terserOptions).then(({
+    let promise = terser.minify(wrappedJs, terserOptions).then(({
       code
     }) => {
       let minifiedJs = code.substring(jsWrapperStart.length, code.length - jsWrapperEnd.length);
       node.attrs[attrName] = minifiedJs;
     });
-
     promises.push(promise);
   }
 

package/lib/modules/minifySvg.js

@@ -5,10 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = minifySvg;
 
-var _svgo = require("svgo");
+var _helpers = require("../helpers");
 
+const svgo = (0, _helpers.optionalRequire)('svgo');
 /** Minify SVG with SVGO */
+
 function minifySvg(tree, options, svgoOptions = {}) {
+  if (!svgo) return tree;
   tree.match({
     tag: 'svg'
   }, node => {
@@ -16,7 +19,7 @@ function minifySvg(tree, options, svgoOptions = {}) {
       closingSingleTag: 'slash',
       quoteAllAttributes: true
     });
-    const result = (0, _svgo.optimize)(svgStr, svgoOptions);
+    const result = svgo.optimize(svgStr, svgoOptions);
     node.tag = false;
     node.attrs = {};
     node.content = result.data;

package/lib/modules/minifyUrls.js

@@ -5,27 +5,28 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = minifyUrls;
 
-var _relateurl = _interopRequireDefault(require("relateurl"));
+var _helpers = require("../helpers");
 
-var _srcset = _interopRequireDefault(require("srcset"));
+const RelateUrl = (0, _helpers.optionalRequire)('relateurl');
+const srcset = (0, _helpers.optionalRequire)('srcset');
+const terser = (0, _helpers.optionalRequire)('terser'); // Adopts from https://github.com/kangax/html-minifier/blob/51ce10f4daedb1de483ffbcccecc41be1c873da2/src/htmlminifier.js#L209-L221
 
-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 tagsHaveUriValuesForAttributes = new Set(['a', 'area', 'link', 'base', 'object', 'blockquote', 'q', 'del', 'ins', 'form', 'input', 'head', 'audio', 'embed', 'iframe', 'img', 'script', 'track', 'video']);
 const tagsHasHrefAttributes = new Set(['a', 'area', 'link', 'base']);
 const attributesOfImgTagHasUriValues = new Set(['src', 'longdesc', 'usemap']);
 const attributesOfObjectTagHasUriValues = new Set(['classid', 'codebase', 'data', 'usemap']);
+const tagsHasCiteAttributes = new Set(['blockquote', 'q', 'ins', 'del']);
+const tagsHasSrcAttributes = new Set(['audio', 'embed', 'iframe', 'img', 'input', 'script', 'track', 'video',
+/**
+ * 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.
+ */
+'source']);
 
 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';
+  return tagsHasHrefAttributes.has(tag) && attr === 'href' || tag === 'img' && attributesOfImgTagHasUriValues.has(attr) || tag === 'object' && attributesOfObjectTagHasUriValues.has(attr) || tagsHasCiteAttributes.has(tag) && attr === 'cite' || tag === 'form' && attr === 'action' || tag === 'input' && attr === 'usemap' || tag === 'head' && attr === 'profile' || tag === 'script' && attr === 'for' || tagsHasSrcAttributes.has(tag) && attr === 'src';
 };
 
 const isSrcsetAttribute = (tag, attr) => {
@@ -55,11 +56,13 @@ const isLinkRelCanonical = ({
   return false;
 };
 
+const JAVASCRIPT_URL_PROTOCOL = 'javascript:';
 let relateUrlInstance;
 let STORED_URL_BASE;
 /** Convert absolute url into relative url */
 
 function minifyUrls(tree, options, moduleOptions) {
+  let promises = [];
   const urlBase = processModuleOptions(moduleOptions); // Invalid configuration, return tree directly
 
   if (!urlBase) return tree;
@@ -71,7 +74,10 @@ function minifyUrls(tree, options, moduleOptions) {
    */
 
   if (!relateUrlInstance || STORED_URL_BASE !== urlBase) {
-    relateUrlInstance = new _relateurl.default(urlBase);
+    if (RelateUrl) {
+      relateUrlInstance = new RelateUrl(urlBase);
+    }
+
     STORED_URL_BASE = urlBase;
   }
 
@@ -87,23 +93,34 @@ function minifyUrls(tree, options, moduleOptions) {
       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);
+        if (isJavaScriptUrl(attrValue)) {
+          promises.push(minifyJavaScriptUrl(node, attrName));
+        } else {
+          if (relateUrlInstance) {
+            // 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.
+        if (srcset) {
+          try {
+            const parsedSrcset = srcset.parse(attrValue);
+            node.attrs[attrName] = srcset.stringify(parsedSrcset.map(srcset => {
+              if (relateUrlInstance) {
+                srcset.url = relateUrlInstance.relate(srcset.url);
+              }
+
+              return srcset;
+            }));
+          } catch (e) {// srcset will throw an Error for invalid srcset.
+          }
         }
 
         continue;
@@ -112,5 +129,30 @@ function minifyUrls(tree, options, moduleOptions) {
 
     return node;
   });
-  return tree;
+  if (promises.length > 0) return Promise.all(promises).then(() => tree);
+  return Promise.resolve(tree);
+}
+
+function isJavaScriptUrl(url) {
+  return typeof url === 'string' && url.toLowerCase().startsWith(JAVASCRIPT_URL_PROTOCOL);
+}
+
+function minifyJavaScriptUrl(node, attrName) {
+  if (!terser) return Promise.resolve();
+  const jsWrapperStart = 'function a(){';
+  const jsWrapperEnd = '}a();';
+  let result = node.attrs[attrName];
+
+  if (result) {
+    result = result.slice(JAVASCRIPT_URL_PROTOCOL.length);
+    return terser.minify(result, {}) // Default Option is good enough
+    .then(({
+      code
+    }) => {
+      const minifiedJs = code.substring(jsWrapperStart.length, code.length - jsWrapperEnd.length);
+      node.attrs[attrName] = minifiedJs;
+    });
+  }
+
+  return Promise.resolve();
 }