Tips On Using PostCSS With Javascript

If you use a Javascript bundler - like web pack - and you're creating your production ready JS and CSS it is likely that you will use Post-CSS, CSS Loader etc..  In this tutorial I will go over some basic configurations to enable and disable some default behavior, like enabling IE Grid and disabling auto z-index optimizations.  For a list of some of the features you can enable/disable in Post-CSS you can check out this file, https://github.com/MoOx/postcss-cssnext/blob/master/src/features.js.

Enabling IE Grid  

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

const configGenerator = () => {
    return {
        plugins: [
            require('postcss-cssnext')({ autoprefixer: { grid: true } }),
        ]
    };
}

module.exports = configGenerator;

Enjoy!

Disabling Z-Index

PostCSS uses the CSS-Nano plugin to perform several CSS optimizations.  One of these is a z-index cleanup.  So 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 is slightly quicker but it can break your site.  You can disable this feature, however, as you can config web pack in many different ways, there seem to be multi-ways to achieve this.  When I fixed my build there didn't see to be a definitive list on the internet, so here goes.  If you reference CSS-Nano directly, then you can just pass this object into the constructor:

require('cssnano')({zindex: false})

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

optimization: {
    minimizer: [
        new OptimizeCSSAssetsPlugin({
            cssProcessor: require('cssnano')({zindex: false})
        })
    ]
}

or

loaders: [
    'style-loader',
    {
        loader: 'css-loader',
        options: {
            minimize: {
                safe: true
            }
        }
    },
]

Also, you are meant to be able to pass in {safe:true} directly to the Post-CSS constructor, this is probably the nicest way but it did not work for me.

postcss({
  minimize: {
    safe: true
  }
})

or you could even try.

postcss({
postcss: {
            options: {
              processors: [
                require('cssnano')({ "safe": true })
              ]
            },
            dist: {
              src: 'css/style.css',
              dest: 'style.css'
            }
        }
 

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

 

submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top