I'm trying to use the CSS Typed Object Model (CSS Typed OM) API in JavaScript to manipulate CSS values, specifically involving CSS variables within expressions. Here's what I'm attempting to do:
const x = CSSNumericValue.parse("calc(400px - var(--x))");
const newX = x.add(CSS.px(40));
const strX = newX.toSum().toString() // I expect strX to be "calc(440px - var(--x))" or similar.
However, it seems that CSSNumericValue.parse() doesn't accept expressions containing CSS variables, instead it will throw an error stating Failed to execute 'parse' on 'CSSNumericValue': Invalid math expression. Is there an alternative way to achieve this functionality, or is there a known solution within the CSS Typed OM API or CSS Houdini project or does anyone have any insights into why this doesn't work?
I could parse the string via CSSStyleValue.parse("width", "calc(400px - var(--x))"). But that returns a CSSUnparsedValue class which isn't helpful either in this case, since I can't perform math operations on CSSUnparsedValue.
I've tried to look for documentation or notes on this topic online and found some information here: