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

rollup-plugin-import-css

library4.2.1jsnpmunverified

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.

web-framework

npm install rollup-plugin-import-css

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-IMPO

rollup-plugin-import-css

web-frameworkjavascriptv4.2.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.

css

✓ import css from 'rollup-plugin-import-css'

Default export; plugin instance can be configured with options.

type Plugin

✓ import type { Plugin } from 'rollup'

✗ import type { Plugin } from 'rollup-plugin-import-css'

The plugin itself does not export additional types; plugin type comes from Rollup.

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+)

Debug

Known issues

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

fix

Upgrade Rollup to ^3.0.0 or ^4.0.0.

affects: <3.0.0

gotchaThe 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.

affects: >=0.0.0

gotchaWhen `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.

affects: >=0.0.0

Errors

Common errors & fixes

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

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.

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

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: Could not resolve './styles.css' from 'index.js'

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.

Upgrade

Version history

4.2.1latest on npm

Audit

Dependencies

rolluprequiredPeer dependency; plugin requires Rollup to function.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/jleeson/rollup-plugin-import-css ↗

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