postcss-color-gray

Use the gray() color function in CSS

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
postcss-color-gray
5.0.06 years ago10 years agoMinified + gzip package size for postcss-color-gray in KB

Readme

PostCSS Gray PostCSSpostcss
!NPM Versionnpm-imgnpm-url !CSS Standard Statuscss-imgcss-url !Build Statuscli-imgcli-url !Support Chatgit-imggit-url
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);
}