{"id":18285513,"url":"https://github.com/zandaqo/esbuild-plugin-lit","last_synced_at":"2025-04-05T07:32:23.118Z","repository":{"id":57686125,"uuid":"476424899","full_name":"zandaqo/esbuild-plugin-lit","owner":"zandaqo","description":"Import CSS, SVG, HTML, XLIFF files as tagged-template literals.","archived":false,"fork":false,"pushed_at":"2022-10-29T14:28:24.000Z","size":100,"stargazers_count":12,"open_issues_count":2,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T01:39:19.222Z","etag":null,"topics":["css","esbuild","esbuild-plugin","lit","svg"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zandaqo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-31T18:10:27.000Z","updated_at":"2024-04-03T14:16:50.000Z","dependencies_parsed_at":"2022-09-18T23:13:42.466Z","dependency_job_id":null,"html_url":"https://github.com/zandaqo/esbuild-plugin-lit","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zandaqo%2Fesbuild-plugin-lit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zandaqo%2Fesbuild-plugin-lit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zandaqo%2Fesbuild-plugin-lit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zandaqo%2Fesbuild-plugin-lit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zandaqo","download_url":"https://codeload.github.com/zandaqo/esbuild-plugin-lit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305879,"owners_count":20917201,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","esbuild","esbuild-plugin","lit","svg"],"created_at":"2024-11-05T13:16:55.060Z","updated_at":"2025-04-05T07:32:18.107Z","avatar_url":"https://github.com/zandaqo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# esbuild-plugin-lit\n\n[![npm](https://img.shields.io/npm/v/esbuild-plugin-lit.svg?style=flat-square)](https://www.npmjs.com/package/esbuild-plugin-lit)\n\nA plugin for [esbuild](https://esbuild.github.io/) that allows importing CSS,\nSVG, HTML, XLIFF files as tagged-template literals. The files are (optionally)\nminified using esbuild minifier (for CSS), `html-minifier` (for HTML), and\n[svgo](https://github.com/svg/svgo) (for SVG).\n\n## Installation\n\n```bash\nnpm i esbuild-plugin-lit -D\n```\n\n## Usage\n\nInclude plugin in your build script:\n\n```js\nconst { default: litPlugin } = require(\"esbuild-plugin-lit\");\n\nrequire(\"esbuild\").build({\n  entryPoints: [\"index.ts\"],\n  bundle: true,\n  outfile: \"index.js\",\n  minify: true,\n  plugins: [litPlugin()],\n});\n```\n\nNow you can import CSS, SVG, HTML files as tagged-template literals:\n\n```typescript\nimport styles from 'styles.css';\nimport icon from 'icon.svg';\n\nclass SpecialButton extends LitElement {\n  static styles = styles;\n  ...\n  render() {\n    return html`\n      \u003cbutton\u003e\n        \u003cspan class=\"icon\"\u003e${icon}\u003c/span\u003e\n      \u003c/button\u003e\n    `\n  }\n}\n```\n\n## TypeScript\n\nFor TypeScript support, include ambient module types in your config file:\n\n```json\n{\n  \"include\": [\"./node_modules/esbuild-plugin-lit/modules.d.ts\"]\n}\n```\n\n## Customization \u0026 Loading SASS, LESS, etc.\n\nThe plugin supports setting custom file extensions and transformation for each\nimported types, for example, the following with load SASS files:\n\n```js\nconst { default: litPlugin } = require(\"esbuild-plugin-lit\");\nconst SASS = require(\"sass\");\n\nrequire(\"esbuild\").build({\n  ...\n  plugins: [litPlugin(\n    {\n      // augment the global filter\n      filter: /\\.(css|svg|html|xlf|scss)$/,\n      css: {\n        // specify extension for css\n        extension: /\\.s?css$/,\n        transform: (data) =\u003e Sass.renderSync({ data }).css.toString(),\n      },\n    },\n  )],\n});\n```\n\n## Minification\n\nIf minification is set for esbuild (`minify: true`), the plugin will minify\nimported CCS files using esbuild's built-in minifier. You can set\n`minify: false` in settings for CSS to opt-out from minification:\n\n```js\nrequire(\"esbuild\").build({\n  ...\n  plugins: [litPlugin({\n    css: {\n      minify: false,\n    },\n  })],\n});\n```\n\nTo minify SVG and HTML files, the plugin uses `svgo` and `html-minifier`\npackages respectively, so make sure they are installed if such minification is\nrequired:\n\n```bash\nnpm i svgo -D\nnpm i html-minifier -D\n```\n\nThen supply the minifiers' options to the plugin:\n\n```js\nrequire(\"esbuild\").build({\n  ...\n  minify: true,\n  plugins: [litPlugin({\n    svg: {\n      svgo: {\n        plugins: [\n          \"preset-default\",\n          \"removeXMLNS\",\n        ],\n      },\n    },\n    html: {\n      htmlMinifier: {}, // use the default options\n    },\n  })],\n});\n```\n\n## Loading XLIFF localization files\n\nLit provides `lit-localize` package for localization purposes. When used in the\nso-called runtime mode, the package relies on a set of rollup based tools to\nextract messages from templates into XLIFF localization files\n(`lit-localize extract`), and to later compile them into \"importable\" JS files\nusing `lit-localize build`.\n\nWith `esbuild-plugin-lit` one can skip the build step and \"load\" XLIFF files\ndirectly as shown in our\n[example](https://github.com/zandaqo/esbuild-plugin-lit/examples/hello) project:\n\n```js\n...\n// Load xliff files statically\nimport * as ce from \"./xliff/ce.xlf\";\nimport * as es from \"./xliff/es.xlf\";\n\nconst locales = new Map(\n  [[\"ce\", ce], [\"es\", es]],\n);\n\nconst { setLocale } = configureLocalization({\n  sourceLocale: \"en\",\n  targetLocales: [\"ce\", \"es\"],\n  loadLocale: async (locale) =\u003e locales.get(locale),\n});\n...\n```\n\nThe files are compiled on the fly by esbuild, thus, simplifying the toolchain\nand speeding up the process.\n\nTo load XLIFF files, install `tmxl`:\n\n```bash\nnpm i txml -D\n```\n\nAnd set `xlf` option:\n\n```js\nrequire(\"esbuild\").build({\n  ...\n  loader: {\n    \".xlf\": \"text\",\n  },\n  plugins: [litPlugin({\n    xlf: {}, // use default settings\n  })],\n});\n```\n\n## Using with Deno\n\nThe plugin also supports building with Deno:\n\n```ts\nimport * as esbuild from \"https://deno.land/x/esbuild@v0.15.7/mod.js\";\nimport { denoPlugin } from \"https://deno.land/x/esbuild_deno_loader@0.5.2/mod.ts\";\nimport pluginLit from \"https://raw.githubusercontent.com/zandaqo/esbuild-plugin-lit/master/mod.ts\";\n\nawait esbuild\n  .build({\n    plugins: [\n      pluginLit({\n        specifier: \"https://cdn.skypack.dev/lit@2.3.1?dts\",\n      }),\n      denoPlugin(),\n    ],\n    entryPoints: [\"./main.ts\"],\n    outfile: \"./main.js\",\n    target: \"es2022\",\n    format: \"esm\",\n    bundle: true,\n    minify: true,\n    sourcemap: true,\n  });\n\nesbuild.stop();\n```\n\nThough, keep in mind that Deno\n[does not support](https://github.com/denoland/deno/issues/15132) ambient module\ntyping (`declare module`) and each asset import has to be typed using\n`// @deno-types`.\n\n## LICENSE\n\nMIT @ Maga D. Zandaqo\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzandaqo%2Fesbuild-plugin-lit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzandaqo%2Fesbuild-plugin-lit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzandaqo%2Fesbuild-plugin-lit/lists"}