Files
DeviceManager/node_modules/stylelint/lib/rules/declaration-block-no-duplicate-properties/README.md

212 lines
4.1 KiB
Markdown

# declaration-block-no-duplicate-properties
Disallow duplicate properties within declaration blocks.
<!-- prettier-ignore -->
```css
a { color: pink; color: orange; }
/** ↑ ↑
* These duplicated properties */
```
This rule ignores variables (`$sass`, `@less`, `--custom-property`).
The [`fix` option](../../../docs/user-guide/options.md#fix) can automatically fix all of the problems reported by this rule.
The [`message` secondary option](../../../docs/user-guide/configure.md#message) can accept the arguments of this rule.
## Options
### `true`
The following patterns are considered problems:
<!-- prettier-ignore -->
```css
a { color: pink; color: orange; }
```
<!-- prettier-ignore -->
```css
a { color: pink; background: orange; color: orange }
```
The following patterns are _not_ considered problems:
<!-- prettier-ignore -->
```css
a { color: pink; }
```
<!-- prettier-ignore -->
```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 problems:
<!-- prettier-ignore -->
```css
p {
font-size: 16px;
font-weight: 400;
font-size: 1rem;
}
```
The following patterns are _not_ considered problems:
<!-- prettier-ignore -->
```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 problems:
<!-- prettier-ignore -->
```css
/* properties with the same value */
p {
font-size: 16px;
font-size: 16px;
font-weight: 400;
}
```
<!-- prettier-ignore -->
```css
/* nonconsecutive duplicates */
p {
font-size: 16px;
font-weight: 400;
font-size: 1rem;
}
```
The following patterns are _not_ considered problems:
<!-- prettier-ignore -->
```css
p {
font-size: 16px;
font-size: 1rem;
font-weight: 400;
}
```
### `ignore: ["consecutive-duplicates-with-different-syntaxes"]`
Ignore consecutive duplicated properties with different value syntaxes (type and unit of value).
The following patterns are considered problems:
<!-- prettier-ignore -->
```css
/* properties with the same value syntax */
p {
font-size: 16px;
font-size: 14px;
font-weight: 400;
}
```
The following patterns are _not_ considered problems:
<!-- prettier-ignore -->
```css
p {
font-size: 16px;
font-size: 16rem;
font-weight: 400;
}
```
### `ignore: ["consecutive-duplicates-with-same-prefixless-values"]`
Ignore consecutive duplicated properties with identical values, when ignoring their prefix.
This option is useful to deal with draft CSS values while still being future proof. E.g. using `fit-content` and `-moz-fit-content`.
The following patterns are considered problems:
<!-- prettier-ignore -->
```css
/* nonconsecutive duplicates */
p {
width: fit-content;
height: 32px;
width: -moz-fit-content;
}
```
<!-- prettier-ignore -->
```css
/* properties with different prefixless values */
p {
width: -moz-fit-content;
width: 100%;
}
```
The following patterns are _not_ considered problems:
<!-- prettier-ignore -->
```css
p {
width: -moz-fit-content;
width: fit-content;
}
```
### `ignoreProperties: ["/regex/", /regex/, "non-regex"]`
Ignore duplicates of specific properties.
Given:
```json
["color", "/background-/"]
```
The following patterns are considered problems:
<!-- prettier-ignore -->
```css
a { color: pink; background: orange; background: white; }
```
<!-- prettier-ignore -->
```css
a { background: orange; color: pink; background: white; }
```
The following patterns are _not_ considered problems:
<!-- prettier-ignore -->
```css
a { color: pink; color: orange; background-color: orange; background-color: white; }
```
<!-- prettier-ignore -->
```css
a { color: pink; background-color: orange; color: orange; background-color: white; }
```