Parcel.js and PostCSS Rule Nesting

I’m trying our Parcel.js for one of my more recent endeavours and I must say I’m quite liking it so far. The zero-config approach doesn’t leave you with a lot of control, but at least you don’t have to adopt a boiler plate that you only use half the features of or write a 200 line webpack config by hand first.

One thing I really, really dearly missed when I just started out building a recent project with PostCSS is nesting rules. Usually I use SASS/SCSS for most of my CSS needs.

Nesting rules in SCSS looks like the following:

ul {
  li {
    display: block;

    a {
      color: white;
    }
  }
}

which will be compiled into:

ul li {
  display: block;
}

ul li a {
  color: white;
}

which is super convenient when you don’t want to repeat yourself a lot while writing CSS.

Don’t overdo this by the way, since it bloats your CSS file a bit, but usually I don’t worry about shaving the last few bytes off.

Using nested rules with PostCSS and Parcel.js

The only thing you have to do in order to enable rule nesting is to install the postcss-nested plugin from npm:

# with npm
npm install --save postcss-nested
# with yarn
yarn add postcss-nested

and adding postcss-nested to the plugins like so:

"postcss": {
  "modules": false,
  "plugins": {
    "postcss-nested": {},
    "autoprefixer": {
      "browsers": [
        ">1%",
        "last 4 versions",
        "Firefox ESR",
        "not ie < 9"
      ],
      "flexbox": "no-2009"
    }
  }
}

Voilá! You have nested CSS rules with Parcel and Post!

Thank you for reading! If you have any comments, additions or questions, please leave them in the form below! You can also tweet them at me

If you want to read more like this, follow me on feedly or other rss readers

One thought on “Parcel.js and PostCSS Rule Nesting”

  1. Thanks for sharing this tip.

    When you say “adding postcss-nested to the plugins like so,” might you be able to clarify which file you are adding this to? And perhaps even show the entirety of that file?

    I’m having some trouble debugging using PostCSS with Parcel, so more details can really help.

Leave a Reply

Your email address will not be published. Required fields are marked *