htmlnano 0.2.4 → 0.2.5

package/CHANGELOG.md

@@ -2,49 +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
+### Fixed
 - Remove crossorigin from boolean attribute [#78], [#79].
 - Disable SVGO plugin convertShapeToPath in safe preset [#76].
 
 
 ## [0.2.3] - 2019-02-14
-## Fixed
+### Fixed
 - Keep `<g>` in SVG by default [#71].
 
 
 ## [0.2.2] - 2019-01-03
-## Added
+### Added
 - `removeUnusedCss` module [#36].
 
-## Fixed
+### 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].
 
 
@@ -122,6 +129,7 @@ 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
@@ -139,6 +147,8 @@ 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

package/README.md

@@ -76,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
@@ -273,7 +272,11 @@ Minified:
 ```
 
 ### removeUnusedCss
-Removes unused CSS with [uncss](https://github.com/uncss/uncss) inside `<style>` tags.
+
+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.
@@ -293,6 +296,30 @@ The following uncss options are ignored if passed to the module:
 -   `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

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/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/removeUnusedCss.js

@@ -14,35 +14,25 @@ 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: []
 };
 
-/** 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) {
+function processStyleNodeUnCSS(html, styleNode, uncssOptions) {
     var css = (0, _helpers.extractCssFromStyleNode)(styleNode);
 
     return runUncss(html, css, uncssOptions).then(function (css) {
@@ -72,4 +62,86 @@ function runUncss(html, css, userOptions) {
             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,7 +15,7 @@ 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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "htmlnano",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Modular HTML minifier, built on top of the PostHTML",
   "main": "index.js",
   "author": "Kirill Maltsev <maltsevkirill@gmail.com>",
@@ -34,23 +34,23 @@
   "dependencies": {
     "cssnano": "^4.1.10",
     "normalize-html-whitespace": "^1.0.0",
-    "object-assign": "^4.0.1",
-    "posthtml": "^0.11.4",
+    "posthtml": "^0.12.0",
     "posthtml-render": "^1.1.5",
-    "svgo": "^1.2.2",
-    "terser": "^4.1.2",
-    "uncss": "^0.17.0"
+    "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.2",
+    "babel-eslint": "^10.0.3",
     "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"
+    "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

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