Registry / web-framework / rollup-plugin-scss-lit

rollup-plugin-scss-lit

library2.1.0jsnpmunverified

Rollup plugin that imports Sass/SCSS sources as constructable stylesheets for Lit (lit-html/lit-element) and FAST Element projects. Version 2.1.0, released 2024-12-10, supports Node >=18 and peer dependencies lit ^2||^3 and rollup ^2||^3||^4. Replaces rollup-plugin-styles + rollup-plugin-lit-css with a single step. Uses the official Sass compileString API, supports minification via cssnano or esbuild, custom PostCSS transforms, include/exclude patterns, and TypeScript declarations. Faster and simpler than alternative multi-plugin setups.

web-framework serialization

npm install rollup-plugin-scss-lit

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-SCSS

rollup-plugin-scss-lit

web-frameworkjavascriptv2.1.0

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.

litScss

✓ import { litScss } from 'rollup-plugin-scss-lit'

✗ import litScss from 'rollup-plugin-scss-lit'

The plugin exports a named function `litScss`, not a default export.

default export (type declaration)

✓ declare module '*.scss' { import { CSSResultGroup } from 'lit'; const styles: CSSResultGroup; export default styles; }

✗ declare module '*.scss' { const content: string; export default content; }

TypeScript declaration must use CSSResultGroup from 'lit', not a plain string type.

CSSResultGroup

✓ import { CSSResultGroup } from 'lit'

✗ import { CSSResult } from 'lit'

The official Lit type for static styles arrays is CSSResultGroup, not CSSResult (though CSSResult is assignable).

Shows Rollup config with litScss plugin and a LitElement component importing a SCSS file as static styles.

// rollup.config.js import { litScss } from 'rollup-plugin-scss-lit'; export default { input: 'src/index.js', output: { file: 'dist/bundle.js', format: 'esm' }, plugins: [ litScss({ include: ['**/*.scss'], exclude: ['node_modules/**'], options: { loadPaths: ['node_modules'] }, minify: process.env.NODE_ENV === 'production', plugins: [] // optional PostCSS plugins }) ] }; // src/my-element.js import { LitElement } from 'lit'; import styles from './my-styles.scss'; class MyElement extends LitElement { static styles = styles; render() { return html`<div>Hello</div>`; } } customElements.define('my-element', MyElement);

Debug

Known issues

breakingMinimum Node.js version is 18 since v2.0.0.

fix

Upgrade Node.js to >=18.

affects: >=2.0.0

breakingPeer dependency changes: lit ^2 || ^3, rollup ^2 || ^3 || ^4 in v2.0.1+. Older versions may not support Rollup 4 or Lit 3.

fix

Update to v2.0.1+ for Lit 3 and Rollup 4 support.

affects: <2.0.1

deprecatedThe undocumented 'fast' option in minify object (e.g., { fast: true }) uses esbuild for minification; this is experimental and currently not recommended.

fix

Use plain minify: true with cssnano, or configure PostCSS plugins explicitly.

affects: >=1.1.0

gotchaTypeScript requires a module declaration for *.scss imports; otherwise you get 'Cannot find module' errors.

fix

Create src/styles.d.ts declaring module '*.scss' with default export of type CSSResultGroup from 'lit'.

affects: >=0.0.0

gotchaPlugin uses compileString from Sass; options are passed directly to it. Unsupported Sass options may break silently.

fix

Check Sass compileString documentation for valid options. Avoid importer or syntax options meant for legacy API.

affects: >=0.0.0

gotchaWhen using TypeScript with a custom outDir, SCSS files must be copied to that directory (e.g., using rollup-plugin-copy with hook 'buildStart').

fix

Add a copy plugin in rollup.config.js that copies src/**/*.scss to the outDir before other plugins run.

affects: >=0.0.0

Errors

Common errors & fixes

Cannot find module './styles.scss' or its corresponding type declarations.

TypeScript cannot resolve SCSS imports without a module declaration.

fix

Create src/styles.d.ts: declare module '*.scss' { import { CSSResultGroup } from 'lit'; const styles: CSSResultGroup; export default styles; }

Error: Could not resolve entry module (src/index.js) or similar Rollup errors.

Plugin may not be installed or not added to plugins array.

fix

Ensure rollup-plugin-scss-lit is installed (npm i -D rollup-plugin-scss-lit) and added to plugins: [litScss()] in rollup.config.js.

TypeError: Cannot destructure property 'litScss' of ... as it is undefined.

Attempted default import instead of named import.

fix

Use import { litScss } from 'rollup-plugin-scss-lit' (curly braces).

Upgrade

Version history

2.1.0latest on npm

Audit

Dependencies

litrequiredPeer dependency – provides CSSResult and CSSResultGroup types for constructable stylesheets.

rolluprequiredPeer dependency – required to function as a Rollup plugin.

sassrequiredUsed under the hood for compiling SCSS to CSS.

Agent activity

13 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/prantlf/rollup-plugin-scss-lit ↗

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