{"id":22112,"library":"rollup-plugin-lit-css","title":"rollup-plugin-lit-css","description":"Rollup plugin to import CSS files as JavaScript tagged-template literal objects for LitElement, FAST, and other web component libraries. Current version 6.0.1, released August 2024. Includes support for minification via cssnano, custom template tag specifiers, and transform hooks for Sass/Less/PostCSS. Ships TypeScript types. Key differentiator: allows CSS-in-CSS workflow for Lit-based projects, vs alternatives like lit-css-loader (webpack) or esbuild-plugin-lit-css.","status":"active","version":"6.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/bennypowers/lit-css","tags":["javascript","lit","web-components","css","rollup","typescript"],"install":[{"cmd":"npm install rollup-plugin-lit-css","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-lit-css","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-lit-css","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required at runtime to provide the `css` tagged template literal function (or override via `specifier`)","package":"lit","optional":true},{"reason":"Alternative specifier for FAST projects instead of `lit`","package":"@microsoft/fast-element","optional":true},{"reason":"Optional minification support when `cssnano` option is enabled","package":"cssnano","optional":true}],"imports":[{"note":"ESM-only since v6; no CommonJS support. Requires Rollup ESM config.","wrong":"const litcss = require('rollup-plugin-lit-css');","symbol":"default","correct":"import litcss from 'rollup-plugin-lit-css';"},{"note":"TypeScript users must use the exact exported type name for options.","wrong":"import { Options } from 'rollup-plugin-lit-css';","symbol":"RollupPluginLitCssOptions","correct":"import type { RollupPluginLitCssOptions } from 'rollup-plugin-lit-css';"},{"note":"CSS files are imported as default exports, not named exports. The plugin transforms CSS into a tagged template literal.","wrong":"import { css } from './styles.css';","symbol":"style (imported CSS file)","correct":"import style from './styles.css';"}],"quickstart":{"code":"// rollup.config.js\nimport litcss from 'rollup-plugin-lit-css';\n\nexport default {\n  input: 'src/index.js',\n  output: { dir: 'dist', format: 'es' },\n  plugins: [\n    litcss({\n      include: ['**/*.css'],\n      cssnano: true, // minify output\n    }),\n  ],\n};\n\n// src/component.ts\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport style from './styles.css';\n\n@customElement('my-component')\nclass MyComponent extends LitElement {\n  static styles = [style];\n  render() { return html`<p>Hello World</p>`; }\n}","lang":"typescript","description":"Minimal Rollup config and LitElement component showing CSS import via tagged template literal."},"warnings":[{"fix":"Use ESM imports or switch to v5.x if CJS required.","message":"v6 drops CommonJS support; package is ESM-only.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Replace `Options` with `RollupPluginLitCssOptions` in TypeScript definitions.","message":"The `options` export was removed; use `RollupPluginLitCssOptions` type.","severity":"deprecated","affected_versions":">=6.0.0"},{"fix":"Ensure the specifier package's `css` function is compatible with tagged template literals.","message":"When using `specifier`, the package must export a `css` function. `@microsoft/fast-element` exports `css` as a named export.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use `import style from './file.css'` syntax; do not use `require`.","message":"CSS imports are default-exported as an object, not a string. Using `require()` will not work; must use `import`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If using Sass, call `.css.toString()`. For PostCSS, access `.css` property.","message":"The `transform` option must return a string, not a Buffer or object. Async transforms are supported.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run `npm install rollup-plugin-lit-css`. Ensure Rollup is configured for ESM.","cause":"Missing dependency or using wrong import path (CJS vs ESM).","error":"Error: Cannot find module 'rollup-plugin-lit-css'"},{"fix":"Change to ESM import: `import litcss from 'rollup-plugin-lit-css'`.","cause":"CommonJS require() used with ESM-only package (v6+).","error":"TypeError: litcss is not a function"},{"fix":"Use `import type { RollupPluginLitCssOptions } from 'rollup-plugin-lit-css'`.","cause":"Type `Options` renamed to `RollupPluginLitCssOptions` in v6.","error":"The requested module 'rollup-plugin-lit-css' does not provide an export named 'Options'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}