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
muslnode 18–223 runs
build_error
glibcnode 18–223 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
styles
✓ import styles from 'rollup-styles'
✗ import { styles } from 'rollup-styles'
Default export; the function is named 'styles' but imported as default.
styles function call
✓ const plugin = styles({ /* options */ })
✗ const plugin = new styles()
Call as a function, not a constructor.
CSS import (default)
✓ import style from './style.css'
✗ import { default as style } from './style.css'
Default export gives CSS string (in inject/extract modes).
CSS import (named css)
✓ import { css } from './style.css'
✗ import css from './style.css'
Named 'css' export always available; use for CSS Modules or explicit CSS string.
TypeScript types
✓ import type { RollupStylesOptions } from 'rollup-styles'
Bundle ships TypeScript declarations; import types as needed.
Basic rollup-styles configuration with mode options, and JS import of CSS as default or named export.
// rollup.config.js
import styles from 'rollup-styles';
export default {
output: {
assetFileNames: '[name]-[hash][extname]',
},
plugins: [styles({
mode: 'inject', // 'inject' | 'extract' | 'emit'
// For PostCSS:
// postcss: { plugins: [require('autoprefixer')] },
// For Sass:
// sass: { includePaths: ['node_modules'] },
// CSS Modules:
// modules: true,
})],
};
// In your code:
import style from './style.css';
console.log(style); // CSS string string
// Named export for CSS string:
import { css } from './style.css';
console.log(css);
Errors
Common errors & fixes
Error: Cannot find module 'rollup-styles'
package not installed or wrong package name used.
fixInstall: npm install -D rollup-styles. Ensure import path is 'rollup-styles', not 'rollup-plugin-styles'.
[!] (plugin styles) TypeError: styles is not a function
Default import used incorrectly, e.g., import { styles } from 'rollup-styles'.
fixUse default import: import styles from 'rollup-styles'.
Error: PostCSS plugin requires PostCSS 8
PostCSS plugin (e.g., Autoprefixer) version incompatible with PostCSS version used by rollup-styles.
fixEnsure PostCSS plugins use PostCSS 8 API; update plugins or use postcss version 8.
Module parse failed: Unexpected character '@' (1:0)
CSS import not handled by any loader; rollup-styles plugin not included or misconfigured.
fixAdd styles() to plugins array in rollup.config.js.
Audit
Dependencies
rolluprequiredpeer dependency: requires rollup ^2.63.0 || ^3.0.0 || ^4.0.0