Gulp-sass: overwriting z-index in --production

[OskHa]

Hi, i hope this is the right place to submit an issue.

after running gulp --production sass ignores my z-index and sets whatever it wants leads to some UX problems.

Bug found while using following stack:

• elixir
• angular
• angular material ...

[Keats]

I'm not entirely sure what the issue is but I'm pretty sure that this is not a gulp-sass issue

[OskHa]

i will try to get more info. maybe its referencing to the elixir. but still this is very strange.

every time i set f.i. .some-class { z-index: 99 } after gulp in production i see z-index: 19 or 18. like sass was trying to calculate the indexes on its own.

[Keats]

There's no production tag in gulp so that's probably something on one of your frameworks in the middle

[Harvzor]

Turns out this occurs if you use cssnano in the pipe.

Using cssnano as:
.pipe(cssnano({ zindex: false }))

fixes the zindex changing.

http://cssnano.co/optimisations/#optimise-z-index-unsafe-

[yattias]

@HarveyWilliams thanks for this. Had the same issue. Weird that they would have an unsafe flag on as default.

[miltonhowe]

@yattias @HarveyWilliams thank you and agreed - this cost me a couple of hours. Great option - but save it for people who want to tinker.

[xzyfer]

Thanks for your investigating @harveywilliams. Closing this since it's not a gulp-sass issue