My new CSS Workflow: Stylus, Autoprefixer, CSSO and Grunt
I used to use Nib to manage CSS vendor prefixes in Stylus. But it has a big problem: it adds a lot of superfluous prefixes for everything.
Now I found a better way: Autoprefixer. It adds all needed vendor prefixes for all browsers, you chose to support, using data from caniuse.com.
Here is my Gruntfile.coffee:
And all dependencies:
I use autoprefixer and csso as Stylus plugins. I could achieve the same with autoprefixer and csso plugins for Grunt but Grunt plugins work with files while Stylus plugins work with variables in memory. So we have just one disk write operation instead of three and configuration is also much simpler.
I also use CSSO because Autoprefixer do not minify its output. But we don’t need minified code for debugging — that’s why debug variable is here. Run grunt watch --debug and start working.