Stylelint rule for setting minimum and maximum constraint value for z-index.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
.editorconfig
.gitignore
.prettierignore
.travis.yml
LICENSE
README.md
appveyor.yml
index.js
jest-setup.js
package-lock.json
package.json
yarn.lock

README.md

stylelint-z-index-value-constraint

Greenkeeper badge

NPM version Build Status Build status Downloads per month PRs Welcome

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

or

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;
}

License

MIT