CRA2 - lost support for using postcss.config.js

[JordyPouw]

Hi,

It seems that it ignores the postcss.config.js file currently with CRA2 setup. Ran the app in your test-cra2 directory with the following config:

config-overrides.js

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

  return config;
};

postcss.config.js

module.exports = {
  plugins: {
    'postcss-nested': {},
    'postcss-hexrgba': {}
  }
};

App.css

.App-header {
  ....
  background: rgba(#282c34, 0.5);
  & .App-link { color: red; }
}

The output of CSS stays the same as the source and doesn't doesn't go through the plugins. Whenever I add the plugins to the config-overrides.js file it does indeed work, like this:

config-overrides.js

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

  return config;
};

Am I missing something here or did CRA2 broke this flow?

[jonathantneal]

Thanks for making me aware of this.

You’ll need to update to v3.0.2 and pass an option into React App Rewire PostCSS.

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

  return config;
};

An empty object or any truthy value will do. Otherwise, the default options are used, which ignore postcss.config.js. I’ve updated the documentation to make this clear.

---

This choice was made to require an object before destroying the original options in order to prevent someone from accidentally overriding the default configuration. I’m open to changing this default in a future version. Only, I’m unsure if that would constitute a new major version or not.