Registry / web-framework / rollup-plugin-cssimport

rollup-plugin-cssimport

library1.0.3jsnpmunverified

A Rollup plugin (v1.0.3, last updated 2021) that converts CSS imports into CSSStyleSheet objects for use with adoptedStyleSheets. It works natively in Chrome and requires a polyfill for other browsers. The plugin is deprecated in favor of rollup-plugin-import-assert, which aligns with modern web standards. Only supports global and element-level CSS imports; does not support CSS modules or custom transformations.

web-framework serialization

npm install rollup-plugin-cssimport

package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-CSSI

rollup-plugin-cssimport

web-frameworkjavascriptv1.0.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.

cssimport

✓ import cssimport from 'rollup-plugin-cssimport'

✗ const cssimport = require('rollup-plugin-cssimport')

Default export; plugin is ESM-only.

CSSStyleSheet

✓ import style from './styles.css'; const sheet = new CSSStyleSheet(); sheet.replaceSync(style);

✗ import * as style from './styles.css'; // returns module object, not string

Plugin returns the CSS as a string; you must create the CSSStyleSheet manually.

adoptedStyleSheets

✓ document.adoptedStyleSheets = [sheet];

✗ document.adoptedStyleSheets.push(sheet); // Array is frozen in some browsers

Assignment replaces entire array; use spread for add/remove.

Basic Rollup config using the plugin, importing CSS and applying as an adopted stylesheet.

// rollup.config.js import cssimport from 'rollup-plugin-cssimport'; export default { input: 'src/index.js', output: { file: 'dist/bundle.js', format: 'iife' }, plugins: [cssimport()] }; // src/index.js import style from './styles.css'; const sheet = new CSSStyleSheet(); sheet.replaceSync(style); document.adoptedStyleSheets = [sheet];

Debug

Known issues

deprecatedPackage is deprecated; consider migrating to rollup-plugin-import-assert.

fix

Use rollup-plugin-import-assert instead.

affects: >=0.0.0

gotchaCSS output is a string, not a CSSStyleSheet object. Must manually create sheet.

fix

Use new CSSStyleSheet() and sheet.replaceSync(style).

affects: >=0.0.0

gotchadocument.adoptedStyleSheets is not a mutable array; assignment replaces entire set.

fix

Assign new array with desired sheets.

affects: >=0.0.0

gotchaBrowser support limited: Chrome only natively; Firefox/others need polyfill.

fix

Add construct-style-sheets polyfill for non-Chrome browsers.

affects: >=0.0.0

Errors

Common errors & fixes

Error: "Unexpected token" when importing .css file without plugin

Missing plugin configuration in rollup.config.js.

fix

Add cssimport() to plugins array.

TypeError: Failed to construct 'CSSStyleSheet': 'replaceSync' is not a function

Browser does not support CSSStyleSheet.replaceSync (e.g., older Chrome).

fix

Use sheet.replace(style) (async) or update browser.

TypeError: Cannot assign to read only property 'adoptedStyleSheets' of object '[object Document]'

Attempting to push to adoptedStyleSheets array.

fix

Assign a new array, e.g., document.adoptedStyleSheets = [...document.adoptedStyleSheets, newSheet];

Upgrade

Version history

1.0.3latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

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