postcss-colorguard-formatter

A neat formatter for the postcss-colorguard plugin.

Installation

npm install postcss-colorguard-formatter
typings install

Usage

import postcss from "postcss";
import colorguard from "colorguard";
import reporter from "postcss-reporter";
import formatter from "postcss-colorguard-formatter";

const instance = postcss([
  colorguard(),
  reporter({ formatter }),
]);

When there are issues, it will produce the following output:

warning: "#fff" collides with "#fafafa"
/full/path/atom-one-light.css:23:14
20 |   overflow-x: auto;
21 |   padding: 0.5em;
22 |   color: #383a42;
23 |   background: #fafafa;
                   ^^^^^^^

warning: "#fafafa" collides with "#fff"
/full/path/code.css:5:20
2 |   display: block;
3 |   border: 1px solid var(--content-border-grey);
4 |   padding: 20px;
5 |   background-color: #fff;
                        ^^^^

warning: "#fafafa" collides with "#fff"
/full/path/code-example.css:21:20
18 | .wsg-CodeExample__output {
19 |   padding: 56px;
20 |   border: 1px solid var(--content-border-grey);
21 |   background-color: #fff;
                         ^^^^

warning: "#fafafa" collides with "#fff"
/full/path/code-example.css:34:20
31 |   z-index: 1;
32 |   padding: 4px 8px;
33 |   border: 1px solid var(--content-border-grey);
34 |   background-color: var(--content-background-white);
                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
warning: "#fff" collides with "#fafafa"
/full/path/content/code-mirror-overrides.css:13:20
10 |
11 | .cm-s-mdn-like.CodeMirror {
12 |   background-image: none;
13 |   background-color: var(--content-background-light);
                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

warning: "#fff" collides with "#fafafa"
/full/path/index.css:17:20
14 |
15 | body {
16 |   font-family: Market;
17 |   background-color: var(--content-background-light);
                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

License

MIT