Rollup-plugin-postcss-lit NPM

Rollup plugin postcss lit

Rollup plugin to load PostCSSed stylesheets in LitElement components

Install

$ 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.

// 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() {
    // ...
  }
}

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 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',
    }),
  ],
}

Usage with Vite

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 ?inline suffix to prevent Vite from adding the styles to the CSS bundle as well

Options

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: ...,
}),

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 -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(),
  ],
};

When should I use it?

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.