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