rollup-plugin-import-css

4.2.1 verified Mon Apr 27 auth: no javascript

A lightweight Rollup plugin (v4.2.1) for importing CSS into JavaScript via ES module syntax. Supports three import forms: side-effect imports to extract CSS into an external bundle, named imports to get CSS as a string, and import attributes to get a CSSStyleSheet. Features include minification, CSS Modules, runtime injection, preserveModules compatibility, and output file configuration. Differentiators include small size, import-order preservation, and no built-in Sass/Less processing (offers transform function instead). Requires Rollup ^2.x || ^3.x || ^4.x and Node >=16.

Common errors

error Error: The 'with' syntax is not supported in Rollup < 3.0.0 ↓

cause Using import attributes with an older Rollup version.

fix

Upgrade Rollup to version 3 or 4, or use side-effect import (import './file.css') instead.

error TypeError: Cannot read properties of undefined (reading 'code') ↓

cause Missing or malformed plugin configuration (e.g., missing options object or wrong structure).

fix

Ensure the plugin is called with correct options: css({ output: 'styles.css' }).

error Error: Could not resolve './styles.css' from 'index.js' ↓

cause The CSS file path is incorrect or the plugin is not properly handling the import.

fix

Check the relative path from the importing module; the plugin only processes valid CSS imports.

Warnings

breaking Import attributes (with { type: 'css' }) require Rollup v3 or higher. ↓

fix Upgrade Rollup to ^3.0.0 or ^4.0.0.

gotcha The built-in minifier uses regex and may not handle complex CSS. For advanced minification, use the `transform` option with a proper CSS minifier. ↓

fix Configure the `transform` function with a library like clean-css or cssnano.

gotcha When `preserveModules` is enabled, CSS imports are retained in the output by default. Set `preserveImports: false` to remove them. ↓

fix If you don't want CSS imports in the final bundle, add `preserveImports: false` to the plugin options.

Install

npm install rollup-plugin-import-css

yarn add rollup-plugin-import-css

pnpm add rollup-plugin-import-css

Imports

css
```
import css from 'rollup-plugin-import-css'
```
Default export; plugin instance can be configured with options.
type Plugin
wrong
```
import type { Plugin } from 'rollup-plugin-import-css'
```
correct
```
import type { Plugin } from 'rollup'
```
The plugin itself does not export additional types; plugin type comes from Rollup.

Quickstart

Shows configuration with options (output, minify) and all three CSS import forms.

// rollup.config.js
import css from 'rollup-plugin-import-css';

export default {
  input: 'src/index.js',
  output: { file: 'dist/bundle.js', format: 'esm' },
  plugins: [
    css({
      output: 'dist/styles.css',
      minify: true,
      modules: false,
      inject: false,
      alwaysOutput: false
    })
  ]
};

// src/index.js
import './styles.css'; // extracts to dist/styles.css
import styles from './other.css'; // imports as string
import sheet from './sheet.css' with { type: 'css' }; // CSSStyleSheet (Rollup 3+)