Install

cli

• run from the cli:
  • npm i -D postcss-cli autoprefixer = autoprefixer is a PostCSS plugin and to be run from the cli requires 'postcss-cli'

webpack

• to include in a webpack bundle:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"]
      }
    ]
  }
}

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

Run from cli or npm script

• npx postcss *.css --use autoprefixer -d "build/" = run from the cli or add it to a npm script
  • it will save autoprefixed css files to the 'build' directory
• --watch or -w = add one of these options to watch

Config

• Autoprefixer uses Browserslist, so you can specify the browsers you want to target in your project with queries like '> 5%'
• the best way to provide browsers is a '.browserslistrc' file in your project root, or by adding a browserslist key to your package.json
• it's recommend the use of these options over passing options to Autoprefixer so that the config can be shared with other tools such as babel-preset-env and Stylelint.

BrowsersList

• read how to make query composition (and, or, not) here
• test queries here
• example of queries here

.browserslistrc example

# Browsers that we support

last 1 version
> 1%
IE 10 # sorry