stylobuild

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, CSSWring or clean-css 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;box-shadow:3px 3px 5px #ccc;-webkit-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

Source maps

If you're using sourcemaps in Stylus, the plugins that do not support them (CSSO, clean-css) would be disabled.

Also, only inline sourcemaps are working right now, the support for external source maps would be implemented later.

Choosing the minifier

By default Stylobuild uses CSSO as a minifier, but if you would enable source maps, then CSSWring would become the default one.

However, you can choose the minifier manually by setting the minifier option to one of the available ones: csso, csswring, cleancss:

use('node_modules/stylobuild', {
  minifier: 'cleancss'
})

You can disable minifier by adding minifier: false to the options.

Also, note that you can omit setting the minifier setting if you're setting the options for this minifier:

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

would apply the clean-css with the given options. Alternatively, you can just set the name of the minifier to true to just enable it:

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

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
  }
})

Configuring clean-css

You can configure clean-css by passing a hash with the list of options to the cleancss:

use('node_modules/stylobuild', {
  minifier: 'cleancss'
  cleancss: {
    advanced: false
  }
})

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.