rollup-styles

1.5.0 verified Mon Apr 27 auth: no javascript

Universal Rollup plugin for processing CSS and preprocessor files (PostCSS, Sass, Less, Stylus). Current stable version is v1.5.0 (v2.0.0 available but may have breaking changes). Supports CSS Modules, URL resolving/rewriting with asset handling, and @import in regular CSS. Modes: inject (default, CSS embedded in JS), extract (separate CSS files), emit (pass through for other plugins). Automatic PostCSS config loading. Ships TypeScript types. Alternative to rollup-plugin-postcss or rollup-plugin-css-only.

Common errors

error Error: Cannot find module 'rollup-styles' ↓

cause package not installed or wrong package name used.

fix

Install: npm install -D rollup-styles. Ensure import path is 'rollup-styles', not 'rollup-plugin-styles'.

error [!] (plugin styles) TypeError: styles is not a function ↓

cause Default import used incorrectly, e.g., import { styles } from 'rollup-styles'.

fix

Use default import: import styles from 'rollup-styles'.

error Error: PostCSS plugin requires PostCSS 8 ↓

cause PostCSS plugin (e.g., Autoprefixer) version incompatible with PostCSS version used by rollup-styles.

fix

Ensure PostCSS plugins use PostCSS 8 API; update plugins or use postcss version 8.

error Module parse failed: Unexpected character '@' (1:0) ↓

cause CSS import not handled by any loader; rollup-styles plugin not included or misconfigured.

fix

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

Warnings

breaking v2.0.0 changed the package name from rollup-plugin-styler to rollup-styles; older v1.x was rollup-plugin-styles. ↓

fix Update import from 'rollup-plugin-styles' to 'rollup-styles'. Check peer dependency for rollup.

breaking Peer dependency requires rollup ^2.63.0 || ^3.0.0 || ^4.0.0; lower versions not supported. ↓

fix Upgrade rollup to ^2.63.0, ^3.0.0, or ^4.0.0.

gotcha In 'emit' mode, no exports (default or named) are available from CSS imports; CSS is passed along the build pipeline for other plugins. ↓

fix Do not expect any export from CSS when mode:'emit'. Use for preprocessing only.

gotcha CSS Modules do not provide a default export; use named destructuring: import { css } from './style.css' to get the CSS string object. ↓

fix Always use { css } import when modules:true.

deprecated Configuration via rollup-plugin-styles (older npm package name) is deprecated; use rollup-styles. ↓

fix Replace 'rollup-plugin-styles' with 'rollup-styles' in package.json and imports.

Install

npm install rollup-styles

yarn add rollup-styles

pnpm add rollup-styles

Imports

styles
wrong
```
import { styles } from 'rollup-styles'
```
correct
```
import styles from 'rollup-styles'
```
Default export; the function is named 'styles' but imported as default.

styles function call

wrong

const plugin = new styles()

correct

const plugin = styles({ /* options */ })

Call as a function, not a constructor.

CSS import (default)
wrong
```
import { default as style } from './style.css'
```
correct
```
import style from './style.css'
```
Default export gives CSS string (in inject/extract modes).
CSS import (named css)
wrong
```
import css from './style.css'
```
correct
```
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.

Quickstart

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