Webpack 2 css-loader substitutes z-index property in production build

Question

I am facing strange issue with production build version of our app. We are using React bundled with webpack. Styles are written in less and packed to separate bundle.css with extract-text-plugin. I am having z-index property all over my app. Problem is, that in production mode, bundle outputs styles with substitute values of z-index property. For instance, z-index: 9999 will be transpiled to z-index: 27. Even if I put !important it results into z-index: 27!important. I assume that it is done deliberately, but in case if some z-index property set with jss, for example "zIndex: 99", my main 9999 (that was configured with less) will be overlaped by jss inline styles that are remaining the same after build.

Answer 1

In your production, add safe compression:

new OptimizeCSSPlugin({
  cssProcessorOptions: {
    safe: true
  }
})