blob: 33a61a1538289acd45ad0d2e7c5765eb7588f4a7 [file] [log] [blame] [view]
# 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 violations:
```css
a { color: pink; color: orange; }
```
```css
a { color: pink; background: orange; color: orange }
```
The following patterns are *not* considered violations:
```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 violations:
```css
p {
font-size: 16px;
font-weight: 400;
font-size: 1rem;
}
```
The following patterns are *not* considered violations:
```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 violations:
```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 violations:
```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 violations:
```css
a { color: pink; background: orange; background: white; }
```
```css
a { background: orange; color: pink; background: white; }
```
The following patterns are *not* considered violations:
```css
a { color: pink; color: orange; background-color: orange; background-color: white; }
```
```css
a { color: pink; background-color: orange; color: orange; background-color: white; }
```