filipekiss / stylelint-color-format

Stylelint plugin to convert HEX colors to either RGB or HSL

stylelint-color-format

A Stylelint plugin to convert HEX colors to either RGB or HSL formats.

Installation

npm install --save-dev stylelint-color-format

Configuration

In your Stylelint Configuration, add the following to the plugins array. (Make sure the plugins array comes before your rules block):

{
  "plugins": ["stylelint-color-format"]
}

And then, in the rules:

{
  "rules": {
    "color-format/format": {
      "format": "rgb"
    }
  }
}

Usage

The rule itself works much like the default color-no-hex rule. It will report if a HEX color format (#333, #CA4FBD and even #FFFFFFAB) is found, it will error out since the format is not what we want. If you pass the --fix option, however, the color format will be converted to either rgb or hsl, according to your configuration

Configuration

The color-format/format rule accepts an object with a single format key.

rgb | rgba

This will convert any HEX colors to RGB. If the HEX color has a transparency, the RGBA format will be used.

hsl | hsla

This will convert any HEX colors to HSL. If the HEX color has a transparency, the HSLA format will be used.

LICENSE - MIT

stylelint-color-format's Issues

Update peer dependency comatibility

Currently it is not compatible with stylelint 12+

npm WARN [email protected] requires a peer of stylelint@^8.0.0 || ^9.0.0 but none is installed. You must install peer dependencies yourself.

A new release to npm will also be necessary

Change other format than hex

By setting the rule as below, I thought all colors would be formatted to hsl, but it turns out only hex errors are reported and fixed.

'color-format/format': {
      format: 'hsl',
},

Maybe we can have an option to also format the other color type (in this case, format rgb to hsl too)? I thought of something like:

'color-format/format': {
      format: 'hsl',
      types: 'all' | 'hex',
},

Unable to parse stylelint configuration: Undefined rule color-format/format

With the instructions and config verbatim from the README:

npm install --save-dev stylelint stylelint-color-format
+ [email protected]
+ [email protected]
added 147 packages from 122 contributors, updated 1 package and audited 12749 packages in 5.202s
found 0 vulnerabilities

project .stylelintrc:

{ "rules": {
    "color-format/format": { "format": "rgb" }
  },
  {
    "plugins": ["stylelint-color-format"]
 }
}

Atom returns:
Unable to parse stylelint configuration: Undefined rule color-format/format

Convert to OKLCH

Update peer dependency comatibility

Currently it is not compatible with stylelint 10+

npm WARN [email protected] requires a peer of stylelint@^8.0.0 || ^9.0.0 but none is installed. You must install peer dependencies yourself.

Typo in README ?

hsl | hsla

This will convert any HEX colors to HSL. If the HEX color has a transparency, the RGBA format will be used.

RGBA HSLA

Feature: Support shorthand notations

--fix can't handle colors in shorthand notations, e.g.:

  border: 6px solid #8ddbe3;

Error: Unable to parse color from string: 6px solid #8ddbe3

Feature: Support rounding?

After running stylelint --fix the diff looks like this:

-@tag-color: #33b4c0;
+@tag-color: hsl(185.10000000000002, 58%, 47.6%);

It may be the correct H value but what about an option to round the values to n decimal points?

Custom message

Please, add the ability to provide custom error message or if it's already implemented, add docs. I tried the following but unsuccessfully:

"color-format/format": {
  "format": "hsl",
  "message": "Consider using HSL."
}

"color-format/format": [{
  "format": "hsl",
  "message": "Consider using HSL."
}]

"color-format/format": {
  "format": "hsl",
  "message": "Consider using HSL."
}

"color-format/format": [
  "hsl",
  {
    "message": "Consider using HSL."
  }
]