PostCSS Gray

PostCSS Gray lets you use the gray() color function in CSS, following the outdated version of CSS Color Module Level 4 specification (05 November 2019).

⚠️ gray() has been removed from Color Module Level 4 specification.

1body {
2  background-color: gray(100);
3  color: gray(0 / 90%);
4}
5
6/* becomes */
7
8body {
9  background-color: rgb(255,255,255);
10  color: rgba(0,0,0,.9);
11}

Usage

Add PostCSS Gray to your project:

1npm install postcss postcss-color-gray --save-dev

Use PostCSS Gray to process your CSS:

1import postcssGray from 'postcss-color-gray';
2
3postcssGray.process(YOUR_CSS /*, processOptions, pluginOptions */);

Or use it as a PostCSS plugin:

1import postcss from 'postcss';
2import postcssGray from 'postcss-color-gray';
3
4postcss([
5  postcssGray(/* pluginOptions */)
6]).process(YOUR_CSS /*, processOptions */);

PostCSS Gray runs in all Node environments, with special instructions for:

Node	Webpack	Create React App	Gulp	Grunt

Options

preserve

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.

1postcssGray({ preserve: true });

1body {
2  background-color: gray(100);
3  color: gray(0 / 90%);
4}
5
6/* becomes */
7
8body {
9  background-color: gray(100);
10  background-color: rgb(255,255,255);
11  color: gray(0 / 90%);
12  color: rgba(0,0,0,.9);
13}