Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

rollup-plugin-postcss-lit

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

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
  • Socket score

Version published
Weekly downloads
4.4K
increased by8.49%
Maintainers
1
Weekly downloads
 
Created
Source

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


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

Package last updated on 21 Jun 2023

Did you know?

Socket

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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc