Cra can't support postcss-nested syntax because webpack.config.js file haven't postcss-nested module

[melihyarikkaya]

Is your proposal related to a problem?

Cra can't support postcss-nested syntax because webpack.config.js file haven't postcss-nested module.

Sample nested css in my header.module.css file

.Header {
  background: white;
  h1 {
    color: red;
  }
}

Expected behavior when compiled

.Header {
  background: white;
}
.Header h1 {
    color: red;
}

Describe the solution you'd like

The problem solved when ejected cra and adding the 'postcss-nested' module to webpack.module.js.

Can you support postcss-nested by default?

// config/webpack.config.js
// row 89
ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-nested'), // <----  added this line 
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009'
              },
              stage: 3
            }),

Describe alternatives you've considered

postcss-nesting may be an alternative.

Additional context

(Write your answer here.)

[btmnk]

Just a thought: Wouldn't it be much easier to configure postcss by using a postcss.config.js file that is created when using CRA instead of the inline options in the loader? This way the developer can easily decide which additional features he might need without the need of ejecting.

e.g.

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

const config = () => ({
  plugins: [
    postcssPresetEnv({
      stage: 3,
      features: {
        "nesting-rules": true,
        "custom-media-queries": true,
      },
      importFrom: "./src/ui/theme/theme.css",
    }),
  ],
});

module.exports = config;

[alesso-x]

postcss.config.js is not supported in CRA. There is an open PR to update postcss-loader and that will allow the configuration to be added.

[kalm42]

postcss.config.js is not supported in CRA. There is an open PR to update postcss-loader and that will allow the configuration to be added.

This would be my preferred solution.

[piotr-cz]

At this moment loading postcss.config.js is being disabled with config: false flag here: https://github.com/facebook/create-react-app/pull/11717 There is a PR to remove it: https://github.com/facebook/create-react-app/pull/11926

[neaumusic]

const { addWebpackModuleRule } = require("customize-cra");

module.exports = override(
  addWebpackModuleRule({
    test: /\.css$/,
    use: [
      "style-loader",
      "css-loader",
      {
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            config: true, // use postcss.config.js
          },
        },
      },
    ],
  })
);

this worked for us (incorporating a tailwind project into a cra/emotion project), adjusting the test key as necessary