What is postcss-zindex?
The postcss-zindex package is a PostCSS plugin that reduces z-index values in your CSS files. It helps to minimize the number of different z-index values used, making your CSS more maintainable and reducing the risk of z-index conflicts.
What are postcss-zindex's main functionalities?
Reduce z-index values
This feature reduces the z-index values in your CSS to a smaller range, making it easier to manage and reducing the likelihood of conflicts.
/* Input CSS */
body {
z-index: 10;
}
.header {
z-index: 100;
}
.footer {
z-index: 1000;
}
/* Output CSS after postcss-zindex */
body {
z-index: 1;
}
.header {
z-index: 2;
}
.footer {
z-index: 3;
}
Other packages similar to postcss-zindex
postcss-sorting
The postcss-sorting package sorts CSS rules content with specified order. While it doesn't specifically target z-index values, it helps in organizing CSS properties, which can indirectly help in managing z-index values by keeping the CSS more structured.
postcss-merge-rules
The postcss-merge-rules package merges adjacent CSS rules with identical selectors. This can help reduce redundancy in your CSS, similar to how postcss-zindex reduces the number of z-index values. However, it focuses on merging rules rather than specifically targeting z-index values.
postcss-combine-duplicated-selectors
The postcss-combine-duplicated-selectors package combines duplicated CSS selectors into one. This helps in reducing the size of the CSS and making it more maintainable, similar to how postcss-zindex reduces z-index values. However, it focuses on combining selectors rather than z-index values.
Reduce z-index values with PostCSS.
Install
With npm do:
npm install postcss-zindex --save
Example
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 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
and
the dialog becomes 2
. For more examples, see the tests.
Input
.modal {
z-index: 5000
}
.modal-overlay {
z-index: 5500
}
Output
.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.
API
zindex([options])
options
startIndex
Type: number
Default: 1
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.
Usage
See the PostCSS documentation for
examples for your environment.
Contributors
See CONTRIBUTORS.md.
License
MIT © Ben Briggs