Skip to content

RJHwang/rollup-plugin-stylus-compiler

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

62 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

Supported rollup version :

plugin version rollup version
1.x 1.x
0.4.x 0.48.0~0.68.2
0.1.0~0.3.x 0.36.0~0.47.6

Installation

Use npm:

npm install --save-dev rollup-plugin-stylus-compiler
// or
npm i -D rollup-plugin-stylus-compiler

Use yarn:

yarn add rollup-plugin-stylus-compiler --dev

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({
  input: 'main.js',
  plugins: [ stylus(), css()]
}).then(bundle => {
  bundle.write({
    format: 'es',
    file: '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({
  input: 'main.js',
  plugins: [ stylus(), postcss({ include: '**/*.css' })]
}).then(bundle => {
  bundle.write({
    format: 'es',
    file: '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({
  input: 'main.js',
  plugins: [ stylus(), css()]
}).then(bundle => {
  bundle.write({
    format: 'es',
    file: 'bundle.js'
  });
});

Output bundle.css.

Build

Use npm:

npm run build

Use yarn:

yarn run build

Run test

Use npm:

npm test

Use yarn:

yarn test