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:

# gruntjs.com

module.exports = (grunt) ->
  'use strict'

  require('load-grunt-tasks')(grunt)

  debug = !!grunt.option('debug')

  grunt.initConfig
    banner: '/* Author: Artem Sapegin, http://sapegin.me, <%= grunt.template.today("yyyy") %> */\n'
    stylus:
        options:
          banner: '<%= banner %>'
          define:
            DEBUG: debug
          use: [
            () -> require('autoprefixer-stylus')('last 2 versions', 'ie 8', 'ie 9')
            debug or require('csso-stylus')
          ]
        compile:
          files:
            'build/styles.css': 'styles/index.styl'
    watch:
      options:
        livereload: true
      stylus:
        files: 'styles/**'
        tasks: 'stylus'

  grunt.registerTask 'default', ['stylus']

And all dependencies:

npm install --save-dev grunt load-grunt-tasks grunt-contrib-stylus grunt-contrib-watch autoprefixer-stylus csso-stylus

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.