rollup-plugin-styler

2.0.0 verified Mon Apr 27 auth: no javascript

Universal Rollup plugin for processing CSS, PostCSS, Sass, Less, Stylus, and CSS Modules with asset handling and URL resolving. Current stable version is 2.0.0 (released 2025-02-09), with a new major version that resets stylus dependency. Key differentiators: supports multiple preprocessors, CSS Modules type exports, inject/extract/emit modes, and automatic PostCSS config loading. Actively maintained, with recent updates focusing on dependency upgrades and CI improvements.

Common errors

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

cause Package renamed to rollup-plugin-styler

fix

npm install -D rollup-plugin-styler and update imports.

error Error: Cannot find module 'postcss' ↓

cause PostCSS is required when using PostCSS features

fix

npm install -D postcss

error TypeError: styles is not a function ↓

cause CommonJS require used instead of ESM import

fix

Use import styles from 'rollup-plugin-styler' instead of require.

Warnings

breaking v2.0.0 resets stylus version, potentially breaking if relying on older stylus features ↓

fix Update stylus usage to match the new version.

breaking The package was renamed from 'rollup-styles' to 'rollup-plugin-styler' in v1.6.0; imports from the old name will fail ↓

fix Use 'rollup-plugin-styler' instead of 'rollup-styles'.

deprecated Mode 'emit' may be removed in future versions; consider using 'inject' or 'extract' ↓

fix Switch to 'inject' or 'extract' mode.

gotcha Default mode is 'inject', which embeds CSS in JS. Use 'extract' mode to output separate CSS files ↓

fix Set mode: 'extract' in plugin options.

gotcha When using CSS Modules, import { css } instead of default export; default export returns a style object for injection ↓

fix Use `import { css } from './style.css'` for CSS string.

Install

npm install rollup-plugin-styler

yarn add rollup-plugin-styler

pnpm add rollup-plugin-styler

Imports

default

wrong

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

correct

import styles from 'rollup-plugin-styler'

ESM-only, CommonJS require not supported

RollupPluginStylerOptions

wrong

import { RollupPluginStylerOptions } from 'rollup-plugin-styler'

correct

import type { RollupPluginStylerOptions } from 'rollup-plugin-styler'

Type import only, not a runtime object

InjectOptions
```
import type { InjectOptions } from 'rollup-plugin-styler'
```
Available in v2.0.0 for configuring CSS injection

Quickstart

Rollup config with rollup-plugin-styler in extract mode with Sass support.

import styles from 'rollup-plugin-styler';

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'esm',
    assetFileNames: '[name]-[hash][extname]'
  },
  plugins: [
    styles({
      mode: 'extract',
      sass: {
        indentedSyntax: true
      }
    })
  ]
};