f4870cd530 | ||
---|---|---|
.. | ||
node_modules | ||
CHANGELOG.md | ||
LICENSE.md | ||
README.md | ||
index.cjs.js | ||
index.es.js | ||
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';
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);
}