Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
3 contributors

Users who have contributed to this file

@jonathantneal @argyleink @dtvn
198 lines (147 sloc) 4.08 KB

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: {
            ident: 'postcss',
            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 */ })
  ]
};
You can’t perform that action at this time.