rollup-plugin-cssimport

1.0.3 verified Mon Apr 27 auth: no javascript deprecated

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.

Common errors

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

cause Missing plugin configuration in rollup.config.js.

fix

Add cssimport() to plugins array.

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

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

fix

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

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

cause Attempting to push to adoptedStyleSheets array.

fix

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

Warnings

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

fix Use rollup-plugin-import-assert instead.

gotcha CSS output is a string, not a CSSStyleSheet object. Must manually create sheet. ↓

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

gotcha document.adoptedStyleSheets is not a mutable array; assignment replaces entire set. ↓

fix Assign new array with desired sheets.

gotcha Browser support limited: Chrome only natively; Firefox/others need polyfill. ↓

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

Install

npm install rollup-plugin-cssimport

yarn add rollup-plugin-cssimport

pnpm add rollup-plugin-cssimport

Imports

cssimport

wrong

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

correct

import cssimport from 'rollup-plugin-cssimport'

Default export; plugin is ESM-only.

CSSStyleSheet

wrong

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

correct

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

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

adoptedStyleSheets

wrong

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

correct

document.adoptedStyleSheets = [sheet];

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

Quickstart

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];