{"id":22723,"library":"vite-plugin-lit-css","title":"vite-plugin-lit-css","description":"Vite plugin that transforms CSS/SCSS imports into Lit-compatible CSSResult or CSSResultGroup objects via constructible stylesheets. Current stable version is 2.2.2, released monthly. Designed exclusively for LitElement projects using Vite, it supports SASS/SCSS and PostCSS preprocessing. Unlike generic CSS handling, it outputs Lit template-literal stylesheets directly. Requires Lit 2/3 and Vite 5–7. TypeScript definitions included. Known limitation: HMR triggers full page reload.","status":"active","version":"2.2.2","language":"javascript","source_language":"en","source_url":"https://github.com/redfox-mx/vite-lit-css","tags":["javascript","typescript"],"install":[{"cmd":"npm install vite-plugin-lit-css","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-lit-css","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-lit-css","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: provides CSSResult and constructible stylesheet APIs","package":"lit","optional":false},{"reason":"Peer dependency: requires Vite's plugin system and CSS processing","package":"vite","optional":false}],"imports":[{"note":"ESM-only. CommonJS require will fail.","wrong":"const litCss = require('vite-plugin-lit-css')","symbol":"default","correct":"import litCss from 'vite-plugin-lit-css'"},{"note":"Imports CSS as a Lit CSSResult object. Must be used in LitElement's static styles property.","wrong":"const styles = require('./styles.css')","symbol":"CSSResult","correct":"import styles from './styles.css'"},{"note":"Type augmentation must be declared before vite/client types for proper CSS module declarations.","wrong":"/// <reference types=\"vite/client\" /> before vite-plugin-lit-css/client","symbol":"TypeScript types","correct":"/// <reference types=\"vite-plugin-lit-css/client\" />"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport litCss from 'vite-plugin-lit-css';\n\nexport default defineConfig({\n  plugins: [\n    litCss({\n      exclude: ['./src/global.css'],\n    }),\n  ],\n});\n\n// src/my-element.ts\nimport { LitElement, html } from 'lit';\nimport styles from './styles.css';\n\nexport class MyElement extends LitElement {\n  static styles = [styles];\n\n  render() {\n    return html`<p>Hello World</p>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'my-element': MyElement;\n  }\n}\ncustomElements.define('my-element', MyElement);","lang":"typescript","description":"Shows how to configure the plugin with Vite and import a CSS file as a Lit stylesheet."},"warnings":[{"fix":"Update Vite to ^5.2.10 || ^6.0.0 || ^7.0.0","message":"vite-plugin-lit-css v2 drops support for Vite 4. Upgrade to Vite 5+.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Update Node.js to v18.2.0 or later.","message":"vite-plugin-lit-css v2 requires Node.js >=18.2.0.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"No workaround; consider using a different approach if HMR is critical.","message":"HMR is not supported; every change triggers a full page reload.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add global CSS files to the exclude option in the plugin configuration.","message":"Global stylesheets (e.g., index.css) must be excluded via the exclude option, otherwise they will be transformed into Lit styles incorrectly.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to v2 and migrate to Vite 5+.","message":"vite-plugin-lit-css 1.x (for Vite 4) is deprecated.","severity":"deprecated","affected_versions":"1.x"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run 'npm install -D vite-plugin-lit-css' and ensure Node >=18.2.0.","cause":"Missing dependency or wrong Node version (<18.2.0).","error":"Cannot find module 'vite-plugin-lit-css' or its corresponding type declarations."},{"fix":"Use 'import litCss from 'vite-plugin-lit-css'' instead of require().","cause":"CommonJS require() used in an ESM-only package.","error":"The request url failed: The request url failed with error code 404. Vite is not running."},{"fix":"Add '/// <reference types=\"vite-plugin-lit-css/client\" />' before vite/client in your vite-env.d.ts.","cause":"Missing or incorrect TypeScript type augmentation.","error":"TypeScript: Property 'styles' does not exist on type 'typeof import('./styles.css')'."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}