rollup-plugin-stylus-compiler

A rollup plugin to compile stylus file (.styl or .stylus) to css file. This plugin only integrates stylus to do the compile job. Need other plugin to deal with the compiled css content. Such as:

• rollup-plugin-css-porter - output css to a standalone file, also with a minified version
• rollup-plugin-postcss - inline css into module
• rollup-plugin-css-only - output css to a standalone file.

Installation

npm install --save-dev rollup-plugin-stylus-compiler

Usage

Case 1: use with rollup-plugin-css-porter plugin

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

rollup({
  entry: 'main.js',
  plugins: [ stylus(), css()]
}).then(bundle => {
  bundle.write({
    format: 'es',
    dest: 'bundle.js'
  });
});

Output bundle.css and bundle.min.css.

Case 2: use with rollup-plugin-postcss plugin

import { rollup } from 'rollup';
import stylus from 'rollup-plugin-stylus-compiler';
import postcss from 'rollup-plugin-postcss';

rollup({
  entry: 'main.js',
  plugins: [ stylus(), postcss()]
}).then(bundle => {
  bundle.write({
    format: 'es',
    dest: 'bundle.js'
  });
});

Inline css to bundle.js.

Case 3: use with rollup-plugin-css-only plugin

import { rollup } from 'rollup';
import stylus from 'rollup-plugin-stylus-compiler';
import css from 'rollup-plugin-css-only';

rollup({
  entry: 'main.js',
  plugins: [ stylus(), css()]
}).then(bundle => {
  bundle.write({
    format: 'es',
    dest: 'bundle.js'
  });
});

Output bundle.css.

Build

npm run build

Run Test

npm test