Minify HTML & CSS markup inside JavaScript/TypeScript template literal strings.
Uses html-minifier-terser to minify HTML and clean-css to minify CSS.
$ npm i minify-literals
# or
$ yarn add minify-literals
# or
$ pnpm add minify-literals| TypeScript |
import { minifyHTMLLiterals } from "minify-literals";
const source = `
const el = html\`<div > <h1> Hello World </h1 > </div>\`;
const css = css\` .foo { color: red; } \`;
`;
let { code, map } = await minifyHTMLLiterals(source);
// or with options: await minifyHTMLLiterals(source, { fileName: "test.js" });
console.log(code);
// const el = html`<div><h1>Hello World</h1></div>`;
// const css = css`.foo{color:red}`;
console.log(map);
// SourceMap {
// "file": ".map",
// "mappings": "AAAA;AACA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC, [...]
// "names": [],
// "sources": [
// null,
// ],
// "sourcesContent": [
// null,
// ],
// "version": 3,
// }, |
export interface Options {
/**
* Minify HTML options, see https://github.com/terser/html-minifier-terser#options-quick-reference
* @default .//src/defaultOptions.ts
*/
minifyOptions?: Partial<minify.Options>;
/**
* Override the default strategy for how to minify HTML.
* More info:
* https://github.com/explodingcamera/esm/blob/main/packages/minify-literals/lib/strategy.ts
*
* @optional
*/
strategy: S;
}- rollup-plugin-minify-template-literals - Rollup plugin for minifying HTML & CSS markup inside JavaScript/TypeScript template literal strings.
This package is based on minify-html-literals by Elizabeth Mitchell I've fixed a few bugs, ported it to ES modules, and refactored it a bit.
Some of the fixed bugs: