htmlnano 2.1.1 → 2.1.3

package/README.md

@@ -2,21 +2,62 @@
 [![npm version](https://badge.fury.io/js/htmlnano.svg)](http://badge.fury.io/js/htmlnano)
 ![CI](https://github.com/posthtml/htmlnano/actions/workflows/ci.yml/badge.svg)
 
-Modular HTML minifier, built on top of the [PostHTML](https://github.com/posthtml/posthtml). Inspired by [cssnano](http://cssnano.co/).
+Modular HTML minifier, built on top of the [PostHTML](https://github.com/posthtml/posthtml). Inspired by [cssnano](https://github.com/cssnano/cssnano).
 
-## [Benchmark](https://github.com/maltsev/html-minifiers-benchmark/blob/master/README.md)
-[html-minifier-terser@6.0.2]: https://www.npmjs.com/package/html-minifier-terser
-[htmlnano@2.0.0]: https://www.npmjs.com/package/htmlnano
+## Benchmarks
 
-| Website | Source (KB) | [html-minifier-terser@6.0.2] | [htmlnano@2.0.0] |
-|---------|------------:|----------------:|-----------:|
-| [stackoverflow.blog](https://stackoverflow.blog/) | 90 | 82 | 76 |
-| [github.com](https://github.com/) | 232 | 203 | 173 |
-| [en.wikipedia.org](https://en.wikipedia.org/wiki/Main_Page) | 81 | 76 | 75 |
-| [npmjs.com](https://www.npmjs.com/features) | 43 | 40 | 38 |
-| [tc39.es](https://tc39.es/ecma262/) | 6001 | 5465 | 5459 |
-| **Avg. minify rate** | 0% | **9%** | **13%** |
+[html-minifier-terser]: https://www.npmjs.com/package/html-minifier-terser/v/7.2.0
+[html-minifier-next]: https://www.npmjs.com/package/html-minifier-next/v/1.1.5
+[htmlnano]: https://www.npmjs.com/package/htmlnano/v/2.1.2
 
+| Website                                                     | Source (KB) | [html-minifier-terser] | [html-minifier-next] | [htmlnano] |
+| ----------------------------------------------------------- | ----------: | ---------------------: | -------------------: | ---------: |
+| [stackoverflow.blog](https://stackoverflow.blog/)           |         342 |                   1.7% |                 1.7% |       4.1% |
+| [github.com](https://github.com/)                           |         541 |                   3.7% |                 3.7% |      18.1% |
+| [en.wikipedia.org](https://en.wikipedia.org/wiki/Main_Page) |         218 |                   4.6% |                 4.6% |       5.0% |
+| [npmjs.com](https://www.npmjs.com/package/eslint)           |         459 |                   0.5% |                 0.5% |       0.9% |
+| [tc39.es](https://tc39.es/ecma262/)                         |        7198 |                   8.6% |                 8.6% |       8.7% |
+| [reddit.com](https://reddit.com/)                           |         539 |                   6.1% |                 6.1% |       6.9% |
+| [apple.com](https://www.apple.com/)                         |         190 |                   7.6% |                 7.6% |      12.3% |
+| [w3.org](https://www.w3.org/)                               |          48 |                  19.0% |                19.0% |      23.2% |
+| [weather.com](https://weather.com)                          |        1823 |                   0.2% |                 0.2% |      13.1% |
+| **Avg. minify rate**                                        |          0% |               **5.8%** |             **5.8%** |  **10.3%** |
+
+Latest benchmarks: https://github.com/maltsev/html-minifiers-benchmark (updated daily).
 
 ## Documentation
 https://htmlnano.netlify.app
+
+
+## Usage
+
+```bash
+npm install htmlnano
+```
+
+```js
+const htmlnano = require('htmlnano');
+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)
+    // "postHtmlOptions" arg might be skipped
+    .process(html, options, preset, postHtmlOptions)
+    .then(function (result) {
+        // result.html is minified
+    })
+    .catch(function (err) {
+        console.error(err);
+    });
+```
+
+More usage examples (PostHTML, Gulp, Webpack): https://htmlnano.netlify.app/next/usage

package/dist/_modules/collapseAttributeWhitespace.d.mts

@@ -0,0 +1,57 @@
+import PostHTML from 'posthtml';
+import { MinifyOptions } from 'terser';
+import { Options } from 'cssnano';
+import { Config } from 'svgo';
+
+type PostHTMLTreeLike = [PostHTML.Node] & PostHTML.NodeAPI & {
+    options?: {
+        quoteAllAttributes?: boolean | undefined;
+    } | undefined;
+    render(): string;
+    render(node: PostHTML.Node | PostHTMLTreeLike, renderOptions?: any): string;
+};
+type MaybeArray<T> = T | Array<T>;
+type PostHTMLNodeLike = PostHTML.Node | string;
+interface HtmlnanoOptions {
+    skipConfigLoading?: boolean;
+    skipInternalWarnings?: boolean;
+    collapseAttributeWhitespace?: boolean;
+    collapseBooleanAttributes?: {
+        amphtml?: boolean;
+    };
+    collapseWhitespace?: 'conservative' | 'all' | 'aggressive';
+    custom?: MaybeArray<(tree: PostHTMLTreeLike, options?: any) => (PostHTML.Node | PostHTMLTreeLike)>;
+    deduplicateAttributeValues?: boolean;
+    minifyUrls?: URL | string | false;
+    mergeStyles?: boolean;
+    mergeScripts?: boolean;
+    minifyCss?: Options | boolean;
+    minifyConditionalComments?: boolean;
+    minifyJs?: MinifyOptions | boolean;
+    minifyJson?: boolean;
+    minifySvg?: Config | boolean;
+    normalizeAttributeValues?: boolean;
+    removeAttributeQuotes?: boolean;
+    removeComments?: boolean | 'safe' | 'all' | RegExp | ((comment: string) => boolean);
+    removeEmptyAttributes?: boolean;
+    removeRedundantAttributes?: boolean;
+    removeOptionalTags?: boolean;
+    removeUnusedCss?: boolean;
+    sortAttributes?: boolean | 'alphabetical' | 'frequency';
+    sortAttributesWithLists?: boolean | 'alphabetical' | 'frequency';
+}
+type HtmlnanoModuleAttrsHandler = (attrs: Record<string, string | boolean | void>, node: PostHTML.Node) => Record<string, string | boolean | void>;
+type HtmlnanoModuleContentHandler = (content: Array<PostHTMLNodeLike>, node: PostHTML.Node) => MaybeArray<PostHTMLNodeLike>;
+type HtmlnanoModuleNodeHandler = (node: PostHTMLNodeLike) => PostHTML.Node | string;
+type OptionalOptions<T> = T extends boolean | string | Function | number | null | undefined ? T : T extends object ? Partial<T> : T;
+type HtmlnanoModule<Options = any> = {
+    onAttrs?: (options: Partial<HtmlnanoOptions>, moduleOptions: OptionalOptions<Options>) => HtmlnanoModuleAttrsHandler;
+    onContent?: (options: Partial<HtmlnanoOptions>, moduleOptions: OptionalOptions<Options>) => HtmlnanoModuleContentHandler;
+    onNode?: (options: Partial<HtmlnanoOptions>, moduleOptions: OptionalOptions<Options>) => HtmlnanoModuleNodeHandler;
+    default?: (tree: PostHTMLTreeLike, options: Partial<HtmlnanoOptions>, moduleOptions: OptionalOptions<Options>) => PostHTMLTreeLike | Promise<PostHTMLTreeLike>;
+};
+
+declare const attributesWithLists: Set<string>;
+declare const mod: HtmlnanoModule;
+
+export { attributesWithLists, mod as default };

package/dist/_modules/collapseAttributeWhitespace.d.ts

@@ -0,0 +1,57 @@
+import PostHTML from 'posthtml';
+import { MinifyOptions } from 'terser';
+import { Options } from 'cssnano';
+import { Config } from 'svgo';
+
+type PostHTMLTreeLike = [PostHTML.Node] & PostHTML.NodeAPI & {
+    options?: {
+        quoteAllAttributes?: boolean | undefined;
+    } | undefined;
+    render(): string;
+    render(node: PostHTML.Node | PostHTMLTreeLike, renderOptions?: any): string;
+};
+type MaybeArray<T> = T | Array<T>;
+type PostHTMLNodeLike = PostHTML.Node | string;
+interface HtmlnanoOptions {
+    skipConfigLoading?: boolean;
+    skipInternalWarnings?: boolean;
+    collapseAttributeWhitespace?: boolean;
+    collapseBooleanAttributes?: {
+        amphtml?: boolean;
+    };
+    collapseWhitespace?: 'conservative' | 'all' | 'aggressive';
+    custom?: MaybeArray<(tree: PostHTMLTreeLike, options?: any) => (PostHTML.Node | PostHTMLTreeLike)>;
+    deduplicateAttributeValues?: boolean;
+    minifyUrls?: URL | string | false;
+    mergeStyles?: boolean;
+    mergeScripts?: boolean;
+    minifyCss?: Options | boolean;
+    minifyConditionalComments?: boolean;
+    minifyJs?: MinifyOptions | boolean;
+    minifyJson?: boolean;
+    minifySvg?: Config | boolean;
+    normalizeAttributeValues?: boolean;
+    removeAttributeQuotes?: boolean;
+    removeComments?: boolean | 'safe' | 'all' | RegExp | ((comment: string) => boolean);
+    removeEmptyAttributes?: boolean;
+    removeRedundantAttributes?: boolean;
+    removeOptionalTags?: boolean;
+    removeUnusedCss?: boolean;
+    sortAttributes?: boolean | 'alphabetical' | 'frequency';
+    sortAttributesWithLists?: boolean | 'alphabetical' | 'frequency';
+}
+type HtmlnanoModuleAttrsHandler = (attrs: Record<string, string | boolean | void>, node: PostHTML.Node) => Record<string, string | boolean | void>;
+type HtmlnanoModuleContentHandler = (content: Array<PostHTMLNodeLike>, node: PostHTML.Node) => MaybeArray<PostHTMLNodeLike>;
+type HtmlnanoModuleNodeHandler = (node: PostHTMLNodeLike) => PostHTML.Node | string;
+type OptionalOptions<T> = T extends boolean | string | Function | number | null | undefined ? T : T extends object ? Partial<T> : T;
+type HtmlnanoModule<Options = any> = {
+    onAttrs?: (options: Partial<HtmlnanoOptions>, moduleOptions: OptionalOptions<Options>) => HtmlnanoModuleAttrsHandler;
+    onContent?: (options: Partial<HtmlnanoOptions>, moduleOptions: OptionalOptions<Options>) => HtmlnanoModuleContentHandler;
+    onNode?: (options: Partial<HtmlnanoOptions>, moduleOptions: OptionalOptions<Options>) => HtmlnanoModuleNodeHandler;
+    default?: (tree: PostHTMLTreeLike, options: Partial<HtmlnanoOptions>, moduleOptions: OptionalOptions<Options>) => PostHTMLTreeLike | Promise<PostHTMLTreeLike>;
+};
+
+declare const attributesWithLists: Set<string>;
+declare const mod: HtmlnanoModule;
+
+export { attributesWithLists, mod as default };

package/dist/_modules/collapseAttributeWhitespace.js

@@ -0,0 +1,296 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var helpers_js = require('../helpers.js');
+
+const attributesWithLists = new Set([
+    'class',
+    'dropzone',
+    'rel',
+    'ping',
+    'sandbox',
+    /**
+     * https://github.com/posthtml/htmlnano/issues/180
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-sizes
+     *
+     * "sizes" of <img> should not be modified, while "sizes" of <link> will only have one entry in most cases.
+     */ // 'sizes', // link
+    'headers' // td, th
+]);
+/** empty set means the attribute is alwasy trimmable */ const attributesWithSingleValue = new Map([
+    [
+        'accept',
+        new Set([
+            'input'
+        ])
+    ],
+    [
+        'action',
+        new Set([
+            'form'
+        ])
+    ],
+    [
+        'accesskey',
+        new Set()
+    ],
+    [
+        'accept-charset',
+        new Set([
+            'form'
+        ])
+    ],
+    [
+        'cite',
+        new Set([
+            'blockquote',
+            'del',
+            'ins',
+            'q'
+        ])
+    ],
+    [
+        'cols',
+        new Set([
+            'textarea'
+        ])
+    ],
+    [
+        'colspan',
+        new Set([
+            'td',
+            'th'
+        ])
+    ],
+    [
+        'data',
+        new Set([
+            'object'
+        ])
+    ],
+    [
+        'dropzone',
+        new Set()
+    ],
+    [
+        'formaction',
+        new Set([
+            'button',
+            'input'
+        ])
+    ],
+    [
+        'height',
+        new Set([
+            'canvas',
+            'embed',
+            'iframe',
+            'img',
+            'input',
+            'object',
+            'video'
+        ])
+    ],
+    [
+        'high',
+        new Set([
+            'meter'
+        ])
+    ],
+    [
+        'href',
+        new Set([
+            'a',
+            'area',
+            'base',
+            'link'
+        ])
+    ],
+    [
+        'itemid',
+        new Set()
+    ],
+    [
+        'low',
+        new Set([
+            'meter'
+        ])
+    ],
+    [
+        'manifest',
+        new Set([
+            'html'
+        ])
+    ],
+    [
+        'max',
+        new Set([
+            'meter',
+            'progress'
+        ])
+    ],
+    [
+        'maxlength',
+        new Set([
+            'input',
+            'textarea'
+        ])
+    ],
+    [
+        'media',
+        new Set([
+            'source'
+        ])
+    ],
+    [
+        'min',
+        new Set([
+            'meter'
+        ])
+    ],
+    [
+        'minlength',
+        new Set([
+            'input',
+            'textarea'
+        ])
+    ],
+    [
+        'optimum',
+        new Set([
+            'meter'
+        ])
+    ],
+    [
+        'ping',
+        new Set([
+            'a',
+            'area'
+        ])
+    ],
+    [
+        'poster',
+        new Set([
+            'video'
+        ])
+    ],
+    [
+        'profile',
+        new Set([
+            'head'
+        ])
+    ],
+    [
+        'rows',
+        new Set([
+            'textarea'
+        ])
+    ],
+    [
+        'rowspan',
+        new Set([
+            'td',
+            'th'
+        ])
+    ],
+    [
+        'size',
+        new Set([
+            'input',
+            'select'
+        ])
+    ],
+    [
+        'span',
+        new Set([
+            'col',
+            'colgroup'
+        ])
+    ],
+    [
+        'src',
+        new Set([
+            'audio',
+            'embed',
+            'iframe',
+            'img',
+            'input',
+            'script',
+            'source',
+            'track',
+            'video'
+        ])
+    ],
+    [
+        'start',
+        new Set([
+            'ol'
+        ])
+    ],
+    [
+        'step',
+        new Set([
+            'input'
+        ])
+    ],
+    [
+        'style',
+        new Set()
+    ],
+    [
+        'tabindex',
+        new Set()
+    ],
+    [
+        'usemap',
+        new Set([
+            'img',
+            'object'
+        ])
+    ],
+    [
+        'value',
+        new Set([
+            'li',
+            'meter',
+            'progress'
+        ])
+    ],
+    [
+        'width',
+        new Set([
+            'canvas',
+            'embed',
+            'iframe',
+            'img',
+            'input',
+            'object',
+            'video'
+        ])
+    ]
+]);
+/** Collapse whitespaces inside list-like attributes (e.g. class, rel) */ const mod = {
+    onAttrs () {
+        return (attrs, node)=>{
+            const newAttrs = attrs;
+            Object.entries(attrs).forEach(([attrName, attrValue])=>{
+                if (typeof attrValue !== 'string') return;
+                if (attributesWithLists.has(attrName)) {
+                    newAttrs[attrName] = attrValue.replace(/\s+/g, ' ').trim();
+                    return;
+                }
+                if (helpers_js.isEventHandler(attrName)) {
+                    newAttrs[attrName] = attrValue.trim();
+                } else if (node.tag && attributesWithSingleValue.has(attrName)) {
+                    const tagSet = attributesWithSingleValue.get(attrName);
+                    if (tagSet.size === 0 || tagSet.has(node.tag)) {
+                        newAttrs[attrName] = attrValue.trim();
+                    }
+                }
+            });
+            return newAttrs;
+        };
+    }
+};
+
+exports.attributesWithLists = attributesWithLists;
+exports.default = mod;