niksystylelint-number-z-index-constraint
Stylelint rule for setting minimum and maximum constraint value for z-index.
Install
npm install stylelint-number-z-index-constraint --save-devUsage
Add this config to your .stylelintrc:
{
"plugins": [
"stylelint-number-z-index-constraint"
],
"rules": [
"plugin/number-z-index-constraint": {
"min": 10,
"max": 9999
}
]
}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;
}
b {
z-index: 2;
}a {
z-index: -9;
}
b {
z-index: -2;
}The following patterns are not considered warnings:
a {
z-index: 10;
}
b {
z-index: 25;
}a {
z-index: 10;
}
b {
z-index: -25;
}{ max: 9999 }
The following patterns are considered warnings:
a {
z-index: 10000;
}
b {
z-index: 200000;
}a {
z-index: -10000;
}
b {
z-index: -200000;
}The following patterns are not considered warnings:
a {
z-index: 9999;
}
b {
z-index: 8000;
}a {
z-index: -9999;
}
b {
z-index: -8000;
}License
MIT © Ivan Nikolić