postcss-color-function 

PostCSS plugin to transform CSS color function from editor draft of 'Color Module Level 4' specification to more compatible CSS.

Deprecated

⚠️ color() was changed to color-mod(). See postcss-color-mod-function.

> There is a
color-mod
implementation.

⚠️ color-mod() has been removed from Color Module Level 4 specification.

Installation

``console
npm install postcss-color-function
`

Usage

`js
// dependencies
var fs = require("fs")
var postcss = require("postcss")
var colorFunction = require("postcss-color-function")

// css to be processed
var css = fs.readFileSync("input.css", "utf8")

// process css
// set preserveCustomProps to false by default true
//for delete declarations with custom properties
var output = postcss()
.use(colorFunction({preserveCustomProps: true}))
.process(css)
.css
`

Using this input.css:

`css
body {
background: color(red a(90%))
}

`

you will get:

`css
body {
background: rgba(255, 0, 0, 0.9)
}
`

Checkout tests for examples.

Interface (according to CSS specs)

`
color( [ | ] * )
`

$3

- [red( | green( | blue( | alpha( | a(] ['+' | '-']? [ | ] )
- [red( | green( | blue( | alpha( | a(] '*' )
- ~~rgb( ['+' | '-'] [ | ]{3} )~~ @todo
- ~~rgb( ['+' | '-'] )~~ @todo
- ~~rgb( '*' ) |~~ @todo
- [hue( | h(] ['+' | '-' | '*']? )
- [saturation( | s(] ['+' | '-' | '*']? )
- [lightness( | l(] ['+' | '-' | '*']? )
- [whiteness( | w(] ['+' | '-' | '*']? )
- [blackness( | b(] ['+' | '-' | '*']? )
- tint( )
- shade( )
- blend( [rgb | hsl | hwb]? )
- ~~blenda( [rgb | hsl | hwb]? )~~ @todo
- contrast( ? )

Notes:

- some adjusts have shortcuts,
- can be used on every value on any property,
- some values can use add/subtract/scale modifiers or a direct value.

$3

`css
whatever {
color: color(red a(10%));

background-color: color(red lightness(50%)); / == color(red l(50%)); /

border-color: color(hsla(125, 50%, 50%, .4) saturation(+ 10%) w(- 20%));
}
`

FAQ

$3

No we cannot do that. currentcolor depends on the cascade (so the DOM) and we can't handle that in a simple preprocessing step. You need to handle that with polyfills.

$3

By using postcss-custom-properties before this plugin, you can do that (sort of).
You have some examples in cssnext playground.

Notes for former Sass users

lighten and darken are Sass specific methods and not supported by native CSS specs. The same functionality can be achieved with the tint and shade adjusters:

`css
$lighten(red, 20%)
/ is equivalent to /
color(red tint(20%))

$darken(red, 20%)
/ is equivalent to /
color(red shade(20%))
``

---

Changelog

License