Registry / web-framework / rollup-plugin-lit-html-style

rollup-plugin-lit-html-style

library0.3.3jsnpmunverified

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.

web-framework

npm install rollup-plugin-lit-html-style

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-LIT-

rollup-plugin-lit-html-style

web-frameworkjavascriptv0.3.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import style from './test.scss'

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

SCSS files import the CSSResult as a default export.

style (function)

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

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

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

Plugin function

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

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

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

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

Debug

Known issues

breakingv2 changed export from TemplateResult to CSSResult; existing templates break.

fix

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

affects: >=2.0.0

breakingv3 replaced node-sass with sass package.

fix

Install sass as a peer dependency: npm install sass.

affects: >=3.0.0

gotchaLocal SCSS imports must start with relative path or they resolve to node_modules.

fix

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

affects: >=2.0.0

deprecatedThis plugin is no longer actively maintained; newer alternatives exist.

fix

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

affects: >=0.0.0

Errors

Common errors & fixes

Error: Cannot find module 'sass'

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

fix

npm install sass --save-dev

Unexpected token: punc (.)

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

fix

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

Upgrade

Version history

0.3.3latest on npm

Audit

Dependencies

rollupoptionalpeer dependency, needed as Rollup plugin

Agent activity

8 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/odinr/rollup ↗

packagehttps://www.npmjs.com/package/rollup-plugin-lit-html-style ↗