htmlnano 1.1.1 → 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-2.0.0-sidebars.json

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

package/docs/versions.json

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

package/lib/helpers.js

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.extractCssFromStyleNode = extractCssFromStyleNode;
 exports.isAmpBoilerplate = isAmpBoilerplate;
 exports.isComment = isComment;
 exports.isConditionalComment = isConditionalComment;
-exports.isStyleNode = isStyleNode;
-exports.extractCssFromStyleNode = extractCssFromStyleNode;
 exports.isEventHandler = isEventHandler;
+exports.isStyleNode = isStyleNode;
+exports.optionalRequire = optionalRequire;
 const ampBoilerplateAttributes = ['amp-boilerplate', 'amp4ads-boilerplate', 'amp4email-boilerplate'];
 
 function isAmpBoilerplate(node) {
@@ -43,4 +44,16 @@ function extractCssFromStyleNode(node) {
 
 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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.loadConfig = loadConfig;
 exports.default = void 0;
+exports.loadConfig = loadConfig;
 
 var _posthtml = _interopRequireDefault(require("posthtml"));
 
@@ -55,6 +55,13 @@ function loadConfig(options, preset, configPath) {
   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) {
@@ -73,6 +80,18 @@ function htmlnano(optionsRun, presetRun) {
         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));
@@ -82,6 +101,11 @@ function htmlnano(optionsRun, presetRun) {
   };
 }
 
+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);
 };

package/lib/modules/collapseAttributeWhitespace.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = collapseAttributeWhitespace;
 exports.attributesWithLists = void 0;
+exports.default = collapseAttributeWhitespace;
 
 var _helpers = require("../helpers");
 

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,16 +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') {
@@ -62,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);
     }
@@ -96,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,15 +5,12 @@ 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
 
-var _terser = _interopRequireDefault(require("terser"));
-
-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', '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']);
@@ -77,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;
   }
 
