If you use a Javascript bundler - like web pack - and you're creating your production ready JS and CSS then it is likely that you will use Post-CSS. In this tutorial, you will learn how to enable and disabled some of the default Post-CSS behaviour, like enabling IE Grid and disabling auto z-index optimizations. For a quick cheat sheet on some of these configurations, you check out this file, https://github.com/MoOx/postcss-cssnext/blob/master/src/features.js.

Enabling IE Grid

If you use CSSGrid and you need to support IE (yuk) then you will want to enable the IE Grid. IE Grid is turned off by default. To enable it, you can pass this object into the post-CSS constructor:

Disabling Z-Index

PostCSS uses the CSS-Nano plugin to perform several CSS optimizations on the build. One of these optimisations is a z-index cleanup. If you have two classes with a z-index of 1000 and 15000, CSS-nano will tidy this up to have a z-index of 1 and 2. This optimization can give marginal performance benefits for your site, however, it comes with a risk of breaking it well. If you do not like this feature, you can disable it. If you reference CSS-Nano directly in your PostCSS config you can just pass this object into the constructor to turn it off:

If you use CSS Loader, then you might additionally need to add this config into the optimizations section, like this:

Alternatively:

Also, you can pass in {safe:true} directly to the Post-CSS constructor, this is probably the nicest way, however, it did not work for me when I tried it, so be warned!

A final alternative is to configure it this way:

There are definitely a few different ways to enable and disable the z-index, so hopefully one of these works for you! Happy Coding 🤘