evilebottnawi

chriseppstein

beneb

andyjansson

cssnano-bot

ludovicofischer

postcss-zindex

  "description": "Reduce z-index values with PostCSS.",

  "homepage": "https://github.com/cssnano/cssnano",

    "url": "https://github.com/cssnano/cssnano/issues"

  "readme": "# [postcss][postcss]-zindex\n\n> Reduce z-index values with PostCSS.\n\n## Install\n\nWith [npm](https://npmjs.org/package/postcss-zindex) do:\n\n```\nnpm install postcss-zindex --save\n```\n\n## Example\n\nSometimes, you may introduce z-index values into your CSS that are larger than\nnecessary, in order to improve your understanding of how each stack relates to\nthe others. For example, you might have a modal overlay at `5000` and the dialog\nfor it at `5500` - so that modal classes occupy the `5xxx` space.\n\nBut in production, it is unnecessary to use such large values for z-index where\nsmaller values would suffice. This module will reduce all z-index declarations\nwhilst respecting your original intent; such that the overlay becomes `1` and\nthe dialog becomes `2`. For more examples, see the [tests](test.js).\n\n### Input\n\n```css\n.modal {\n    z-index: 5000\n}\n\n.modal-overlay {\n    z-index: 5500\n}\n```\n\n### Output\n\n```css\n.modal {\n    z-index: 1\n}\n\n.modal-overlay {\n    z-index: 2\n}\n```\n\nNote that this module does not attempt to normalize relative z-index values,\nsuch as `-1`; indeed, it will abort immediately when encountering these values\nas it cannot be sure that rebasing mixed positive & negative values will keep\nthe stacking context intact. Be careful with using this module alongside\nJavaScript injected CSS; ideally you should have already extracted all of your\nstacking context into CSS.\n\n## API\n\n### zindex([options])\n\n#### options\n\n##### startIndex\n\nType: `number`\nDefault: `1`\n\nSet this to any other positive integer if you want to override z-indices from\nother sources outside your control. For example if a third party widget has a\nmaximum z-index of `99`, you can set this to `100` and not have to worry about\nstacking conflicts.\n\n## Usage\n\nSee the [PostCSS documentation](https://github.com/postcss/postcss#usage) for\nexamples for your environment.\n\n## Contributors\n\nSee [CONTRIBUTORS.md](https://github.com/cssnano/cssnano/blob/master/CONTRIBUTORS.md).\n\n## License\n\nMIT © [Ben Briggs](http://beneb.info)\n\n[postcss]: https://github.com/postcss/postcss\n"

const LayerCache = require('./lib/layerCache');

/** @typedef {{startIndex?: number}} Options */

 * @type {import('postcss').PluginCreator<Options>}

          /** @type {import('postcss').Declaration[]} */

          // First pass; cache all z indexes

          css.walkDecls(/z-index/i, (decl) => {

            // Check that no negative values exist. Rebasing is only

            // safe if all indices are positive numbers.

              // Stop PostCSS iterating through the rest of the decls

          // Abort if we found any negative values

          // or there are no z-index declarations

          cache.optimizeValues(opts.startIndex || 1);

            // Need to coerce to string so that the

            decl.value = cache.getValue(decl.value).toString();

LayerCache.prototype.optimizeValues = function (startIndex) {

  const sortedValues = Array.from(this._values.keys()).sort(ascending);

  for (let i = 0; i < sortedValues.length; i++) {

    this._values.set(sortedValues[i], i + startIndex);

LayerCache.prototype.addValue = function (value) {

  this._values.set(parsedValue, parsedValue);

LayerCache.prototype.getValue = function (value) {

  return this._values.get(parsedValue) || value;

		{
		"name": "postcss-zindex",
		"version": "5.0.2",
		"version": "5.1.0",
		"description": "Reduce z-index values with PostCSS.",
		"main": "src/index.js",
		"types": "types/index.d.ts",
		"files": [
		"LICENSE-MIT",
		"src"
		"src",
		"types"
		],
		@@ -10,0 +12,0 @@ "keywords": [

		'use strict';
		const LayerCache = require('./lib/layerCache');

		/** @typedef {{startIndex?: number}} Options */
		/**
		* @type {import('postcss').PluginCreator<Options>}
		* @param {Options} opts
		* @return {import('postcss').Plugin}
		*/
		function pluginCreator(opts = {}) {
		@@ -11,2 +17,3 @@ return {
		OnceExit(css) {
		/** @type {import('postcss').Declaration[]} */
		const nodes = [];
		@@ -13,0 +20,0 @@ let abort = false;

		'use strict';
		/** @constructor */
		function LayerCache() {
		@@ -6,2 +7,7 @@ this._values = new Map();

		/**
		* @param {number} a
		* @param {number} b
		* @return {number}
		*/
		function ascending(a, b) {
		@@ -11,2 +17,6 @@ return a - b;

		/**
		* @param {number} startIndex
		* @return {void}
		*/
		LayerCache.prototype.optimizeValues = function (startIndex) {
		@@ -19,2 +29,6 @@ const sortedValues = Array.from(this._values.keys()).sort(ascending);

		/**
		* @param {string} value
		* @return {void}
		*/
		LayerCache.prototype.addValue = function (value) {
		@@ -31,2 +45,6 @@ let parsedValue = parseInt(value, 10);

		/**
		* @param {string} value
		* @return {string}
		*/
		LayerCache.prototype.getValue = function (value) {
		@@ -33,0 +51,0 @@ let parsedValue = parseInt(value, 10);

Improved metrics