{"id":25369,"library":"esbuild-plugin-lit","title":"esbuild-plugin-lit","description":"An esbuild plugin for importing CSS, SVG, HTML, and XLIFF files as tagged-template literals (lit-html compatible) with optional minification via esbuild, html-minifier, and svgo. Current version 0.1.1, stable release. Differentiators: simplifies LitElement development by eliminating separate build steps for styles and assets; supports TypeScript with provided type declarations; enables direct import of XLIFF localization files without intermediate compilation. Peer dependencies include esbuild, lit, html-minifier, svgo, and txml.","status":"active","version":"0.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/zandaqo/esbuild-plugin-lit","tags":["javascript","esbuild","plugin","lit","css","svg","asset","tag","literal","typescript"],"install":[{"cmd":"npm install esbuild-plugin-lit","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-plugin-lit","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-plugin-lit","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for esbuild plugin API","package":"esbuild","optional":false},{"reason":"peer dependency - provides tagged template literal support","package":"lit","optional":false},{"reason":"peer dependency for HTML minification","package":"html-minifier","optional":true},{"reason":"peer dependency for SVG minification","package":"svgo","optional":true},{"reason":"peer dependency for XLIFF parsing","package":"txml","optional":true}],"imports":[{"note":"Package uses ESM default export; CommonJS require() works too (compiled by esbuild).","wrong":"const litPlugin = require('esbuild-plugin-lit')","symbol":"default","correct":"import litPlugin from 'esbuild-plugin-lit'"},{"note":"LitPlugin is a type export, not a value. Use type import for TypeScript.","wrong":"import { LitPlugin } from 'esbuild-plugin-lit'","symbol":"LitPlugin","correct":"import type { LitPlugin } from 'esbuild-plugin-lit'"},{"note":"Options type for plugin configuration.","wrong":"","symbol":"Options","correct":"import type { Options } from 'esbuild-plugin-lit'"}],"quickstart":{"code":"const { default: litPlugin } = require('esbuild-plugin-lit');\n\nrequire('esbuild').build({\n  entryPoints: ['index.ts'],\n  bundle: true,\n  outfile: 'index.js',\n  plugins: [litPlugin()],\n}).catch(() => process.exit(1));\n\n// index.ts:\nimport { LitElement, html, css } from 'lit';\nimport styles from './styles.css';\nimport icon from './icon.svg';\n\nclass MyElement extends LitElement {\n  static styles = css`${styles}`;\n  render() {\n    return html`<div class=\"icon\">${icon}</div>`;\n  }\n}\ncustomElements.define('my-element', MyElement);","lang":"typescript","description":"Shows how to set up the plugin with esbuild and import CSS/SVG files as tagged template literals in a LitElement."},"warnings":[{"fix":"None needed yet, but monitor package for breaking changes.","message":"The default export may change in future versions; prefer named import if available.","severity":"deprecated","affected_versions":">=0.1.0"},{"fix":"npm install svgo html-minifier --save-dev","message":"SVG and HTML minification require optional peer dependencies svgo and html-minifier to be installed separately.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"npm install txml --save-dev and add `loader: { '.xlf': 'text' }` to esbuild config.","message":"XLIFF loading requires txml peer dependency and setting esbuild loader to 'text' for .xlf files.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Add `\"include\": [\"./node_modules/esbuild-plugin-lit/modules.d.ts\"]` to tsconfig.json.","message":"TypeScript ambient module declarations are not automatically included; you must add them manually in tsconfig.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure custom filter extends the default by using pattern like /(\\.css|\\.svg|\\.html|\\.xlf|\\.scss)$/","message":"The filter regex in plugin options augments the global filter; misconfiguration may cause files not to be processed.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"npm install html-minifier --save-dev","cause":"Missing optional dependency for HTML minification.","error":"Error: Cannot find module 'html-minifier'"},{"fix":"Add `\"include\": [\"./node_modules/esbuild-plugin-lit/modules.d.ts\"]` to tsconfig.json.","cause":"Ambient module declarations not included in tsconfig.","error":"TypeScript error: Cannot find module './styles.css' or its corresponding type declarations."},{"fix":"npm install esbuild --save-dev","cause":"Missing esbuild peer dependency.","error":"Error: The plugin \"lit\" requires the \"esbuild\" package to be installed"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}