JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 9611
  • Score
    100M100P100Q128918F
  • License MIT

Minify CSS and HTML literals

Package Exports

  • minify-literals

Readme

minify-literals API Docs

Minify HTML & CSS markup inside JavaScript/TypeScript template literal strings.

Uses html-minifier-terser to minify HTML and clean-css to minify CSS.

Installation

$ npm i minify-literals
# or
$ yarn add minify-literals
# or
$ pnpm add minify-literals

Usage

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,
// },

Options

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;
}

Credits

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: