rollup-plugin-lit-html-style

0.3.3 verified Mon Apr 27 auth: no javascript maintenance

Rollup plugin that extracts SCSS/SASS styles and embeds them as CSSResult for lit-html/lit-element components. Currently at version 0.3.3. This plugin replaces node-sass with sass in v3, and changed the default template export from TemplateResult to CSSResult in v2. It supports custom compilers and processors, but note that the active version (0.3.3) is old and the author recommends using newer alternatives like @chialab/postcss-lit. The plugin is in maintenance mode with infrequent releases.

Common errors

error Error: Cannot find module 'sass' ↓

cause v3 uses 'sass' but it's not installed.

fix

npm install sass --save-dev

error Unexpected token: punc (.) ↓

cause Using named import instead of default import for .scss files.

fix

Change 'import { style } from './style.scss' to 'import style from './style.scss'

Warnings

breaking v2 changed export from TemplateResult to CSSResult; existing templates break. ↓

fix If you need inline style in template, use unsafeHTML or custom template function.

breaking v3 replaced node-sass with sass package. ↓

fix Install sass as a peer dependency: npm install sass.

gotcha Local SCSS imports must start with relative path or they resolve to node_modules. ↓

fix Use './_partial.scss' instead of '_partial.scss'.

deprecated This plugin is no longer actively maintained; newer alternatives exist. ↓

fix Consider using @chialab/postcss-lit or rollup-plugin-webcomponent-style.

Install

npm install rollup-plugin-lit-html-style

yarn add rollup-plugin-lit-html-style

pnpm add rollup-plugin-lit-html-style

Imports

default

wrong

import { style } from './test.scss'

correct

import style from './test.scss'

SCSS files import the CSSResult as a default export.

style (function)

wrong

const stylePlugin = require('rollup-plugin-lit-html-style')

correct

import stylePlugin from 'rollup-plugin-lit-html-style'

The plugin is a default export function, not a named export.

Plugin function

wrong

import { style } from 'rollup-plugin-lit-html-style'

correct

import stylePlugin from 'rollup-plugin-lit-html-style';
plugins: [ stylePlugin({ compress: false }) ]

Common mistake is destructuring named export, but only a default export exists.

Quickstart

Configure Rollup to process .scss files and embed them as CSSResult in lit-html components.

// rollup.config.js
import litHtmlStyle from 'rollup-plugin-lit-html-style';

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'esm'
  },
  plugins: [
    litHtmlStyle({
      esmodules: true,
      compress: true,
      include: ['**/*.scss']
    })
  ]
};