kristerkari / stylelint-z-index-value-constraint

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

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

stylelint-z-index-value-constraint's Issues

Handle secondary options with only severity level

Providing rules:

"rules": {
  "plugin/z-index-value-constraint": [{ max: 100 }, {severity: "error" }]
}

causes a TypeError. This is likely related to this check: https://github.com/kristerkari/stylelint-z-index-value-constraint/blob/master/index.js#L60

I have this working by providing these options:

"rules": {
  "plugin/z-index-value-constraint": [{ max: 100 }, { ignoreValues: [-1], severity: "error" }]
}

but it would be ideal to be able to just provide a severity level.

Example of rule is unvalid

Hi,

I wanted to let you know that the given example does not present a valid one.

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

(as the red color indicates it)

I can make a PR for this is you want.

Thx !

Support Stylelint 16

Feature proposal

https://github.com/stylelint/stylelint/releases/tag/16.0.0

Would be lovely to have z-index use variables functionality

Would be great to have possibility to set z-index value only variables, not numeric value. That is some time helps to keep z-index variables in one place and find out what is this variable does?

Example:
// not valid
z-index: 5;

// valid
$the-best-z-index: 5;
z-index: $the-best-z-index;

Please take a look at it, thanks!