Installing PostCSS Preset Env

PostCSS Preset Env runs in all Node environments, with special instructions for:

Node	PostCSS CLI	Webpack	Create React App	Gulp	Grunt	Rollup

Node

Add PostCSS Preset Env to your project:

npm install postcss-preset-env --save-dev

Use PostCSS Preset Env to process your CSS:

const postcssPresetEnv = require('postcss-preset-env');

postcssPresetEnv.process(YOUR_CSS /*, processOptions, pluginOptions */);

Or use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssPresetEnv = require('postcss-preset-env');

postcss([
  postcssPresetEnv(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS CLI

Add PostCSS CLI to your project:

npm install postcss-cli --save-dev

Use PostCSS Preset Env in your postcss.config.js configuration file:

const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [
    postcssPresetEnv(/* pluginOptions */)
  ]
}

Webpack

Add PostCSS Loader to your project:

npm install postcss-loader --save-dev

Use PostCSS Preset Env in your Webpack configuration:

const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [postcssPresetEnv(/* pluginOptions */)],
              },
            },
          },
        ],
      },
    ],
  },
};

Create React App

PostCSS Preset Env is already bundled with Create React App 2.

For Create React App 1, add React App Rewired and React App Rewire PostCSS to your project:

npm install react-app-rewired react-app-rewire-postcss --save-dev

Use React App Rewire PostCSS and PostCSS Preset Env in your config-overrides.js file:

const reactAppRewirePostcss = require('react-app-rewire-postcss');
const postcssPresetEnv = require('postcss-preset-env');

module.exports = config => reactAppRewirePostcss(config, {
  plugins: () => [
    postcssPresetEnv(/* pluginOptions */)
  ]
});

Gulp

Add Gulp PostCSS to your project:

npm install gulp-postcss --save-dev

Use PostCSS Preset Env in your Gulpfile:

const postcss = require('gulp-postcss');
const postcssPresetEnv = require('postcss-preset-env');

gulp.task('css', () => gulp.src('./src/*.css').pipe(
  postcss([
    postcssPresetEnv(/* pluginOptions */)
  ])
).pipe(
  gulp.dest('.')
));

Grunt

Add Grunt PostCSS to your project:

npm install grunt-postcss --save-dev

Use PostCSS Preset Env in your Gruntfile:

const postcssPresetEnv = require('postcss-preset-env');

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
  postcss: {
    options: {
      processors: [
       postcssPresetEnv(/* pluginOptions */)
      ]
    },
    dist: {
      src: '*.css'
    }
  }
});

Rollup

Complete PostCSS CLI setup.

Add Rollup Plugin PostCSS to your project:

npm install rollup-plugin-postcss --save-dev

Use Rollup Plugin PostCSS in your rollup.config.js:

import postcss from 'rollup-plugin-postcss';

module.exports = {
  input: '...',
  output: {...},
  plugins: [
    postcss({/* options */ })
  ]
};