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. Just run grunt watch --debug and start working.

You can improve this post by editing it on GitHub.

About me

I’m a frontend developer living in Berlin, Germany. I work at Here, and in my spare time I love making photos, writing, hanging out with my dogs and drinking lots of coffee.

Check out my projects, follow me on Twitter or ask me anything.