PostCSS Color Mix Variadic Function Arguments

npm install @csstools/postcss-color-mix-variadic-function-arguments --save-dev

PostCSS Color Mix Variadic Function Arguments lets you use the color-mix() function with any number of arguments following the CSS Color 5 Specification.

.red {
    color: color-mix(in srgb, red);
}

.grey {
    color: color-mix(in srgb, red, lime, blue);
}

/* becomes */

.red {
    color: rgb(255, 0, 0);
}

.grey {
    color: rgb(85, 85, 85);
}

[!NOTE] We can not dynamically resolve var() arguments in color-mix(), only static values will work.

Usage

Add PostCSS Color Mix Variadic Function Arguments to your project:

npm install postcss @csstools/postcss-color-mix-variadic-function-arguments --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssColorMixVariadicFunctionArguments = require('@csstools/postcss-color-mix-variadic-function-arguments');

postcss([
    postcssColorMixVariadicFunctionArguments(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

Options

preserve

The preserve option determines whether the original notation is preserved. By default, it is not preserved.

postcssColorMixVariadicFunctionArguments({ preserve: true })

.red {
    color: color-mix(in srgb, red);
}

.grey {
    color: color-mix(in srgb, red, lime, blue);
}

/* becomes */

.red {
    color: rgb(255, 0, 0);
    color: color-mix(in srgb, red);
}

.grey {
    color: rgb(85, 85, 85);
    color: color-mix(in srgb, red, lime, blue);
}