{"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.","language":"javascript","status":"active","last_verified":"Mon Apr 27","install":{"commands":["npm install rollup-plugin-postcss-lit"],"cli":null},"imports":["import postcssLit from 'rollup-plugin-postcss-lit'","postcssLit({ importPackage: 'lit-element' })","import myStyles from './styles.css?inline'"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}