History

Riddhi Dave f4870cd530 simulator page updates		2020-12-22 09:59:14 -05:00
..
node_modules	simulator page updates	2020-12-22 09:59:14 -05:00
CHANGELOG.md	React files	2020-12-21 10:29:31 -05:00
LICENSE.md	React files	2020-12-21 10:29:31 -05:00
README.md	React files	2020-12-21 10:29:31 -05:00
index.cjs.js	React files	2020-12-21 10:29:31 -05:00
index.cjs.js.map	React files	2020-12-21 10:29:31 -05:00
index.es.mjs	React files	2020-12-21 10:29:31 -05:00
index.es.mjs.map	React files	2020-12-21 10:29:31 -05:00
package.json	simulator page updates	2020-12-22 09:59:14 -05:00

README.md

PostCSS Color Functional Notation

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 postcssColorFunctionalNotation = require('postcss-color-functional-notation');

postcssColorFunctionalNotation.process(YOUR_CSS /*, processOptions, pluginOptions */);

Or use it as a PostCSS plugin:

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