rollup-plugin-postcss-lit weekly downloads statistics

Rollup plugin postcss lit

Rollup plugin to load PostCSSed stylesheets in LitElement components

Install

Usage

Add postcssLit plugin after postcss. This wraps PostCSSed styles in Lit's css template literal tag, so you can import them directly in your components.

Add PostCSSed stylesheets to your LitElement components:

JS version

Usage with lit-element

If you're using the lit-element package, set the importPackage option accordingly:

Usage with Vite

This plugin is pre-configured to work with Vite, just add it to plugins and your styles will be Lit-ified ✨

⚠️ Use the ?inline suffix to prevent Vite from adding the styles to the CSS bundle as well

Options

PostCSS plugin setup

rollup-plugin-postcss injects all the imported stylesheets in by default: this causes an unnecessary style duplication if you're using the default ShadowDOM -based style encapsulation in your Lit components. Unless you're using Light DOM, consider disabling the inject option:

When should I use it?

This plugin is meant to be used with rollup-plugin-postcss. If you only need to load plain css files in your LitElement components, consider using rollup-plugin-lit-css.

Contributors

License

This project is licensed under the MIT License, see LICENSE for details.