> 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-lab-function.md).

# PostCSS Lab Function

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

[PostCSS Lab Function](https://github.com/jonathantneal/postcss-lab-function) lets you use `lab`, `lch`, and `gray` color functions in CSS, following the [CSS Color](https://drafts.csswg.org/css-color/#specifying-lab-lch) specification.

```
:root {
  --firebrick: lab(40 56.6 39);
  --firebrick-a50: lch(40 68.8 34.5 / 50%);
  --gray-40: gray(40);
  --gray-40a50: gray(40 / .5);
}

/* becomes */

:root {
  --firebrick: rgb(178, 34, 34);
  --firebrick-a50: rgba(178, 34, 34, .5);
  --gray-40: rgb(94,94,94);
  --gray-40a50: rgba(94,94,94, .5);
}
```

## Usage

Add [PostCSS Lab Function](https://github.com/jonathantneal/postcss-lab-function) to your project:

```bash
npm install postcss-lab-function --save-dev
```

Use [PostCSS Lab Function](https://github.com/jonathantneal/postcss-lab-function) to process your CSS:

```js
const postcssLabFunction = require('postcss-lab-function');

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

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

```js
const postcss = require('postcss');
const postcssLabFunction = require('postcss-lab-function');

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

[PostCSS Lab Function](https://github.com/jonathantneal/postcss-lab-function) 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-lab-function/INSTALL.md#node) | [PostCSS CLI](https://github.com/bgoonz/Learning-Redux/blob/master/repos/examples/real-world/node_modules/postcss-lab-function/INSTALL.md#postcss-cli) | [Webpack](https://github.com/bgoonz/Learning-Redux/blob/master/repos/examples/real-world/node_modules/postcss-lab-function/INSTALL.md#webpack) | [Create React App](https://github.com/bgoonz/Learning-Redux/blob/master/repos/examples/real-world/node_modules/postcss-lab-function/INSTALL.md#create-react-app) | [Gulp](https://github.com/bgoonz/Learning-Redux/blob/master/repos/examples/real-world/node_modules/postcss-lab-function/INSTALL.md#gulp) | [Grunt](https://github.com/bgoonz/Learning-Redux/blob/master/repos/examples/real-world/node_modules/postcss-lab-function/INSTALL.md#grunt) |
| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |

## Options

### preserve

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

```js
postcssLabFunction({ preserve: true })
```

```
:root {
  --firebrick: lab(40 56.6 39);
  --firebrick-a50: lch(40 68.8 34.5 / 50%);
}

/* becomes */

:root {
  --firebrick: rgb(178, 34, 34);
  --firebrick: lab(40 56.6 39);
  --firebrick-a50: rgba(178, 34, 34, .5);
  --firebrick-a50: lch(40 68.8 34.5 / 50%);
}
```