slexaxton / css-colorguard Goto Github PK

Keep a watchful eye on your css colors.

JavaScript 100.00%

css-colorguard's Introduction

CSS Colorguard

Every CSS project starts out with good intentions, but inevitably, one too many people eye-dropper colors into nooks and crannies that you never knew existed. CSS Colorguard helps you maintain the color set that you want, and warns you when colors you've added are too similar to ones that already exist. Naturally, it's all configurable to your tastes.

How it works

Colorguard uses the CIEDE2000 algorithm to determine the similarity of each of the colors in your CSS file. This algorithm is quite complex, but is used in the broadcasting community as the best approximation of human ability to discern differences in color. RGB on the other hand, is pretty bad at representing differences in color purely based on the numerical difference of the hex values.

Luckily, someone else already implemented CIEDE2000, so I didn't have to. Tight. Cause this thing is mathy as hell.

Alpha Transparency

Currently, alpha transparency is just stripped from the colors. So rgb(0, 0, 0) exactly matches rgba(0,0,0,0.5). This is usually fine unless someone is alphatransparency-happy and uses it for darkening and lightening colors too often. It could probably be its own check in the future that there aren't too many different alpha transparencies of the same color. This is not currently a thing though.

API

`colorguard.process(css, [options]).then(function(result) {})`

options

ignore

Type: array

Specify hex codes of colors that you would like to ignore completely. Use with caution.

threshold

Type: number Default: 3

0 through 100. Lower values are more precise; the default is 3 but that's mostly personal opinion.

whitelist

Type: array

Pass an array of color pairs to ignore:

[['#000000', '#010101']]

allowEquivalentNotation

Type: boolean Default: false

By default, colorguard will complain if identical colors are represented with different notations. For example, #000, #000000, rgba(0, 0, 0, 0), and black. If you want to permit these equivalent notations, set this option to true.

`postcss([ colorguard(opts) ])`

CSS Colorguard can be consumed as a PostCSS plugin. See the documentation for examples for your environment.

Build Time

CSS Colorguard can be used in conjunction with other javascript build systems, such as:

CLI

CSS Colorguard also ships with a CLI app. To see the available options, just run:

$ colorguard --help

Install

With npm, to get the command do:

npm install -g colorguard

To get the library & PostCSS plugin, do:

npm install colorguard

Thanks

Stripe - They let me build this at work
@markusn - Best CIEDE2000 implementation ever

License

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

css-colorguard's People

Contributors

Stargazers

Watchers

css-colorguard's Issues

Migrate to ES6 / ES2015?

What do you think about migrating the project to ES2015?

ERROR npm install -g colorguard

Option to ignore node_modules, other file globs?

My build complains because I use React-Select.

Their styles don't pass colorguard's test.

As is, I have no way to say "no, don't lint my 3rd party libraries" or "ignore specific files".

I think ignoreFiles: /node_modules/ should be an option, and /node_modules/ should be the default value. I'm not the only person who thinks so.

False collisions with gradiated color scheme

