[Feature]: ts/resolveMath wrapInCalc option for CSS + outputReferences

[jorenbroekema]

What feature would you like?

Input:

{
  "multiplier": {
    "value": 4,
    "type": "sizing"
  },
  "spacer": {
    "value": "{multiplier} * 8px"
    "type": "spacing"
  }
}

Current output:

:root {
  --multiplier: 4;
  --spacer: var(--multiplier) * 8px;
}

Preferred output:

:root {
  --multiplier: 4;
  --spacer: calc(var(--multiplier) * 8px);
}

How?

ts/resolveMath transform could accept an option "wrapInCSSCalc" or something along those lines which can be used in conjunction with StyleDictionary's outputReferences feature, so instead of resolving the math statement, it will just wrap it inside calc(statement).

See also: amzn/style-dictionary#1002
When using outputReferences currently in Style-Dictionary v4 prerelease, there is a fix for it to work better with transitive value transforms (like ts/resolveMath), tokens using math statements with references inside them will be resolved and calculated, but then actually get replaced by token original value (with the reference being replaced by var(--ref-token-name)) by outputReferences. This is an improvement over Style-Dictionary v3 outputReferences, but still not that useful in the final output without having a calc() wrapped around it to resolve the math through CSS.

Would you be available to contribute this feature?

• Yes, I would like to contribute this