### Install Dependencies

Source: https://github.com/maltsev/htmlnano/blob/master/docs/README.md

Installs project dependencies using npm.

```bash
npm install
```

--------------------------------

### Install htmlnano

Source: https://github.com/maltsev/htmlnano/blob/master/README.md

Install htmlnano using npm. This is the first step before using it in your project.

```bash
npm install htmlnano
```

--------------------------------

### Install htmlnano Dependencies

Source: https://context7.com/maltsev/htmlnano/llms.txt

Install necessary peer dependencies for minifyUrls functionality.

```bash
npm install --save-dev relateurl terser srcset
```

--------------------------------

### Start Local Development Server

Source: https://github.com/maltsev/htmlnano/blob/master/docs/README.md

Starts a local development server for live preview. Changes are reflected without server restart.

```bash
npm start
```

--------------------------------

### Install cssnano and postcss

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Install cssnano and postcss as development dependencies to use the minifyCss feature.

```bash
npm install --save-dev cssnano postcss
```

```bash
yarn add --dev cssnano postcss
```

```bash
pnpm install --save-dev cssnano postcss
```

--------------------------------

### Install htmlnano dependencies

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Installs necessary development dependencies including relateurl, terser, and srcset using npm, yarn, or pnpm.

```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
```

--------------------------------

### Install PurgeCSS or uncss

Source: https://context7.com/maltsev/htmlnano/llms.txt

Install PurgeCSS for removing unused CSS, or uncss as an alternative (not recommended).

```bash
npm install --save-dev purgecss
# or for uncss (not recommended)
npm install --save-dev uncss
```

--------------------------------

### Create a Custom Preset by Extending a Built-in Preset

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/040-presets.md

This example shows how to create a new preset by extending an existing one (e.g., 'safe') and adding or modifying specific configurations like 'mergeStyles' and 'minifyCss'.

```javascript
const htmlnano = require('htmlnano');
const emailPreset = {
    ...htmlnano.presets.safe,
    mergeStyles: true,
    minifyCss: {
        safe: true
    }
};

htmlnano.process(html, { removeComments: false }, emailPreset)
    .then((result) => {
        // result.html is minified
    })
    .catch((err) => {
        console.error(err);
    });

```

--------------------------------

### Install uncss for htmlnano

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Commands to install the uncss dependency for the removeUnusedCss feature.

```bash
npm install --save-dev uncss
# if you prefer yarn
# yarn add --dev uncss
# if you prefer pnpm
# pnpm install --save-dev uncss
```

--------------------------------

### Merge Styles Example

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Shows how multiple style tags are merged based on media and type attributes.

```html
<style>h1 { color: red }</style>
<style media="print">div { color: blue }</style>

<style type="text/css" media="print">a {}</style>
<style>div { font-size: 20px }</style>
```

```html
<style>h1 { color: red } div { font-size: 20px }</style>
<style media="print">div { color: blue } a {}</style>
```

--------------------------------

### Install PurgeCSS for htmlnano

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Commands to install the PurgeCSS dependency for the removeUnusedCss feature.

```bash
npm install --save-dev purgecss
# if you prefer yarn
# yarn add --dev purgecss
# if you prefer pnpm
# pnpm install --save-dev purgecss
```

--------------------------------

### Install Terser for JavaScript Minification

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Install Terser as a development dependency to enable the minifyJs feature.

```bash
npm install --save-dev terser
```

```bash
yarn add --dev terser
```

```bash
pnpm install --save-dev terser
```

--------------------------------

### SVG Minification Example

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Demonstrates the transformation of standard SVG markup into a minified version.

```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>
```

```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>
```

--------------------------------

### Example of collapseBooleanAttributes

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Demonstrates how boolean attributes, empty string attributes, missing value defaults, and specific crossorigin values are collapsed.

```html
<button disabled="disabled">click</button>
<script defer=""></script>
<a href=""></a>
<script src="example-framework.js" crossorigin="anonymous"></script>
<video preload="auto"></video>
<a-entity visible="false"></a-entity>
```

```html
<button disabled>click</button>
<script defer></script>
<a href></a>
<script src="example-framework.js" crossorigin></script>
<video preload></video>
<a-entity visible="false"></a-entity>
```

--------------------------------

### Example of minifyAttributes

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Illustrates minification of 'meta[http-equiv="refresh"]' attributes by removing 'url=' prefixes and trimming whitespace.

```html
<meta http-equiv="refresh" content="5; url=">
<meta http-equiv="refresh" content="5; url=http://example.com/">
```

```html
<meta http-equiv="refresh" content="5">
<meta http-equiv="refresh" content="5; http://example.com/">
```

--------------------------------

### Remove Optional Tags Example

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Demonstrates the removal of optional HTML tags like html, head, and body.

```html
<html><head><title>Title</title></head><body><p>Hi</p></body></html>
```

```html
<title>Title</title><p>Hi</p>
```

--------------------------------

### CSS Removal Example

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Shows the removal of unused CSS rules within a style block.

```html
<div class="b">
    <style>
        .a {
            margin: 10px 10px 10px 10px;
        }
        .b {
            color: #ff0000;
        }
    </style>
</div>
```

