litnano – htmlnano for lit

Minify HTML markup inside lit tagged template literals.

npm install --save-dev litnano

It can be used as a rollup plugin, webpack loader or directly operate on any ESTree-compliant AST where it modifies TaggedTemplateExpression nodes using htmlnano and cssnano.

A rollup plugin is provided via the litnano/rollup entrypoint. It supports soucemaps and can be combined with @rollup/plugin-terser.

// rollup.config.mjs
import { litnano } from 'litnano/rollup'
import terser from '@rollup/plugin-terser'

export default {
  input: '…',
  output: {
    file: '…',
    format: 'es',
    sourcemap: true,
  },
  plugins: [
    litnano(),
    terser({ ecma: 2020, module: true })
  ],
}

A webpack loader is provided out of the box and can be referenced using the litnano entrypoint. It supports soucemaps and can be combined with typescript and terser.

// webpack.config.js
export default {
  …
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          { loader: 'litnano' },
          { loader: 'ts-loader' },
        ],
        exclude: /node_modules/
      }
    ]
  },
  optimization: {
    minimize: true
  }
}

Note: The loader can also be manually imported via the explicit litnano/webpack entrypoint, in case it needs to be extended.

The litnano lowlevel API is designed to operate on a ESTree-compliant AST and modify TaggedTemplateExpression nodes using htmlnano.

import { litnano } from 'litnano'
import { parse } from 'acorn'
import { generate } from 'astring'
import { readFile, writeFile } from 'node:fs/promises'

const code = await readFile('mycomponent.js', 'utf-8')
const ast = parse(code, { ecmaVersion: 2023, sourceType: 'module' })
// You may use "changedNodes" to generate a sourcemap
const changedNodes = await litnano(ast)
await writeFile('mycomponent.min.js', generate(ast))

You may pass a concrete htmlnano version to be used via the options parameter:

import htmlnano from 'htmlnano'
await litnano(ast, { htmlnano })