postcss-color-functional-notation
Use space and slash separated color notation in CSS
Last updated 3 years ago by jonathantneal .
CC0-1.0 · Repository · Bugs · Original npm · Tarball · package.json
$ gnpm install postcss-color-functional-notation 
SYNC missed versions from official npm registry.

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 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%);
}

Current Tags

  • 5.0.2                                ...           latest (2 years ago)

20 Versions

  • 5.0.2                                ...           2 years ago
  • 5.0.1                                ...           2 years ago
  • 5.0.0                                ...           2 years ago
  • 4.2.4                                ...           2 years ago
  • 4.2.3                                ...           3 years ago
  • 4.2.2                                ...           3 years ago
  • 4.2.1                                ...           3 years ago
  • 4.2.0                                ...           3 years ago
  • 4.1.0                                ...           3 years ago
  • 4.0.2                                ...           3 years ago
  • 4.0.1                                ...           3 years ago
  • 4.0.0                                ...           3 years ago
  • 3.0.2                                ...           5 years ago
  • 3.0.1                                ...           5 years ago
  • 3.0.0                                ...           5 years ago
  • 2.0.1                                ...           6 years ago
  • 2.0.0                                ...           6 years ago
  • 1.0.2                                ...           6 years ago
  • 1.0.1                                ...           7 years ago
  • 1.0.0                                ...           7 years ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (1)
Dev Dependencies (8)
Dependents (1)

Copyright 2013 - present © cnpmjs.org | Home |