Eiche fam

I’m quite pleased. I managed to cut down Cover’s stylesheet from 72K to 63K, and it’s all because of Autoprefixer.

When I first moved from plain ol’ CSS to Sass, I created some mixins to handle vendor prefixes. I’d read about using Compass and other frameworks to automatically build the necessary vendor prefixed styles, but I never got around to implementing it for Cover.

A couple weeks ago, I posted a survey to the Google+ Sass community, asking how I should handle vendor prefixes. Everyone who answered said not to use a framework, but to use Autoprefixer instead.

Instead of being part of Sass, which is a preprocessor, Autoprefixer is a postprocessor. You feed it a CSS file without vendor prefixes — whether written by hand or one generated by a preprocessor like Sass, Less, or Stylus — and it parses and outputs a CSS file with vendor prefixes added.

Since I use Grunt in Cover’s build process, it was a simple matter of including grunt-autoprefixer into the workflow.

So after running this to install grunt-autoprefixer (which updates package.json as necessary after downloading the plugin’s files):

npm install grunt-autoprefixer --save-dev

And adding this line into the load tasks block in GruntFile.js (necessary for actually running the task, of course):

grunt.loadNpmTasks('grunt-autoprefixer');

I added this block inside Grunt’s initConfig() method:

grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  // ...
  autoprefixer: {
    dist: {
      files: {
        'style.css': 'style.css'
      }
    }
  },
  // ...
});

Since Sass builds to a CSS file, I have Autoprefixer set up to output to that same file. (Some setups build to an intermediary file, like to ‘/build/style.css’, which the plugin would parse and output to the final destination.) But really, that’s it. I haven’t really played around with the options much. The default behavior (which is driven by the Can I Use database) is sufficient for my purposes.