Registry / devops / rollup-plugin-styles

rollup-plugin-styles

library4.0.0jsnpmunverified

Universal Rollup CSS processing plugin that supports PostCSS, Sass, Less, Stylus, CSS Modules, URL resolving, and assets. v4.0.0 requires Rollup ^2.63.0 and drops Node 12. Ships TypeScript types. Active development as of 2022. Differentiators: supports multiple preprocessors out-of-the-box, CSS Modules without extra config, and multiple modes (inject, extract, emit).

devops

npm install rollup-plugin-styles

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-STYL

rollup-plugin-styles

devopsjavascriptv4.0.0

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 styles from 'rollup-plugin-styles'

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

ESM-only since v4; CommonJS require will fail.

styles

✓ import { styles } from 'rollup-plugin-styles'

✗ import styles from 'rollup-plugin-styles'

Both default and named exports available, but default is the plugin factory.

type Options

✓ import type { Options } from 'rollup-plugin-styles'

✗ import { Options } from 'rollup-plugin-styles'

Options type is exported for TypeScript projects; avoid runtime import.

Basic Rollup configuration with SCSS support and CSS Modules enabled.

// rollup.config.js import styles from 'rollup-plugin-styles'; export default { input: 'src/index.js', output: { dir: 'dist', format: 'esm', assetFileNames: '[name]-[hash][extname]' }, plugins: [ styles({ mode: 'inject', modules: true, sass: { includePaths: ['node_modules', 'src/styles'] } }) ] }; // src/index.js import style from './styles.scss'; console.log(style); // class names if CSS Modules enabled

Debug

Known issues

breakingv4.0.0 dropped support for `sass` package's `fibers` option. Only dart-sass is supported.

fix

Remove `fibers` option; use dart-sass (default).

affects: >=4.0.0

breakingv4.0.0 requires Rollup ^2.63.0. Older Rollup versions are incompatible.

fix

Upgrade Rollup to ^2.63.0.

affects: >=4.0.0

breakingv4.0.0 dropped Node 12 support. Minimum Node version is ^14.13.1 || >=16.0.0.

fix

Upgrade Node to v14.13.1+, v16.0.0+, or later.

affects: >=4.0.0

deprecatedUsing `require('rollup-plugin-styles')` is deprecated. Import is the recommended way.

fix

Switch to `import styles from 'rollup-plugin-styles'`.

affects: >=4.0.0

gotchaCSS Modules export class names via default export only in `inject` or `extract` mode; in `emit` mode no exports are available.

fix

Use `mode: 'inject'` or `mode: 'extract'` to access class names. For `emit`, use other plugins downstream.

affects: >=3.0.0

gotchaWhen using `@import` in Sass/Less, prepend with `~` to resolve from node_modules or it may treat as local file.

fix

Use `@import '~package/path'` for node_modules imports in Sass/Less.

affects: >=3.0.0

Errors

Common errors & fixes

Error: Must use import to load ES Module: /project/node_modules/rollup-plugin-styles/dist/index.js

Using CommonJS require() instead of ESM import.

fix

Change `const styles = require('rollup-plugin-styles')` to `import styles from 'rollup-plugin-styles'`.

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

Missing or incorrect Rollup configuration referencing plugin options.

fix

Ensure the plugin is invoked with proper options object: `styles({ modules: true })`.

Error: The 'sass' option 'fibers' is no longer supported in rollup-plugin-styles v4.

Using deprecated `fibers` option for Sass synchronization.

fix

Remove `fibers` from sass options; use dart-sass with async compilation.

RollupError: Could not resolve './style.css' from 'src/index.js'

Rollup not configured to handle CSS imports or plugin not added.

fix

Add `styles()` to plugins array in rollup.config.js.

Upgrade

Version history

4.0.0latest on npm

Audit

Dependencies

rolluprequiredpeer dependency - requires Rollup ^2.63.0

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/Anidetrix/rollup-plugin-styles ↗

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