Autoprefixer Deployment and Usage Guide

Prerequisites

Node.js (version 10 or higher)
npm (Node Package Manager)
PostCSS (if using as a PostCSS plugin)
Browserslist configuration (optional but recommended for browser targeting)

Installation

As a PostCSS Plugin

Install Autoprefixer and PostCSS:

npm install autoprefixer postcss --save-dev

Create a PostCSS configuration file (postcss.config.js):

module.exports = {
  plugins: {
    autoprefixer: {}
  }
}

As a Standalone CLI Tool

Install globally:

npm install autoprefixer --global

Or install locally:

npm install autoprefixer --save-dev

For Specific Build Tools

Gulp

npm install gulp-postcss autoprefixer --save-dev

Webpack

npm install postcss-loader autoprefixer --save-dev

CSS-in-JS

npm install autoprefixer --save-dev

Configuration

Browsers Targeting

Autoprefixer uses [Browserslist] to determine which browsers to target. You can configure this in several ways:

package.json:

{
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

.browserslistrc file:

> 1%
last 2 versions
not dead

Environment variable:

BROWSERSLIST="> 1%" npm run build

Grid Layout Support

To enable CSS Grid prefixes for IE 10/11:

Environment variable:

AUTOPREFIXER_GRID=autoplace npm run build

Control comment in CSS:

/* autoprefixer grid: autoplace */

Plugin option:

autoprefixer({ grid: 'autoplace' })

Build & Run

Using PostCSS CLI

Create a CSS file (input.css):

::placeholder {
  color: gray;
}

Process with PostCSS:

npx postcss input.css -o output.css -u autoprefixer

Using Gulp

const gulp = require('gulp');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');

gulp.task('css', () => {
  return gulp.src('./src/*.css')
    .pipe(postcss([autoprefixer()]))
    .pipe(gulp.dest('./dest'));
});

Using Webpack

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          {
            loader: 'postcss-loader',
            options: {
              plugins: [require('autoprefixer')]
            }
          }
        ]
      }
    ]
  }
}

Deployment

Autoprefixer is typically used during the build process of your application, so deployment depends on your specific project setup:

Static Site Generators

Gatsby: Add to gatsby-browser.js or gatsby-ssr.js
Next.js: Add to next.config.js
Jekyll: Use with jekyll-postcss

Frameworks

Create React App: Works out of the box with CSS imports
Vue.js: Configure in vue.config.js
Angular: Add to angular.json build configuration

Hosting Platforms

Vercel: Configure in vercel.json
Netlify: Add to netlify.toml
GitHub Pages: Run build script before deployment

Troubleshooting

Common Issues and Solutions

1. Prefixes Not Being Added

Problem: Autoprefixer isn't adding any prefixes to your CSS. Solution: Check your Browserslist configuration. If you're targeting modern browsers only, prefixes may not be needed.

2. Grid Layout Not Working in IE

Problem: CSS Grid isn't working in Internet Explorer despite using Autoprefixer. Solution: Enable Grid support explicitly:

autoprefixer({ grid: 'autoplace' })

3. Conflicting Prefixes

Problem: You're seeing duplicate or conflicting prefixes. Solution: Check for other PostCSS plugins that might be adding prefixes. Only one prefixer should be active.

4. Performance Issues

Problem: Build times are slow with Autoprefixer. Solution: Use postcss-loader with cacheDirectory option in Webpack, or configure caching in your build tool.

5. Specific Property Not Being Prefixed

Problem: A specific CSS property isn't getting prefixed. Solution: Check the Can I Use database to see if the property actually needs prefixes for your target browsers.

6. Ignoring Specific Rules

Problem: You want to disable Autoprefixer for specific CSS rules. Solution: Use control comments:

/* autoprefixer: ignore next */
.selector {
  /* This rule won't be processed */
}

7. Grid Autoplacement Limitations

Problem: Grid autoplacement isn't working as expected in IE. Solution: Review the Grid Autoplacement support in IE section for limitations and workarounds.

8. Environment Variables Not Working

Problem: Environment variables like AUTOPREFIXER_GRID aren't being recognized. Solution: Ensure you're setting them before the build command:

AUTOPREFIXER_GRID=autoplace npm run build

Debug Mode

To see what Autoprefixer is doing, enable debug mode:

autoprefixer({ /* options */ }, { from: 'input.css', to: 'output.css' })

This will log detailed information about the transformations being applied.

How to Deploy & Use postcss/autoprefixer