postcss-color-gray

What is postcss-color-gray?

The postcss-color-gray package is a PostCSS plugin that allows you to use the 'gray()' function in your CSS, which is a part of the CSS Color Module Level 4 specification. This function allows you to specify shades of gray in a more intuitive way.

What are postcss-color-gray's main functionalities?

Convert gray() function to rgb()

This feature converts the 'gray()' function to an equivalent 'rgb()' function. For example, 'gray(50%)' is converted to 'rgb(128, 128, 128)'.

/* Input CSS */
body {
  color: gray(50%);
}

/* Output CSS */
body {
  color: rgb(128, 128, 128);
}

Support for alpha transparency

This feature allows you to specify alpha transparency in the 'gray()' function. For example, 'gray(50% / 50%)' is converted to 'rgba(128, 128, 128, 0.5)'.

/* Input CSS */
body {
  color: gray(50% / 50%);
}

/* Output CSS */
body {
  color: rgba(128, 128, 128, 0.5);
}

Other packages similar to postcss-color-gray

postcss-color-function

The postcss-color-function package allows you to use color-modifying functions like 'color()' in your CSS. It provides more general color manipulation capabilities compared to postcss-color-gray, which is focused specifically on the 'gray()' function.

postcss-preset-env

The postcss-preset-env package allows you to use modern CSS features, including color functions, with automatic polyfilling for older browsers. It offers a broader range of features compared to postcss-color-gray, which is specialized for the 'gray()' function.

README

PostCSS Gray

PostCSS Gray lets you use the gray() color function in CSS, following the CSSWG Specification.

body {
  background-color: gray(100);
  color: gray(0 / 90%);
}

/* becomes */

body {
  background-color: rgb(255,255,255);
  color: rgba(0,0,0,.9);
}

Usage

Add PostCSS Gray to your project:

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

Use PostCSS Gray to process your CSS:

import postcssGray from 'postcss-color-gray';

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

Or use it as a PostCSS plugin:

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

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.

postcssGray({ preserve: true });

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

Changelog

5.0.0 (July 26, 2018)

• Rewritten to follow the latest CSSWG specification
• Added: Compatibility with PostCSS v7.