{"id":24961,"library":"babel-plugin-template-html-minifier","title":"babel-plugin-template-html-minifier","description":"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.","status":"active","version":"4.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/cfware/babel-plugin-template-html-minifier","tags":["javascript","babel","lit-html","choo","html-minifier","hyperhtml"],"install":[{"cmd":"npm install babel-plugin-template-html-minifier","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-template-html-minifier","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-template-html-minifier","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core HTML minification logic","package":"html-minifier-terser","optional":false}],"imports":[{"note":"Plugin name in Babel config is 'template-html-minifier' (without '@babel/' prefix). The second element in the array is the options object.","wrong":"// Wrong plugin name\n{\n  \"plugins\": [\"babel-plugin-template-html-minifier\"]\n}","symbol":"Plugin config","correct":"// In .babelrc or babel.config.js:\n{\n  \"plugins\": [\n    [\"template-html-minifier\", { \"modules\": { \"lit-html\": [\"html\"] } }]\n  ]\n}"},{"note":"This package is a Babel plugin, usually consumed via Babel config. Programmatic usage: import and pass to Babel's transform function.","wrong":"const plugin = require('babel-plugin-template-html-minifier');\n// plugin is a function, not a default export","symbol":"Programmatic usage","correct":"import plugin from 'babel-plugin-template-html-minifier';\n// passes options as second argument to Babel transform"},{"note":"If using TypeScript, install @types/babel__core for plugin support. No ambient types provided.","wrong":"import plugin from 'babel-plugin-template-html-minifier';\n// TypeScript may complain about missing module","symbol":"TypeScript","correct":"// No TypeScript types are bundled; use @types/babel__core for plugin typings"}],"quickstart":{"code":"// Create a JavaScript file with a tagged template:\nimport { html } from 'lit-html';\n\nconst title = 'Hello World';\nconst template = html`\n  <div class=\"container\">\n    <h1>${title}</h1>\n    <p>Some text</p>\n  </div>\n`;\n\n// .babelrc:\n{\n  \"plugins\": [\n    [\"template-html-minifier\", {\n      \"modules\": {\n        \"lit-html\": [\"html\"]\n      },\n      \"htmlMinifier\": {\n        \"collapseWhitespace\": true,\n        \"removeComments\": true\n      }\n    }]\n  ]\n}\n\n// After Babel transformation, the template will be minified:\n// const template = html`\n//   <div class=\"container\"><h1>${title}</h1><p>Some text</p></div>\n// `;","lang":"javascript","description":"Shows how to configure the plugin to minify lit-html templates in Babel."},"warnings":[{"fix":"Use eslint-plugin-lit's binding-positions rule to catch invalid bindings before build","message":"HTML template containing dynamic expressions inside comments will throw an error","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Set htmlMinifier.collapseBooleanAttributes to false (or omit it)","message":"Use of collapseBooleanAttributes option breaks lit-html templates with dynamic attributes","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Use 'template-html-minifier' in plugins array","message":"Plugin name used to be 'babel-plugin-template-html-minifier' but in Babel config it should be 'template-html-minifier'","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Only enable strictCSS if you use patterns like lit-element's css template that concatenate fragments","message":"strictCSS: true prevents minification of incomplete CSS template parts, may leave CSS unminified","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Set htmlMinifier.removeComments to false or ensure no dynamic expressions inside comments","cause":"html-minifier removes comments including dynamic expressions, which changes behavior","error":"Error: `removeComments` is not safe when template contains expression inside comment"},{"fix":"Set htmlMinifier.collapseBooleanAttributes to false","cause":"Minifier collapses boolean attributes and removes the placeholder for the expression","error":"Error: `collapseBooleanAttributes` is not safe when template contains expression in boolean attribute"},{"fix":"Use ['template-html-minifier', options] in plugins","cause":"Babel expects the short name without the babel-plugin- prefix when using array format","error":"The plugin name must be 'template-html-minifier' not 'babel-plugin-template-html-minifier'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}