Using nested CSS with PostCSS in “create-react-app”

If you are reading this mid 2017, this will help you, but if you are 1 year off the timeline 😜 I am not very sure.

PostCSS is cool, it is really cool, you can write your plain CSS in style without needing any pre-processor. With the help of it’s plugin architecture PostCSS allows you to handpick the way you want to write CSS. After being in habit of using pre-processors for years, I am finding it difficult to write plain CSS, but this is where using PostCSS is really helping me. One of my favorite parts about using pre-processors is the ability to write nested CSS rules, so I will walk you through how to add that to a plain CSS file using PostCSS. OK, enough of talking, let’s get started with setting it up with a react project.

Setting up

Assuming that you are familiar with getting started using the create-react-app cli tool. Once the project is all setup run the following command in the root of the project directory.

npm run eject if you use npm, or

yarn eject if you are using Yarn

If you have not run this command before:
This command just exposes the configuration files, so you play around with them and customize them based on your requirement. Here is the screenshot showing the new folders and their files that are created in the project:

config & scripts folder is created

Now open config/webpack.config.dev.js

1. Navigate to the line with this code: test: /\.css$/
2. Few lines below you will find this code: loader: require.resolve('postcss-loader'),
3. This means PostCSS is already configured.

Open src/App.css

1. Replace the code with the following code and hit save.

Now when you will check your browser, you will not see any styles. Calm down, don’t worry, we are doing OK! there is no error.

We just need to add a package and link it to our webpack configuration. Go back to your terminal and run the following command:

npm install postcss-nested if using npm

yarn add postcss-nested if using Yarn

open config/webpack.config.dev.js

1. Navigate to the line with this code: test: /\.css$/
2. Scroll down a little bit to the line which says: plugins: () => [
3. Add require('postcss-nested'), right below it
4. Your code will look something like this:

plugins: () => [
  require('postcss-nested'),
  require('postcss-flexbugs-fixes'),
  autoprefixer({
    browsers: [
    '>1%',
    ...

Stop the app by exiting the current process (if it is still running) and start by running the following command:

npm start or yarn start

Now you will be able to see the styles applied to your app. You have successfully configured nested rules in CSS using PostCSS.

You can also add other plugins similarly! 😎

Happy Styling!

Check out my course on getting started with React — Fast track to React — All that you need to get started