stylelint-color-format

Convert Hex colors to either RGBA or HSLA

Usage no npm install needed!

<script type="module">
  import stylelintColorFormat from 'https://cdn.skypack.dev/stylelint-color-format';
</script>

README

stylelint-color-format

CircleCI TravisCI Status XO code style code style: prettier NPM version

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