PostCSS Gray lets you use the gray() color function in CSS, following the
CSSWG Specification.
```pcss body { background-color: gray(100); color: gray(0 / 90%); }
/ becomes /
body { background-color: rgb(255,255,255); color: rgba(0,0,0,.9); } ```
Add PostCSS Gray to your project:
bash
npm install postcss-color-gray --save-dev
Use PostCSS Gray to process your CSS:
```js import postcssGray from 'postcss-color-gray';
postcssGray.process(YOUR_CSS /, processOptions, pluginOptions /); ```
Or use it as a PostCSS plugin:
```js import postcss from 'postcss'; import postcssGray from 'postcss-color-gray';
postcss([ postcssGray(/ pluginOptions /) ]).process(YOUR_CSS /, processOptions /); ```
PostCSS Gray runs in all Node environments, with special instructions for:
| Node | Webpack | Create React App | Gulp | Grunt | | --- | --- | --- | --- | --- |
The preserve option determines whether the original gray() function should
be preserved or replaced. By default, the gray() function is replaced.
By setting preserve to true, the original gray() function is preserved.
js
postcssGray({ preserve: true });
```pcss body { background-color: gray(100); color: gray(0 / 90%); }
/ becomes /
body { background-color: gray(100); background-color: rgb(255,255,255); color: gray(0 / 90%); color: rgba(0,0,0,.9); } ```