Awesome

React App Rewire PostCSS <img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">

React App Rewire PostCSS lets you configure PostCSS in Create React App v1 and v2 without ejecting.

Usage

Add React App Rewire PostCSS to your Rewired React app:

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

Next, add React App Rewire PostCSS to config-overrides.js in your React app directory:

module.exports = config => {
  require('react-app-rewire-postcss')(config/*, options */);

  return config;
};

That’s it! Now you can control PostCSS with all the configuration options from PostCSS Loader:

module.exports = config => {
  require('react-app-rewire-postcss')(config, {
     plugins: loader => [
      require('postcss-preset-env')()
    ]
  });

  return config;
};

Alternatively, you can now use postcss.config.js in your React app directory:

module.exports = config => {
  require('react-app-rewire-postcss')(config, true /* any truthy value will do */);

  return config;
};

module.exports = {
  plugins: {
    'postcss-preset-env': {
      stage: 0
    }
  }
};

And you can leverage Browserslist by adding a .browserslistrc to your React app directory:

# browsers we support

> 2%
not dead

Happy PostCSS’ing!