Require (where possible) or disallow named colors.
a { color: black } /** ↑ * This named color */
string
: "always-where-possible"|"never"
"always-where-possible"
Colors must always, where possible, be named.
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.
The following patterns are considered violations:
a { color: #000; }
a { color: #f000; }
a { color: #ff000000; }
a { color: rgb(0, 0, 0); }
a { color: rgb(0%, 0%, 0%); }
a { color: rgba(0, 0, 0, 0); }
a { color: hsl(0, 0%, 0%); }
a { color: hwb(0, 0%, 100%); }
a { color: gray(0); }
The following patterns are not considered violations:
a { color: black; }
a { color: rgb(10, 0, 0); }
a { color: rgb(0, 0, 0, 0.5); }
"never"
Colors must never be named.
The following patterns are considered violations:
a { color: black; }
a { color: white; }
The following patterns are not considered violations:
a { color: #000; }
a { color: rgb(0, 0, 0); }
a { color: var(--white); }
a { color: $blue; }
a { color: @blue; }
ignore: ["inside-function"]
Ignore colors that are inside a function.
For example, with "never"
.
The following patterns are not considered violations:
a { color: map-get($colour, blue); }
a { background-image: url(red); }
ignoreProperties: ["/regex/", /regex/, "string"]
For example with "never"
.
Given:
["/^my-/", "composes"]
The following patterns are not considered violations:
a { my-property: red; }
a { my-other-property: red; }
a { composes: red from './index.css'; }