Package Exports

esbuild-plugin-lit
esbuild-plugin-lit/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (esbuild-plugin-lit) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

esbuild-plugin-lit

A plugin for esbuild that allows importing CSS, SVG, HTML files as tagged-template literals. The files are (optionally) minified using esbuild minifier (for CSS) and svgo (for SVG).

Usage

npm i esbuild-plugin-lit -D

# an optional peer dependency to minify SVG files
npm i svgo -D

Include plugin in your build script:

const litPlugin = require("esbuild-plugin-lit");

require("esbuild").build({
  entryPoints: ["index.ts"],
  bundle: true,
  outfile: "index.js",
  minify: true,
  plugins: [litPlugin()],
});

Now you can import CSS, SVG, HTML files as tagged-template literals:

import styles from 'styles.css';
import icon from 'icon.svg';

class SpecialButton extends LitElement {
  static styles = styles;
  ...
  render() {
    return html`
      <button>
        <span class="icon">${icon}</span>
      </button>
    `
  }
}

For TypeScript support, include ambient module types in your config file:

{
  "include": [".node_modules/esbuild-plugin-lit/modules.d.ts"]
}

If minification is set for esbuild (minify: true), the plugin will minify imported CSS files using esbuild's built-in minifier. If svgo is installed, it will also minify SVG files using svgo, custom options for svgo can also be supplied:

require("esbuild").build({
  entryPoints: ["index.ts"],
  bundle: true,
  outfile: "index.js",
  minify: true,
  plugins: [litPlugin({
    svgo: {
      plugins: [
        "preset-default",
        "removeXMLNS",
      ],
    },
  })],
});

LICENSE

MIT @ Maga D. Zandaqo