Narnia's Psychedelic Mushrooms

    rollup-plugin-postcss-lit
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    Rollup plugin postcss lit

    Rollup plugin to load PostCSSed stylesheets in LitElement components

    Node.js CI Npm release MIT License

    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() {
        // ...
      }
    }
    JS version
    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(),
      ],
    };

    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.
      // Default: null
      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(),
      ],
    };

    ℹ️ This does not apply to Vite, see #40.

    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.

    Contributors

    License

    This project is licensed under the MIT License, see LICENSE for details.

    Install

    npm i rollup-plugin-postcss-lit

    DownloadsWeekly Downloads

    2,170

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    11.8 kB

    Total Files

    6

    Last publish

    Collaborators

    • umbopepato