@@ -96,25 +96,31 @@ function minifyUrls(tree, options, moduleOptions) {
         if (isJavaScriptUrl(attrValue)) {
           promises.push(minifyJavaScriptUrl(node, attrName));
         } else {
-          // 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 (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;
@@ -132,13 +138,14 @@ function isJavaScriptUrl(url) {
 }
 
 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.default.minify(result, {}) // Default Option is good enough
+    return terser.minify(result, {}) // Default Option is good enough
     .then(({
       code
     }) => {

package/lib/modules/removeEmptyAttributes.js

@@ -63,7 +63,8 @@ function removeEmptyAttributes(tree) {
     Object.entries(node.attrs).forEach(([attrName, attrValue]) => {
       const attrNameLower = attrName.toLowerCase();
 
-      if (attrNameLower.slice(0, 2).toLowerCase() === 'on' && attrName.length >= 5 || Object.hasOwnProperty.call(safeToRemoveAttrs, attrNameLower) && (safeToRemoveAttrs[attrNameLower] === null || safeToRemoveAttrs[attrNameLower].includes(node.tag))) {
+      if (attrNameLower.slice(0, 2).toLowerCase() === 'on' && attrName.length >= 5 // Event Handler
+      || Object.hasOwnProperty.call(safeToRemoveAttrs, attrNameLower) && (safeToRemoveAttrs[attrNameLower] === null || safeToRemoveAttrs[attrNameLower].includes(node.tag))) {
         if (attrValue === '' || (attrValue || '').match(/^\s+$/)) {
           delete node.attrs[attrName];
         }

package/lib/modules/removeUnusedCss.js

@@ -7,13 +7,9 @@ exports.default = removeUnusedCss;
 
 var _helpers = require("../helpers");
 
-var _uncss = _interopRequireDefault(require("uncss"));
+const uncss = (0, _helpers.optionalRequire)('uncss');
+const purgecss = (0, _helpers.optionalRequire)('purgecss'); // These options must be set and shouldn't be overriden to ensure uncss doesn't look at linked stylesheets.
 
-var _purgecss = _interopRequireDefault(require("purgecss"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-// These options must be set and shouldn't be overriden to ensure uncss doesn't look at linked stylesheets.
 const uncssOptions = {
   ignoreSheets: [/\s*/],
   stylesheets: []
@@ -43,7 +39,7 @@ function runUncss(html, css, userOptions) {
   };
   return new Promise((resolve, reject) => {
     options.raw = css;
-    (0, _uncss.default)(html, options, (error, output) => {
+    uncss(html, options, (error, output) => {
       if (error) {
         reject(error);
         return;
@@ -100,7 +96,7 @@ function runPurgecss(tree, css, userOptions) {
       extensions: ['html']
     }]
   };
-  return new _purgecss.default().purge(options).then(result => {
+  return new purgecss.PurgeCSS().purge(options).then(result => {
     return result[0].css;
   });
 }
@@ -113,9 +109,13 @@ function removeUnusedCss(tree, options, userOptions) {
   tree.walk(node => {
     if ((0, _helpers.isStyleNode)(node)) {
       if (userOptions.tool === 'purgeCSS') {
-        promises.push(processStyleNodePurgeCSS(tree, node, userOptions));
+        if (purgecss) {
+          promises.push(processStyleNodePurgeCSS(tree, node, userOptions));
+        }
       } else {
-        promises.push(processStyleNodeUnCSS(html, node, userOptions));
+        if (uncss) {
+          promises.push(processStyleNodeUnCSS(html, node, userOptions));
+        }
       }
     }
 

package/lib/presets/max.js

@@ -22,6 +22,8 @@ var _default = { ..._safe.default,
   removeComments: 'all',
   removeAttributeQuotes: true,
   removeRedundantAttributes: true,
+  mergeScripts: true,
+  mergeStyles: true,
   removeUnusedCss: {},
   minifyCss: {
     preset: 'default'

package/lib/presets/safe.js

@@ -17,8 +17,8 @@ var _default = {
   collapseWhitespace: 'conservative',
   custom: [],
   deduplicateAttributeValues: true,
-  mergeScripts: true,
-  mergeStyles: true,
+  mergeScripts: false,
+  mergeStyles: false,
   removeUnusedCss: false,
   minifyCss: {
     preset: 'default'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "htmlnano",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "description": "Modular HTML minifier, built on top of the PostHTML",
   "main": "index.js",
   "author": "Kirill Maltsev <maltsevkirill@gmail.com>",
@@ -40,16 +40,8 @@
   },
   "dependencies": {
     "cosmiconfig": "^7.0.1",
-    "cssnano": "^5.0.8",
-    "postcss": "^8.3.6",
     "posthtml": "^0.16.5",
-    "purgecss": "^4.0.0",
-    "relateurl": "^0.2.7",
-    "srcset": "^4.0.0",
-    "svgo": "^2.6.1",
-    "terser": "^5.8.0",
-    "timsort": "^0.3.0",
-    "uncss": "^0.17.3"
+    "timsort": "^0.3.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.15.7",
@@ -57,11 +49,55 @@
     "@babel/preset-env": "^7.15.6",
     "@babel/register": "^7.15.3",
     "babel-eslint": "^10.1.0",
+    "cssnano": "^5.0.11",
     "eslint": "^7.32.0",
     "expect": "^27.2.0",
     "mocha": "^9.1.0",
+    "postcss": "^8.3.11",
+    "purgecss": "^4.0.3",
+    "relateurl": "^0.2.7",
     "release-it": "^14.11.5",
-    "rimraf": "^3.0.2"
+    "rimraf": "^3.0.2",
+    "srcset": "^5.0.0",
+    "svgo": "^2.8.0",
+    "terser": "^5.10.0",
+    "uncss": "^0.17.3"
+  },
+  "peerDependencies": {
+    "cssnano": "^5.0.11",
+    "postcss": "^8.3.11",
+    "purgecss": "^4.0.3",
+    "relateurl": "^0.2.7",
+    "srcset": "^5.0.0",
+    "svgo": "^2.8.0",
+    "terser": "^5.10.0",
+    "uncss": "^0.17.3"
+  },
+  "peerDependenciesMeta": {
+    "cssnano": {
+      "optional": true
+    },
+    "postcss": {
+      "optional": true
+    },
+    "purgecss": {
+      "optional": true
+    },
+    "relateurl": {
+      "optional": true
+    },
+    "srcset": {
+      "optional": true
+    },
+    "svgo": {
+      "optional": true
+    },
+    "terser": {
+      "optional": true
+    },
+    "uncss": {
+      "optional": true
+    }
   },
   "repository": {
     "type": "git",

package/uncss-fork.patch

@@ -1,13 +0,0 @@
-diff --git a/package.json b/package.json
-index a127c0f..66455bb 100644
---- a/package.json
-+++ b/package.json
-@@ -49,7 +49,7 @@
-     "svgo": "^2.4.0",
-     "terser": "^5.7.0",
-     "timsort": "^0.3.0",
--    "uncss": "^0.17.3"
-+    "@novaatwarren/uncss": "^0.17.4"
-   },
-   "devDependencies": {
-     "@babel/cli": "^7.14.3",