```html
<div class="b">
    <style>
        .b {
            color: #ff0000;
        }
    </style>
</div>
```

--------------------------------

### Configure htmlnano for Minifying SVG

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Example of configuring htmlnano to minify SVG content using SVGO with custom plugins and options.

```javascript
htmlnano.process(html, {
    minifySvg: {
        plugins: [
            {
                name: 'preset-default',
                params: {
                    overrides: {
                        builtinPluginName: {
                            optionName: 'optionValue'
                        },
                    },
                },
            }
        ]
    }
});
```

--------------------------------

### Extend Default htmlnano Template Minification Rules

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Example of extending the default htmlnano template minification rules by spreading them and adding a new rule.

```javascript
import { modules } from 'htmlnano';

htmlnano.process(html, {
    minifyHtmlTemplate: [
        ...modules.minifyHtmlTemplate.defaultRules,
        { tag: 'script', attrs: { id: 'my-template' } }
    ]
});
```

--------------------------------

### Remove Attribute Quotes Example

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Shows how attribute quotes are removed when possible.

```html
<div class="foo" title="hello world"></div>
```

```html
<div class=foo title="hello world"></div>
```

--------------------------------

### Example of deduplicateAttributeValues

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Shows how duplicate values in list-like attributes such as 'rel' and 'class' are removed, preserving whitespace where possible.

```html
<link rel="nofollow NoFoLlOw noopener">
<a class="foo  foo   bar">click</a>
```

```html
<link rel="nofollow noopener">
<a class="foo    bar">click</a>
```

--------------------------------

### Integrate htmlnano as a PostHTML Plugin

Source: https://context7.com/maltsev/htmlnano/llms.txt

Use htmlnano() as a PostHTML plugin to combine it with other PostHTML transformations in a pipeline. This example shows basic usage with custom options for comment removal and whitespace collapsing.

```javascript
const posthtml = require('posthtml');
const htmlnano = require('htmlnano');

const html = `
<div class="  foo   bar  ">
    <p>Hello   World!</p>
    <!-- comment to remove -->
    <style>
        .foo { color: red; }
    </style>
</div>
`;

const options = {
    removeComments: 'all',
    collapseWhitespace: 'conservative',
    minifyCss: { preset: 'default' }
};

const posthtmlPlugins = [
    // Add other PostHTML plugins here
    htmlnano(options)
];

posthtml(posthtmlPlugins)
    .process(html)
    .then((result) => {
        console.log(result.html);
        // <div class="foo bar"> <p>Hello World!</p> <style>.foo{color:red}</style> </div>
    })
    .catch((err) => {
        console.error(err);
    });
```

--------------------------------

### Configure htmlnano for Minifying HTML Templates

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Example of configuring htmlnano to minify HTML within specific template tags using custom rules.

```javascript
htmlnano.process(html, {
    minifyHtmlTemplate: [
        { tag: 'template', attrs: { id: 'my-template' } },
        { tag: 'script', attrs: { type: 'text/x-handlebars-template' } },
    ]
});
```

--------------------------------

### Define configuration in a JSON file

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/030-config.md

Use a preset and specific options within a configuration file like .htmlnanorc.json.

```json
{
    "preset": "max",
    "collapseWhitespace": "conservative",
    "removeComments": false
}
```

--------------------------------

### Build Static Website

Source: https://github.com/maltsev/htmlnano/blob/master/docs/README.md

Generates static content for deployment. The output is placed in the 'build' directory.

```bash
npm build
```

--------------------------------

### htmlnano CLI Help

Source: https://github.com/maltsev/htmlnano/blob/master/README.md

View the help information for the htmlnano command-line interface tool. This shows available options for direct usage.

```bash
node_modules/.bin/htmlnano --help
```

--------------------------------

### Use htmlnano via CLI

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/020-usage.md

Execute minification directly from the command line or using a configuration file.

```bash
npx htmlnano --help
```

```bash
echo '{"collapseWhitespace": "all", "removeComments": "all"}' > config.json
npx htmlnano test.html -c config.json
```

--------------------------------

### Configure htmlnano via files

Source: https://context7.com/maltsev/htmlnano/llms.txt

Use .htmlnanorc.json, htmlnano.config.js, or package.json to define project-wide minification settings.

```json
// .htmlnanorc.json
{
    "preset": "max",
    "collapseWhitespace": "aggressive",
    "removeComments": "all",
    "minifyCss": {
        "preset": "default"
    },
    "minifyJs": {},
    "skipInternalWarnings": true
}
```

```javascript
// htmlnano.config.js
module.exports = {
    preset: 'safe',
    collapseWhitespace: 'conservative',
    removeComments: (comment) => !comment.includes('keep'),
    custom: (tree) => {
        // Custom transformation
        return tree;
    }
};
```

```json
// package.json
{
    "name": "my-project",
    "htmlnano": {
        "preset": "safe",
        "collapseWhitespace": "aggressive"
    }
}
```

--------------------------------

### Use htmlnano via Command Line Interface

Source: https://context7.com/maltsev/htmlnano/llms.txt

Execute minification tasks directly from the terminal using the CLI tool.

