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