{"id":22166,"library":"rollup-plugin-postcss-lit","title":"rollup-plugin-postcss-lit","description":"A Rollup plugin (v2.2.0, 2023) that transforms PostCSS-processed stylesheets (CSS, SCSS, Less, Stylus) into Lit templated `css` tagged template literals. It integrates with rollup-plugin-postcss and Vite's CSS handling, allowing direct CSS imports in LitElement components without runtime injection. Key differentiators: supports multiple preprocessors, works with both Rollup and Vite, and offers an `importPackage` option to target either `lit` or `lit-element`. Released under MIT, actively maintained.","status":"active","version":"2.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/umbopepato/rollup-plugin-postcss-lit","tags":["javascript","postcss","css","lit","lit-element","lit-html","sass","scss","less","typescript"],"install":[{"cmd":"npm install rollup-plugin-postcss-lit","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-postcss-lit","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-postcss-lit","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required to process CSS/SCSS/Less files before Lit transformation in Rollup builds","package":"rollup-plugin-postcss","optional":true}],"imports":[{"note":"ESM default export; CommonJS require is not supported (v2.x+ is ESM-only).","wrong":"const postcssLit = require('rollup-plugin-postcss-lit')","symbol":"default (plugin function)","correct":"import postcssLit from 'rollup-plugin-postcss-lit'"},{"note":"Defaults to 'lit'. Change to 'lit-element' if your project uses that package.","wrong":"postcssLit({ importPackage: 'lit-element' }) // correct usage; wrong would be omitting it when using lit-element","symbol":"importPackage option","correct":"postcssLit({ importPackage: 'lit-element' })"},{"note":"Without ?inline suffix, Vite will also bundle the CSS separately, causing duplication.","wrong":"import myStyles from './styles.css'","symbol":"Vite CSS import with ?inline","correct":"import myStyles from './styles.css?inline'"}],"quickstart":{"code":"// rollup.config.js\nimport postcss from 'rollup-plugin-postcss';\nimport postcssLit from 'rollup-plugin-postcss-lit';\n\nexport default {\n  input: 'src/index.js',\n  output: { dir: 'dist', format: 'es' },\n  plugins: [\n    postcss({ inject: false }), // disable injection for ShadowDOM\n    postcssLit({ importPackage: 'lit' }),\n  ],\n};\n\n// src/my-component.js\nimport { LitElement, css } from 'lit';\nimport myStyles from './styles.css';\n\nexport class MyComponent extends LitElement {\n  static styles = myStyles;\n  render() {\n    return html`<p>Hello</p>`;\n  }\n}","lang":"javascript","description":"Complete Rollup configuration with postcss and postcss-lit, plus a minimal Lit component importing transformed CSS."},"warnings":[{"fix":"Add importPackage: 'lit-element' to plugin options if not using the 'lit' package.","message":"v2.0.0 switched the default import package from 'lit-element' to 'lit'. Existing projects using 'lit-element' must set importPackage: 'lit-element'.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Append ?inline to CSS imports: import styles from './styles.css?inline'.","message":"When using Vite, CSS imports without ?inline suffix cause duplicate CSS injection (once as Lit styles, once as global styles).","severity":"gotcha","affected_versions":">=1.1.0"},{"fix":"Ensure postcss is before postcssLit: plugins: [postcss(...), postcssLit(...)].","message":"The plugin must be placed after rollup-plugin-postcss in the Rollup plugins array, otherwise styles won't be processed.","severity":"gotcha","affected_versions":"all"},{"fix":"Set inject: false in postcss options unless you need global CSS injection.","message":"If using Light DOM or not ShadowDOM, disable the 'inject: false' option in rollup-plugin-postcss to avoid style duplication.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Ensure postcssLit is placed after rollup-plugin-postcss in the plugins array.","cause":"The plugin is not properly registered or is placed before CSS handling plugins.","error":"Error: The plugin 'postcss-lit' transformed the asset 'styles.css' to a 'css' module but 'css' module type is not supported."},{"fix":"Use import syntax or set { type: 'module' } in package.json; avoid require().","cause":"The package is ESM-only and cannot be required() in Node.js without ES module support.","error":"SyntaxError: Unexpected token export (or similar when importing the plugin in CommonJS)"},{"fix":"Install the corresponding package: npm install lit or npm install lit-element.","cause":"The specified importPackage is not installed as a dependency.","error":"Module not found: Can't resolve 'lit' (or 'lit-element')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}