Reduce z-index values with PostCSS.
npm install postcss-zindex> 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 dialog5500
for it at - so that modal classes occupy the 5xxx space.
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 1 and2
the dialog becomes . For more examples, see the tests.
`css
.modal {
z-index: 5000
}
.modal-overlay {
z-index: 5500
}
`
`css
.modal {
z-index: 1
}
.modal-overlay {
z-index: 2
}
`
Note that this module does not attempt to normalize relative z-index values,
such as -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
JavaScript injected CSS; ideally you should have already extracted all of your
stacking context into CSS.
#### options
##### startIndex
Type: number
Default:
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
stacking conflicts.
See the PostCSS documentation for
examples for your environment.
See CONTRIBUTORS.md.
MIT © Ben Briggs
[postcss]: https://github.com/postcss/postcss