Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including stylelint-z-index-value-constraint with all npm packages installed. Try it out:

require("stylelint/package.json"); // stylelint is a peer dependency. var stylelintZIndexValueConstraint = require("stylelint-z-index-value-constraint")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

stylelint-z-index-value-constraint v1.1.0

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

stylelint-z-index-value-constraint

Greenkeeper badge

NPM version Build Status Build status Downloads per month contributions 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;
}

Dependencies

This plugin has only stylelint as a dependency.


License

MIT

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free