```bash
# Install htmlnano
npm install htmlnano

# Show help
npx htmlnano --help

# Minify from file to stdout
npx htmlnano input.html

# Minify with output file
npx htmlnano input.html -o output.html

# Use max preset for aggressive minification
npx htmlnano input.html -p max -o minified.html

# Use custom config file
echo '{"collapseWhitespace": "all", "removeComments": "all"}' > config.json
npx htmlnano input.html -c config.json -o output.html

# Pipe from stdin
echo '<div>   Hello   </div>' | npx htmlnano
# Output: <div> Hello </div>

# Available presets: safe (default), ampSafe, max
npx htmlnano input.html -p ampSafe -o amp-output.html
```

--------------------------------

### JavaScript API: htmlnano.loadConfig()

Source: https://context7.com/maltsev/htmlnano/llms.txt

Loads and merges configuration from cosmiconfig-supported files (e.g., .htmlnanorc.json, htmlnano.config.js, package.json). Returns a tuple of merged options and the resolved preset.

```APIDOC
## JavaScript API: htmlnano.loadConfig()

### Description
Loads and merges configuration from cosmiconfig-supported files (`.htmlnanorc.json`, `htmlnano.config.js`, `package.json`). Returns a tuple of merged options and the resolved preset.

### Method
`loadConfig([customOptions])`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
import { loadConfig, presets } from 'htmlnano';

// Load config from default locations (.htmlnanorc.json, htmlnano.config.js, etc.)
const [options, preset] = loadConfig();

// Load config with custom options (options override config file)
const [mergedOptions, mergedPreset] = loadConfig({
    collapseWhitespace: 'all',
    removeComments: 'all'
});

// Load from specific config file path
const [customOptions, customPreset] = loadConfig({
    configPath: './custom-config.json'
});

// Skip config file loading entirely
const [directOptions, directPreset] = loadConfig({
    skipConfigLoading: true,
    collapseWhitespace: 'conservative'
});

console.log('Merged options:', mergedOptions);
console.log('Preset:', preset === presets.safe ? 'safe' : 'other');
```

### Response
#### Success Response (200)
- **options** (object) - Merged configuration options.
- **preset** (object) - The resolved preset.

#### Response Example
```json
{
  "options": {
    "removeComments": "all",
    "collapseWhitespace": "conservative"
  },
  "preset": "safe"
}
```
```

--------------------------------

### Process HTML with Custom Options and No Preset

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/040-presets.md

Use this when you want to define all minification options manually without using any built-in presets. Pass an empty object as the preset argument.

```javascript
const htmlnano = require('htmlnano');
const options = {
    // Your options
};

htmlnano
    .process(html, options, {})
    .then(function (result) {
        // result.html is minified
    })
    .catch(function (err) {
        console.error(err);
    });

```

--------------------------------

### Define Custom Minification Modules

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Demonstrates how to pass custom minification functions or arrays of functions to the options object.

```js
const options = {
    custom: function (tree, options) {
        // Some minification
        return tree;
    }
};
```

```js
const options = {
    custom: [
        function (tree, options) {
            // Some minification
            return tree;
        },

        function (tree, options) {
            // Some other minification
            return tree;
        }
    ]
};
```

--------------------------------

### Specify a custom configuration path

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/030-config.md

Pass a specific file path to the process method using the configPath option.

```js
htmlnano.process(html, {
    configPath: 'config.json'
})
```

--------------------------------

### Process HTML with a Specific Preset (ES Modules)

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/040-presets.md

This demonstrates minifying HTML using ES module imports and an async function. It requires 'htmlnano' and the specific preset to be imported.

```javascript
import htmlnano from 'htmlnano';
import ampSafe from 'htmlnano/presets/ampSafe';

const result = await htmlnano.process(html, {}, ampSafe);

```

--------------------------------

### Run a Single Test

Source: https://github.com/maltsev/htmlnano/blob/master/AGENTS.md

Executes a specific test file using mocha after ensuring the project is built.

```bash
npm run build && npx mocha --timeout 5000 --require @swc-node/register --recursive --check-leaks --globals addresses "test/modules/minifyCss.ts"
```

--------------------------------

### Remove Redundant Attributes with htmlnano

Source: https://context7.com/maltsev/htmlnano/llms.txt

Removes attributes that match HTML default values. Disabled by default as it may break attribute selectors. Example shows removal of default 'method', 'type', 'type', 'media', 'loading', and 'decoding' attributes.

```javascript
import htmlnano from 'htmlnano';

const html = `
<form method="get">
    <input type="text">
    <button type="submit">Submit</button>
</form>
<script type="text/javascript"></script>
<style type="text/css" media="all"></style>
<img loading="eager" decoding="auto">
`;

// Enable removal of redundant attributes
const result = await htmlnano.process(html, { removeRedundantAttributes: true });
// Output: <form><input><button>Submit</button></form><script></script><style></style><img>
```

--------------------------------

### Integrate with Gulp

Source: https://context7.com/maltsev/htmlnano/llms.txt

Use gulp-posthtml to incorporate htmlnano into Gulp build pipelines.

```bash
npm install --save-dev gulp-posthtml
```

```javascript
const gulp = require('gulp');
const posthtml = require('gulp-posthtml');
const htmlnano = require('htmlnano');

