Awesome
<div align="center">⚠️ PostCSS Color RebeccaPurple was moved to <a href="https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-rebeccapurple">@csstools/postcss-plugins</a>. ⚠️ <br> <a href="https://github.com/csstools/postcss-plugins/discussions/75">Read the announcement</a></div>PostCSS RebeccaPurple <img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">
<img alt="npm version" src="https://img.shields.io/npm/v/postcss-color-rebeccapurple.svg" height="20"> <img alt="CSS Standard Status" src="https://cssdb.org/images/badges/rebeccapurple-color.svg" height="20"> <img alt="Build Status" src="https://github.com/postcss/postcss-color-rebeccapurple/workflows/test/badge.svg" height="20"> <img alt="Support Chat" src="https://img.shields.io/badge/support-chat-blue.svg" height="20">
PostCSS RebeccaPurple lets you use the rebeccapurple
color keyword in CSS.
.heading {
color: rebeccapurple;
}
/* becomes */
.heading {
color: #639;
}
About the rebeccapurple
keyword
In 2014, Rebecca Alison Meyer, the daughter of Eric A. Meyer, an American web design consultant best known for his advocacy work on behalf of CSS, passed away of a brain tumor at six years of age.
In her memory, the hex color #663399
is named rebeccapurple
and added to the CSS Colors list.
Usage
Add PostCSS RebeccaPurple to your project:
npm install postcss-color-rebeccapurple --save-dev
Use PostCSS RebeccaPurple to process your CSS:
const postcssRebeccaPurple = require('postcss-color-rebeccapurple');
postcssRebeccaPurple.process(YOUR_CSS /*, processOptions, pluginOptions */);
Or use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssRebeccaPurple = require('postcss-color-rebeccapurple');
postcss([
postcssRebeccaPurple(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
PostCSS RebeccaPurple runs in all Node environments, with special instructions for:
Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt |
---|
preserve
The preserve
option determines whether the original rebeccapurple
keyword
is preserved. By default, it is not preserved.
postcssRebeccaPurple({ preserve: true })
.heading {
color: rebeccapurple;
}
/* becomes */
.heading {
color: #639;
color: rebeccapurple;
}