htmlnano 0.2.1 → 0.2.5

package/.eslintignore

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

package/CHANGELOG.md

@@ -2,29 +2,56 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.2.5] - 2019-11-09
+### Added
+- Option to remove unused CSS using PurgeCSS [#84].
+
+### Fixed
+- Keep the order of inline and external JS [#80].
+
+
+## [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
+### Fixed
 - Disable JS minifying on AMP pages [#65].
 
 ## [0.2.0] - 2018-09-14
-## Breaking changes
+### 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:
   * [htmlnano docs](https://github.com/posthtml/htmlnano#minifycss)
   * [cssnano docs](https://cssnano.co/guides/presets)
   * Diff of commit [979f2c](https://github.com/posthtml/htmlnano/commit/979f2c821892c9e979e8b85f74ed0394330fceaf) with the changes of related docs.
 
-## Added
+### Added
 - Add presets [#64].
 - Add `collapseAttributeWhitespace` module for collapsing spaces in list-like attributes [#25].
 - Add `deduplicateAttributeValues` module for de-duplicating values in list-like attributes [#39].
 - Better support for AMP pages [#59].
 - Collapse whitespaces between top-level tags [#24].
 
-## Changed
+### Changed
 - Improve whitespace normalization using `normalize-html-whitespace` [#21].
 
-## Fixed
+### Fixed
 - Don't collapse `visible="false"` attributes in A-Frame pages [#62].
 
 
@@ -102,6 +129,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 
 
+[0.2.5]: https://github.com/posthtml/htmlnano/compare/0.2.4...0.2.5
+[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
@@ -116,6 +147,14 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 [0.1.1]: https://github.com/posthtml/htmlnano/compare/0.1.0...0.1.1
 
 
+[#84]: https://github.com/posthtml/htmlnano/issues/84
+[#80]: https://github.com/posthtml/htmlnano/issues/80
+[#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
@@ -126,6 +165,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,6 +4,7 @@
 
 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)
@@ -75,8 +76,7 @@ const posthtmlPlugins = [
     require('htmlnano')(options)
 ];
 
-// "preset" arg might be skipped (see "Presets" section below for more info)
-posthtml(posthtmlPlugins, preset)
+posthtml(posthtmlPlugins)
     .process(html)
     .then(function (result) {
         // result.html is minified
@@ -271,6 +271,81 @@ Minified:
 <img src="foo.jpg" alt="">
 ```
 
+### removeUnusedCss
+
+Removes unused CSS inside `<style>` tags with either [uncss](https://github.com/uncss/uncss)
+or [PurgeCSS](https://github.com/FullHuman/purgecss).
+
+#### With uncss
+
+##### 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`
+
+#### With PurgeCSS
+
+Use PurgeCSS instead of uncss by adding `tool: 'purgeCSS'` to the options.
+
+##### Options
+
+See [the documentation of PurgeCSS](https://www.purgecss.com) for all supported options.
+
+PurgeCSS options can be passed directly to the `removeUnusedCss` module:
+```js
+htmlnano.process(html, {
+    removeUnusedCss: {
+        tool: 'purgeCSS',
+        whitelist: ['.do-not-remove']
+    }
+});
+```
+
+The following PurgeCSS options are ignored if passed to the module:
+
+-   `content`
+-   `css`
+-   `extractors`
+
+##### 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.
@@ -314,10 +389,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:
@@ -360,10 +445,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

@@ -4,10 +4,6 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 
-var _objectAssign = require('object-assign');
-
-var _objectAssign2 = _interopRequireDefault(_objectAssign);
-
 var _posthtml = require('posthtml');
 
 var _posthtml2 = _interopRequireDefault(_posthtml);
@@ -31,7 +27,7 @@ function htmlnano() {
     var preset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _safe2.default;
 
     return function minifier(tree) {
-        options = (0, _objectAssign2.default)({}, preset, options);
+        options = Object.assign({}, preset, options);
         var promise = Promise.resolve(tree);
 
         var _loop = function _loop(moduleName) {

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

@@ -7,10 +7,12 @@ exports.default = mergeScripts;
 /* Merge multiple <script> into one */
 function mergeScripts(tree) {
     var scriptNodesIndex = {};
+    var scriptSrcIndex = 1;
 
     tree.match({ tag: 'script' }, function (node) {
         var nodeAttrs = node.attrs || {};
         if (nodeAttrs.src) {
+            scriptSrcIndex++;
             return node;
         }
 
@@ -24,7 +26,8 @@ function mergeScripts(tree) {
             class: nodeAttrs.class,
             type: scriptType,
             defer: nodeAttrs.defer !== undefined,
-            async: nodeAttrs.async !== undefined
+            async: nodeAttrs.async !== undefined,
+            index: scriptSrcIndex
         });
         if (!scriptNodesIndex[scriptKey]) {
             scriptNodesIndex[scriptKey] = [];

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,147 @@
+'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 _purgecss = require('purgecss');
+
+var _purgecss2 = _interopRequireDefault(_purgecss);
+
+var _posthtmlRender = require('posthtml-render');
+
+var _posthtmlRender2 = _interopRequireDefault(_posthtmlRender);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+// These options must be set and shouldn't be overriden to ensure uncss doesn't look at linked stylesheets.
+var uncssOptions = {
+    ignoreSheets: [/\s*/],
+    stylesheets: []
+};
+
+function processStyleNodeUnCSS(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);
+        });
+    });
+}
+
+var purgeFromHtml = function purgeFromHtml(tree) {
+    // content is not used as we can directly used the parsed HTML,
+    // making the process faster
+    var selectors = [];
+
+    tree.walk(function (node) {
+        var classes = node.attrs && node.attrs.class && node.attrs.class.split(' ') || [];
+        var ids = node.attrs && node.attrs.id && node.attrs.id.split(' ') || [];
+        selectors.push.apply(selectors, _toConsumableArray(classes).concat(_toConsumableArray(ids)));
+        node.tag && selectors.push(node.tag);
+        return node;
+    });
+
+    return function () {
+        return selectors;
+    };
+};
+
+function processStyleNodePurgeCSS(tree, styleNode, purgecssOptions) {
+    var css = (0, _helpers.extractCssFromStyleNode)(styleNode);
+    return runPurgecss(tree, css, purgecssOptions).then(function (css) {
+        if (css.trim().length === 0) {
+            styleNode.tag = false;
+            styleNode.content = [];
+            return;
+        }
+        styleNode.content = [css];
+    });
+}
+
+function runPurgecss(tree, css, userOptions) {
+    if ((typeof userOptions === 'undefined' ? 'undefined' : _typeof(userOptions)) !== 'object') {
+        userOptions = {};
+    }
+
+    var options = Object.assign({}, userOptions, {
+        content: [{
+            raw: tree,
+            extension: 'html'
+        }],
+        css: [{
+            raw: css,
+            extension: 'css'
+        }],
+        extractors: [{
+            extractor: purgeFromHtml(tree),
+            extensions: ['html']
+        }]
+    });
+
+    return new Promise(function (resolve, reject) {
+        try {
+            var purgeCss = new _purgecss2.default(options);
+            var purgecssResult = purgeCss.purge()[0];
+            resolve(purgecssResult.css);
+        } catch (err) {
+            reject(err);
+        }
+    });
+}
+
+/** Remove unused CSS */
+function removeUnusedCss(tree, options, userOptions) {
+    var promises = [];
+    var html = userOptions.tool !== 'purgeCSS' && (0, _posthtmlRender2.default)(tree);
+
+    tree.walk(function (node) {
+        if ((0, _helpers.isStyleNode)(node)) {
+            if (userOptions.tool === 'purgeCSS') {
+                promises.push(processStyleNodePurgeCSS(tree, node, userOptions));
+            } else {
+                promises.push(processStyleNodeUnCSS(html, node, userOptions));
+            }
+        }
+        return node;
+    });
+
+    return Promise.all(promises).then(function () {
+        return tree;
+    });
+}

package/lib/presets/ampSafe.js

@@ -4,10 +4,6 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 
-var _objectAssign = require('object-assign');
-
-var _objectAssign2 = _interopRequireDefault(_objectAssign);
-
 var _safe = require('./safe');
 
 var _safe2 = _interopRequireDefault(_safe);
@@ -19,7 +15,7 @@ function _interopRequireDefault(obj) {
 /**
  * A safe preset for AMP pages (https://www.ampproject.org)
  */
-exports.default = (0, _objectAssign2.default)({}, _safe2.default, {
+exports.default = Object.assign({}, _safe2.default, {
     collapseBooleanAttributes: {
         amphtml: true
     },

package/lib/presets/max.js

@@ -4,10 +4,6 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 
-var _objectAssign = require('object-assign');
-
-var _objectAssign2 = _interopRequireDefault(_objectAssign);
-
 var _safe = require('./safe');
 
 var _safe2 = _interopRequireDefault(_safe);
@@ -19,8 +15,13 @@ function _interopRequireDefault(obj) {
 /**
  * Maximal minification (might break some pages)
  */
-exports.default = (0, _objectAssign2.default)({}, _safe2.default, {
+exports.default = Object.assign({}, _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.1",
+  "version": "0.2.5",
   "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",
@@ -26,23 +32,25 @@
     ]
   },
   "dependencies": {
-    "cssnano": "^4.1.0",
-    "normalize-html-whitespace": "^0.2.0",
-    "object-assign": "^4.0.1",
-    "posthtml": "^0.11.3",
-    "posthtml-render": "^1.1.4",
-    "svgo": "^1.0.5",
-    "terser": "^3.8.2"
+    "cssnano": "^4.1.10",
+    "normalize-html-whitespace": "^1.0.0",
+    "posthtml": "^0.12.0",
+    "posthtml-render": "^1.1.5",
+    "purgecss": "^1.4.0",
+    "svgo": "^1.3.2",
+    "terser": "^4.3.9",
+    "uncss": "^0.17.2"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
-    "babel-eslint": "^10.0.0",
+    "babel-eslint": "^10.0.3",
     "babel-preset-env": "^1.7.0",
-    "eslint": "^5.5.0",
-    "expect": "^23.6.0",
-    "mocha": "^5.2.0",
-    "rimraf": "^2.6.2"
+    "eslint": "^6.6.0",
+    "expect": "^24.9.0",
+    "mocha": "^6.2.2",
+    "release-it": "^12.4.3",
+    "rimraf": "^3.0.0"
   },
   "repository": {
     "type": "git",

package/test.js

@@ -0,0 +1,16 @@
+const htmlnano = require('./index');
+const fs = require('fs');
+const preset = require('./lib/presets/max').default;
+
+const options = {};
+
+const html = fs.readFileSync('./test.html', 'utf8');
+
+htmlnano
+    .process(html, options, preset)
+    .then(function (result) {
+        console.log(result.html);
+    })
+    .catch(function (err) {
+        console.error(err);
+    });