This repository has been archived on 2020-11-02. You can view files and clone it, but cannot push or open issues or pull requests.
TripSit_Suite/node_modules/postcss-color-gray
2020-11-01 22:46:04 +00:00
..
node_modules Initial comission of TheLounge base files 2020-11-01 22:46:04 +00:00
CHANGELOG.md Initial comission of TheLounge base files 2020-11-01 22:46:04 +00:00
index.cjs.js Initial comission of TheLounge base files 2020-11-01 22:46:04 +00:00
index.es.js Initial comission of TheLounge base files 2020-11-01 22:46:04 +00:00
LICENSE.md Initial comission of TheLounge base files 2020-11-01 22:46:04 +00:00
package.json Initial comission of TheLounge base files 2020-11-01 22:46:04 +00:00
README.md Initial comission of TheLounge base files 2020-11-01 22:46:04 +00:00

PostCSS Gray PostCSS

NPM Version CSS Standard Status Build Status Support Chat

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