It doesn't seem to apply any plugins

[lukemcgregor]

Im having real trouble getting this to go. It looks like it isn't running any plugins.

I have made a brand new project and just installed basic rewiring to try and debug this, but it looks like its not transforming the css at all. As you can see its just outputting the raw (not transformed) css onto the page. Is there something basic I'm missing that isn't in the docs?

package.json

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "postcss-preset-env": "^6.7.0",
    "react-app-rewire-postcss": "^3.0.2",
    "react-app-rewired": "^2.1.3"
  }

config-overrides.js

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

App.css

.App {
  text-align: center;

  .App-header {
    background-color: red;
  }
}

Browser output:

<style>.App {
  text-align: center;

  .App-header {
    background-color: red;
  }
}
</style>

[jonathantneal]

I think you’re expecting .App-header to be a descendant of .App. Unfortunately, you’ve not written a valid nesting selector, and you’ve not set the stage of PostCSS Preset Env to 1.

https://cssdb.org/#nesting-rules
https://drafts.csswg.org/css-nesting-1/

.App {
  text-align: center;

  & .App-header {
    background-color: red;
  }
}

require('postcss-preset-env')({ stage: 1 })

[lukemcgregor]

My mistake, thanks for your help.