UNPKG

2.56 kBMarkdownView Raw
1# color-named
2
3Require (where possible) or disallow named colors.
4
5<!-- prettier-ignore -->
6```css
7a { color: black }
8/** ↑
9 * This named color */
10```
11
12This rule ignores `$sass` and `@less` variable syntaxes.
13
14## Options
15
16`string`: `"always-where-possible"|"never"`
17
18### `"always-where-possible"`
19
20Colors _must always_, where possible, be named.
21
22This will complain if a hex (3, 4, 6 and 8 digit), `rgb()`, `rgba()`, `hsl()`, `hsla()`, `hwb()` or `gray()` color can be represented as a named color.
23
24The following patterns are considered violations:
25
26<!-- prettier-ignore -->
27```css
28a { color: #000; }
29```
30
31<!-- prettier-ignore -->
32```css
33a { color: #f000; }
34```
35
36<!-- prettier-ignore -->
37```css
38a { color: #ff000000; }
39```
40
41<!-- prettier-ignore -->
42```css
43a { color: rgb(0, 0, 0); }
44```
45
46<!-- prettier-ignore -->
47```css
48a { color: rgb(0%, 0%, 0%); }
49```
50
51<!-- prettier-ignore -->
52```css
53a { color: rgba(0, 0, 0, 0); }
54```
55
56<!-- prettier-ignore -->
57```css
58a { color: hsl(0, 0%, 0%); }
59```
60
61<!-- prettier-ignore -->
62```css
63a { color: hwb(0, 0%, 100%); }
64```
65
66<!-- prettier-ignore -->
67```css
68a { color: gray(0); }
69```
70
71The following patterns are _not_ considered violations:
72
73<!-- prettier-ignore -->
74```css
75a { color: black; }
76```
77
78<!-- prettier-ignore -->
79```css
80a { color: rgb(10, 0, 0); }
81```
82
83<!-- prettier-ignore -->
84```css
85a { color: rgb(0, 0, 0, 0.5); }
86```
87
88### `"never"`
89
90Colors _must never_ be named.
91
92The following patterns are considered violations:
93
94<!-- prettier-ignore -->
95```css
96a { color: black; }
97```
98
99<!-- prettier-ignore -->
100```css
101a { color: white; }
102```
103
104The following patterns are _not_ considered violations:
105
106<!-- prettier-ignore -->
107```css
108a { color: #000; }
109```
110
111<!-- prettier-ignore -->
112```css
113a { color: rgb(0, 0, 0); }
114```
115
116<!-- prettier-ignore -->
117```css
118a { color: var(--white); }
119```
120
121## Optional secondary options
122
123### `ignore: ["inside-function"]`
124
125Ignore colors that are inside a function.
126
127For example, with `"never"`.
128
129The following patterns are _not_ considered violations:
130
131<!-- prettier-ignore -->
132```css
133a {
134 color: map-get($colour, blue);
135}
136```
137
138<!-- prettier-ignore -->
139```css
140a {
141 background-image: url(red);
142}
143```
144
145### `ignoreProperties: ["/regex/", /regex/, "string"]`
146
147For example with `"never"`.
148
149Given:
150
151```
152["/^my-/", "composes"]
153```
154
155The following patterns are _not_ considered violations:
156
157<!-- prettier-ignore -->
158```css
159a {
160 my-property: red;
161}
162```
163
164<!-- prettier-ignore -->
165```css
166a {
167 my-other-property: red;
168}
169```
170
171<!-- prettier-ignore -->
172```css
173a {
174 composes: red from './index.css';
175}
176```