- License
- MIT-0
- Install Size
- 7.1 kB/-
- Vulns
- 0
- Published
$
npm install @csstools/postcss-color-mix-function$
pnpm add @csstools/postcss-color-mix-function$
yarn add @csstools/postcss-color-mix-function$
bun add @csstools/postcss-color-mix-function$
deno add npm:@csstools/postcss-color-mix-function$
vlt install @csstools/postcss-color-mix-functionPostCSS Color Mix Function
npm install @csstools/postcss-color-mix-function --save-dev
PostCSS Color Mix Function lets you use the color-mix() function following the CSS Color 5 Specification.
.purple_plum {
color: color-mix(in lch, purple 50%, plum 50%);
}
/* becomes */
.purple_plum {
color: rgb(175, 92, 174);
}We can not dynamically resolve
var()arguments incolor-mix(), only static values will work.
Usage
Add PostCSS Color Mix Function to your project:
npm install postcss @csstools/postcss-color-mix-function --save-devUse it as a PostCSS plugin:
const postcss = require('postcss');
const postcssColorMixFunction = require('@csstools/postcss-color-mix-function');
postcss([
postcssColorMixFunction(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);Options
preserve
The preserve option determines whether the original notation
is preserved. By default, it is not preserved.
postcssColorMixFunction({ preserve: true }).purple_plum {
color: color-mix(in lch, purple 50%, plum 50%);
}
/* becomes */
.purple_plum {
color: rgb(175, 92, 174);
color: color-mix(in lch, purple 50%, plum 50%);
}