stylelint-z-index-value-constraint
v1.4.0
Published
Stylelint rule for setting minimum and maximum constraint value for z-index.
Downloads
25,873
Maintainers
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
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;
}
Dependencies
This plugin has only stylelint as a dependency.
License
MIT