Rollup plugin to load PostCSSed stylesheets in LitElement components
$ npm i -D rollup-plugin-postcss-litAdd 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() {
// ...
}
}JS version
import {LitElement, css} from 'lit';
import myStyles from './styles.css';
import otherStyles from './other-styles.scss';
export class MyComponent extends LitElement {
// Add a single style
static get styles() {
return myStyles;
}
// Or more!
static get styles() {
return [myStyles, otherStyles, css`
.foo {
color: ${...};
}
`];
}
render() {
// ...
}
}
customElements.define('my-component', MyComponent);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?inlinesuffix 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.