Never Pummel Muskoxen

    postcss-color-functional-notation
    TypeScript icon, indicating that this package has built-in type declarations

    4.2.3 • Public • Published

    PostCSS Color Functional Notation PostCSS Logo

    NPM Version CSS Standard Status Build Status Discord

    PostCSS Color Functional Notation lets you use space and slash separated color notation in CSS, following the CSS Color specification.

    :root {
      --firebrick: rgb(178 34 34);
      --firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
      --firebrick-hsl: hsla(0 68% 42%);
      --firebrick-hsl-a50: hsl(0 68% 42% / 50%);
    }
    
    /* becomes */
    
    :root {
      --firebrick: rgb(178, 34, 34);
      --firebrick-a50: rgba(178, 34, 34, .5);
      --firebrick-hsl: hsl(0, 68%, 42%);
      --firebrick-hsl-a50: hsla(0, 68%, 42%, .5);
    }

    Usage

    Add PostCSS Color Functional Notation to your project:

    npm install postcss-color-functional-notation --save-dev

    Use PostCSS Color Functional Notation to process your CSS:

    const postcss = require('postcss');
    const postcssColorFunctionalNotation = require('postcss-color-functional-notation');
    
    postcss([
      postcssColorFunctionalNotation(/* pluginOptions */)
    ]).process(YOUR_CSS /*, processOptions */);

    PostCSS Color Functional Notation runs in all Node environments, with special instructions for:

    Node PostCSS CLI Webpack Create React App Gulp Grunt

    Options

    preserve

    The preserve option determines whether the original functional color notation is preserved. By default, it is not preserved.

    postcssImageSetFunction({ preserve: true })
    :root {
      --firebrick: rgb(178 34 34);
      --firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
      --firebrick-hsl: hsla(0 68% 42%);
      --firebrick-hsl-a50: hsl(0 68% 42% / 50%);
    }
    
    /* becomes */
    
    :root {
      --firebrick: rgb(178, 34, 34);
      --firebrick: rgb(178 34 34);
      --firebrick-a50: rgba(178, 34, 34, .5);
      --firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
      --firebrick-hsl: hsl(0, 68%, 42%);
      --firebrick-hsl: hsla(0 68% 42%);
      --firebrick-hsl-a50: hsla(0, 68%, 42%, .5);
      --firebrick-hsl-a50: hsl(0 68% 42% / 50%);
    }

    Install

    npm i postcss-color-functional-notation

    DownloadsWeekly Downloads

    6,451,862

    Version

    4.2.3

    License

    CC0-1.0

    Unpacked Size

    24.3 kB

    Total Files

    9

    Last publish

    Collaborators

    • alaguna
    • jonathantneal