After built the z-index changed

[Roamin]

Version

latest[mybe not just]
zIndexBug.zip

Steps to reproduce

• Just make a vue component，write z-index in style
• Run command: npm run dev，everything fine
• Run command: 'npm run build`，what a mess...my z-index value changed

I think the z-index value shouldn't be changed，because we may use the third party plugin like jQuery plugin which could use z-index. In this condition, the z-index calculation is unnecessary, and make mistakes.

What is expected?

keep my z-index value

What is actually happening?

my z-index changed

[LinusBorg]

You likely set the same class somewhere else, with z-index: 1

During production, all CSS is extracted in one file and minified, which also removes duplicate definitions - and in this case, the duplicate with z-index: 1 was the "survivor".

[Roamin]

No, absolutely not.
I just want to override z-index that setted in other plugin.
For example, I set z-index: 2 in a.js, then I import it at b.js, and override z-index: 3 in b.js, it wouldn't work.

[LinusBorg]

For example, I set z-index: 2 in a.js, then I import it at b.js, and override z-index: 3 , it wouldn't work.

This is exactly what I am talking about, though. If you override global styles in a component without using the scopedfeature, the latest one will override all other versions. CSS is global by default.

If you still disagree, please provide a repository with a minimal reproduction for me to check out.

[Roamin]

I write a simple demo.

• npm run dev: You will see the blue sky
• npm run build: You will see the tan land

Maybe you would ask why set z-index in the DOM, because we cannot guarantee what component will be used. It just like using a component doesn't write with Vue.

zIndexBug.zip

[Vivi-wu]

Just run into the same problem. In my single .vue file, I set the modal-mask 'z-index:999', and alert 'z-index:1000' (both in scoped style tag)

After building, they are changed into 1 and 2.

I think it is the same issue as : https://github.com/ben-eb/gulp-cssnano/issues/8
Since I search in the node_modules folder and find cssnano installed.

[LinusBorg]

Ah I see, so at the root, this is an issue with css-loader / cssnano default settings.

I think we should be able to fix this in the webpack config for css-loader.

Thanks for investigating! :)

[LinusBorg]

Hm, I'm currently trying to test my fix, but I can't reproduce the problematic behaviour, even if I set minimize: { zindex: true } in the css-loader's options...

[Roamin]

I noticed that the webpack/template/build/webpack.prod.conf.js file has been changed by yyx990803.

only use safe optimizations for css minification

So everything goes well. By the way, thanks.

[LinusBorg]

Oh, I missed that, thanks for the pointer!

[jahanzaibsuleman07]

@LinusBorg should this be added in the Readme.md file as well.

new OptimizeCssAssetsPlugin({
          cssProcessorOptions: {
            safe: true
          }
        }),