bredon-plugin-color

bredon-plugin-color

The color plugin is, as the name hints, all about modifying CSS color values. It can transform values into different color formats.

Supported color formats are:

• hex (#ffffff)
• rgb (rgb(255, 0, 255), `rgba(255, 0, 255, 0.55))
• hsl (hsl(100, 100%, 50%), `hsla(100, 50%, 50%, 0.55))

It can also process color names e.g. white, but will not output those.

Installation

yarn add bredon-plugin-color

You may alternatively use npm i --save bredon-plugin-color.

Usage

import { compile } from 'bredon'
import colorPlugin from 'bredon-plugin-color'

const input = '1px solid white'

const output = compile(input, {
  plugins: [ 
    colorPlugin()
  ]
})

console.log(output)
// => 1px solid #ffffff

Configuration

By default the plugin transforms every color value to the hex color format.
You can pass a custom color format with an options object.

Options	Value	Default	Description
preserveAlpha	boolean	true	Values with alpha won't be transformed to hex
format	hex, rgb, hsl	hex	The output color format

import { compile } from 'bredon'
import colorPlugin from 'bredon-plugin-color'

const input = '1px solid white'

const output = compile(input, {
  plugins: [ 
    colorPlugin({
      format: 'rgb'
    })
   ]
})

console.log(output)
// => 1px solid rgb(255, 255, 255)

License

Bredon is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann and all the great contributors.