htmlnano 2.0.1 → 2.0.3

package/docs/docs/050-modules.md

@@ -3,6 +3,49 @@
 By default the modules should only perform safe transforms, see the module documentation below for details.
 You can disable modules by passing `false` as option, and enable them by passing `true`.
 
+The order in which the modules are documented is also the order in which they are applied.
+
+## Attributes
+
+### normalizeAttributeValues
+
+- Normalize casing of specific attribute values that are case-insensitive (like `form[method]`, `img[img]` and `input[type]`).
+- Apply [invalid value default](https://html.spec.whatwg.org/#invalid-value-default) attribute to invalid attribute values (like `<input type=foo>` to `<input type=text>`, which can then be minified to `<input>` by `removeRedundantAttributes` module).
+#### Example
+
+Source:
+
+```html
+<form method="GET"></form>
+```
+
+Minified:
+
+```html
+<form method="get"></form>
+```
+
+### removeEmptyAttributes
+Removes empty [safe-to-remove](https://github.com/posthtml/htmlnano/blob/master/lib/modules/removeEmptyAttributes.es6) attributes.
+
+#### Side effects
+This module could break your styles or JS if you use selectors with attributes:
+```CSS
+img[style=""] {
+    margin: 10px;
+}
+```
+
+#### Example
+Source:
+```html
+<img src="foo.jpg" alt="" style="">
+```
+
+Minified:
+```html
+<img src="foo.jpg" alt="">
+```
 
 ### collapseAttributeWhitespace
 Collapse redundant white spaces in list-like attributes (`class`, `rel`, `ping`).
@@ -18,48 +61,81 @@ Minified:
 <a class="content page" style="display: block;" href="https://example.com"></a>
 ```
 
-
-
-### collapseWhitespace
-Collapses redundant white spaces (including new lines). It doesn’t affect white spaces in the elements `<style>`, `<textarea>`, `<script>` and `<pre>`.
+### removeRedundantAttributes
+Removes redundant attributes from tags if they contain default values:
+- `method="get"` from `<form>`
+- `type="text"` from `<input>`
+- `type="submit"` from `<button>`
+- `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
-- `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
+This module is disabled by default, change option to true to enable this module.
 
 #### Side effects
-
-*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.
+This module could break your styles or JS if you use selectors with attributes:
+```CSS
+form[method="get"] {
+    color: red;
+}
+```
 
 #### Example
 Source:
 ```html
-<div>
-    hello  world!
-    <a href="#">answer</a>
-    <style>div  { color: red; }  </style>
-    <main></main>
-</div>
+<form method="get">
+    <input type="text">
+</form>
 ```
 
-Minified (with `all`):
+Minified:
 ```html
-<div>hello world!<a href="#">answer</a><style>div  { color: red; }  </style><main></main></div>
+<form>
+    <input>
+</form>
 ```
 
-Minified (with `aggressive`):
-```html
-<div> hello world! <a href="#">answer</a> <style>div  { color: red; }  </style><main></main></div>
+### collapseBooleanAttributes
+
+- Collapses boolean attributes (like `disabled`) to the minimized form.
+- Collapses empty string value attributes (like `href=""`) to the minimized form.
+- Collapses [missing value default](https://html.spec.whatwg.org/#missing-value-default) attributes that are empty strings (`audio[preload=auto]` and `video[preload=auto]`) to the minimized form.
+
+#### Options
+If your document uses [AMP](https://www.ampproject.org/), set the `amphtml` flag
+to collapse additonal, AMP-specific boolean attributes:
+```Json
+"collapseBooleanAttributes": {
+    "amphtml": true
+}
 ```
 
-Minified (with `conservative`):
+#### Side effects
+This module could break your styles or JS if you use selectors with attributes:
+```CSS
+button[disabled="disabled"] {
+    color: red;
+}
+```
+
+#### Example
+Source:
 ```html
-<div> hello world! <a href="#">answer</a> <style>div  { color: red; }  </style> <main></main> </div>
+<button disabled="disabled">click</button>
+<script defer=""></script>
+<a href=""></a>
+<video preload="auto"></video>
 ```
 
+Minified:
+```html
+<button disabled>click</button>
+<script defer></script>
+<a href></a>
+<video preload></video>
+```
 
 ### deduplicateAttributeValues
 Remove duplicate values from list-like attributes (`class`, `rel`, `ping`).
@@ -75,480 +151,371 @@ Minified:
 <div class="sidebar left"></div>
 ```
 
+### minifyUrls
+Convert absolute URL to relative URL using [relateurl](https://www.npmjs.com/package/relateurl).
 
-### removeComments
-#### Options
-- `safe` – removes all HTML comments except the conditional comments and  [`<!--noindex--><!--/noindex-->`](https://yandex.com/support/webmaster/controlling-robot/html.xml) (default)
-- `all` — removes all HTML comments
-- A `RegExp` — only HTML comments matching the given regexp will be removed.
-- A `Function` that returns boolean — removes HTML comments that can make the given callback function returns truthy value.
+You have to install `relateurl`, `terser` and `srcset` in order to use this feature:
 
-#### Example
+```bash
+npm install --save-dev relateurl terser srcset
+# if you prefer yarn
+# yarn add --dev relateurl terser srcset
+# if you prefer pnpm
+# pnpm install --save-dev relateurl terser srcset
+```
 
-Source:
+#### Options
+
+The base URL to resolve against. Support `String` & `URL`.
 
 ```js
-{
-    removeComments: 'all'
-}
+htmlnano.process(html, {
+    minifyUrls: 'https://example.com' // Valid configuration
+});
 ```
 
-```html
-<div><!-- test --></div>
+```js
+htmlnano.process(html, {
+    minifyUrls: new URL('https://example.com') // Valid configuration
+});
 ```
 
-Minified:
+```js
+htmlnano.process(html, {
+    minifyUrls: false // The module will be disabled
+});
+```
 
-```html
-<div></div>
+```js
+htmlnano.process(html, {
+    minifyUrls: true // Invalid configuration, the module will be disabled
+});
 ```
 
-Source:
+#### Example
+
+**Basic Usage**
+
+Configuration:
 
 ```js
-{
-    removeComments: /<!--(\/)?noindex-->/
-}
+htmlnano.process(html, {
+    minifyUrls: 'https://example.com'
+});
 ```
 
+Source:
+
 ```html
-<div><!--noindex-->this text will not be indexed<!--/noindex-->Lorem ipsum dolor sit amet<!--more-->Lorem ipsum dolor sit amet</div>
+<a href="https://example.com/foo/bar/baz">bar</a>
 ```
 
 Minified:
 
 ```html
-<div>this text will not be indexedLorem ipsum dolor sit amet<!--more-->Lorem ipsum dolor sit amet</div>
+<a href="foo/bar/baz">bar</a>
 ```
 
-Source:
+**With sub-directory**
+
+Configuration:
 
 ```js
-{
-    removeComments: (comments) => {
-        if (comments.includes('noindex')) return true;
-        return false;
-    }
-}
+htmlnano.process(html, {
+    minifyUrls: 'https://example.com/foo/baz/'
+});
 ```
 
+Source:
+
 ```html
-<div><!--noindex-->this text will not be indexed<!--/noindex-->Lorem ipsum dolor sit amet<!--more-->Lorem ipsum dolor sit amet</div>
+<a href="https://example.com/foo/bar">bar</a>
 ```
 
 Minified:
 
 ```html
-<div>this text will not be indexedLorem ipsum dolor sit amet<!--more-->Lorem ipsum dolor sit amet</div>
+<a href="../bar">bar</a>
 ```
 
 
-### removeEmptyAttributes
-Removes empty [safe-to-remove](https://github.com/posthtml/htmlnano/blob/master/lib/modules/removeEmptyAttributes.es6) attributes.
+### sortAttributes
+Sort attributes inside elements.
 
-#### Side effects
-This module could break your styles or JS if you use selectors with attributes:
-```CSS
-img[style=""] {
-    margin: 10px;
-}
-```
+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
-<img src="foo.jpg" alt="" style="">
+<input type="text" class="form-control" name="testInput" autofocus="" autocomplete="off" id="testId">
 ```
 
-Minified:
+Processed:
 ```html
-<img src="foo.jpg" alt="">
+<input autocomplete="off" autofocus="" class="form-control" id="testId" name="testInput" type="text">
 ```
 
-### 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).
+**frequency**
 
-#### Example
 Source:
 ```html
-<div class="foo" title="hello world"></div>
+<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">
 ```
 
-Minified:
+Processed:
 ```html
-<div class=foo title="hello world"></div>
+<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">
 ```
 
-#### 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.
+### sortAttributesWithLists
+Sort values in list-like attributes (`class`, `rel`, `ping`).
 
-### removeUnusedCss
+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.
 
-Removes unused CSS inside `<style>` tags with either [uncss](https://github.com/uncss/uncss)
-or [PurgeCSS](https://github.com/FullHuman/purgecss).
+#### Options
 
-#### With uncss
-
-You have to install `uncss` in order to use this feature:
-
-```bash
-npm install --save-dev uncss
-# if you prefer yarn
-# yarn add --dev uncss
-# if you prefer pnpm
-# pnpm install --save-dev uncss
-```
-
-You can also use a mainted fork [@novaatwarren/uncss](https://www.npmjs.com/package/@novaatwarren/uncss) instead.
-
-
-##### 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
+- `alphabetical`: Default option. Sort attribute values in alphabetical order.
+- `frequency`: Sort attribute values by frequency.
 
-Use PurgeCSS instead of uncss by adding `tool: 'purgeCSS'` to the options.
+#### Example
 
-You have to install `purgecss` in order to use this feature:
+**alphabetical**
 
-```bash
-npm install --save-dev purgecss
-# if you prefer yarn
-# yarn add --dev purgecss
-# if you prefer pnpm
-# pnpm install --save-dev purgecss
+Source:
+```html
+<div class="foo baz bar">click</div>
 ```
 
-##### 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',
-        safelist: ['.do-not-remove']
-    }
-});
+Processed:
+```html
+<div class="bar baz foo">click</div>
 ```
 
-The following PurgeCSS options are ignored if passed to the module:
-
--   `content`
--   `css`
--   `extractors`
+**frequency**
 
-#### Example
 Source:
 ```html
-<div class="b">
-    <style>
-        .a {
-            margin: 10px 10px 10px 10px;
-        }
-        .b {
-            color: #ff0000;
-        }
-    </style>
-</div>
+<div class="foo baz bar"></div><div class="bar foo"></div>
 ```
 
-Optimized:
+Processed:
 ```html
-<div class="b">
-    <style>
-        .b {
-            color: #ff0000;
-        }
-    </style>
-</div>
+<div class="foo bar baz"></div><div class="foo bar"></div>
 ```
 
 
-### minifyCss
-Minifies CSS with [cssnano](http://cssnano.co/) inside `<style>` tags and `style` attributes.
 
-You have to install `cssnano` and `postcss` in order to use this feature:
-
-```bash
-npm install --save-dev cssnano postcss
-# if you prefer yarn
-# yarn add --dev cssnano postcss
-# if you prefer pnpm
-# pnpm install --save-dev cssnano postcss
-```
 
 #### Options
-See [the documentation of cssnano](http://cssnano.co/docs/optimisations/) for all supported optimizations.
-By default CSS is minified with preset `default`, which shouldn't have any side-effects.
+- `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
 
-To use another preset or disabled some optimizations pass options to `minifyCss` module:
-```js
-htmlnano.process(html, {
-    minifyCss: {
-        preset: ['default', {
-            discardComments: {
-                removeAll: true,
-            },
-        }]
-    }
-});
-```
+#### Side effects
+
+*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>
-    <style>
-        h1 {
-            margin: 10px 10px 10px 10px;
-            color: #ff0000;
-        }
-    </style>
+    hello  world!
+    <a href="#">answer</a>
+    <style>div  { color: red; }  </style>
+    <main></main>
 </div>
 ```
 
-Minified:
+Minified (with `all`):
 ```html
-<div>
-    <style>h1{margin:10px;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>
+```
 
-### minifyJs
-Minifies JS using [Terser](https://github.com/fabiosantoscode/terser) inside `<script>` tags.
+Minified (with `conservative`):
+```html
+<div> hello world! <a href="#">answer</a> <style>div  { color: red; }  </style> <main></main> </div>
+```
 
-You have to install `terser` in order to use this feature:
 
-```bash
-npm install --save-dev terser
-# if you prefer yarn
-# yarn add --dev terser
-# if you prefer pnpm
-# pnpm install --save-dev terser
-```
 
-#### Options
-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 },
-    },
-});
-```
+## HTML Content
 
+### collapseWhitespace
+Collapses redundant white spaces (including new lines). It doesn’t affect white spaces in the elements `<style>`, `<textarea>`, `<script>` and `<pre>`.
 
 
+### removeComments
+#### Options
+- `safe` – removes all HTML comments except the conditional comments and  [`<!--noindex--><!--/noindex-->`](https://yandex.com/support/webmaster/controlling-robot/html.xml) (default)
+- `all` — removes all HTML comments
+- A `RegExp` — only HTML comments matching the given regexp will be removed.
+- A `Function` that returns boolean — removes HTML comments that can make the given callback function returns truthy value.
+
 #### Example
+
 Source:
-```html
-<div>
-    <script>
-        /* comment */
-        const foo = function () {
 
-        };
-    </script>
-</div>
+```js
+{
+    removeComments: 'all'
+}
 ```
 
-Minified:
 ```html
-<div>
-    <script>const foo=function(){};</script>
-</div>
+<div><!-- test --></div>
 ```
 
+Minified:
 
-### minifyJson
-Minifies JSON inside `<script type="application/json"></script>`.
+```html
+<div></div>
+```
 
-#### Example
 Source:
-```html
-<script type="application/json">
+
+```js
 {
-    "user": "me"
+    removeComments: /<!--(\/)?noindex-->/
 }
-</script>
 ```
 
-Minified:
 ```html
-<script type="application/json">{"user":"me"}</script>
+<div><!--noindex-->this text will not be indexed<!--/noindex-->Lorem ipsum dolor sit amet<!--more-->Lorem ipsum dolor sit amet</div>
 ```
 
+Minified:
 
-### minifySvg
-Minifies SVG inside `<svg>` tags using [SVGO](https://github.com/svg/svgo/).
+```html
+<div>this text will not be indexedLorem ipsum dolor sit amet<!--more-->Lorem ipsum dolor sit amet</div>
+```
+
+Source:
 
-#### Options
-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: [
-            {
-                name: 'preset-default',
-                params: {
-                    overrides: {
-                        builtinPluginName: {
-                            optionName: 'optionValue'
-                        },
-                    },
-                },
-            }
-        ]
+{
+    removeComments: (comments) => {
+        if (comments.includes('noindex')) return true;
+        return false;
     }
-});
+}
 ```
 
-#### Example
-Source:
 ```html
-<svg version="1.1" 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="white">SVG</text>
-</svg>`
+<div><!--noindex-->this text will not be indexed<!--/noindex-->Lorem ipsum dolor sit amet<!--more-->Lorem ipsum dolor sit amet</div>
 ```
 
 Minified:
+
 ```html
-<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>
+<div>this text will not be indexedLorem ipsum dolor sit amet<!--more-->Lorem ipsum dolor sit amet</div>
 ```
 
-### minifyConditionalComments
-
-Minify content inside conditional comments.
+### 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
-<!--[if lte IE 7]>
-<style type="text/css">
-.title {
-  color: red;
-}
-</style>
-<![endif]-->
+<html><head><title>Title</title></head><body><p>Hi</p></body></html>
 ```
 
 Minified:
 
 ```html
-<!--[if lte IE 7]><style>.title{color:red}</style><![endif]-->
+<title>Title</title><p>Hi</p>
 ```
 
-### removeRedundantAttributes
-Removes redundant attributes from tags if they contain default values:
-- `method="get"` from `<form>`
-- `type="text"` from `<input>`
-- `type="submit"` from `<button>`
-- `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">`
+#### 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:
 
-#### Options
-This module is disabled by default, change option to true to enable this module.
+- `html`
+- `head`
+- `body`
+- `colgroup`
+- `tbody`
 
-#### Side effects
-This module could break your styles or JS if you use selectors with attributes:
-```CSS
-form[method="get"] {
-    color: red;
-}
-```
+### 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
-<form method="get">
-    <input type="text">
-</form>
+<html><head><title>Title</title></head><body><p>Hi</p></body></html>
 ```
 
 Minified:
+
 ```html
-<form>
-    <input>
-</form>
+<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:
 
-### collapseBooleanAttributes
-Collapses boolean attributes (like `disabled`) to the minimized form.
-
-#### Options
-If your document uses [AMP](https://www.ampproject.org/), set the `amphtml` flag
-to collapse additonal, AMP-specific boolean attributes:
-```Json
-"collapseBooleanAttributes": {
-    "amphtml": true
-}
-```
+- `html`
+- `head`
+- `body`
+- `colgroup`
+- `tbody`
 
-#### Side effects
-This module could break your styles or JS if you use selectors with attributes:
-```CSS
-button[disabled="disabled"] {
-    color: red;
-}
-```
+### 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
-<button disabled="disabled">click</button>
-<script defer=""></script>
+<div class="foo" title="hello world"></div>
 ```
 
 Minified:
 ```html
-<button disabled>click</button>
-<script defer></script>
+<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.
+
+
+## `<style>`, `<script>` and `<svg>` Tags
 ### mergeStyles
 Merges multiple `<style>` with the same `media` and `type` into one tag.
 `<style scoped>...</style>` are skipped.
@@ -597,242 +564,292 @@ Minified:
 ```
 
 
-### custom
-It's also possible to pass custom modules in the minifier.
-As a function:
-```js
-const options = {
-    custom: function (tree, options) {
-        // Some minification
-        return tree;
-    }
-};
+### minifyCss
+Minifies CSS with [cssnano](http://cssnano.co/) inside `<style>` tags and `style` attributes.
+
+You have to install `cssnano` and `postcss` in order to use this feature:
+
+```bash
+npm install --save-dev cssnano postcss
+# if you prefer yarn
+# yarn add --dev cssnano postcss
+# if you prefer pnpm
+# pnpm install --save-dev cssnano postcss
 ```
 
-Or as a list of functions:
+#### Options
+See [the documentation of cssnano](http://cssnano.co/docs/optimisations/) for all supported optimizations.
+By default CSS is minified with preset `default`, which shouldn't have any side-effects.
+
+To use another preset or disabled some optimizations pass options to `minifyCss` module:
 ```js
-const options = {
-    custom: [
-        function (tree, options) {
-            // Some minification
-            return tree;
-        },
+htmlnano.process(html, {
+    minifyCss: {
+        preset: ['default', {
+            discardComments: {
+                removeAll: true,
+            },
+        }]
+    }
+});
+```
 
-        function (tree, options) {
-            // Some other minification
-            return tree;
+#### Example
+Source:
+```html
+<div>
+    <style>
+        h1 {
+            margin: 10px 10px 10px 10px;
+            color: #ff0000;
         }
-    ]
-};
+    </style>
+</div>
 ```
 
-`options` is an object with all options that were passed to the plugin.
+Minified:
+```html
+<div>
+    <style>h1{margin:10px;color:red}</style>
+</div>
+```
 
-### 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.
+### minifyJs
+Minifies JS using [Terser](https://github.com/fabiosantoscode/terser) inside `<script>` tags.
 
-#### Options
+You have to install `terser` in order to use this feature:
 
-- `alphabetical`: Default option. Sort attribute values in alphabetical order.
-- `frequency`: Sort attribute values by frequency.
+```bash
+npm install --save-dev terser
+# if you prefer yarn
+# yarn add --dev terser
+# if you prefer pnpm
+# pnpm install --save-dev terser
+```
+
+#### Options
+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
 
-**alphabetical**
 
+#### Example
 Source:
 ```html
-<div class="foo baz bar">click</div>
+<div>
+    <script>
+        /* comment */
+        const foo = function () {
+
+        };
+    </script>
+</div>
 ```
 
-Processed:
+Minified:
 ```html
-<div class="bar baz foo">click</div>
+<div>
+    <script>const foo=function(){};</script>
+</div>
 ```
 
-**frequency**
 
+### minifyJson
+Minifies JSON inside `<script type="application/json"></script>`.
+
+#### Example
 Source:
 ```html
-<div class="foo baz bar"></div><div class="bar foo"></div>
+<script type="application/json">
+{
+    "user": "me"
+}
+</script>
 ```
 
-Processed:
+Minified:
 ```html
-<div class="foo bar baz"></div><div class="foo bar"></div>
+<script type="application/json">{"user":"me"}</script>
 ```
 
-### 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.
+### minifySvg
+Minifies SVG inside `<svg>` tags using [SVGO](https://github.com/svg/svgo/).
 
 #### Options
-
-- `alphabetical`: Default option. Sort attributes in alphabetical order.
-- `frequency`: Sort attributes by frequency.
+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: [
+            {
+                name: 'preset-default',
+                params: {
+                    overrides: {
+                        builtinPluginName: {
+                            optionName: 'optionValue'
+                        },
+                    },
+                },
+            }
+        ]
+    }
+});
+```
 
 #### 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">
-```
+<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
+    <rect width="100%" height="100%" fill="red" />
 
-**frequency**
+    <circle cx="150" cy="100" r="80" fill="green" />
 
-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">
+    <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
+</svg>`
 ```
 
-Processed:
+Minified:
 ```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">
+<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>
 ```
 
-### minifyUrls
-Convert absolute URL to relative URL using [relateurl](https://www.npmjs.com/package/relateurl).
+### removeUnusedCss
 
-You have to install `relateurl`, `terser` and `srcset` in order to use this feature:
+Removes unused CSS inside `<style>` tags with either [uncss](https://github.com/uncss/uncss)
+or [PurgeCSS](https://github.com/FullHuman/purgecss).
+
+#### With uncss
+
+You have to install `uncss` in order to use this feature:
 
 ```bash
-npm install --save-dev relateurl terser srcset
+npm install --save-dev uncss
 # if you prefer yarn
-# yarn add --dev relateurl terser srcset
+# yarn add --dev uncss
 # if you prefer pnpm
-# pnpm install --save-dev relateurl terser srcset
+# pnpm install --save-dev uncss
 ```
 
-#### Options
-
-The base URL to resolve against. Support `String` & `URL`.
-
-```js
-htmlnano.process(html, {
-    minifyUrls: 'https://example.com' // Valid configuration
-});
-```
+You can also use a mainted fork [@novaatwarren/uncss](https://www.npmjs.com/package/@novaatwarren/uncss) instead.
 
-```js
-htmlnano.process(html, {
-    minifyUrls: new URL('https://example.com') // Valid configuration
-});
-```
 
-```js
-htmlnano.process(html, {
-    minifyUrls: false // The module will be disabled
-});
-```
+##### 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, {
-    minifyUrls: true // Invalid configuration, the module will be disabled
+    removeUnusedCss: {
+        ignore: ['.do-not-remove']
+    }
 });
 ```
 
-#### Example
-
-**Basic Usage**
-
-Configuration:
+The following uncss options are ignored if passed to the module:
 
-```js
-htmlnano.process(html, {
-    minifyUrls: 'https://example.com'
-});
-```
+-   `stylesheets`
+-   `ignoreSheets`
+-   `raw`
 
-Source:
+#### With PurgeCSS
 
-```html
-<a href="https://example.com/foo/bar/baz">bar</a>
-```
+Use PurgeCSS instead of uncss by adding `tool: 'purgeCSS'` to the options.
 
-Minified:
+You have to install `purgecss` in order to use this feature:
 
-```html
-<a href="foo/bar/baz">bar</a>
+```bash
+npm install --save-dev purgecss
+# if you prefer yarn
+# yarn add --dev purgecss
+# if you prefer pnpm
+# pnpm install --save-dev purgecss
 ```
 
-**With sub-directory**
+##### Options
 
-Configuration:
+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, {
-    minifyUrls: 'https://example.com/foo/baz/'
+    removeUnusedCss: {
+        tool: 'purgeCSS',
+        safelist: ['.do-not-remove']
+    }
 });
 ```
 
-Source:
-
-```html
-<a href="https://example.com/foo/bar">bar</a>
-```
-
-Minified:
-
-```html
-<a href="../bar">bar</a>
-```
+The following PurgeCSS options are ignored if passed to the module:
 
-### 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).
+-   `content`
+-   `css`
+-   `extractors`
 
 #### Example
-
 Source:
-
 ```html
-<html><head><title>Title</title></head><body><p>Hi</p></body></html>
+<div class="b">
+    <style>
+        .a {
+            margin: 10px 10px 10px 10px;
+        }
+        .b {
+            color: #ff0000;
+        }
+    </style>
+</div>
 ```
 
-Minified:
-
+Optimized:
 ```html
-<title>Title</title><p>Hi</p>
+<div class="b">
+    <style>
+        .b {
+            color: #ff0000;
+        }
+    </style>
+</div>
 ```
 
-#### 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`
-
-### normalizeAttributeValues
-
-Normalize casing of attribute values.
-
-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.
-
-#### Example
-
-Source:
+## Miscellaneous
 
-```html
-<form method="GET"></form>
+### custom
+It's also possible to pass custom modules in the minifier.
+As a function:
+```js
+const options = {
+    custom: function (tree, options) {
+        // Some minification
+        return tree;
+    }
+};
 ```
 
-Minified:
+Or as a list of functions:
+```js
+const options = {
+    custom: [
+        function (tree, options) {
+            // Some minification
+            return tree;
+        },
 
-```html
-<form method="get"></form>
+        function (tree, options) {
+            // Some other minification
+            return tree;
+        }
+    ]
+};
 ```
+
+htmlnano's options are passed to your custom plugin by the second parameter `options`.