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!