rollup-plugin-lit-styles

A Rollup.js plugin for loading CSS styles into lit-html components with pre-processing. Comes batteries-included for Sass and PostCSS processing, and provides support for user-defined style processing for other CSS processors.

Installation

# yarn
yarn add rollup-plugin-lit-styles -D

# npm
npm i rollup-plugin-lit-styles -D

Usage

// rollup.config.js
import litStyles from 'rollup-plugin-lit-styles';
import cssnano from 'cssnano';
import autoprefixer from 'autoprefixer';

export default {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'esm'
    },
    plugins: {
        litStyles({
            postCssPlugins: [
                autoprefixer(),
                cssnano()
            ]
        })
    }
};

// src/my-component.scss
.some {
    .scss {
        background: red;
    }
}

// src/index.js
import { html, LitElement } from 'lit-element';
import styles from './my-component.scss';

class MyComponent extends LitElement {
    static styles = styles;

    constructor() {
        super();
    }

    render() {
        return html`
            <div class="some">
                <div class="scss">
                    Red background!
                </div>
            </div>
        `;
    }
}

window.customElements.define('my-component', MyComponent);

Options

extensions

Type: Array<string> | Default: ['.css', '.scss', '.sass', '.pcss']

The list of extensions to attempt to load as styles files. Extensions may or may not start with a '.'

preProcessors

Type: Array<'sass' | 'postcss' | StylesProcessorOptions> | Default: ['sass', 'postcss']

A list of styles preprocessors to process the styles files with. The processors will be run in the order they are provided. To specify a default pre-processor, supply its name ('sass' or 'postcss'). To specify a custom pre-processor, supply a StylesProcessorOptions dictionary. See Custom processors for details.

sass

Type: any

Any additional options to pass to the Sass processor (see documentation). If data is supplied, it will be overridden.

postcss

Type: any

Any additional options to pass to the PostCSS processor (see documentation). If from is supplied, it will be overridden.

postcssPlugins

Type: Array<any>

An array of PostCSS plugins to pass to the PostCSS processor.

Custom processors

For examples of what a processor looks like, refer to defaultPreProcessors.js.

If you create a processor definition for your favourite CSS processor, feel free to submit a PR to add it as a default.

To create a custom processor, pass a dictionary with the following properties to the preProcessors option:

extensions

Type: Array<string> | Default: []

The list of extensions which this processor supports. Extensions may or may not start with a '.'. If a '*' is supplied as an extension, then the processor will process any file type.

process

Type: function

An asyncronous processing function that will receive as input a dictionary with the following options:

• pluginOptions: The original plugin options supplied to the plugin. Used by default processors for accessing low-level processor options supplied by the user.
• moduleId: The Rollup module ID (file path) for the file being processed.
• styles: The styles to process. Either the initial contents of the file being processed or the resulting styles from the previous processor.

And returning a promise resolving with a dictionary with the following properties:

• styles: The styles after being processed by the processor.
• watchFiles: An optional array of file paths to tell Rollup to watch for changes (usually any files imported by the styles while being processed).
• warnings: An optional array of warnings generated by the processor to be output to the console.