const htmlnanoOptions = {
    removeComments: 'all',
    collapseWhitespace: 'aggressive',
    minifyCss: { preset: 'default' },
    minifyJs: {}
};

gulp.task('minify-html', function() {
    return gulp
        .src('./src/**/*.html')
        .pipe(posthtml([
            htmlnano(htmlnanoOptions)
        ]))
        .pipe(gulp.dest('./dist'));
});

gulp.task('default', gulp.series('minify-html'));
```

--------------------------------

### Normalize attribute values

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Demonstrates the normalization of attribute casing and application of default values.

```html
<form method="GET"></form>
<img loading="">
<button type="EXAMPLE"></button>
```

```html
<form method="get"></form>
<img loading="eager">
<button type="submit"></button>
```

--------------------------------

### Configure minifyUrls with a base URL (String)

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Sets the base URL for relative URL conversion using a string.

```js
htmlnano.process(html, {
    minifyUrls: 'https://example.com' // Valid configuration
});
```

--------------------------------

### Process HTML with a Specific Preset (CommonJS)

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/040-presets.md

Use this to minify HTML with a specific preset like 'ampSafe'. Ensure 'htmlnano' and the preset are required.

```javascript
const htmlnano = require('htmlnano');
const ampSafePreset = require('htmlnano').presets.ampSafe;

htmlnano.process(html, { collapseWhitespace: 'conservative' }, ampSafePreset)
    .then((result) => {
        // result.html is minified
    })
    .catch((err) => {
        console.error(err);
    });

```

--------------------------------

### Collapse Whitespace in HTML

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Demonstrates different whitespace collapsing strategies using the all, aggressive, and conservative modes.

```html
<div>
    hello  world!
    <a href="#">answer</a>
    <style>div  { color: red; }  </style>
    <main></main>
</div>
```

```html
<div>hello world!<a href="#">answer</a><style>div  { color: red; }  </style><main></main></div>
```

```html
<div>hello world! <a href="#">answer</a><style>div  { color: red; }  </style><main></main></div>
```

```html
<div> hello world! <a href="#">answer</a> <style>div  { color: red; }  </style> <main></main> </div>
```

--------------------------------

### Disable configuration file loading

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/030-config.md

Ignore all external configuration files by setting skipConfigLoading to true.

```js
htmlnano.process(html, {
    skipConfigLoading: true
})
```

--------------------------------

### Apply htmlnano Presets

Source: https://context7.com/maltsev/htmlnano/llms.txt

Configure minification levels using built-in presets or custom objects.

```javascript
import htmlnano, { presets } from 'htmlnano';

const html = `
<form method="GET">
    <input type="text" disabled="disabled">
    <button type="submit">Submit</button>
</form>
<!-- comment -->
<style>h1 { color: #ff0000; }</style>
`;

// Safe preset (default): conservative, non-breaking minification
const safeResult = await htmlnano.process(html, {}, presets.safe);

// AMP-safe preset: safe preset tailored for AMP pages
const ampResult = await htmlnano.process(html, {}, presets.ampSafe);

// Max preset: aggressive minification (may break some pages)
const maxResult = await htmlnano.process(html, {}, presets.max);

// Custom preset extending safe
const emailPreset = {
    ...presets.safe,
    mergeStyles: true,
    minifyCss: { preset: 'default' },
    collapseWhitespace: 'aggressive'
};
const emailResult = await htmlnano.process(html, {}, emailPreset);

// Empty preset for full control (all modules disabled)
const customResult = await htmlnano.process(html, {
    collapseWhitespace: 'all',
    removeComments: 'all'
}, {});

// Import presets directly
import safePreset from 'htmlnano/presets/safe';
import maxPreset from 'htmlnano/presets/max';
import ampSafePreset from 'htmlnano/presets/ampSafe';
```

--------------------------------

### Configure collapseWhitespace Module

Source: https://context7.com/maltsev/htmlnano/llms.txt

Control how whitespace is handled in HTML output using different modes.

```javascript
import htmlnano from 'htmlnano';

const html = `
<div>
    hello    world!
    <a href="#">link</a>
    <span>text</span>
</div>
`;

// Conservative (default): collapse to single space, preserve around inline elements
const conservative = await htmlnano.process(html, { collapseWhitespace: 'conservative' });
// Result: <div> hello world! <a href="#">link</a> <span>text</span> </div>

// Aggressive: trim around nodes when safe
const aggressive = await htmlnano.process(html, { collapseWhitespace: 'aggressive' });
// Result: <div>hello world! <a href="#">link</a> <span>text</span></div>

// All: most aggressive, may remove meaningful spacing
const all = await htmlnano.process(html, { collapseWhitespace: 'all' });
// Result: <div>hello world!<a href="#">link</a><span>text</span></div>
```

--------------------------------

### Load htmlnano Configuration

Source: https://context7.com/maltsev/htmlnano/llms.txt

Use htmlnano.loadConfig() to load and merge configuration from cosmiconfig-supported files. This function returns a tuple of merged options and the resolved preset. It can also load from a specific path or skip file loading.

```javascript
import { loadConfig, presets } from 'htmlnano';

