rollup-plugin-stylus-compiler

1.0.1 verified Mon Apr 27 auth: no javascript maintenance

A Rollup plugin (version 1.0.1, released Oct 2019) that compiles .styl/.stylus files to CSS using the Stylus preprocessor. It does not handle CSS output directly; instead, it must be paired with another plugin (e.g., rollup-plugin-css-porter, rollup-plugin-css-only, or rollup-plugin-postcss) to emit or inline the resulting CSS. The plugin is minimal, focusing solely on Stylus compilation, and relies on Stylus as a peer dependency. Compared to rollup-plugin-postcss (which supports multiple preprocessors), this plugin is Stylus-specific and lighter. Last updated in 2019, it is considered maintenance-only.

Common errors

error TypeError: stylus is not a function ↓

cause Importing the plugin incorrectly as an object instead of calling as a function.

fix

Ensure you use stylus() in your plugins array, not stylus.

error Error: Cannot find module 'stylus' ↓

cause Stylus peer dependency not installed.

fix

Run: npm install --save-dev stylus

error Error: [plugin: rollup-plugin-stylus-compiler] Could not load /path/to/file.styl ↓

cause Stylus file path is incorrect or file does not exist.

fix

Verify the import path in your JavaScript file (e.g., import './style.styl').

error Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) ↓

cause Rollup is trying to parse the .styl file without the plugin being applied.

fix

Add stylus() to the plugins array in your Rollup config.

Warnings

deprecated Package not updated since 2019; Stylus updates may cause incompatibilities. ↓

fix Consider using rollup-plugin-postcss which supports Stylus via options: plugins: [postcss({ preprocessor: 'stylus' })].

breaking Requires Stylus as a peer dependency; missing Stylus will cause runtime error. ↓

fix Install stylus: npm install --save-dev stylus

gotcha Plugin only transforms .styl/.stylus files; CSS output must be handled by an additional plugin. ↓

fix Add a CSS output plugin like rollup-plugin-css-porter, rollup-plugin-css-only, or rollup-plugin-postcss after stylus().

gotcha The default export is a function; calling it without parentheses results in a broken build. ↓

fix Use stylus() not stylus.

gotcha Rollup v1.x compatible only; does not support Rollup v2+ or v3+. ↓

fix Use rollup-plugin-postcss or fork/update the plugin.

Install

npm install rollup-plugin-stylus-compiler

yarn add rollup-plugin-stylus-compiler

pnpm add rollup-plugin-stylus-compiler

Imports

default import (stylus function)
wrong
```
const stylus = require('rollup-plugin-stylus-compiler')
```
correct
```
import stylus from 'rollup-plugin-stylus-compiler'
```
CommonJS require works but is not recommended for future-proofing. The package has no named exports.
Plugin invocation
wrong
```
plugins: [stylus]
```
correct
```
plugins: [stylus()]
```
The default export is a factory function; it must be called with optional options (e.g., stylus({ compress: true })).

Using with rollup-plugin-css-porter

import stylus from 'rollup-plugin-stylus-compiler';
import css from 'rollup-plugin-css-porter';

export default { plugins: [stylus(), css()] }

Order matters: stylus() must come before CSS output plugins.

Quickstart

Shows minimal setup with rollup-plugin-css-porter to compile .styl and output CSS files.

// Install: npm install --save-dev rollup rollup-plugin-stylus-compiler rollup-plugin-css-porter stylus
// rollup.config.js
import stylus from 'rollup-plugin-stylus-compiler';
import css from 'rollup-plugin-css-porter';

export default {
  input: 'src/main.js',
  plugins: [stylus(), css()],
  output: {
    format: 'es',
    file: 'dist/bundle.js'
  }
};

// src/main.js
import './style.styl';  // outputs dist/bundle.css and dist/bundle.min.css via css-porter