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