// Load config from default locations (.htmlnanorc.json, htmlnano.config.js, etc.)
const [options, preset] = loadConfig();

// Load config with custom options (options override config file)
const [mergedOptions, mergedPreset] = loadConfig({
    collapseWhitespace: 'all',
    removeComments: 'all'
});

// Load from specific config file path
const [customOptions, customPreset] = loadConfig({
    configPath: './custom-config.json'
});

// Skip config file loading entirely
const [directOptions, directPreset] = loadConfig({
    skipConfigLoading: true,
    collapseWhitespace: 'conservative'
});

console.log('Merged options:', mergedOptions);
console.log('Preset:', preset === presets.safe ? 'safe' : 'other');
```

--------------------------------

### Configure minifyUrls with a base URL (URL object)

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Sets the base URL for relative URL conversion using a URL object.

```js
htmlnano.process(html, {
    minifyUrls: new URL('https://example.com') // Valid configuration
});
```

--------------------------------

### Configure minifyCss Options

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Configure minifyCss options to use a different preset or disable specific optimizations, such as discarding comments.

```javascript
htmlnano.process(html, {
    minifyCss: {
        preset: ['default', {
            discardComments: {
                removeAll: true,
            },
        }]
    }
});
```

--------------------------------

### Configure Webpack for Minification

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/020-usage.md

Integrate htmlnano into Webpack using the html-minimizer-webpack-plugin.

```sh
npm install html-minimizer-webpack-plugin --save-dev
```

```js
// webpack.config.js
const HtmlMinimizerWebpackPlugin = require('html-minimizer-webpack-plugin');
const htmlnano = require('htmlnano');

module.exports = {
    optimization: {
        minimize: true,
        minimizer: [
                // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`).
                // `...`,
                new HtmlMinimizerWebpackPlugin({
                    // Add HtmlMinimizerWebpackPlugin options here.
                    // test: /\.html(\?.*)?$/i,

                    // Use htmlnano as HtmlMinimizerWebpackPlugin's minimizer.
                    minify: htmlnano.htmlMinimizerWebpackPluginMinify,
                    minimizerOptions: {
                        // Add htmlnano options here.
                        removeComments: false,
                        collapseWhitespace: 'conservative'
                    }
                })
            ]
    }
}
```

--------------------------------

### Integrate with PostHTML

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/020-usage.md

Use htmlnano as a plugin within a PostHTML processing pipeline.

```js
const posthtml = require('posthtml');
const options = {
    removeComments: false,
    collapseWhitespace: 'conservative'
};
const posthtmlPlugins = [
    /* other PostHTML plugins */

    require('htmlnano')(options)
];

const posthtmlOptions = {
    // See PostHTML docs
};

posthtml(posthtmlPlugins)
    .process(html, posthtmlOptions)
    .then((result) => {
        // result.html is minified
    })
    .catch((err) => {
        console.error(err);
    });
```

--------------------------------

### Minify CSS with cssnano

Source: https://context7.com/maltsev/htmlnano/llms.txt

Minifies CSS within style tags and attributes. Requires cssnano and postcss as peer dependencies.

```bash
npm install --save-dev cssnano postcss
```

```javascript
import htmlnano from 'htmlnano';

const html = `
<style>
    h1 {
        margin: 10px 10px 10px 10px;
        color: #ff0000;
        /* comment */
    }
</style>
<div style="  padding:  20px  20px  "></div>
`;

// Enable with default cssnano preset
const result = await htmlnano.process(html, { minifyCss: true });
// Output: <style>h1{margin:10px;color:red}</style><div style="padding:20px"></div>

// Custom cssnano options
const customResult = await htmlnano.process(html, {
    minifyCss: {
        preset: ['default', {
            discardComments: { removeAll: true },
            normalizeWhitespace: true
        }]
    }
});

// Disable CSS minification
const noMinify = await htmlnano.process(html, { minifyCss: false });
```

--------------------------------

### Sort Attributes with htmlnano

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Sorts HTML attributes to improve gzip/brotli compression ratios.

```html
<input type="text" class="form-control" name="testInput" autofocus="" autocomplete="off" id="testId">
```

```html
<input autocomplete="off" autofocus="" class="form-control" id="testId" name="testInput" type="text">
```

```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">
```

```html
<input class="form-control" id="testId" type="text" name="testInput">
<a class="testClass" id="testId" href="#"></a>
<img class="cls" id="id2" alt="image" height="40" src="../images/image.png" width="20">
```

--------------------------------

### Process HTML with htmlnano JavaScript API

Source: https://context7.com/maltsev/htmlnano/llms.txt

Use htmlnano.process() to minify HTML strings. It accepts HTML content, optional module configuration, a preset, and PostHTML options. Returns a promise with the minified HTML.

```javascript
import htmlnano, { presets } from 'htmlnano';

const html = `
<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <style>
        h1 {
            color:    #ff0000;
            margin: 10px 10px 10px 10px;
        }
    </style>
</head>
<body>
    <!-- This is a comment -->
    <div class="container   main">
        <h1>Hello   World!</h1>
        <script>
            const message = "Hello";
            console.log(message);
        </script>
    </div>
</body>
</html>
`;

