https://github.com/umbopepato/rollup-plugin-postcss-lit
Rollup plugin to load PostCSSed stylesheets in LitElement components
https://github.com/umbopepato/rollup-plugin-postcss-lit
css lit-element lit-html postcss rollup rollup-plugin
Last synced: about 1 year ago
JSON representation
Rollup plugin to load PostCSSed stylesheets in LitElement components
- Host: GitHub
- URL: https://github.com/umbopepato/rollup-plugin-postcss-lit
- Owner: umbopepato
- License: mit
- Created: 2019-05-14T09:45:24.000Z (about 7 years ago)
- Default Branch: main
- Last Pushed: 2025-04-12T14:33:34.000Z (about 1 year ago)
- Last Synced: 2025-04-12T14:43:24.468Z (about 1 year ago)
- Topics: css, lit-element, lit-html, postcss, rollup, rollup-plugin
- Language: TypeScript
- Homepage:
- Size: 726 KB
- Stars: 34
- Watchers: 3
- Forks: 6
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Rollup plugin postcss lit
Rollup plugin to load PostCSSed stylesheets in LitElement components
[](https://npmjs.org/package/rollup-plugin-postcss-lit)
[](LICENSE)
## Install
```bash
$ npm i -D rollup-plugin-postcss-lit
```
## 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.
```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);
```
### Usage with lit-element
If you're using the `lit-element` package, set the [`importPackage` option](#options) 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',
}),
],
}
```
### Usage with Vite
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
## Options
```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 `` 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: ...,
}),
```
## PostCSS plugin setup
`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](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)
-based style encapsulation in your Lit components. Unless you're using
[Light DOM](https://lit.dev/docs/components/shadow-dom/#implementing-createrenderroot),
consider disabling the `inject` option:
```javascript
// rollup.config.js
export default {
...
plugins: [
postcss({
inject: false,
}),
postcssLit(),
],
};
```
## When should I use it?
This plugin is meant to be used with [`rollup-plugin-postcss`](https://github.com/egoist/rollup-plugin-postcss).
If you only need to load plain css files in your LitElement components,
consider using [`rollup-plugin-lit-css`](https://github.com/bennypowers/rollup-plugin-lit-css).
### Contributors
<a href="https://github.com/umbopepato/rollup-plugin-postcss-lit/graphs/contributors">
<img src="https://contributors-img.web.app/image?repo=umbopepato/rollup-plugin-postcss-lit" height="40"/>
</a>
### License
This project is licensed under the MIT License, see [LICENSE](./LICENSE) for details.