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
npm install postcss-color-function
Usage
// dependenciesvar fs = var postcss = var colorFunction = // css to be processedvar css = fs // process css// set preserveCustomProps to `false` by default `true`//for delete declarations with custom propertiesvar output = css
Using this input.css
:
you will get:
Checkout tests for examples.
Interface (according to CSS specs)
color( [ <color> | <hue> ] <color-adjuster>* )
color-adjuster
List of [red( | green( | blue( | alpha( | a(] ['+' | '-']? [<number> | <percentage>] )
[red( | green( | blue( | alpha( | a(] '*' <percentage> )
@todorgb( ['+' | '-'] [<number> | <percentage>]{3} )
@todorgb( ['+' | '-'] <hash-token> )
@todorgb( '*' <percentage> ) |
[hue( | h(] ['+' | '-' | '*']? <angle> )
[saturation( | s(] ['+' | '-' | '*']? <percentage> )
[lightness( | l(] ['+' | '-' | '*']? <percentage> )
[whiteness( | w(] ['+' | '-' | '*']? <percentage> )
[blackness( | b(] ['+' | '-' | '*']? <percentage> )
tint( <percentage> )
shade( <percentage> )
blend( <color> <percentage> [rgb | hsl | hwb]? )
@todoblenda( <color> <percentage> [rgb | hsl | hwb]? )
contrast( <percentage>? )
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.
Examples
FAQ
currentcolor
so we can do color(currentcolor adjuster())
?
Can you support 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.
color(var(--mainColor) adjuster())
?
Can we use CSS custom properties so we can do 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:
$)/* is equivalent to */)) $)/* is equivalent to */))