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

rollup-plugin-lit-css

library6.0.1jsnpmunverified

Rollup plugin to import CSS files as JavaScript tagged-template literal objects for LitElement, FAST, and other web component libraries. Current version 6.0.1, released August 2024. Includes support for minification via cssnano, custom template tag specifiers, and transform hooks for Sass/Less/PostCSS. Ships TypeScript types. Key differentiator: allows CSS-in-CSS workflow for Lit-based projects, vs alternatives like lit-css-loader (webpack) or esbuild-plugin-lit-css.

web-framework

npm install rollup-plugin-lit-css

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-LIT-

rollup-plugin-lit-css

web-frameworkjavascriptv6.0.1

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 litcss from 'rollup-plugin-lit-css';

✗ const litcss = require('rollup-plugin-lit-css');

ESM-only since v6; no CommonJS support. Requires Rollup ESM config.

RollupPluginLitCssOptions

✓ import type { RollupPluginLitCssOptions } from 'rollup-plugin-lit-css';

✗ import { Options } from 'rollup-plugin-lit-css';

TypeScript users must use the exact exported type name for options.

style (imported CSS file)

✓ import style from './styles.css';

✗ import { css } from './styles.css';

CSS files are imported as default exports, not named exports. The plugin transforms CSS into a tagged template literal.

Minimal Rollup config and LitElement component showing CSS import via tagged template literal.

// rollup.config.js import litcss from 'rollup-plugin-lit-css'; export default { input: 'src/index.js', output: { dir: 'dist', format: 'es' }, plugins: [ litcss({ include: ['**/*.css'], cssnano: true, // minify output }), ], }; // src/component.ts import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators.js'; import style from './styles.css'; @customElement('my-component') class MyComponent extends LitElement { static styles = [style]; render() { return html`<p>Hello World</p>`; } }

Debug

Known issues

breakingv6 drops CommonJS support; package is ESM-only.

fix

Use ESM imports or switch to v5.x if CJS required.

affects: >=6.0.0

deprecatedThe `options` export was removed; use `RollupPluginLitCssOptions` type.

fix

Replace `Options` with `RollupPluginLitCssOptions` in TypeScript definitions.

affects: >=6.0.0

gotchaWhen using `specifier`, the package must export a `css` function. `@microsoft/fast-element` exports `css` as a named export.

fix

Ensure the specifier package's `css` function is compatible with tagged template literals.

affects: >=1.0.0

gotchaCSS imports are default-exported as an object, not a string. Using `require()` will not work; must use `import`.

fix

Use `import style from './file.css'` syntax; do not use `require`.

affects: >=1.0.0

gotchaThe `transform` option must return a string, not a Buffer or object. Async transforms are supported.

fix

If using Sass, call `.css.toString()`. For PostCSS, access `.css` property.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Cannot find module 'rollup-plugin-lit-css'

Missing dependency or using wrong import path (CJS vs ESM).

fix

Run `npm install rollup-plugin-lit-css`. Ensure Rollup is configured for ESM.

TypeError: litcss is not a function

CommonJS require() used with ESM-only package (v6+).

fix

Change to ESM import: `import litcss from 'rollup-plugin-lit-css'`.

The requested module 'rollup-plugin-lit-css' does not provide an export named 'Options'

Type `Options` renamed to `RollupPluginLitCssOptions` in v6.

fix

Use `import type { RollupPluginLitCssOptions } from 'rollup-plugin-lit-css'`.

Upgrade

Version history

6.0.1latest on npm

Audit

Dependencies

litoptionalRequired at runtime to provide the `css` tagged template literal function (or override via `specifier`)

@microsoft/fast-elementoptionalAlternative specifier for FAST projects instead of `lit`

cssnanooptionalOptional minification support when `cssnano` option is enabled

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/bennypowers/lit-css ↗

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