{"id":25894,"library":"lit-element-transpiler","title":"lit-element-transpiler","description":"A TypeScript transpiler for LitElement components that inlines imported CSS/SCSS files and transpiles TypeScript decorators (@customElement, @property) to native JavaScript. Currently at version 0.1.0, it targets TypeScript ^3.7.0 to < ^3.8.2. It differentiates by automating style inlining and decorator removal, simplifying LitElement code for production. However, it is pre-release and no longer actively maintained, with a narrow TypeScript version range.","status":"maintenance","version":"0.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/aelbore/lit-element-transpiler","tags":["javascript","typescript","transpiler","styles","css","sass","scss","lit-html","lit-element"],"install":[{"cmd":"npm install lit-element-transpiler","lang":"bash","label":"npm"},{"cmd":"yarn add lit-element-transpiler","lang":"bash","label":"yarn"},{"cmd":"pnpm add lit-element-transpiler","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; required for transpilation. Must be >=3.7.0 <3.8.2.","package":"typescript","optional":false}],"imports":[{"note":"Named export; default import does not exist.","wrong":"import transform from 'lit-element-transpiler'","symbol":"transform","correct":"import { transform } from 'lit-element-transpiler'"}],"quickstart":{"code":"import { transform } from 'lit-element-transpiler'\n\nconst code = `\nimport { LitElement, html, customElement, property } from 'lit-element'\nimport './hello-world.css'\n\n@customElement('hello-world')\nclass HelloWorld extends LitElement {\n  @property() message\n}\n`\n\ntransform('hello-world.ts', code).then(result => {\n  console.log(result.code)\n  // Output: decorators removed, CSS inlined\n}).catch(err => console.error(err))","lang":"typescript","description":"Demonstrates basic usage of the transform function: imports a LitElement component, inlines CSS, and transpiles decorators."},"warnings":[{"fix":"Use TypeScript 3.7.x or 3.8.0-3.8.1; avoid 3.8.2+ and 3.9+.","message":"TypeScript peer dependency range is strict: >=3.7.0 <3.8.2; using newer TypeScript versions may break.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Consider alternatives like @open-wc/building-utils or custom-elements-manifest.","message":"Package has not been updated since 2020 and is effectively in maintenance mode; no plans for new features.","severity":"deprecated","affected_versions":">=0.1.0"},{"fix":"Ensure project TypeScript version is within 3.7.0 and 3.8.1.","message":"The package does not bundle its own TypeScript; it uses the project's TypeScript, which must match the peer range exactly.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use mock-fs or write files to disk before calling transform.","message":"CSS/SCSS files must exist on disk at transform time; mock-fs or similar is needed for testing without real files.","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":"Run 'npm install --save-dev typescript@^3.7.0' (within the required range).","cause":"TypeScript peer dependency not installed or version mismatch.","error":"Error: Cannot find module 'typescript'"},{"fix":"Use 'import { transform } from 'lit-element-transpiler'' instead of default import.","cause":"Default import used instead of named import.","error":"TypeError: transform is not a function"},{"fix":"Ensure the CSS file exists at the expected location or use mock-fs in test environments.","cause":"CSS file not found at the specified path when transform is called.","error":"Error: Cannot find module './hello-world.css'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}