Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kristerkari/stylelint-declaration-block-no-ignored-properties
Disallow property values that are ignored due to another property value in the same rule.
https://github.com/kristerkari/stylelint-declaration-block-no-ignored-properties
css linter-plugin stylelint
Last synced: 5 days ago
JSON representation
Disallow property values that are ignored due to another property value in the same rule.
- Host: GitHub
- URL: https://github.com/kristerkari/stylelint-declaration-block-no-ignored-properties
- Owner: kristerkari
- License: mit
- Created: 2017-09-20T16:25:54.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-10-21T23:41:28.000Z (4 months ago)
- Last Synced: 2024-10-29T12:31:43.173Z (4 months ago)
- Topics: css, linter-plugin, stylelint
- Language: JavaScript
- Homepage:
- Size: 3.93 MB
- Stars: 103
- Watchers: 5
- Forks: 8
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# stylelint-declaration-block-no-ignored-properties
[](https://www.npmjs.com/package/stylelint-declaration-block-no-ignored-properties)
[](https://github.com/kristerkari/stylelint-declaration-block-no-ignored-properties/actions?workflow=Tests)
[](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)
[](http://npmcharts.com/compare/stylelint-declaration-block-no-ignored-properties)
Original rule: [stylelint/declaration-block-no-ignored-properties](https://github.com/stylelint/stylelint/tree/7.13.0/lib/rules/declaration-block-no-ignored-properties).
Disallow property values that are ignored due to another property value in the same rule.
```css
a { display: inline; width: 100px; }
/** ↑
* This property */
```
Certain property value pairs rule out other property value pairs, causing them to be ignored by the browser. For example, when an element has display: inline, any further declarations about width, height and margin-top properties will be ignored. Sometimes this is confusing: maybe you forgot that your margin-top will have no effect because the element has display: inline, so you spend a while struggling to figure out what you've done wrong. This rule protects against that confusion by ensuring that within a single rule you don't use property values that are ruled out by other property values in that same rule.
The rule complains when it finds:
- `display: inline` used with `width`, `height`, `margin`, `margin-top`, `margin-bottom`, `overflow` (and all variants).
- `display: list-item` used with `vertical-align`.
- `display: block` used with `vertical-align`.
- `display: flex` used with `vertical-align`.
- `display: table` used with `vertical-align`.
- `display: table-*` (except `table-caption`) used with `margin`.
- `display: table-*` (except `table-cell`) used with `padding`.
- `display: table-*` (except `table-cell`) used with `vertical-align`.
- `display: table-(row|row-group)` used with `width`, `min-width` or `max-width`.
- `display: table-(column|column-group)` used with `height`, `min-height` or `max-height`.
- `float: left` and `float: right` used with `vertical-align`.
- `position: static` used with `top`, `right`, `bottom`, `left` or `z-index`.
- `position: absolute` used with `float`, `clear` or `vertical-align`.
- `position: fixed` used with `float`, `clear` or `vertical-align`.
- `list-style-type: none` used with `list-style-image`.
- `overflow: visible` used with `resize`.
## Installation
```
npm install stylelint-declaration-block-no-ignored-properties --save-dev
```
## Usage
```js
// .stylelintrc
{
"plugins": [
"stylelint-declaration-block-no-ignored-properties"
],
"rules": {
"plugin/declaration-block-no-ignored-properties": true,
}
}
```
## Options
### `true`
The following patterns are considered violations:
```css
a { display: inline; width: 100px; }
```
`display: inline` causes `width` to be ignored.
```css
a { display: inline; height: 100px; }
```
`display: inline` causes `height` to be ignored.
```css
a { display: inline; margin: 10px; }
```
`display: inline` causes `margin` to be ignored.
```css
a { display: block; vertical-align: baseline; }
```
`display: block` causes `vertical-align` to be ignored.
```css
a { display: flex; vertical-align: baseline; }
```
`display: flex` causes `vertical-align` to be ignored.
```css
a { position: absolute; vertical-align: baseline; }
```
`position: absolute` causes `vertical-align` to be ignored.
```css
a { float: left; vertical-align: baseline; }
```
`float: left` causes `vertical-align` to be ignored.
The following patterns are *not* considered violations:
```css
a { display: inline; margin-left: 10px; }
```
```css
a { display: inline; margin-right: 10px; }
```
```css
a { display: inline; padding: 10px; }
```
```css
a { display: inline-block; width: 100px; }
```
Although `display: inline` causes `width` to be ignored, `inline-block` works with `width`.
```css
a { display: table-cell; vertical-align: baseline; }
```
Although `display: block` causes `vertical-align` to be ignored, `table-cell` works with `vertical-align`.
```css
a { position: relative; vertical-align: baseline; }
```
Although `position: absolute` causes `vertical-align` to be ignored, `relative` works with `vertical-align`.