htmlnano 0.2.4 → 0.2.8

package/CHANGELOG.md

@@ -3,48 +3,95 @@ All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
 
+## [0.2.8] - 2020-11-15
+### Added
+- [`removeOptionalTags`](https://github.com/posthtml/htmlnano#removeoptionaltags) [#110].
+- [`sortAttributes`](https://github.com/posthtml/htmlnano#removeoptionaltags) [#113].
+- `source[src]` and `srcset` support to `minifyUrls` [#117].
+- [`minifyConditionalComments`](https://github.com/posthtml/htmlnano#minifyconditionalcomments) [#119].
+
+### Changed
+- Sort by frequency `sortAttributesWithLists` [#111].
+- Strip more spaces in `collapseWhitespace` [#112].
+- Remove `loading="eager"` from `<img>` and `<iframe>` [#114].
+- Remove redundant `type` from `<script>` [#114].
+- Strip whitespaces between textnode and element [#116].
+
+
+
+## [0.2.7] - 2020-10-17
+### Added
+- More aggressive whitespace removal option [#90].
+- Cloudflare SSE support to `removeComments` [#94].
+- Improve compression ratio by sorting attribute values [#95].
+- New `minifyUrls` module [#98].
+- New `removeAttributeQuotes` module [#104].
+- Remove `type=text/css` for `link[rel=stylesheet]` [#102].
+- Collapse `crossorigin` attributes [#107].
+- Exclude excerpt comment for common CMS [#108].
+
+### Fixed
+- Keep JS inside SVG wrapped in `//<![CDATA[ //]]` [#88].
+
+
+## [0.2.6] - 2020-07-15
+### Added
+- Let PostHTML options to be passed.
+
+### Fixed
+- `<script>` tags merging without content.
+
+
+## [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].
 
 
@@ -121,7 +168,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Remove attributes that contains only white spaces.
 
 
-
+[0.2.8]: https://github.com/posthtml/htmlnano/compare/0.2.7...0.2.8
+[0.2.7]: https://github.com/posthtml/htmlnano/compare/0.2.6...0.2.7
+[0.2.6]: https://github.com/posthtml/htmlnano/compare/0.2.5...0.2.6
+[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 +189,25 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 [0.1.1]: https://github.com/posthtml/htmlnano/compare/0.1.0...0.1.1
 
 
+[#119]: https://github.com/posthtml/htmlnano/issues/119
+[#117]: https://github.com/posthtml/htmlnano/issues/117
+[#116]: https://github.com/posthtml/htmlnano/issues/116
+[#114]: https://github.com/posthtml/htmlnano/issues/114
+[#113]: https://github.com/posthtml/htmlnano/issues/113
+[#112]: https://github.com/posthtml/htmlnano/issues/112
+[#111]: https://github.com/posthtml/htmlnano/issues/111
+[#110]: https://github.com/posthtml/htmlnano/issues/110
+[#107]: https://github.com/posthtml/htmlnano/issues/107
+[#108]: https://github.com/posthtml/htmlnano/issues/108
+[#102]: https://github.com/posthtml/htmlnano/issues/102
+[#104]: https://github.com/posthtml/htmlnano/issues/104
+[#98]: https://github.com/posthtml/htmlnano/issues/98
+[#95]: https://github.com/posthtml/htmlnano/issues/95
+[#94]: https://github.com/posthtml/htmlnano/issues/94
+[#90]: https://github.com/posthtml/htmlnano/issues/90
+[#88]: https://github.com/posthtml/htmlnano/issues/88
+[#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

@@ -8,16 +8,16 @@ Modular HTML minifier, built on top of the [PostHTML](https://github.com/posthtm
 
 
 ## [Benchmark](https://github.com/maltsev/html-minifiers-benchmark/blob/master/README.md)
-[html-minifier@3.5.20]: https://www.npmjs.com/package/html-minifier
-[htmlnano@0.2.0]: https://www.npmjs.com/package/htmlnano
+[html-minifier@4.0.0]: https://www.npmjs.com/package/html-minifier
+[htmlnano@0.2.6]: https://www.npmjs.com/package/htmlnano
 
-| Website | Source (KB) | [html-minifier@3.5.20] | [htmlnano@0.2.0] |
+| Website | Source (KB) | [html-minifier@4.0.0] | [htmlnano@0.2.6] |
 |---------|------------:|----------------:|-----------:|
-| [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%** |
+| [stackoverflow.blog](https://stackoverflow.blog/) | 76 | 67 | 66 |
+| [github.com](https://github.com/) | 131 | 70 | 117 |
+| [en.wikipedia.org](https://en.wikipedia.org/wiki/Main_Page) | 80 | 71 | 76 |
+| [npmjs.com](https://www.npmjs.com/features) | 31 | 25 | 28 |
+| **Avg. minify rate** | 0% | **22%** | **10%** |
 
 
 ## Usage
@@ -49,10 +49,17 @@ const options = {
     removeEmptyAttributes: false, // Disable the module "removeEmptyAttributes"
     collapseWhitespace: 'conservative' // Pass options to the module "collapseWhitespace"
 };
+// posthtml, posthtml-render, and posthtml-parse options
+const postHtmlOptions = {
+    sync: true, // https://github.com/posthtml/posthtml#usage
+    lowerCaseTags: true, // https://github.com/posthtml/posthtml-parser#options
+    quoteAllAttributes: false, // https://github.com/posthtml/posthtml-render#options
+};
 
 htmlnano
     // "preset" arg might be skipped (see "Presets" section below for more info)
-    .process(html, options, preset)
+    // "postHtmlOptions" arg might be skipped
+    .process(html, options, preset, postHtmlOptions)
     .then(function (result) {
         // result.html is minified
     })
@@ -76,9 +83,12 @@ const posthtmlPlugins = [
     require('htmlnano')(options)
 ];
 
-// "preset" arg might be skipped (see "Presets" section below for more info)
-posthtml(posthtmlPlugins, preset)
-    .process(html)
+const postHtmlOptions = {
+    // See PostHTML docs
+};
+
+posthtml(posthtmlPlugins)
+    .process(html, posthtmlOptions)
     .then(function (result) {
         // result.html is minified
     })
@@ -192,29 +202,39 @@ Collapses redundant white spaces (including new lines). It doesn’t affect whit
 
 ##### Options
 - `conservative` — collapses all redundant white spaces to 1 space (default)
+- `aggressive` — collapses all whitespaces that are redundant and safe to remove
 - `all` — collapses all redundant white spaces
 
 ##### Side effects
-`<i>hello</i> <i>world</i>` after minification will be rendered as `helloworld`.
-To prevent that use `conservative` option (this is the default option).
+
+*all*  
+`<i>hello</i> <i>world</i>` or `<i>hello</i><br><i>world</i>` after minification will be rendered as `helloworld`.
+To prevent that use either the default `conservative` option, or the `aggressive` option.
 
 ##### Example
 Source:
 ```html
 <div>
     hello  world!
+    \t<a href="#">answer</a>
     <style>div  { color: red; }  </style>
+\t\t<main></main>
 </div>
 ```
 
 Minified (with `all`):
 ```html
-<div>hello world!<style>div  { color: red; }  </style></div>
+<div>hello world!<a href="#">answer</a><style>div  { color: red; }  </style><main></main></div>
+```
+
+Minified (with `aggressive`):
+```html
+<div> hello world! <a href="#">answer</a> <style>div  { color: red; }  </style><main></main></div>
 ```
 
 Minified (with `conservative`):
 ```html
-<div> hello world! <style>div  { color: red; }  </style> </div>
+<div> hello world! <a href="#">answer</a> <style>div  { color: red; }  </style> <main></main> </div>
 ```
 
 
@@ -272,8 +292,43 @@ Minified:
 <img src="foo.jpg" alt="">
 ```
 
+### removeAttributeQuotes
+Remove quotes around attributes when possible, see [HTML Standard - 12.1.2.3 Attributes - Unquoted attribute value syntax](https://html.spec.whatwg.org/multipage/syntax.html#attributes-2).
+
+##### Example
+Source:
+```html
+<div class="foo" title="hello world"></div>
+```
+
+Minified:
+```html
+<div class=foo title="hello world"></div>
+```
+
+##### Notice
+The feature is implemented by [posthtml-render's `quoteAllAttributes`](https://github.com/posthtml/posthtml-render#options), which is one of the PostHTML's option. So `removeAttributeQuotes` could be overriden by other PostHTML's plugins and PostHTML's configuration.
+
+For example:
+
+```js
+posthtml([
+    htmlnano({
+        removeAttributeQuotes: true
+    })
+]).process(html, {
+    quoteAllAttributes: true
+})
+```
+
+`removeAttributeQuotes` will not work because PostHTML's `quoteAllAttributes` takes the priority.
+
 ### 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 +348,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
@@ -450,6 +529,49 @@ Minified:
 <svg baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="red"/><circle cx="150" cy="100" r="80" fill="green"/><text x="150" y="125" font-size="60" text-anchor="middle" fill="#fff">SVG</text></svg>
 ```
 
+### minifyConditionalComments
+
+Minify content inside conditional comments.
+
+##### Example
+
+Source:
+
+```html
+<!--[if lte IE 7]>
+<style type="text/css">
+.title {
+  color: red;
+}
+</style>
+<![endif]-->
+```
+
+Minified:
+
+```html
+<!--[if lte IE 7]><style>.title {color:red}</style><![endif]-->
+```
+
+##### Notice
+
+Due to [the limitation of PostHTML](https://github.com/posthtml/posthtml-parser/issues/9) (which is actually a issue from upstream [htmlparser2](https://github.com/fb55/htmlparser2/pull/146)), following html snippet is not supported:
+
+```html
+<!--[if lt IE 7]><html class="no-js ie6"><![endif]-->
+<!--[if IE 7]><html class="no-js ie7"><![endif]-->
+<!--[if IE 8]><html class="no-js ie8"><![endif]-->
+<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
+```
+
+Which will result in:
+
+```html
+<!--[if lt IE 7]><html class="no-js ie6"></html><![endif]-->
+<!--[if IE 7]><html class="no-js ie7"></html><![endif]-->
+<!--[if IE 8]><html class="no-js ie8"></html><![endif]-->
+<!--[if gt IE 8]><!--><html class="no-js"></html><!--<![endif]-->
+```
 
 ### removeRedundantAttributes
 Removes redundant attributes from tags if they contain default values:
@@ -459,6 +581,7 @@ Removes redundant attributes from tags if they contain default values:
 - `language="javascript"` and `type="text/javascript"` from `<script>`
 - `charset` from `<script>` if it's an external script
 - `media="all"` from `<style>` and `<link>`
+- `type="text/css"` from `<link rel="stylesheet">`
 
 ##### Options
 This module is disabled by default, change option to true to enable this module.
@@ -600,13 +723,190 @@ const options = {
 
 `options` is an object with all options that were passed to the plugin.
 
+### sortAttributesWithLists
+Sort values in list-like attributes (`class`, `rel`, `ping`).
+
+The module won't impact the plain-text size of the output. However it will improve the compression ratio of gzip/brotli used in HTTP compression.
+
+##### Options
+
+- `alphabetical`: Default option. Sort attribute values in alphabetical order.
+- `frequency`: Sort attribute values by frequency.
+
+##### Example
+
+**alphabetical**
+
+Source:
+```html
+<div class="foo baz bar">click</div>
+```
+
+Processed:
+```html
+<div class="bar baz foo">click</div>
+```
+
+**frequency**
+
+Source:
+```html
+<div class="foo baz bar"></div><div class="bar foo"></div>
+```
+
+Processed:
+```html
+<div class="foo bar baz"></div><div class="foo bar"></div>
+```
+
+### sortAttributes
+Sort attributes inside elements.
+
+The module won't impact the plain-text size of the output. However it will improve the compression ratio of gzip/brotli used in HTTP compression.
+
+##### Options
+
+- `alphabetical`: Default option. Sort attributes in alphabetical order.
+- `frequency`: Sort attributes by frequency.
+
+##### Example
+
+**alphabetical**
+
+Source:
+```html
+<input type="text" class="form-control" name="testInput" autofocus="" autocomplete="off" id="testId">
+```
+
+Processed:
+```html
+<input autocomplete="off" autofocus="" class="form-control" id="testId" name="testInput" type="text">
+```
+
+**frequency**
+
+Source:
+```html
+<input type="text" class="form-control" name="testInput" id="testId">
+<a id="testId" href="#" class="testClass"></a>
+<img width="20" src="../images/image.png" height="40" alt="image" class="cls" id="id2">
+```
+
+Processed:
+```html
+<input class="form-control" id="testId" type="text" name="testInput">
+<a class="testClass" id="testId" href="#"></a>
+<img class="cls" id="id2" width="20" src="../images/image.png" height="40" alt="image">
+```
+
+### minifyUrls
+Convert absolute URL to relative URL using [relateurl](https://www.npmjs.com/package/relateurl).
+
+##### Options
+
+The base URL to resolve against. Support `String` & `URL`.
+
+```js
+htmlnano.process(html, {
+    minifyUrls: 'https://example.com' // Valid configuration
+});
+```
+
+```js
+htmlnano.process(html, {
+    minifyUrls: new URL('https://example.com') // Valid configuration
+});
+```
+
+```js
+htmlnano.process(html, {
+    minifyUrls: false // The module will be disabled
+});
+```
+
+```js
+htmlnano.process(html, {
+    minifyUrls: true // Invalid configuration, the module will be disabled
+});
+```
+
+##### Example
+
+**Basic Usage**
+
+Configuration:
+
+```js
+htmlnano.process(html, {
+    minifyUrls: 'https://example.com'
+});
+```
+
+Source:
+
+```html
+<a href="https://example.com/foo/bar/baz">bar</a>
+```
+
+Minified:
+
+```html
+<a href="foo/bar/baz">bar</a>
+```
+
+**With sub-directory**
+
+Configuration:
+
+```js
+htmlnano.process(html, {
+    minifyUrls: 'https://example.com/foo/baz/'
+});
+```
+
+Source:
+
+```html
+<a href="https://example.com/foo/bar">bar</a>
+```
+
+Minified:
+
+```html
+<a href="../bar">bar</a>
+```
+
+## removeOptionalTags
+Remove certain tags that can be omitted, see [HTML Standard - 13.1.2.4 Optional tags](https://html.spec.whatwg.org/multipage/syntax.html#optional-tags).
+
+##### Example
+
+Source:
+
+```html
+<html><head><title>Title</title></head><body><p>Hi</p></body></html>
+```
+
+Minified:
+
+```html
+<title>Title</title><p>Hi</p>
+```
+##### Notice
+Due to [the limitation of PostHTML](https://github.com/posthtml/htmlnano/issues/99), htmlnano can't remove only the start tag or the end tag of an element. Currently, htmlnano only supports removing the following optional tags, as htmlnano can remove their start tag and end tag at the same time:
+
+- `html`
+- `head`
+- `body`
+- `colgroup`
+- `tbody`
 
 ## 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 in [the modules array](https://github.com/posthtml/htmlnano/blob/master/lib/htmlnano.es6#L5). The modules are applied from top to bottom. So you can choose the order for your module.
+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.
 

package/lib/helpers.js

@@ -1,61 +1,41 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 exports.isAmpBoilerplate = isAmpBoilerplate;
 exports.isComment = isComment;
 exports.isConditionalComment = isConditionalComment;
 exports.isStyleNode = isStyleNode;
 exports.extractCssFromStyleNode = extractCssFromStyleNode;
-var ampBoilerplateAttributes = ['amp-boilerplate', 'amp4ads-boilerplate', 'amp4email-boilerplate'];
+const ampBoilerplateAttributes = ['amp-boilerplate', 'amp4ads-boilerplate', 'amp4email-boilerplate'];
 
 function isAmpBoilerplate(node) {
-    if (!node.attrs) {
-        return false;
-    }
-    var _iteratorNormalCompletion = true;
-    var _didIteratorError = false;
-    var _iteratorError = undefined;
-
-    try {
-        for (var _iterator = ampBoilerplateAttributes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-            var attr = _step.value;
-
-            if (attr in node.attrs) {
-                return true;
-            }
-        }
-    } catch (err) {
-        _didIteratorError = true;
-        _iteratorError = err;
-    } finally {
-        try {
-            if (!_iteratorNormalCompletion && _iterator.return) {
-                _iterator.return();
-            }
-        } finally {
-            if (_didIteratorError) {
-                throw _iteratorError;
-            }
-        }
+  if (!node.attrs) {
+    return false;
+  }
+
+  for (const attr of ampBoilerplateAttributes) {
+    if (attr in node.attrs) {
+      return true;
     }
+  }
 
-    return false;
+  return false;
 }
 
 function isComment(content) {
-    return (content || '').trim().search('<!--') === 0;
+  return (content || '').trim().search('<!--') === 0;
 }
 
 function isConditionalComment(content) {
-    return (content || '').trim().search(/<!--\[if/) === 0;
+  return (content || '').trim().search(/<!--\[if/) === 0;
 }
 
 function isStyleNode(node) {
-    return node.tag === 'style' && !isAmpBoilerplate(node) && 'content' in node && node.content.length > 0;
+  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;
+  return Array.isArray(node.content) ? node.content.join(' ') : node.content;
 }