Rollup plugin to load PostCSSed stylesheets in LitElement components
npm install rollup-plugin-postcss-litRollup plugin to load PostCSSed stylesheets in LitElement components
!Node.js CI
``bash`
$ 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.
`javascript
// 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:
`typescript
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
`javascript
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:
`javascript
// 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 ✨
`javascript
// 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
`javascript
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