// Basic usage with default safe preset
const result = await htmlnano.process(html);
console.log(result.html);
// Output: minified HTML with comments removed, whitespace collapsed, CSS/JS minified

// With custom options
const options = {
    removeEmptyAttributes: false,
    collapseWhitespace: 'aggressive',
    removeComments: 'all'
};
const customResult = await htmlnano.process(html, options);

// With specific preset
const maxResult = await htmlnano.process(html, {}, presets.max);

// With PostHTML options
const postHtmlOptions = {
    sync: true,
    lowerCaseTags: true,
    quoteAllAttributes: false
};
const fullResult = await htmlnano.process(html, options, presets.safe, postHtmlOptions);
```

--------------------------------

### Invalid minifyUrls configuration

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

An invalid configuration for minifyUrls where 'true' is used; the module will be disabled.

```js
htmlnano.process(html, {
    minifyUrls: true // Invalid configuration, the module will be disabled
});
```

--------------------------------

### minifyCss

Source: https://context7.com/maltsev/htmlnano/llms.txt

Minifies CSS inside <style> tags and style attributes.

```APIDOC
## minifyCss

### Description
Minifies CSS inside <style> tags and style attributes using cssnano. Requires cssnano and postcss as peer dependencies.

### Parameters
#### Request Body
- **minifyCss** (boolean|object) - Optional - Set to true to use default cssnano preset, or provide an object for custom cssnano options.
```

--------------------------------

### Minify SVG with SVGO

Source: https://context7.com/maltsev/htmlnano/llms.txt

Minifies inline SVG elements. Requires svgo as a peer dependency.

```bash
npm install --save-dev svgo
```

```javascript
import htmlnano from 'htmlnano';

const html = `
<svg version="1.1" 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" fill="white">SVG</text>
</svg>
`;

// Enable with default SVGO options
const result = await htmlnano.process(html, { minifySvg: true });

// Custom SVGO options
const customResult = await htmlnano.process(html, {
    minifySvg: {
        plugins: [
            {
                name: 'preset-default',
                params: {
                    overrides: {
                        removeViewBox: false,
                        cleanupIds: false
                    }
                }
            }
        ]
    }
});
```

--------------------------------

### Integrate with Gulp

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/020-usage.md

Use htmlnano within a Gulp task using gulp-posthtml.

```bash
npm i -D gulp-posthtml
```

```js
const gulp = require('gulp');
const posthtml = require('gulp-posthtml');
const htmlnano = require('htmlnano');
const options = {
  removeComments: false
};

gulp.task('default', function () {
    return gulp
        .src('./index.html')
        .pipe(posthtml([
            // Add `htmlnano` as a final plugin
            htmlnano(options)
        ]))
        .pipe(gulp.dest('./build'));
});
```

--------------------------------

### JavaScript API: htmlnano.process()

Source: https://context7.com/maltsev/htmlnano/llms.txt

The primary method for minifying HTML strings. It accepts HTML content, optional module configuration, an optional preset, and PostHTML options. It returns a promise that resolves to an object containing the minified HTML.

```APIDOC
## JavaScript API: htmlnano.process()

### Description
The primary method for minifying HTML strings. Accepts HTML content, optional module configuration, an optional preset, and PostHTML options. Returns a promise resolving to an object with the minified HTML in the `html` property.

### Method
`htmlnano.process(html, [options], [preset], [postHtmlOptions])`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
import htmlnano, { presets } from 'htmlnano';

const html = `
<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <style>
        h1 {
            color:    #ff0000;
            margin: 10px 10px 10px 10px;
        }
    </style>
</head>
<body>
    <!-- This is a comment -->
    <div class="container   main">
        <h1>Hello   World!</h1>
        <script>
            const message = "Hello";
            console.log(message);
        </script>
    </div>
</body>
</html>
`;

// Basic usage with default safe preset
const result = await htmlnano.process(html);
console.log(result.html);

// With custom options
const options = {
    removeEmptyAttributes: false,
    collapseWhitespace: 'aggressive',
    removeComments: 'all'
};
const customResult = await htmlnano.process(html, options);

// With specific preset
const maxResult = await htmlnano.process(html, {}, presets.max);

// With PostHTML options
const postHtmlOptions = {
    sync: true,
    lowerCaseTags: true,
    quoteAllAttributes: false
};
const fullResult = await htmlnano.process(html, options, presets.safe, postHtmlOptions);
```

### Response
#### Success Response (200)
- **html** (string) - The minified HTML content.

#### Response Example
```json
{
  "html": "<!DOCTYPE html><html><head><title>Hello World</title><style>h1{color:#ff0000;margin:10px}</style></head><body><div class=\"container main\"><h1>Hello World!</h1><script>const message=\"Hello\";console.log(message)</script></div></body></html>"
}
```
```

--------------------------------

### Configure collapseBooleanAttributes for AMP

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Set the 'amphtml' flag to true to collapse additional, AMP-specific boolean attributes when their value is empty, 'true', or matches the attribute name.

```json
"collapseBooleanAttributes": {
    "amphtml": true
}
```

--------------------------------

### Configure removeAttributeQuotes with Overrides

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Demonstrates how to handle attribute quote removal when PostHTML options conflict.

