Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

postcss-color-function

Package Overview
Dependencies
Maintainers
3
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

postcss-color-function

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

  • 4.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
294K
increased by0.02%
Maintainers
3
Weekly downloads
 
Created
Source

postcss-color-function Build Status

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

// 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:

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

you will get:

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

Checkout tests for examples.

Interface (according to CSS specs)

color( [ <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.

Examples

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

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:

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

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

Changelog

License

Keywords

FAQs

Package last updated on 01 Apr 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc