grunt-autoprefixer

grunt-autoprefixer

Autoprefixer parses CSS and adds vendor-prefixed CSS properties using the Can I Use database.

Getting Started

This plugin requires Grunt ~0.4.0

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-autoprefixer --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-autoprefixer');

The "autoprefixer" task

Overview

In your project's Gruntfile, add a section named autoprefixer to the data object passed into grunt.initConfig().

grunt.initConfig({
  autoprefixer: {
    options: {
      // Task-specific options go here.
    },
    your_target: {
      // Target-specific file lists and/or options go here.
    },
  },
})

Options

options.browsers

Type: Array Default value: ['> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1']

You can specify browsers actual for your project:

options: {
  browsers: ['last 2 version', 'ie 8', 'ie 9']
}

Read more.

options.cascade

Type: Boolean Default value: false

Pass true to enable ‘cascade’ indentation. Read more here.

options.diff

Type: Boolean|String Default value: false

Set it to true if you want to get an output patch file:

options: {
  diff: true // or 'custom/path/to/file.css.patch'
}

Also you can specify a path where to save this file. More examples in Gruntfile.

options.map

Type: Boolean|String|undefined Default value: undefined

If the map option isn't defined, Autoprefixer will look for source map from a previous compilation step (either inline map or separate one) and update it automatically. Let's say you have path/file.css and path/file.css.map from SASS, Autoprefixer will find that map, update it and save to a specified destination.

If true is specified, Autoprefixer will try to find an input source map file as described above and generate a new map based on the found one (or just generate a new map, unlike the situation when the map option is undefined).

If you keep your map from a pre-processor in another directory (e.g. path/file.css and another-path/file.css.map), you can specify the path another-path/ in the map option to point out where grunt-autoprefixer should look for an input map to update it.

Also you can specify false. In that case Autoprefixer will not generate or update source map even if there is one from a previous compilation step near an input file or inlined to it (Autoprefixer will delete a map annotation comment from an input file).

You cannot specify a path where to save a map file, it will be saved at the same directory as the output CSS file or inlined to it (check out the option below).

options.mapInline

Type: Boolean|undefined Default value: undefined

If the option isn't specified, Autoprefixer will inline its map if a map from a previous compilation step was inlined to an input file or save its map as a separate file respectively.

You can specify true or false to force that behaviour as you like.

Usage Examples

grunt.initConfig({

  autoprefixer: {

    options: {
      // Task-specific options go here.
    },

    // prefix the specified file
    single_file: {
      options: {
        // Target-specific options go here.
      },
      src: 'src/css/file.css',
      dest: 'dest/css/file.css'
    },

    // prefix all files
    multiple_files: {
      expand: true,
      flatten: true,
      src: 'src/css/*.css', // -> src/css/file1.css, src/css/file2.css
      dest: 'dest/css/' // -> dest/css/file1.css, dest/css/file2.css
    },

    // if you have specified only the `src` param, the destination will be set automatically,
    // so source files will be overwritten
    no_dest: {
      src: 'dest/css/file.css' // globbing is also possible here
    },

    diff: {
        options: {
            diff: true
        },
        src: 'src/css/file.css',
        dest: 'dest/css/file.css' // -> dest/css/file.css, dest/css/file.css.patch
    },

    sourcemap: {
        options: {
            map: true
        },
        src: 'src/css/file.css',
        dest: 'dest/css/file.css' // -> dest/css/file.css, dest/css/file.css.map
    },
  }

});

Check out project's Gruntfile.js for more examples.

Updating Autoprefixer's database

To get the last prefixes database bundled with autoprefixer package and fixes, reinsnstall grunt-autoprefixer:

$ npm remove grunt-autoprefixer && npm install grunt-autoprefixer

If this option doesn't fit you for some reasons, you can run the in-package update:

$ ./node_modules/grunt-autoprefixer/node_modules/autoprefixer/bin/autoprefixer --update

Read more about in-package updates here.

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.