```js
posthtml([
    htmlnano({
        removeAttributeQuotes: true
    })
]).process(html, {
    quoteAllAttributes: true
})
```

```js
posthtml([
    htmlnano({
        removeAttributeQuotes: { force: true }
    })
]).process(html, {
    quoteAllAttributes: true
})
```

--------------------------------

### Minify URLs with htmlnano

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Configures htmlnano to minify URLs relative to a base path.

```js
htmlnano.process(html, {
    minifyUrls: 'https://example.com'
});
```

```html
<a href="https://example.com/foo/bar/baz">bar</a>
```

```html
<a href="foo/bar/baz">bar</a>
```

```js
htmlnano.process(html, {
    minifyUrls: 'https://example.com/foo/baz/'
});
```

```html
<a href="https://example.com/foo/bar">bar</a>
```

```html
<a href="../bar">bar</a>
```

```js
htmlnano.process(html, {
    minifyUrls: 'https://example.com/foo/baz/'
});
```

```html
<img srcset="https://example.com/foo/bar/image.png 1x, https://example.com/foo/bar/image2.png.png 2x">
```

```html
<img srcset="../bar/image.png 1x, ../bar/image2.png.png 2x">
```

--------------------------------

### Integrate htmlnano with Webpack

Source: https://context7.com/maltsev/htmlnano/llms.txt

Use the html-minimizer-webpack-plugin to minify HTML files during the build process.

```javascript
// webpack.config.js
const HtmlMinimizerWebpackPlugin = require('html-minimizer-webpack-plugin');
const htmlnano = require('htmlnano');

module.exports = {
    optimization: {
        minimize: true,
        minimizer: [
            new HtmlMinimizerWebpackPlugin({
                minify: htmlnano.htmlMinimizerWebpackPluginMinify,
                minimizerOptions: {
                    removeComments: 'all',
                    collapseWhitespace: 'aggressive',
                    minifyCss: { preset: 'default' },
                    minifyJs: {}
                }
            })
        ]
    }
};
```

--------------------------------

### minifyJs

Source: https://context7.com/maltsev/htmlnano/llms.txt

Minifies JavaScript inside <script> tags and inline event handlers.

```APIDOC
## minifyJs

### Description
Minifies JavaScript inside <script> tags and inline event handlers using Terser. Requires terser as a peer dependency.

### Parameters
#### Request Body
- **minifyJs** (boolean|object) - Optional - Set to true to use default Terser options, or provide an object for custom Terser configuration.
```

--------------------------------

### Merge Styles and Scripts with htmlnano

Source: https://context7.com/maltsev/htmlnano/llms.txt

Merges multiple `<style>` or `<script>` tags with compatible attributes into single tags. Styles with different media attributes are not merged.

```javascript
import htmlnano from 'htmlnano';

const html = `
<style>h1 { color: red; }</style>
<style>h2 { color: blue; }</style>
<style media="print">p { color: black; }</style>
<style media="print">div { color: gray; }</style>

<script>const a = 1;</script>
<script>const b = 2;</script>
`;

// Merge styles and scripts
const result = await htmlnano.process(html, {
    mergeStyles: true,
    mergeScripts: true
});
// Output:
// <style>h1 { color: red; }h2 { color: blue; }</style>
// <style media="print">p { color: black; }div { color: gray; }</style>
// <script>const a = 1;const b = 2;</script>
```

--------------------------------

### removeEmptyElements Configuration

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Configures the removal of elements that contain no meaningful content.

```APIDOC
## removeEmptyElements

### Description
Removes elements that have no child elements and only whitespace or comments as content. Void elements are never removed.

### Options
- **true** (boolean) - Removes empty elements without attributes.
- **removeWithAttributes** (boolean) - If set to true, removes empty elements even if they have attributes.

### Request Example
{
    "removeEmptyElements": { "removeWithAttributes": true }
}
```

--------------------------------

### Configure uncss in htmlnano

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/050-modules.md

Passes uncss options directly to the removeUnusedCss module.

```js
htmlnano.process(html, {
    removeUnusedCss: {
        ignore: ['.do-not-remove']
    }
});
```

--------------------------------

### Minify URLs with htmlnano

Source: https://context7.com/maltsev/htmlnano/llms.txt

Converts absolute URLs to relative URLs. Requires relateurl, terser, and srcset as peer dependencies. Can be configured with a base URL string or a URL object.

```javascript
import htmlnano from 'htmlnano';

const html = `
<a href="https://example.com/foo/bar/page.html">Link</a>
<img src="https://example.com/foo/images/photo.jpg">
<img srcset="https://example.com/foo/images/small.jpg 1x, https://example.com/foo/images/large.jpg 2x">
`;

// Enable with base URL string
const result = await htmlnano.process(html, {
    minifyUrls: 'https://example.com/foo/'
});
// Output: <a href="bar/page.html">Link</a><img src="images/photo.jpg">...
```

```javascript
// With URL object
const urlResult = await htmlnano.process(html, {
    minifyUrls: new URL('https://example.com/foo/baz/')
});
// Output: <a href="../bar/page.html">Link</a>...
```

