postcss/postcss-color-function

Name: postcss-color-function

Owner: PostCSS

Description: PostCSS plugin to transform W3C CSS color function to more compatible CSS

Created: 2014-09-28 06:42:26.0

Updated: 2018-01-16 05:10:27.0

Pushed: 2017-11-03 10:04:20.0

Homepage:

Size: 27

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

postcss-color-function

PostCSS plugin to transform W3C CSS color function to more compatible CSS.

Installation

m install postcss-color-function

Usage

ependencies
fs = require("fs")
postcss = require("postcss")
colorFunction = require("postcss-color-function")

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

rocess css
output = postcss()
se(colorFunction())
rocess(css)
ss

Using this input.css:

 {
ckground: color(red a(90%))

you will get:

 {
ckground: rgba(255, 0, 0, 0.9)

Checkout tests for examples.

Interface (according to CSS specs)

r( [ <color> | <hue> ] <color-adjuster>* )

List of color-adjuster

• [red( | green( | blue( | alpha( | a(] ['+' | '-']? [<number> | <percentage>] )
• [red( | green( | blue( | alpha( | a(] '*' <percentage> )
• ~~rgb( ['+' | '-'] [<number> | <percentage>]{3} )~~ @todo
• ~~rgb( ['+' | '-'] <hash-token> )~~ @todo
• ~~rgb( '*' <percentage> ) |~~ @todo
• [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]? )
• ~~blenda( <color> <percentage> [rgb | hsl | hwb]? )~~ @todo
• 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.

Read the specs for more information.

Examples

ever {
lor: color(red a(10%));

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

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

FAQ

Can you support currentcolor so we can do color(currentcolor adjuster())?

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.

Can we use CSS custom properties so we can do color(var(--mainColor) adjuster())?

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:

hten(red, 20%)
is equivalent to */
r(red tint(20%))

ken(red, 20%)
is equivalent to */
r(red shade(20%))

---

Changelog

License