JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 754352
  • Score
    100M100P100Q197482F
  • License MIT

Reduce z-index values with PostCSS.

Package Exports

  • postcss-zindex

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-zindex) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

postcss-zindex Build Status NPM version Dependency Status

Reduce z-index values with PostCSS.

Install via npm:

npm install postcss-zindex --save

Example

var postcss = require('postcss')
var zIndex = require('postcss-zindex');

var css = 'h1 { z-index: 1000 }';
console.log(postcss(zIndex()).process(css).css);

// => 'h1 { z-index: 1 }'

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.

Note that this module does not attempt to normalize relative z-index values, such as -1. Be careful with using this module alongside JavaScript injected CSS; ideally you should have already extracted all of your stacking context into CSS.

Contributing

Pull requests are welcome. If you add functionality, then please add unit tests to cover it.

License

MIT © Ben Briggs