Stylobuild

“Stylobuild” is a workflow for building Stylus files using the best tools for the job:

Autoprefixer for adding all the vendor prefixes.
Pixrem for the rem fallback.
CSSO for CSS minification.

This is only the start: in future some other tools would be added to this list.

Installation

npm install --save stylobuild

Usage

Just use the stylobuild in your .styl stylesheet like this:

use('node_modules/stylobuild')

Then add any styles:

use('node_modules/stylobuild')

body
  padding: 0.5rem 1rem
  box-shadow: 3px 3px 5px #ccc
  transform: scale(2)

And they would have rem fallbacks, all the prefixes and the code would be nicely minified:

body{padding: 5px 10px;padding:.5rem 1rem;-webkit-box-shadow:3px 3px 5px #ccc;box-shadow:3px 3px 5px #ccc;-webkit-transform:scale(2);-ms-transform:scale(2);transform:scale(2)}

You can also use stylobuild as js-plugin:

var stylus = require('stylus');
var stylobuild = require('stylobuild');

stylus(css).use(stylobuild());

Options

You can pass an options object to stylobuild.

In .styl:

use('node_modules/stylobuild', {
  // Your options here
})

In .js:

stylus(css).use(stylobuild({
  // Your options here
}));

IE mode

If you're generating a file only for old IE, you would want to tell stylobuild about this:

use('node_modules/stylobuild', {
  ie: true
})

When you pass ie: true option to stylobuild, it wouldn't apply autoprefixer and would replace rems with their fallbacks values instead of prepending them.

In future there would be an option to create styles for IE automatically, using if-ie.styl

Configuring Autoprefixer

To configure autoprefixer, you would need to pass an object to autoprefixer key:

use('node_modules/stylobuild', {
  autoprefixer: {
    browsers: "last 1 version, > 1%, Explorer 7"
  }
})

Right now only browsers option is supported.

Configuring CSSO

CSSO don't have that many options, it actually have only one option at the moment:

use('node_modules/stylobuild', {
  csso: {
    restructure-off: true
  }
})

The restructure-off option would turn off the structure minification.

Configuring Pixrem

To configure Pixrem you need to use only one options object, while in its raw form you need to use both an argument and an object.

use('node_modules/stylobuild', {
  pixrem: {
    rootvalue: 16px
    replace: true
  }
})

Disabling plugins

You can disable any of the used plugins using false instead of an options object for this plugin:

use('node_modules/stylobuild', {
  csso: false
})

This would do all the things except minifying the code using CSSO.

This is a small work-in-progress project, as its version is in 0.x.x semver, it could update with API-breaking changes, so it is better to use its strict versions.

doochik / stylobuild