New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

rollup-plugin-postcss-lit

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

rollup-plugin-postcss-lit

Rollup plugin to load PostCSSed stylesheets in LitElement components

2.1.0
latest
Source
npm

Version published: 2 years ago

Maintainers: 1

Created: 6 years ago

Source

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

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


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

Contributors

License

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

Keywords

FAQs

What is rollup-plugin-postcss-lit?

Is rollup-plugin-postcss-lit well maintained?

Package last updated on 21 Jun 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install