Registry / babel-plugin-template-html-minifier

babel-plugin-template-html-minifier

JSON →
library4.1.0jsnpmunverified

A Babel plugin that minifies HTML in tagged template strings using html-minifier-terser. Current stable version: 4.1.0. It supports popular libraries like lit-html, lit-element, choo, and hyperHTML. The plugin integrates directly into the Babel pipeline, allowing compile-time minification without runtime overhead. It offers configurable html-minifier options and strict CSS validation mode. Unlike runtime minifiers, this plugin performs minification during build, reducing bundle size and improving performance. It requires Node >=10.13.0.

npm install babel-plugin-template-html-minifier
INSTALL
IMPORT
SIG · BABEL-PLUGIN-TEMPL
B
babel-plugin-template-html-minifier
javascriptv4.1.0
harness data pending
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

Plugin config
// In .babelrc or babel.config.js: { "plugins": [ ["template-html-minifier", { "modules": { "lit-html": ["html"] } }] ] }
// Wrong plugin name { "plugins": ["babel-plugin-template-html-minifier"] }
Plugin name in Babel config is 'template-html-minifier' (without '@babel/' prefix). The second element in the array is the options object.
Programmatic usage
import plugin from 'babel-plugin-template-html-minifier'; // passes options as second argument to Babel transform
const plugin = require('babel-plugin-template-html-minifier'); // plugin is a function, not a default export
This package is a Babel plugin, usually consumed via Babel config. Programmatic usage: import and pass to Babel's transform function.
TypeScript
// No TypeScript types are bundled; use @types/babel__core for plugin typings
import plugin from 'babel-plugin-template-html-minifier'; // TypeScript may complain about missing module
If using TypeScript, install @types/babel__core for plugin support. No ambient types provided.

Shows how to configure the plugin to minify lit-html templates in Babel.

// Create a JavaScript file with a tagged template: import { html } from 'lit-html'; const title = 'Hello World'; const template = html` <div class="container"> <h1>${title}</h1> <p>Some text</p> </div> `; // .babelrc: { "plugins": [ ["template-html-minifier", { "modules": { "lit-html": ["html"] }, "htmlMinifier": { "collapseWhitespace": true, "removeComments": true } }] ] } // After Babel transformation, the template will be minified: // const template = html` // <div class="container"><h1>${title}</h1><p>Some text</p></div> // `;
Debug
Known issues
breakingHTML template containing dynamic expressions inside comments will throw an error
fix
Use eslint-plugin-lit's binding-positions rule to catch invalid bindings before build
affects: >=1.0.0
breakingUse of collapseBooleanAttributes option breaks lit-html templates with dynamic attributes
fix
Set htmlMinifier.collapseBooleanAttributes to false (or omit it)
affects: >=1.0.0
deprecatedPlugin name used to be 'babel-plugin-template-html-minifier' but in Babel config it should be 'template-html-minifier'
fix
Use 'template-html-minifier' in plugins array
affects: >=2.0.0
gotchastrictCSS: true prevents minification of incomplete CSS template parts, may leave CSS unminified
fix
Only enable strictCSS if you use patterns like lit-element's css template that concatenate fragments
affects: >=1.0.0
Errors
Common errors & fixes
Error: `removeComments` is not safe when template contains expression inside comment
html-minifier removes comments including dynamic expressions, which changes behavior
fix
Set htmlMinifier.removeComments to false or ensure no dynamic expressions inside comments
Error: `collapseBooleanAttributes` is not safe when template contains expression in boolean attribute
Minifier collapses boolean attributes and removes the placeholder for the expression
fix
Set htmlMinifier.collapseBooleanAttributes to false
The plugin name must be 'template-html-minifier' not 'babel-plugin-template-html-minifier'
Babel expects the short name without the babel-plugin- prefix when using array format
fix
Use ['template-html-minifier', options] in plugins
Upgrade
Version history
4.1.0latest on npm
Audit
Dependencies
html-minifier-terserrequiredCore HTML minification logic
Agent activity
4 hits · last 30 days
node
4
Resources
babel-plugin-template-html-minifier — npm install babel-plugin-template-html-minifier · libregistry