Rollup plugin to load PostCSSed stylesheets in LitElement components
$ npm i -D rollup-plugin-postcss-lit
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.
// rollup.config.js
import postcss from 'rollup-plugin-postcss';
import postcssLit from 'rollup-plugin-postcss-lit';
export default {
input: 'entry.js',
output: {
// ...
},
plugins: [
postcss({
// ...
}),
postcssLit(),
],
}
Add PostCSSed stylesheets to your LitElement components:
import {LitElement, css} from 'lit';
import {customElement} from 'lit/decorators.js';
import myStyles from './styles.css';
import otherStyles from './other-styles.scss';
@customElement('my-component')
export class MyComponent extends LitElement {
// Add a single style
static styles = myStyles;
// Or more!
static styles = [myStyles, otherStyles, css`
.foo {
color: ${...};
}
`];
render() {
// ...
}
}
If you're using the lit-element
package, set the importPackage
option accordingly:
// rollup.config.js
import postcss from 'rollup-plugin-postcss';
import postcssLit from 'rollup-plugin-postcss-lit';
export default {
input: 'entry.js',
output: {
// ...
},
plugins: [
postcss({
// ...
}),
postcssLit({
importPackage: 'lit-element',
}),
],
}
This plugin is pre-configured to work with Vite, just add it to plugins
and your styles will be Lit-ified ✨
// vite.config.js/ts
import postcssLit from 'rollup-plugin-postcss-lit';
export default {
plugins: [
postcssLit(),
],
};
// my-component.js/ts
import myStyles from './styles.css?inline';
⚠️ Use the
?inline
suffix to prevent Vite from adding the styles to the CSS bundle as well
postcssLit({
/**
* A glob (or array of globs) of files to include
*
* @default '**/*.{css,sss,pcss,styl,stylus,sass,scss,less}?(*)'
*/
include: ...,
/**
* A glob (or array of globs) of files to exclude
*
* The default filter is used to prevent `<style>` HTML tags from being processed in Vite contexts
* @default '**/*\?direct*'
*/
exclude: ...,
/**
* A string denoting the name of the package from which to import the `css`
* template tag function. For lit-element this can be changed to 'lit-element'
*
* @default 'lit'
*/
importPackage: ...,
}),
rollup-plugin-postcss
injects all the imported stylesheets in <head>
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:
// rollup.config.js
export default {
...
plugins: [
postcss({
inject: false,
}),
postcssLit(),
],
};
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
.
This project is licensed under the MIT License, see LICENSE for details.