Join our webinar on Wednesday, June 26, at 1pm EDTHow Chia Mitigates Risk in the Crypto Industry.Register
Socket
Socket
Sign inDemoInstall

postcss-zindex

Package Overview
Dependencies
0
Maintainers
1
Versions
43
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    postcss-zindex

Reduce z-index values with PostCSS.


Version published
Weekly downloads
717K
decreased by-1.8%
Maintainers
1
Install size
6.25 kB
Created
Weekly downloads
 

Readme

Source

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

Keywords

FAQs

Last updated on 02 Apr 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc