Minify HTML template literal strings
npm install minify-html-literals_Minify HTML markup inside JavaScript template literal strings._



Template literals are often used in JavaScript to write HTML and CSS markup (ex. lit-html). This library allows a developer to minify markup that is normally ignored by JavaScript minifiers.
``js
import { minifyHTMLLiterals } from 'minify-html-literals';
// const minifyHTMLLiterals = require('minify-html-literals').minifyHTMLLiterals
const result = minifyHTMLLiterals(
function render(title, items) {
return html\
\${title}
\${items.map(item => {
return getHTML()\
;
})}
\;,
{
fileName: 'render.js'
}
);console.log(result.code);
// function render(title, items) {
// return html
- ${item}
;;
// }console.log(result.map);
// {
// "version": 3,
// "file": "render.js.map",
// "sources": ["render.js"],
// "sourcesContent": [null],
// "names": [],
// "mappings": "AAAA;gBACgB,qDAMU,QAAQ,SAE1B;2BACmB,IACX,OAAO,KACb;WACC,KAEP;"
// }
`$3
Be sure to minify template literals _before_ transpiling to ES5. Otherwise, the API will not be able to find any template literal (
${} ) strings.Supported Source Syntax
- JavaScript
- TypeScript
Options
$3
The following options are common to typical use cases.
| Property | Type | Default | Description |
| --------------------------- | -------------------------------------------------------------------------------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
fileName | string | | _Required._ The name of the file, used for syntax parsing and source maps. |
| minifyOptions? | html-minifier options | defaultMinifyOptions | Defaults to production-ready minification. |
| minifyOptions?.minifyCSS? | clean-css options | defaultMinifyCSSOptions | Uses clean-css defaults. |
| shouldMinify? | function | defaultShouldMinify | A function that determines whether or not an HTML template should be minified. Defaults to minify all tagged templates whose tag name contains "html" (case insensitive). |
| shouldMinifyCSS? | function | defaultShouldMinifyCSS | A function that determines whether or not a CSS template should be minified. Defaults to minify all tagged templates whose tag name contains "css" (case insensitive). |$3
All aspects of the API are exposed and customizable. The following options will not typically be used unless you need to change how a certain aspect of the API handles a use case.
| Property | Type | Default | Description |
| ----------------------- | ------------------------------------------------------------------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
generateSourceMap? | boolean or (ms: MagicString, fileName: string) => SourceMap | undefined | defaultGenerateSourceMap | Set to false to disable source maps, or a custom function to control how source maps are generated from a MagicString instance. |
| strategy? | object | defaultStrategy | An object with methods defining how to minify HTML. The default strategy uses html-minifier. |
| validate? | boolean or object | defaultValidation | Set to false to disable strategy validation checks, or to a custom set of validation functions. This is only useful when implementing a custom strategy. |
| parseLiterals? | function | parse-literals | Override the function used to parse template literals from a source string. |
| parseLiteralsOptions? | object | | Additional options to pass to parseLiterals() |
| MagicString? | function | MagicString | Override the MagicString-like constructor to use for manipulating the source string and generating source maps. |Customization Examples
$3
> This is particularly useful for libraries that define templates without using tags, such as Polymer's
.`js
import { minifyHTMLLiterals, defaultShouldMinify } from 'minify-html-literals';minifyHTMLLiterals(
\;,
{
fileName: 'render.js',
shouldMinify(template) {
return (
defaultShouldMinify(template) ||
template.parts.some(part => {
return part.text.includes('');
})
);
}
}
);
`$3
`js
import { minifyHTMLLiterals, defaultMinifyOptions } from 'minify-html-literals';minifyHTMLLiterals(source, {
fileName: 'render.js',
minifyOptions: {
...defaultMinifyOptions,
minifyCSS: false
},
shouldMinifyCSS: () => false
});
`$3
`js
minifyHTMLLiterals(source, {
fileName: 'render.js',
generateSourceMap(ms, fileName) {
return ms.generateMap({
file: ${fileName}-converted.map, // change file name
source: fileName,
includeContent: true // include source contents
});
}
});
``