UNPKG

2.66 kBMarkdownView Raw
1# declaration-block-no-duplicate-properties
2
3Disallow duplicate properties within declaration blocks.
4
5<!-- prettier-ignore -->
6```css
7a { color: pink; color: orange; }
8/** ↑ ↑
9 * These duplicated properties */
10```
11
12This rule ignores variables (`$sass`, `@less`, `--custom-property`).
13
14## Options
15
16### `true`
17
18The following patterns are considered violations:
19
20<!-- prettier-ignore -->
21```css
22a { color: pink; color: orange; }
23```
24
25<!-- prettier-ignore -->
26```css
27a { color: pink; background: orange; color: orange }
28```
29
30The following patterns are _not_ considered violations:
31
32<!-- prettier-ignore -->
33```css
34a { color: pink; }
35```
36
37<!-- prettier-ignore -->
38```css
39a { color: pink; background: orange; }
40```
41
42## Optional secondary options
43
44### `ignore: ["consecutive-duplicates"]`
45
46Ignore consecutive duplicated properties.
47
48They can prove to be useful fallbacks for older browsers.
49
50The following patterns are considered violations:
51
52<!-- prettier-ignore -->
53```css
54p {
55 font-size: 16px;
56 font-weight: 400;
57 font-size: 1rem;
58}
59```
60
61The following patterns are _not_ considered violations:
62
63<!-- prettier-ignore -->
64```css
65p {
66 font-size: 16px;
67 font-size: 1rem;
68 font-weight: 400;
69}
70```
71
72### `ignore: ["consecutive-duplicates-with-different-values"]`
73
74Ignore consecutive duplicated properties with different values.
75
76Including duplicate properties (fallbacks) is useful to deal with older browsers support for CSS properties. E.g. using `px` units when `rem` isn't available.
77
78The following patterns are considered violations:
79
80<!-- prettier-ignore -->
81```css
82/* properties with the same value */
83p {
84 font-size: 16px;
85 font-size: 16px;
86 font-weight: 400;
87}
88```
89
90<!-- prettier-ignore -->
91```css
92/* nonconsecutive duplicates */
93p {
94 font-size: 16px;
95 font-weight: 400;
96 font-size: 1rem;
97}
98```
99
100The following patterns are _not_ considered violations:
101
102<!-- prettier-ignore -->
103```css
104p {
105 font-size: 16px;
106 font-size: 1rem;
107 font-weight: 400;
108}
109```
110
111### `ignoreProperties: ["/regex/", "non-regex"]`
112
113Ignore duplicates of specific properties.
114
115Given:
116
117```
118["color", "/background-/"]
119```
120
121The following patterns are considered violations:
122
123<!-- prettier-ignore -->
124```css
125a { color: pink; background: orange; background: white; }
126```
127
128<!-- prettier-ignore -->
129```css
130a { background: orange; color: pink; background: white; }
131```
132
133The following patterns are _not_ considered violations:
134
135<!-- prettier-ignore -->
136```css
137a { color: pink; color: orange; background-color: orange; background-color: white; }
138```
139
140<!-- prettier-ignore -->
141```css
142a { color: pink; background-color: orange; color: orange; background-color: white; }
143```