```javascript
// Disable (default)
const disabled = await htmlnano.process(html, { minifyUrls: false });
```

--------------------------------

### Implement custom transformations

Source: https://context7.com/maltsev/htmlnano/llms.txt

Define single or multiple custom functions to manipulate the PostHTML tree during processing.

```javascript
import htmlnano from 'htmlnano';

const html = '<div data-test="value"><p>Hello</p></div>';

// Single custom function
const result = await htmlnano.process(html, {
    custom: function(tree, options) {
        tree.walk((node) => {
            // Remove all data-test attributes
            if (node.attrs && node.attrs['data-test']) {
                delete node.attrs['data-test'];
            }
            return node;
        });
        return tree;
    }
});
// Output: <div><p>Hello</p></div>

// Multiple custom functions
const multiResult = await htmlnano.process(html, {
    custom: [
        function(tree) {
            // First transformation
            return tree;
        },
        function(tree) {
            // Second transformation
            return tree;
        }
    ]
});
```

--------------------------------

### PostHTML Plugin: htmlnano()

Source: https://context7.com/maltsev/htmlnano/llms.txt

Returns a PostHTML plugin function for integration with PostHTML pipelines, allowing htmlnano to be combined with other PostHTML transformations.

```APIDOC
## PostHTML Plugin: htmlnano()

### Description
Returns a PostHTML plugin function for integration with PostHTML pipelines. This allows htmlnano to be combined with other PostHTML transformations.

### Method
`htmlnano(options)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
const posthtml = require('posthtml');
const htmlnano = require('htmlnano');

const html = `
<div class="  foo   bar  ">
    <p>Hello   World!</p>
    <!-- comment to remove -->
    <style>
        .foo { color: red; }
    </style>
</div>
`;

const options = {
    removeComments: 'all',
    collapseWhitespace: 'conservative',
    minifyCss: { preset: 'default' }
};

const posthtmlPlugins = [
    // Add other PostHTML plugins here
    htmlnano(options)
];

posthtml(posthtmlPlugins)
    .process(html)
    .then((result) => {
        console.log(result.html);
        // <div class="foo bar"> <p>Hello World!</p> <style>.foo{color:red}</style> </div>
    })
    .catch((err) => {
        console.error(err);
    });
```

### Response
#### Success Response (200)
- **html** (string) - The minified HTML content after PostHTML processing.

#### Response Example
```json
{
  "html": "<div class=\"foo bar\"> <p>Hello World!</p> <style>.foo{color:red}</style> </div>"
}
```
```

--------------------------------

### Process HTML with htmlnano

Source: https://github.com/maltsev/htmlnano/blob/master/README.md

Use htmlnano to process HTML strings with custom options. You can disable specific modules or pass options to them. PostHTML options can also be configured.

```javascript
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);
    });
```

--------------------------------

### Collapse Boolean Attributes with htmlnano

Source: https://context7.com/maltsev/htmlnano/llms.txt

Collapses HTML boolean attributes to their minimized form and handles empty string attributes. Supports default and AMP-specific collapsing.

```javascript
import htmlnano from 'htmlnano';

const html = `
<button disabled="disabled">Click</button>
<input readonly="readonly" checked="checked">
<script defer="defer" async="async"></script>
<a href="">Empty link</a>
<video preload="auto"></video>
`;

// Default behavior
const result = await htmlnano.process(html, { collapseBooleanAttributes: true });
// Output: <button disabled>Click</button><input readonly checked>...
```

```javascript
// AMP-specific collapsing
const ampHtml = '<amp-img layout="responsive"></amp-img>';
const ampResult = await htmlnano.process(ampHtml, {
    collapseBooleanAttributes: { amphtml: true }
});
```

--------------------------------

### Process HTML with JavaScript API

Source: https://github.com/maltsev/htmlnano/blob/master/docs/docs/020-usage.md

Minify HTML using the asynchronous ESM API or the promise-based CommonJS API.

```js
import htmlnano, { presets } from 'htmlnano';

const options = {
    removeEmptyAttributes: false,
    collapseWhitespace: 'conservative'
};

// See PostHTML docs
const postHtmlOptions = {
    sync: true,
    lowerCaseTags: true,
    quoteAllAttributes: false
};

// "preset" arg might be skipped (see "Presets" section below for more info)
// "postHtmlOptions" arg might be skipped
const result = await htmlnano.process(html, options, presets.safe, postHtmlOptions);
// result.html is minified
```

```js
const htmlnano = require('htmlnano');

const options = {
    removeEmptyAttributes: false,
    collapseWhitespace: 'conservative'
};

htmlnano
    .process(html, options)
    .then((result) => {
        // result.html is minified
    })
    .catch((err) => {
        console.error(err);
    });
```

--------------------------------

### minifyUrls

Source: https://context7.com/maltsev/htmlnano/llms.txt

Converts absolute URLs to relative URLs using relateurl.

```APIDOC
## minifyUrls

### Description
Converts absolute URLs to relative URLs. Requires relateurl, terser, and srcset as peer dependencies.

### Parameters
#### Request Body
- **minifyUrls** (string|URL|boolean) - Optional - Base URL string or URL object to resolve relative paths against. Set to false to disable.
```