Reduce z-index values with PostCSS.
With npm do:
npm install postcss-zindex --save
Sometimes, you may introduce z-index values into your CSS that are larger than
necessary, in order to improve your understanding of how each stack relates to
the others. For example, you might have a modal overlay at
5000 and the dialog
for it at
5500 - so that modal classes occupy the
But in production, it is unnecessary to use such large values for z-index where
smaller values would suffice. This module will reduce all z-index declarations
whilst respecting your original intent; such that the overlay becomes
the dialog becomes
2. For more examples, see the tests.
Note that this module does not attempt to normalize relative z-index values,
-1; indeed, it will abort immediately when encountering these values
as it cannot be sure that rebasing mixed positive & negative values will keep
the stacking context intact. Be careful with using this module alongside
stacking context into CSS.
Set this to any other positive integer if you want to override z-indices from
other sources outside your control. For example if a third party widget has a
maximum z-index of
99, you can set this to
100 and not have to worry about
See the PostCSS documentation for examples for your environment.
Pull requests are welcome. If you add functionality, then please add unit tests to cover it.
MIT © Ben Briggs