peach a19a732be8 commit message | 2 år sedan | |
---|---|---|
.. | ||
CHANGELOG.md | 2 år sedan | |
LICENSE.md | 2 år sedan | |
README.md | 2 år sedan | |
index.cjs.js | 2 år sedan | |
index.es.js | 2 år sedan | |
package.json | 2 år sedan |
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);
}
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 |
---|
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);
}