htmlnano 0.2.0 → 0.2.4

package/.eslintignore

@@ -1 +1,2 @@
 lib/modules/example.es6
+test.js

package/CHANGELOG.md

@@ -3,6 +3,30 @@ All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
 
+## [0.2.4] - 2019-07-11
+## Fixed
+- Remove crossorigin from boolean attribute [#78], [#79].
+- Disable SVGO plugin convertShapeToPath in safe preset [#76].
+
+
+## [0.2.3] - 2019-02-14
+## Fixed
+- Keep `<g>` in SVG by default [#71].
+
+
+## [0.2.2] - 2019-01-03
+## Added
+- `removeUnusedCss` module [#36].
+
+## Fixed
+- Bug when `tag === false` [#66].
+- Add `crossorigin` to boolean attributes [#67].
+
+
+## [0.2.1] - 2018-12-01
+## Fixed
+- Disable JS minifying on AMP pages [#65].
+
 ## [0.2.0] - 2018-09-14
 ## Breaking changes
 - The API of `minifyCss` module has been changed since `cssnano` has been updated to version 4, which has a different API. Check the following resources for more info:
@@ -98,6 +122,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 
 
+[0.2.4]: https://github.com/posthtml/htmlnano/compare/0.2.3...0.2.4
+[0.2.3]: https://github.com/posthtml/htmlnano/compare/0.2.2...0.2.3
+[0.2.2]: https://github.com/posthtml/htmlnano/compare/0.2.1...0.2.2
+[0.2.1]: https://github.com/posthtml/htmlnano/compare/0.2.0...0.2.1
 [0.2.0]: https://github.com/posthtml/htmlnano/compare/0.1.10...0.2.0
 [0.1.10]: https://github.com/posthtml/htmlnano/compare/0.1.9...0.1.10
 [0.1.9]: https://github.com/posthtml/htmlnano/compare/0.1.8...0.1.9
@@ -111,6 +139,13 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 [0.1.1]: https://github.com/posthtml/htmlnano/compare/0.1.0...0.1.1
 
 
+[#79]: https://github.com/posthtml/htmlnano/issues/79
+[#78]: https://github.com/posthtml/htmlnano/issues/78
+[#76]: https://github.com/posthtml/htmlnano/issues/76
+[#71]: https://github.com/posthtml/htmlnano/issues/71
+[#67]: https://github.com/posthtml/htmlnano/issues/67
+[#66]: https://github.com/posthtml/htmlnano/issues/66
+[#65]: https://github.com/posthtml/htmlnano/issues/65
 [#64]: https://github.com/posthtml/htmlnano/issues/64
 [#62]: https://github.com/posthtml/htmlnano/issues/62
 [#59]: https://github.com/posthtml/htmlnano/issues/59
@@ -120,6 +155,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 [#47]: https://github.com/posthtml/htmlnano/issues/47
 [#42]: https://github.com/posthtml/htmlnano/issues/42
 [#39]: https://github.com/posthtml/htmlnano/issues/39
+[#36]: https://github.com/posthtml/htmlnano/issues/36
 [#31]: https://github.com/posthtml/htmlnano/issues/31
 [#30]: https://github.com/posthtml/htmlnano/issues/30
 [#28]: https://github.com/posthtml/htmlnano/issues/28

package/README.md

@@ -4,20 +4,20 @@
 
 Modular HTML minifier, built on top of the [PostHTML](https://github.com/posthtml/posthtml). Inspired by [cssnano](http://cssnano.co/).
 
+> The author of htmlnano is available for hire as a full stack web developer:  https://kirillmaltsev.net/services
 
 
 ## [Benchmark](https://github.com/maltsev/html-minifiers-benchmark/blob/master/README.md)
-[html-minifier]: https://www.npmjs.com/package/html-minifier
-[htmlnano]: https://www.npmjs.com/package/htmlnano
+[html-minifier@3.5.20]: https://www.npmjs.com/package/html-minifier
+[htmlnano@0.2.0]: https://www.npmjs.com/package/htmlnano
 
-| Website | Source (KB) | [html-minifier] | [htmlnano] |
+| Website | Source (KB) | [html-minifier@3.5.20] | [htmlnano@0.2.0] |
 |---------|------------:|----------------:|-----------:|
-| [stackoverflow.com](http://stackoverflow.com/) | 250 | 199 | 208 |
-| [github.com](http://github.com/) | 51 | 43 | 45 |
-| [en.wikipedia.org](https://en.wikipedia.org/wiki/Main_Page) | 71 | 64 | 68 |
-| [npmjs.com](https://www.npmjs.com/features) | 26 | 20 | 21 |
-| **Avg. minify rate** | 0% | **18%** | **14%** |
-
+| [stackoverflow.com](http://stackoverflow.com/) | 258 | 205 | 218 |
+| [github.com](http://github.com/) | 63 | 51 | 56 |
+| [en.wikipedia.org](https://en.wikipedia.org/wiki/Main_Page) | 77 | 69 | 74 |
+| [npmjs.com](https://www.npmjs.com/features) | 32 | 29 | 30 |
+| **Avg. minify rate** | 0% | **15%** | **9%** |
 
 
 ## Usage
@@ -272,6 +272,53 @@ Minified:
 <img src="foo.jpg" alt="">
 ```
 
+### removeUnusedCss
+Removes unused CSS with [uncss](https://github.com/uncss/uncss) inside `<style>` tags.
+
+##### Options
+See [the documentation of uncss](https://github.com/uncss/uncss) for all supported options.
+
+uncss options can be passed directly to the `removeUnusedCss` module:
+```js
+htmlnano.process(html, {
+    removeUnusedCss: {
+        ignore: ['.do-not-remove']
+    }
+});
+```
+
+The following uncss options are ignored if passed to the module:
+
+-   `stylesheets`
+-   `ignoreSheets`
+-   `raw`
+
+##### Example
+Source:
+```html
+<div class="b">
+    <style>
+        .a {
+            margin: 10px 10px 10px 10px;
+        }
+        .b {
+            color: #ff0000;
+        }
+    </style>
+</div>
+```
+
+Optimized:
+```html
+<div class="b">
+    <style>
+        .b {
+            color: #ff0000;
+        }
+    </style>
+</div>
+```
+
 
 ### minifyCss
 Minifies CSS with [cssnano](http://cssnano.co/) inside `<style>` tags and `style` attributes.
@@ -315,10 +362,20 @@ Minified:
 
 
 ### minifyJs
-Minifies JS with [Terser](https://github.com/fabiosantoscode/terser) inside `<script>` tags.
+Minifies JS using [Terser](https://github.com/fabiosantoscode/terser) inside `<script>` tags.
 
 ##### Options
-See [the API documentation of Terser](https://github.com/fabiosantoscode/terser#api-reference)
+See [the documentation of Terser](https://github.com/fabiosantoscode/terser#api-reference) for all supported options.
+Terser options can be passed directly to the `minifyJs` module:
+```js
+htmlnano.process(html, {
+    minifyJs: {
+        output: { quote_style: 1 },
+    },
+});
+```
+
+
 
 ##### Example
 Source:
@@ -361,10 +418,20 @@ Minified:
 
 
 ### minifySvg
-Minifies SVG inside `<svg>` tags with [SVGO](https://github.com/svg/svgo/).
+Minifies SVG inside `<svg>` tags using [SVGO](https://github.com/svg/svgo/).
 
 ##### Options
-See [the documentation of SVGO](https://github.com/svg/svgo/blob/master/README.md)
+See [the documentation of SVGO](https://github.com/svg/svgo/blob/master/README.md) for all supported options.
+SVGO options can be passed directly to the `minifySvg` module:
+```js
+htmlnano.process(html, {
+    minifySvg: {
+        plugins: [
+            { collapseGroups: false },
+        ],
+    },
+});
+```
 
 ##### Example
 Source:

package/lib/helpers.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.isAmpBoilerplate = isAmpBoilerplate;
 exports.isComment = isComment;
 exports.isConditionalComment = isConditionalComment;
+exports.isStyleNode = isStyleNode;
+exports.extractCssFromStyleNode = extractCssFromStyleNode;
 var ampBoilerplateAttributes = ['amp-boilerplate', 'amp4ads-boilerplate', 'amp4email-boilerplate'];
 
 function isAmpBoilerplate(node) {
@@ -48,4 +50,12 @@ function isComment(content) {
 
 function isConditionalComment(content) {
     return (content || '').trim().search(/<!--\[if/) === 0;
+}
+
+function isStyleNode(node) {
+    return node.tag === 'style' && !isAmpBoilerplate(node) && 'content' in node && node.content.length > 0;
+}
+
+function extractCssFromStyleNode(node) {
+    return Array.isArray(node.content) ? node.content.join(' ') : node.content;
 }

package/lib/htmlnano.js

@@ -33,31 +33,32 @@ function htmlnano() {
     return function minifier(tree) {
         options = (0, _objectAssign2.default)({}, preset, options);
         var promise = Promise.resolve(tree);
+
+        var _loop = function _loop(moduleName) {
+            if (!options[moduleName]) {
+                // The module is disabled
+                return 'continue';
+            }
+
+            if (_safe2.default[moduleName] === undefined) {
+                throw new Error('Module "' + moduleName + '" is not defined');
+            }
+
+            var module = require('./modules/' + moduleName);
+            promise = promise.then(function (tree) {
+                return module.default(tree, options, options[moduleName]);
+            });
+        };
+
         var _iteratorNormalCompletion = true;
         var _didIteratorError = false;
         var _iteratorError = undefined;
 
         try {
-            var _loop = function _loop() {
+            for (var _iterator = Object.keys(options)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
                 var moduleName = _step.value;
 
-                if (!options[moduleName]) {
-                    // The module is disabled
-                    return 'continue';
-                }
-
-                if (_safe2.default[moduleName] === undefined) {
-                    throw new Error('Module "' + moduleName + '" is not defined');
-                }
-
-                var module = require('./modules/' + moduleName);
-                promise = promise.then(function (tree) {
-                    return module.default(tree, options, options[moduleName]);
-                });
-            };
-
-            for (var _iterator = Object.keys(options)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-                var _ret = _loop();
+                var _ret = _loop(moduleName);
 
                 if (_ret === 'continue') continue;
             }

package/lib/modules/collapseBooleanAttributes.js

@@ -19,6 +19,10 @@ function collapseBooleanAttributes(tree, options, moduleOptions) {
             for (var _iterator = Object.keys(node.attrs)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
                 var attrName = _step.value;
 
+                if (!node.tag) {
+                    continue;
+                }
+
                 if (node.tag.search('a-') === 0 && attrName === 'visible') {
                     continue;
                 }

package/lib/modules/mergeScripts.js

@@ -34,32 +34,32 @@ function mergeScripts(tree) {
         return node;
     });
 
+    var _loop = function _loop(scriptKey) {
+        var scriptNodes = scriptNodesIndex[scriptKey];
+        var lastScriptNode = scriptNodes.pop();
+        scriptNodes.reverse().forEach(function (scriptNode) {
+            var scriptContent = (scriptNode.content || []).join(' ');
+            scriptContent = scriptContent.trim();
+            if (scriptContent.slice(-1) !== ';') {
+                scriptContent += ';';
+            }
+
+            lastScriptNode.content.unshift(scriptContent);
+
+            scriptNode.tag = false;
+            scriptNode.content = [];
+        });
+    };
+
     var _iteratorNormalCompletion = true;
     var _didIteratorError = false;
     var _iteratorError = undefined;
 
     try {
-        var _loop = function _loop() {
+        for (var _iterator = Object.keys(scriptNodesIndex)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
             var scriptKey = _step.value;
 
-            var scriptNodes = scriptNodesIndex[scriptKey];
-            var lastScriptNode = scriptNodes.pop();
-            scriptNodes.reverse().forEach(function (scriptNode) {
-                var scriptContent = (scriptNode.content || []).join(' ');
-                scriptContent = scriptContent.trim();
-                if (scriptContent.slice(-1) !== ';') {
-                    scriptContent += ';';
-                }
-
-                lastScriptNode.content.unshift(scriptContent);
-
-                scriptNode.tag = false;
-                scriptNode.content = [];
-            });
-        };
-
-        for (var _iterator = Object.keys(scriptNodesIndex)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-            _loop();
+            _loop(scriptKey);
         }
     } catch (err) {
         _didIteratorError = true;

package/lib/modules/minifyCss.js

@@ -24,7 +24,7 @@ var postcssOptions = {
 function minifyCss(tree, options, cssnanoOptions) {
     var promises = [];
     tree.walk(function (node) {
-        if (isStyleNode(node)) {
+        if ((0, _helpers.isStyleNode)(node)) {
             promises.push(processStyleNode(node, cssnanoOptions));
         } else if (node.attrs && node.attrs.style) {
             promises.push(processStyleAttr(node, cssnanoOptions));
@@ -38,12 +38,8 @@ function minifyCss(tree, options, cssnanoOptions) {
     });
 }
 
-function isStyleNode(node) {
-    return node.tag === 'style' && !(0, _helpers.isAmpBoilerplate)(node) && node.content && node.content.length;
-}
-
 function processStyleNode(styleNode, cssnanoOptions) {
-    var css = Array.isArray(styleNode.content) ? styleNode.content.join(' ') : styleNode.content;
+    var css = (0, _helpers.extractCssFromStyleNode)(styleNode);
     return _cssnano2.default.process(css, postcssOptions, cssnanoOptions).then(function (result) {
         return styleNode.content = [result.css];
     });

package/lib/modules/removeUnusedCss.js

@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+exports.default = removeUnusedCss;
+
+var _helpers = require('../helpers');
+
+var _uncss = require('uncss');
+
+var _uncss2 = _interopRequireDefault(_uncss);
+
+var _posthtmlRender = require('posthtml-render');
+
+var _posthtmlRender2 = _interopRequireDefault(_posthtmlRender);
+
+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.
+var uncssOptions = {
+    ignoreSheets: [/\s*/],
+    stylesheets: []
+};
+
+/** Remove unused CSS using uncss */
+function removeUnusedCss(tree, options, uncssOptions) {
+    var promises = [];
+    var html = (0, _posthtmlRender2.default)(tree);
+    tree.walk(function (node) {
+        if ((0, _helpers.isStyleNode)(node)) {
+            promises.push(processStyleNode(html, node, uncssOptions));
+        }
+        return node;
+    });
+
+    return Promise.all(promises).then(function () {
+        return tree;
+    });
+}
+
+function processStyleNode(html, styleNode, uncssOptions) {
+    var css = (0, _helpers.extractCssFromStyleNode)(styleNode);
+
+    return runUncss(html, css, uncssOptions).then(function (css) {
+        // uncss may have left some style tags empty
+        if (css.trim().length === 0) {
+            styleNode.tag = false;
+            styleNode.content = [];
+            return;
+        }
+        styleNode.content = [css];
+    });
+}
+
+function runUncss(html, css, userOptions) {
+    if ((typeof userOptions === 'undefined' ? 'undefined' : _typeof(userOptions)) !== 'object') {
+        userOptions = {};
+    }
+
+    var options = Object.assign({}, userOptions, uncssOptions);
+    return new Promise(function (resolve, reject) {
+        options.raw = css;
+        (0, _uncss2.default)(html, options, function (error, output) {
+            if (error) {
+                reject(error);
+                return;
+            }
+            resolve(output);
+        });
+    });
+}

package/lib/presets/ampSafe.js

@@ -22,5 +22,6 @@ function _interopRequireDefault(obj) {
 exports.default = (0, _objectAssign2.default)({}, _safe2.default, {
     collapseBooleanAttributes: {
         amphtml: true
-    }
+    },
+    minifyJs: false
 });

package/lib/presets/max.js

@@ -22,5 +22,10 @@ function _interopRequireDefault(obj) {
 exports.default = (0, _objectAssign2.default)({}, _safe2.default, {
     collapseWhitespace: 'all',
     removeComments: 'all',
-    removeRedundantAttributes: true
+    removeRedundantAttributes: true,
+    removeUnusedCss: {},
+    minifyCss: {
+        preset: 'default'
+    },
+    minifySvg: {}
 });

package/lib/presets/safe.js

@@ -16,12 +16,15 @@ exports.default = {
     deduplicateAttributeValues: true,
     mergeScripts: true,
     mergeStyles: true,
+    removeUnusedCss: false,
     minifyCss: {
         preset: 'default'
     },
     minifyJs: {},
     minifyJson: {},
-    minifySvg: {},
+    minifySvg: {
+        plugins: [{ collapseGroups: false }, { convertShapeToPath: false }]
+    },
     removeEmptyAttributes: true,
     removeRedundantAttributes: false,
     removeComments: 'safe'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "htmlnano",
-  "version": "0.2.0",
+  "version": "0.2.4",
   "description": "Modular HTML minifier, built on top of the PostHTML",
   "main": "index.js",
   "author": "Kirill Maltsev <maltsevkirill@gmail.com>",
@@ -11,7 +11,13 @@
     "pretest": "npm run lint && npm run compile",
     "test": ":",
     "posttest": "mocha --require babel-core/register --recursive --check-leaks --globals addresses",
-    "prepare": "npm run compile"
+    "prepare": "npm run compile",
+    "release:patch": "release-it patch -n"
+  },
+  "release-it": {
+    "hooks": {
+      "before:init": "npm test"
+    }
   },
   "keywords": [
     "posthtml",
@@ -22,27 +28,29 @@
   ],
   "babel": {
     "presets": [
-      "es2015"
+      "env"
     ]
   },
   "dependencies": {
-    "cssnano": "^4.1.0",
-    "normalize-html-whitespace": "^0.2.0",
+    "cssnano": "^4.1.10",
+    "normalize-html-whitespace": "^1.0.0",
     "object-assign": "^4.0.1",
-    "posthtml": "^0.11.3",
-    "posthtml-render": "^1.1.4",
-    "svgo": "^1.0.5",
-    "terser": "^3.8.2"
+    "posthtml": "^0.11.4",
+    "posthtml-render": "^1.1.5",
+    "svgo": "^1.2.2",
+    "terser": "^4.1.2",
+    "uncss": "^0.17.0"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
-    "babel-eslint": "^9.0.0",
-    "babel-preset-es2015": "^6.1.18",
-    "eslint": "^5.5.0",
-    "expect": "^23.6.0",
-    "mocha": "^5.2.0",
-    "rimraf": "^2.6.2"
+    "babel-eslint": "^10.0.2",
+    "babel-preset-env": "^1.7.0",
+    "eslint": "^6.0.1",
+    "expect": "^24.8.0",
+    "mocha": "^6.1.0",
+    "release-it": "^12.3.3",
+    "rimraf": "^2.6.3"
   },
   "repository": {
     "type": "git",

package/test.js

@@ -1,37 +1,15 @@
-var htmlnano = require('./index');
-var options = {
-    // 'collapseBooleanAttributes': false,
-    // 'collapseWhitespace': false,
-    // 'custom': false,
-    // 'example': false,
-    // 'mergeScripts': false,
-    // 'mergeStyles': false,
-    // 'minifyCss': false,
-    // 'minifyJs': false,
-    // 'minifyJson': false,
-    // 'minifySvg': false,
-    // 'removeComments': false,
-    // 'removeEmptyAttributes': false,
-    // 'removeRedundantAttributes': false,
-};
+const htmlnano = require('./index');
+const fs = require('fs');
+const safePreset = require('./lib/presets/safe').default;
 
-var html = `
-<script>const foo = 'A:1';</script>
-<script class="test">foo = 'B:1';</script>
-<script type="text/javascript">foo = 'A:2';</script>
-<script defer>foo = 'C:1';</script>
-<script>foo = 'A:3';</script>
-<script defer="defer">foo = 'C:2';</script>
-<script class="test" type="text/javascript">foo = 'B:2';</script>
-`;
+const options = {};
 
-console.log(require('./index').presets);
+const html = fs.readFileSync('./test.html', 'utf8');
 
 htmlnano
     .process(html, options)
     .then(function (result) {
-        // console.log(result.html);
-        // result.html is minified
+        console.log(result.html);
     })
     .catch(function (err) {
         console.error(err);

package/test.html

@@ -1,14 +0,0 @@
-<html lang="en">
-
-<head>
-    <script src="./app.js"></script>
-</head>
-
-<body>
-    <script>
-        console.log('hello');
-        const p = new Point(10, 10);
-    </script>
-</body>
-
-</html>