LitCSS Plugin
Easily load stylesheets as LitCSS style modules.
Usage
Setup
Install it using npm
npm i -D @reboost/plugin-litcss
Install lit-element
package, if not already installed
npm i lit-element
Import it from the package, also import built-in UsePlugin
const { start, builtInPlugins: { UsePlugin } } = require('reboost');
const LitCSSPlugin = require('@reboost/plugin-litcss');
Add it to the plugins array
const { start, builtInPlugins: { UsePlugin } } = require('reboost');
const LitCSSPlugin = require('@reboost/plugin-litcss');
start({
plugins: [
UsePlugin({
include: '**/*.lit.css',
use: LitCSSPlugin()
})
]
});
Require file in your code
import style from './file.lit.css';
Example
Basic usage with lit-element
reboost.js
const { start, builtInPlugins: { UsePlugin } } = require('reboost');
const LitCSSPlugin = require('@reboost/plugin-litcss');
start({
plugins: [
UsePlugin({
include: '**/*.lit.css',
use: LitCSSPlugin()
})
]
});
styles.lit.css
.main {
font-family: sans-serif;
font-size: x-large;
background-color: rgb(248, 33, 115);
color: white;
padding: 10px;
display: inline-block;
}
index.js
import { LitElement, customElement, html } from 'lit-element';
import style from './styles.lit.css';
@customElement('my-element')
export class MyElement extends LitElement {
static get styles() {
return [style];
}
render() {
return html`
<span class="main">Lit Element</span>
`
}
}