CSS Calc

In the past we have mostly ignored values that contain calc() when generating fallbacks, but no more!

.foo {
	/* today this is ignored by postcss-oklab-function */
	color: oklch(calc(20% * 2) 0.268 34.568);
}

CSS Calc is a calculator library that is based on the CSS Values Specification.

It allows us to "solve" a calc() expression and use the resulting numeric value in any PostCSS plugin.

CSS Calc will take calc(20% * 2) and convert it to 40%.
The remaining oklch(40% 0.268 34.568) is then easier to fallback to rgb().

It can not do everything a browser would be able to, but it can still do enough to make it useful for specific features. (e.g. 1rem + 4px is unsolvable)

Try it out:

-20px

This new tool will enable us to create better PostCSS plugins for Relative Color Syntax, Color Mix and any other feature that interacts with calc().