.. | ||
node_modules | ||
CHANGELOG.md | ||
index.cjs.js | ||
index.es.js | ||
LICENSE.md | ||
package.json | ||
README.md |
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';
.process(YOUR_CSS /*, processOptions, pluginOptions */); postcssGray
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);
}