Awesome
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.
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 (like 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.
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.