We have an app that uses hsl and postcss-color-mod to define custom properties with varying lightnesses of our brand colors. I was hoping to use this library to detect duplications of these colors, but it seems that all of the hsl values conflict with each other (ie. a bunch of hsl(197.8, 100%, 74%) collides with hsl(197.8, 100%, 69%) warnings in the file that defines the color scheme properties. It would be nice if there was a way to ignore these. I tried to put a couple of them in the whitelist but that didn't work. The only way was to bump the tolerance up to 75, but that seems a bit nuts. Anyone dealt with this before? Thoughts on getting past it?

Color palette output

How about extra feature, presenting visual interpretation of all used colors.
It's extremely helpful in any project, not to mention large sites.
They could also be sorted by usage type - color, background-color, gradient, border etc.

Something similar to http://webcolourdata.com/profile/2392, but from a bit more practical point of view.

Throws error when CSS file contains prefixed @keyframes selectors

It seems the CSS parser isn't reading prefixed keyframes selector correctly (e.g. @-webkit-keyframes). A temporary solution that worked for me was to check if typeof declarations !== undefined on line 103 inside colorguard.js. Not ideal, but did confirm that the rest of my 2000 line CSS file was read properly.

Error output:

$ colorguard --file test.css 

/node_modules/colorguard/lib/colorguard.js:131
  declarations.forEach(function(decl){
               ^
TypeError: Cannot call method 'forEach' of undefined
    at declarationParser (/node_modules/colorguard/lib/colorguard.js:131:16)
    at /node_modules/colorguard/lib/colorguard.js:103:7
    at /node_modules/colorguard/node_modules/rework-visit/index.js:28:9
    at Array.forEach (native)
    at /node_modules/colorguard/node_modules/rework-visit/index.js:27:22
    at Array.forEach (native)
    at visit (/node_modules/colorguard/node_modules/rework-visit/index.js:18:14)
    at /node_modules/colorguard/lib/colorguard.js:102:5
    at Rework.use (/node_modules/colorguard/node_modules/rework/index.js:49:3)
    at Object.exports.inspect (/node_modules/colorguard/lib/colorguard.js:226:15)

Example css:

.something-before {
  color: #000000;
}

/* This selector breaks things */
@-webkit-keyframes spin {
  /* Safari and Chrome */
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

/* This selector works fine */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.something-after {
  color: #010101;
}

Color names mapped to mathmatical values?

This is an awesome concept for a module. I haven't gotten to look through the source yet but I've noticed some errors around lines that use color names ('white', 'blue', etc..). Was module meant to resolve those to generally accepted mathematical values? If so, it seems to be broken.

P.S: I use of these in css is frowned upon but apparently the previous maintainers of my codebase did not - which is one of the reasons I am trying this module to identify these color properties.

@-webkit-keyframes @keyframes support

Doing something like

.foo.bar {
position: relative;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@-webkit-keyframes secondary-circular-loader {
... more css

does not work. It seems that colorguard does not parse the @- prefix for webkit, firefox or ms ( although ms is dropping that prefix ) nor does it support @Keyframes erroring our with a line number and column number where the column number happens to be the @ symbol. This is valid CSS.

There was an error processing the CSS.
Error: undefined:9060:3: missing '}'

Same colors isn't collide

No collides with this colors:

.foo {
  color: #000000;
  background: #000000;
}

But I have collide warning with this:

.foo {
  color: #000;
  background: #000000;
}

Add Sass/SCSS support?

Works great on CSS, but would it be a whole rewrite to include other formats like Sass/Compass? Kindly, K

Consider removing preferGlobal flag

Is there any particular reason that the preferGlobal flag is enabled in the project's package.json? I understand that colorguard ships with a CLI, so a user may want to install it globally, but given that it also includes a node API, it's strange to get the prefer global [email protected] should be installed with -g npm warning on perfectly valid (local) installs.

Happy to submit a PR removing the flag.

Need an option for list of ignored properties

Now this module evaluate all color properties in css, but it may be very excessively. For example, box-shadow and text-shadow. Colors of this properties usually very close to text color, because there is should be an option to exclude some properties to make colorguard reporting more useful.

bug with color name in url, no ignore image name

const colorguard = require('colorguard');

colorguard.process('a {\n  background-image: url(../images/white.png);\n  color: #fff;\n}').then((result) => {
    console.log(result);
});

<input css 1>
  line 3  col 3  #fff collides with white  (2:34)

  ✖  1 collision found.

README.md says license is Apache, but package.json says it is MIT

It would be nice to change one or the other to get them into sync.

whitelist ignores short HEX values

this will work

['#f7f7f7', '#ffffff']

this will not

['#f7f7f7', '#fff']

please publish a new release to NPM

Installing stylelint prints this message

npm WARN prefer global [email protected] should be installed with -g

861d194

related #42

Error and Warning output

I'm experiencing strange output, something like

Running "colorguard:files" (colorguard) task
Warning: undefined:708:90: property missing ':' Use --force to continue.

Aborted due to warnings.

Even if I target single file, it's impossible to detect typo in this fragment.

I suggest either fixing or providing more clear output.

Clarification of ignore option

Firstly, what a a great bit of functionality this is. Thanks all for the work that's gone in to this. It's going to solve a few problems for me 👍

Regarding the ignore option, am I correct in assuming that given an array like this:

"ignore": ["#444","#414141","#404040","#393939","#333","#303030","#222","#373737","#3D3D3D","#D2D2D2","#C4C4C4","#D3D3D3"]

Then comparisons with any different colours in the codebase against any of those 'ignore' values will be ignored?

So, say with a threshold of 2, if I have a value of #424242 in the CSS, it won't get flagged as a warning because we have #414141 in the ignore list, which is the thing it would ordinarily clash against. Is that correct?

Support Folders

Give it a folder, and we'll just grab all the css files in it, and merge all their results together.

Failing on one type of CSS selector

Good morning!

This morning I set about trying to include this project into my companies workflow.

After setting everything up and running colorguard on our CSS I got the quite esoteric error of:

[gulp] [10:13:33] 'colorguard' errored after 217 ms Cannot read property 'R' of null

After a bit of sleuthing I found the culprit to be the https://github.com/Leaflet/Leaflet CSS file we include in our project.

Specifically this line: https://github.com/Leaflet/Leaflet/blob/02d58967400e7c59e5e7f10d8de0ea0f88aec43c/dist/leaflet.css#L86

behavior: url(#default#VML);

Removing that line and everything worked wonderfully.

Just wanted to leave this issue here incase anyone else stumbles upon this issue.

Alternative to pipetteur (which uses one-color)?

cf. stylelint/stylelint#891

pipetteur relies one one-color, which does not run in environments that don't support eval, like Atom --- meaning the additional dependency of css-colorguard in stylelint breaks Atom's linter-stylelint.

It sounds like one-color is not going to be able to fix this (One-com/one-color#22). So I wonder if there's another way for css-colorguard to get the information it needs.

Were there any viable alternatives you ran across while originally developing the plugin? Or did you decide that pipetteur was really and uniquely necessary?

Maintainance check-in

The package seems to be in need for a postcss upgrade, considering warnings like:

css-colorguard: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration

In addition, we have an open pull request:
#34

Since this package is being relied on, can we work towards doing a few quick updates, adding additional collaborators, or figure some way we can keep colorguard alive.

whitelist ignores rgba values

RGBA values are very important in modern CSS, so they should be respected accordingly.
Current whitelist is not applied*

['#000000', 'rgba(0,0,0,0.5)']

* can't use short hex value due to #30

Failing on Glyphicons because of -moz-osx-font-smoothing (I think)

Hi,

The script is failing on this. You can found this line of code in Glyphicon, a depandency of Twitter Bootstrap :

.glyphicon {
    -moz-osx-font-smoothing:grayscale;
}

Error :

Error : property missing ':' near line 2:37

Migrate to PostCSS?

What do you think of switching from rework to PostCSS? Number of benefits includes:

Great support for nested rules which would help fix #25.
First class source maps, which are automatically updated whenever you would modify nodes. #8
Would be very straightforward to do something like this also. #1
You would be able to report colour collisions in the browser and the CLI with https://github.com/postcss/postcss-reporter & https://github.com/postcss/postcss-browser-reporter

Option for ignoring repeated occurrences (e.g. --ignore-repeated)

It'd be really useful to have an option to ignore repeated occurrences, the output would be more actionable by just focusing on the unique collisions.

Support sourcemaps

Give it a sourcemap, and it'll map line numbers back to your original files.

Conformance output.

Essentially, put a css file in, and get one out that fits into your rules.

More importantly, possibly pass in your style guide colors as the only available colors (minus maybe black and white variants) and then pass in a stylesheet, and colorguard will find the closest visual color from the ones in the stylesheet and output a new stylesheet that conforms. This would serve some cool demos where you can take a fairly different colored site, and make it exactly match your style guidelines.

HSLA and allowEquivalentNotation

Hello,

Colorguard prints the following warning if I enable the colormin option in cssnano:

templates/default/dist/styles/default.min.css
1:7281  ⚠  #aaa collides with hsla(0,0%,67%,.9) (1:6703) [css-colorguard]
1:8832  ⚠  #aaa collides with hsla(0,0%,67%,.9) (1:6703) [css-colorguard]

I have to disable colormin because colorguard seems to have a bug with HSLA colors even when allowEquivalentNotation is enabled. At this moment I don't know if this is an issue with colormin that does wrong processing or colorguard that does not support HSLA colors. Please confirm this.

Best regards
Henry

Support @import

I know its a bad idea to include @import but some sites use this (we have them in development, not production).

Running it against the split files would make it easier to trace where my collisions are.

Default (non-JSON) output is printed to stderr, not stdout

This makes redirecting the output to a file (for later reference for large files) or paging it with something like less a bit cumbersome. I think there's a case to be made for switching the output from stderr to stdout: it's actual program output describing errors perhaps related to the input to the program but not errors relating to the operation of the program.

I'd open a PR directly but I'm not sure if there're any downstream toolchain assumptions that would change as a result.

Reporting as colliding with variable name

When a variable name is used to define a color, and that variable name contains an actual color (red, gray, etc.) it is reported as colliding.

Example:

$base-warm-grey-color: #808080;

will report: css-colorguard: (...): grey collides with #808080

Add --version option

Do not display logs with colorguard.process()

Hello,

When the API colorguard.process() is called, the results are returned in the promise, but they are also displayed on the standard output:

<input css 1>
  line 5  col 5  #fffffe collides with #ffffff  (2:11)

  ✖  1 collision found.

These messages pollute the console when Colorguard is used by program. The process() method should not write to the console (or add an option to disable it).

Alpha transparency

Just leaving this as a note to get back to when I (or anyone else, PR welcome) have time.

markusn/color-diff#8 (comment)