{"id":13665407,"url":"https://github.com/cfware/babel-plugin-template-html-minifier","last_synced_at":"2025-10-04T07:45:02.402Z","repository":{"id":62687290,"uuid":"98408818","full_name":"cfware/babel-plugin-template-html-minifier","owner":"cfware","description":"Minify HTML in tagged template strings using html-minifier","archived":false,"fork":false,"pushed_at":"2024-11-12T21:13:12.000Z","size":232,"stargazers_count":63,"open_issues_count":6,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-10T17:05:26.520Z","etag":null,"topics":["babel-plugin","html-minifier","hyperhtml","lit-html"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cfware.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"tidelift":"npm/babel-plugin-template-html-minifier"}},"created_at":"2017-07-26T10:03:23.000Z","updated_at":"2025-01-19T11:28:36.000Z","dependencies_parsed_at":"2024-12-19T18:02:40.762Z","dependency_job_id":"21862f09-58f2-4f94-a95d-b17477bc447e","html_url":"https://github.com/cfware/babel-plugin-template-html-minifier","commit_stats":{"total_commits":89,"total_committers":6,"mean_commits":"14.833333333333334","dds":0.2808988764044944,"last_synced_commit":"b85862345feba74710cf650e1fcfb9a66f46ca4d"},"previous_names":["goto-bus-stop/babel-plugin-template-html-minifier"],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cfware%2Fbabel-plugin-template-html-minifier","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cfware%2Fbabel-plugin-template-html-minifier/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cfware%2Fbabel-plugin-template-html-minifier/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cfware%2Fbabel-plugin-template-html-minifier/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cfware","download_url":"https://codeload.github.com/cfware/babel-plugin-template-html-minifier/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254518383,"owners_count":22084374,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel-plugin","html-minifier","hyperhtml","lit-html"],"created_at":"2024-08-02T06:00:37.213Z","updated_at":"2025-10-04T07:44:57.381Z","avatar_url":"https://github.com/cfware.png","language":"JavaScript","readme":"# babel-plugin-template-html-minifier\n\n[![Travis CI][travis-image]][travis-url]\n[![Greenkeeper badge][gk-image]](https://greenkeeper.io/)\n[![NPM Version][npm-image]][npm-url]\n[![NPM Downloads][downloads-image]][downloads-url]\n[![MIT][license-image]](LICENSE)\n\nMinify HTML in tagged template strings using [html-minifier-terser](https://github.com/DanielRuf/html-minifier-terser).\n\n## Install\n\n```bash\nnpm install --save-dev babel-plugin-template-html-minifier\n```\n\n## Usage\n\nIn `.babelrc`:\n\n```json\n{\n  \"plugins\": [\n    [\"template-html-minifier\", {\n      \"modules\": {\n        \"choo/html\": [null],\n        \"hyperhtml\": [{\"name\": \"bind\", \"type\": \"factory\"}],\n        \"hyperhtml-element\": [{\"name\": null, \"member\": \"html\"}]\n      },\n      \"htmlMinifier\": {\n        \"collapseWhitespace\": true\n      }\n    }]\n  ]\n}\n```\n\nExample for `lit-html` and `lit-element`:\n\n```json\n{\n  \"plugins\": [\n    [\"template-html-minifier\", {\n      \"modules\": {\n        \"lit-html\": [\"html\"],\n        \"lit-element\": [\n          \"html\",\n          {\"name\": \"css\", \"encapsulation\": \"style\"}\n        ]\n      },\n      \"strictCSS\": true,\n      \"htmlMinifier\": {\n        \"collapseWhitespace\": true,\n        \"conservativeCollapse\": true,\n        \"removeComments\": true,\n        \"caseSensitive\": true,\n        \"minifyCSS\": true\n      }\n    }]\n  ]\n}\n```\n\n## Options\n\n### `htmlMinifier`\n\nThe value of this property is passed unmodified to html-minifier-terser. See the\n[html-minifier-terser docs](https://github.com/DanielRuf/html-minifier-terser#options-quick-reference).\n\nNote for usage with `lit-html` and `lit-element`:\n\n- To preserve case sensitiveness of property binding `\"caseSensitive\": true` must be added.\n\n- `collapseBooleanAttributes` should not be used when working with `lit-html`\nor other templating systems which give special meaning to non-static boolean\nattributes. Enabling `collapseBooleanAttributes` will cause this plugin to\nthrow an exception:\n\n  ```js\n  html`\u003cinput readonly=\"${readonly}\"\u003e`;\n  ```\n\n  This exception is for two reasons.  First because it means the chosen options have\ncaused `html-minifier-terser` to change the meaning of the HTML template.  Second because\nit deletes the point where `${readonly}` goes into the final output.\n\n- `removeComments` will cause the following template to throw an exception:\n\n  ```js\n  html`\u003c!-- \u003cinput value=\"${value}\"\u003e --\u003e`;\n  ```\n\n  This exception is because `${value}` inside an HTML template gets deleted.  It\nshould be noted that an HTML template does not prevent code within `${}` from\nrunning.  This means that in the following template `getValue()` is still executed\nwhen processing the `html` template:\n\n  ```js\n  html`\u003c!-- \u003cinput value=\"${getValue()}\"\u003e --\u003e`;\n  ```\n\n  It is recommended to use [binding-positions] from [eslint-plugin-lit] to catch this\nerror.  This babel transformation can only determine that a template is broken, the\neslint plugin will tell you which binding is invalid.\n\n### `strictCSS`\n\nWhether CSS should only be minified when it is valid CSS. This is necessary when using css templates which allow multiple strings of invalid CSS together to make a valid stylesheet. This is the case for example with `lit-element`:\n\n```js\nconst unit = css`px`;\nconst widthXL = 400;\nconst styleSheet = css`\n  @media (${widthXL}px) {\n    .foo {\n      font-size: 16${unit};\n    }\n  }\n`;\n```\n\nMinification happens per template literal, it is only able to see the unconcatenated css literals and minify those. It will try to do the right thing, but it cannot handle every scenario. If you are using `lit-element`, and write these types of templates, you need to set `strictCSS` to true.\n\n### `modules`\n\nA list of module names or import paths where tags are imported from.  The values in\nthe arrays refers to the export names, not the import names.  `null` refers to the\ndefault export.\n\n### `failOnError`\n\nDetermines whether an error should be thrown when minification failed. defaults to true.\n\nMinification can fail when using invalid syntax or comments within bindings. Especially\nwhen using css with bindings minification can fail. When `failOnError` is true, this\nplugin throws an error and your build will stop from proceeding. When it is false\nthe minification is canceled and the template is left unminified.\n\n### `logOnError`\nDetermines whether failure to minify a template should be logged in case of an error.\nDefaults to true. This setting only takes effect when `failOnError` is false.\n\n```js\nimport choo from 'choo/html';\nimport * as lit from 'lit-html';\nimport {html as litHtml, css} from 'lit-element';\nimport HyperHTMLElement from 'hyperhtml-element';\nimport html from 'some-module';\nimport {bind} from 'hyperhtml';\n\nchoo`\n  \u003cdiv class=\"hello\"\u003e\n    Hello World\n  \u003c/div\u003e\n`;\n\nlit.html`\n  \u003cdiv class=\"hello\"\u003e\n    Hello World\n  \u003c/div\u003e\n`;\n\nlitHtml`\n  \u003cdiv class=\"hello\"\u003e\n    Hello World\n  \u003c/div\u003e\n`;\n\ncss`\n  .sel {\n    background: red;\n  }\n`;\n\nclass MyHyperHTMLElement extends HyperHTMLElement {\n  created() {\n    this.render();\n  }\n\n  render() {\n    this.html`\n      \u003cdiv\u003e\n        Hello World\n      \u003c/div\u003e\n    `;\n  }\n}\n\nbind(document.body)`\n  \u003cdiv\u003e\n    Hello World\n  \u003c/div\u003e\n`;\n\nhtml`\n  This\n  is\n  not\n  processed\n`;\n```\n\nUsing the .babelrc shown in [usage](#Usage) produces the following output:\n\n```js\nimport choo from 'choo/html';\nimport * as lit from 'lit-html';\nimport {html as litHtml, css} from 'lit-element';\nimport HyperHTMLElement from 'hyperhtml-element';\nimport html from 'some-module';\nimport {bind} from 'hyperhtml';\n\nchoo`\u003cdiv class=\"hello\"\u003e Hello World \u003c/div\u003e`;\n\nlit.html`\u003cdiv class=\"hello\"\u003e Hello World \u003c/div\u003e`;\n\nlitHtml`\u003cdiv class=\"hello\"\u003e Hello World \u003c/div\u003e`;\n\ncss`.sel{background:red}`;\n\nclass MyHyperHTMLElement extends HyperHTMLElement {\n  created() {\n    this.render();\n  }\n\n  render() {\n    this.html`\u003cdiv\u003e Hello World \u003c/div\u003e`;\n  }\n}\n\nbind(document.body)`\u003cdiv\u003e Hello World \u003c/div\u003e`;\n\nhtml`\n  This\n  is\n  not\n  processed\n`;\n```\n\n* choo is processed because of `\"choo/html\": [null]` specifies that the default\nexport should be processed.\n* lit.html is processed because `\"lit-html\": [\"html\"]`.\n* litHtml is processed because `\"lit-element\": [\"html\"]`.\n* css is processed because `\"lit-element\": [{\"name\": \"css\", \"encapsulation\": \"style\"}]`.\n  The `encapsulation` argument ensures that `html-minifier-terser` understands that the template\n  contains CSS, without it the template would be processed as HTML.\n* `this.html` in MyHyperHTMLElement is processed because\n`\"hyperhtml-element\": [{\"name\": null, \"member\": \"html\"}]` specifies that the `html` member\nof classes which extend the default export should be processed.\n* bind is processed because of `\"hyperhtml\": [{\"name\": \"bind\", \"type\": \"factory\"}]`, the\n  type `factory` specifies the bind returns a function which processes the tagged templates.\n* html is not processed because it was exported from an unlisted module.\n\nAll matching is done based on the exported name, not the local/imported name.\n\n## Running tests\n\nTests are provided by xo and ava.\n\n```sh\nnpm install\nnpm test\n```\n\n## Attribution\n\nThis module was originally created by [goto-bus-stop](https://github.com/goto-bus-stop).\n\n## `babel-plugin-template-html-minifier` for enterprise\n\nAvailable as part of the Tidelift Subscription.\n\nThe maintainers of `babel-plugin-template-html-minifier` and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. [Learn more.](https://tidelift.com/subscription/pkg/npm-babel-plugin-template-html-minifier?utm_source=npm-babel-plugin-template-html-minifier\u0026utm_medium=referral\u0026utm_campaign=enterprise\u0026utm_term=repo)\n\n\n[npm-image]: https://img.shields.io/npm/v/babel-plugin-template-html-minifier.svg\n[npm-url]: https://npmjs.org/package/babel-plugin-template-html-minifier\n[travis-image]: https://travis-ci.org/cfware/babel-plugin-template-html-minifier.svg?branch=master\n[travis-url]: https://travis-ci.org/cfware/babel-plugin-template-html-minifier\n[gk-image]: https://badges.greenkeeper.io/cfware/babel-plugin-template-html-minifier.svg\n[downloads-image]: https://img.shields.io/npm/dm/babel-plugin-template-html-minifier.svg\n[downloads-url]: https://npmjs.org/package/babel-plugin-template-html-minifier\n[license-image]: https://img.shields.io/npm/l/babel-plugin-template-html-minifier.svg\n\n[binding-positions]: https://github.com/43081j/eslint-plugin-lit/blob/master/docs/rules/binding-positions.md\n[eslint-plugin-lit]: https://github.com/43081j/eslint-plugin-lit#readme\n","funding_links":["https://tidelift.com/funding/github/npm/babel-plugin-template-html-minifier","https://tidelift.com/subscription/pkg/npm-babel-plugin-template-html-minifier?utm_source=npm-babel-plugin-template-html-minifier\u0026utm_medium=referral\u0026utm_campaign=enterprise\u0026utm_term=repo"],"categories":["Tools","JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcfware%2Fbabel-plugin-template-html-minifier","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcfware%2Fbabel-plugin-template-html-minifier","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcfware%2Fbabel-plugin-template-html-minifier/lists"}