Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kristerkari/stylelint-z-index-value-constraint
Stylelint rule for setting minimum and maximum constraint value for z-index.
https://github.com/kristerkari/stylelint-z-index-value-constraint
css linter-plugin stylelint z-index
Last synced: about 22 hours ago
JSON representation
Stylelint rule for setting minimum and maximum constraint value for z-index.
- Host: GitHub
- URL: https://github.com/kristerkari/stylelint-z-index-value-constraint
- Owner: kristerkari
- License: mit
- Created: 2018-03-08T17:50:22.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-12-02T02:40:36.000Z (about 1 month ago)
- Last Synced: 2024-12-26T11:06:21.434Z (8 days ago)
- Topics: css, linter-plugin, stylelint, z-index
- Language: JavaScript
- Homepage:
- Size: 1.71 MB
- Stars: 20
- Watchers: 5
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# stylelint-z-index-value-constraint
[](https://www.npmjs.com/package/stylelint-z-index-value-constraint)
[](https://github.com/kristerkari/stylelint-z-index-value-constraint/actions?workflow=Tests)
[](http://npmcharts.com/compare/stylelint-z-index-value-constraint)
[](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)
Stylelint rule for setting minimum and maximum constraint value for z-index.
This is a fork of [niksy/stylelint-number-z-index-constraint](https://github.com/niksy/stylelint-number-z-index-constraint) plugin.
## Install
```sh
npm install stylelint-z-index-value-constraint --save-dev
```
or
```sh
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
```css
a {
z-index: 10;
}
/** ↑
* This number */
```
From [CSS Tricks article](https://css-tricks.com/handling-z-index/):
> 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:
```css
a {
z-index: 9;
}
input {
z-index: 2;
}
```
```css
a {
z-index: -9;
}
input {
z-index: -2;
}
```
The following patterns are _not_ considered warnings:
```css
a {
z-index: 10;
}
input {
z-index: 25;
}
```
```css
a {
z-index: -10;
}
input {
z-index: -25;
}
```
#### `{ max: 9999 }`
The following patterns are considered warnings:
```css
a {
z-index: 10000;
}
input {
z-index: 200000;
}
```
```css
a {
z-index: -10000;
}
input {
z-index: -200000;
}
```
The following patterns are _not_ considered warnings:
```css
a {
z-index: 9999;
}
input {
z-index: 8000;
}
```
```css
a {
z-index: -9999;
}
input {
z-index: -8000;
}
```
## Optional options
### `ignoreValues: ["number"]`
#### `{ max: 10 }, { ignoreValues: [11, 20] }`
The following patterns are considered warnings:
```css
a {
z-index: 12;
}
input {
z-index: 19;
}
```
The following patterns are _not_ considered warnings:
```css
a {
z-index: 11;
}
input {
z-index: 20;
}
```
## Dependencies
This plugin has only [stylelint](https://github.com/stylelint/stylelint) as a dependency.
---
## License
MIT