Package Exports

stylelint-z-index-value-constraint
stylelint-z-index-value-constraint/index.js

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 (stylelint-z-index-value-constraint) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

stylelint-z-index-value-constraint

Stylelint rule for setting minimum and maximum constraint value for z-index.

This is a fork of niksy/stylelint-number-z-index-constraint plugin.

Install

npm install stylelint-z-index-value-constraint --save-dev

yarn add stylelint-z-index-value-constraint --dev

Usage

Add this config to your .stylelintrc:

{
  "plugins": ["stylelint-z-index-value-constraint"],
  "rules": {
    "plugin/z-index-value-constraint": {
      "min": 1,
      "max": 10
    }
  }
}

Details

a {
  z-index: 10;
}
/**        ↑
 * This number */

From CSS Tricks article:

It's fairly common to see people number in the hundreds with z-index in web design too. The idea being that you could slip something in between later if need be, which you couldn't if you did 1, 2, 3, etc, because z-index doesn't support decimals.

This rule also handles negative values.

Options

`{ min: 10 }`

The following patterns are considered warnings:

a {
  z-index: 9;
}
input {
  z-index: 2;
}

a {
  z-index: -9;
}
input {
  z-index: -2;
}

The following patterns are not considered warnings:

a {
  z-index: 10;
}
input {
  z-index: 25;
}

a {
  z-index: -10;
}
input {
  z-index: -25;
}

`{ max: 9999 }`

The following patterns are considered warnings:

a {
  z-index: 10000;
}
input {
  z-index: 200000;
}

a {
  z-index: -10000;
}
input {
  z-index: -200000;
}

The following patterns are not considered warnings:

a {
  z-index: 9999;
}
input {
  z-index: 8000;
}

a {
  z-index: -9999;
}
input {
  z-index: -8000;
}

Optional options

`ignoreValues: ["number"]`

`{ max: 10 }, { ignoreValues: [11, 20] }`

The following patterns are considered warnings:

a {
  z-index: 12;
}
input {
  z-index: 19;
}

The following patterns are not considered warnings:

a {
  z-index: 11;
}
input {
  z-index: 20;
}

Dependencies

This plugin has only stylelint as a dependency.

License

MIT