stylelint-color-no-non-variables

This is a stylelint plugin to require usage of variables instead of color literals.

Installation

npm i stylelint-color-no-non-variables

Usage

Add the plugin into your .stylelintrc alongside the rule usage.

{
  "plugins": ["stylelint-color-no-non-variables"],
  "rules": {
    "dczajkowski/color-no-non-variables": true
  }
}

For this config the following applies:

/* This is allowed */

.a {
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
}

/* This is not allowed */

.b {
  background-color: black; /* Color name */
  color: #fff; /* Hex code */
  border-top-color: rgb(10, 20, 30); /* Usage of the rgb function */
  border-left-color: rgba(10, 20, 30, 40%); /* Usage of the rgba function */
  border-right-color: hsl(10, 20%, 30%); /* Usage of the hsl function */
  border-bottom-color: hsla(10, 20%, 30%, 40%); /* Usage of the hsla function */
  background: color(#fff shade(10%));  /* Usage of postcss color function */
  border: 1px solid #000; /* Hex code (or any other of the above) embedded into a complex rule */
}

License

This plugin is an open-sourced software licensed under the MIT license.