> For the complete documentation index, see [llms.txt](https://bryan-guner.gitbook.io/my-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bryan-guner.gitbook.io/my-docs/redux/repos/examples/real-world/node_modules/postcss-color-functional-notation.md).

# PostCSS Color Functional Notation

[![NPM Version](https://img.shields.io/npm/v/postcss-color-functional-notation.svg)](https://www.npmjs.com/package/postcss-color-functional-notation) [![CSS Standard Status](https://cssdb.org/badge/color-functional-notation.svg)](https://cssdb.org/#color-functional-notation) [![Build Status](https://img.shields.io/travis/jonathantneal/postcss-color-functional-notation.svg)](https://travis-ci.org/jonathantneal/postcss-color-functional-notation) [![Support Chat](https://img.shields.io/badge/support-chat-blue.svg)](https://gitter.im/postcss/postcss)

[PostCSS Color Functional Notation](https://github.com/jonathantneal/postcss-color-functional-notation) lets you use space and slash separated color notation in CSS, following the [CSS Color](https://drafts.csswg.org/css-color/#ref-for-funcdef-rgb%E2%91%A1%E2%91%A0) 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](https://github.com/jonathantneal/postcss-color-functional-notation) to your project:

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

Use [PostCSS Color Functional Notation](https://github.com/jonathantneal/postcss-color-functional-notation) to process your CSS:

```js
const postcssColorFunctionalNotation = require('postcss-color-functional-notation');

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

Or use it as a [PostCSS](https://github.com/postcss/postcss) plugin:

```js
const postcss = require('postcss');
const postcssColorFunctionalNotation = require('postcss-color-functional-notation');

postcss([
  postcssColorFunctionalNotation(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
```

[PostCSS Color Functional Notation](https://github.com/jonathantneal/postcss-color-functional-notation) runs in all Node environments, with special instructions for:

| [Node](https://github.com/bgoonz/Learning-Redux/blob/master/repos/examples/real-world/node_modules/postcss-color-functional-notation/INSTALL.md#node) | [PostCSS CLI](https://github.com/bgoonz/Learning-Redux/blob/master/repos/examples/real-world/node_modules/postcss-color-functional-notation/INSTALL.md#postcss-cli) | [Webpack](https://github.com/bgoonz/Learning-Redux/blob/master/repos/examples/real-world/node_modules/postcss-color-functional-notation/INSTALL.md#webpack) | [Create React App](https://github.com/bgoonz/Learning-Redux/blob/master/repos/examples/real-world/node_modules/postcss-color-functional-notation/INSTALL.md#create-react-app) | [Gulp](https://github.com/bgoonz/Learning-Redux/blob/master/repos/examples/real-world/node_modules/postcss-color-functional-notation/INSTALL.md#gulp) | [Grunt](https://github.com/bgoonz/Learning-Redux/blob/master/repos/examples/real-world/node_modules/postcss-color-functional-notation/INSTALL.md#grunt) |
| ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |

## Options

### preserve

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

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