Neptunium, Promethium, Manganese

    postcss-color-function

    4.1.0 • Public • Published

    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(12550%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

    Install

    npm i postcss-color-function

    DownloadsWeekly Downloads

    285,805

    Version

    4.1.0

    License

    MIT

    Unpacked Size

    9.21 kB

    Total Files

    5

    Last publish

    Collaborators

    • jonathantneal
    • moox
    • semigradsky