@reboost/plugin-litcss

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>
    `
  }
}