Wrap tokens for CSS output containing math expressions in calc()

[jorenbroekema]

Feature Request

For the CSS property formatter or as a CSS-specific value transform (I prefer the latter, format should not be concerned much with token value changes).

:root {
  --my-math: 15px + 20px;
}

This is invalid CSS, but would be valid if wrapped inside CSS calc() statement. This can be done for any expression using * / + - characters. Important to note is that whatever we do to regex match such tokens is that there must be spaces around the + and - math operators, see https://developer.mozilla.org/en-US/docs/Web/CSS/calc#notes

Output will then be:

:root {
  --my-math: calc(15px + 20px);
}

Should probably also support CSS custom props:

:root {
  --my-length: 15px;
  --my-math: calc(var(--my-length) + 20px);
}