Patrick Marsceill b7b0d0d7bf
Initial commit
2017-03-09 13:16:08 -05:00

130 lines
2.2 KiB
Markdown

# declaration-block-no-duplicate-properties
Disallow duplicate properties within declaration blocks.
```css
a { color: pink; color: orange; }
/** ↑ ↑
* These duplicated properties */
```
This rule ignores variables (`$sass`, `@less`, `--custom-property`).
## Options
### `true`
The following patterns are considered warnings:
```css
a { color: pink; color: orange; }
```
```css
a { color: pink; background: orange; color: orange }
```
The following patterns are *not* considered warnings:
```css
a { color: pink; }
```
```css
a { color: pink; background: orange; }
```
## Optional secondary options
### `ignore: ["consecutive-duplicates"]`
Ignore consecutive duplicated properties.
They can prove to be useful fallbacks for older browsers.
The following patterns are considered warnings:
```css
p {
font-size: 16px;
font-weight: 400;
font-size: 1rem;
}
```
The following patterns are *not* considered warnings:
```css
p {
font-size: 16px;
font-size: 1rem;
font-weight: 400;
}
```
### `ignore: ["consecutive-duplicates-with-different-values"]`
Ignore consecutive duplicated properties with different values.
Including duplicate properties (fallbacks) is useful to deal with older browsers support for CSS properties. E.g. using 'px' units when 'rem' isn't available.
The following patterns are considered warnings:
```css
/* properties with the same value */
p {
font-size: 16px;
font-size: 16px;
font-weight: 400;
}
```
```css
/* nonconsecutive duplicates */
p {
font-size: 16px;
font-weight: 400;
font-size: 1rem;
}
```
The following patterns are *not* considered warnings:
```css
p {
font-size: 16px;
font-size: 1rem;
font-weight: 400;
}
```
### `ignoreProperties: ["/regex/", "non-regex"]`
Ignore duplicates of specific properties.
Given:
```js
["color", "/background\-/"]
```
The following patterns are considered warnings:
```css
a { color: pink; background: orange; background: white; }
```
```css
a { background: orange; color: pink; background: white; }
```
The following patterns are *not* considered warnings:
```css
a { color: pink; color: orange; background-color: orange; background-color: white; }
```
```css
a { color: pink; background-color: orange; color: orange; background-color: white; }
```