[Bug]: ts/resolveMath breaks multi-value spacing tokens with negative values

[julrich-bee360]

What happened?

The ts/resolveMath transform breaks multi-value spacing tokens when they contain negative values.

So it converts a token like

{
    "multi-value-negative": {
        "$type": "spacing",
        "$value": "0 0 -1px 0"
    }
}

to

:root {
  --multi-value-negative: 0 -1px 0;
}

So it considers 0 -1px to be an expression to evaluate and reduces it to -1px which is still a valid CSS shorthand syntax but with a different meaning as the original. 😕

Reproduction

1. Create a multi-value spacing token with a negative value like shown above.
2. Configure sd-transforms with withSDBuiltins: false (because size/rem breaks sizing tokens which end with 0).
3. Run style dictionary.

Example project in Tokens Studio Configurator
Export of configurator project: sd-output_2025-2-17.zip

Expected output

:root {
  --multi-value: 0 0 1px 0;
  --multi-value-negative: 0 0 -1px 0;
}

Version

1.2.9

[julrich-bee360]

A workaround is to mix units (e.g. 0rem 0rem -1px 0rem) to prevent ts/resolveMath from calculating anything here.

[jorenbroekema]

Yeah this is definitely a bug, we need to probably make it so that when we encounter a - followed by a digit immediately without spaces in between, this combination of - and the digit is considered as a single token within the expression. This way, the - won't be considered as a math operator.

The workaround is clever indeed, and work with any unit, since if it's 0 the unit doesn't matter and if it's not 0, it will have a unit and then the bug does not occur. But we should still fix this bug for sure.

I do also feel like we should use arrays for multi-value dimension tokens in the future.
design-tokens/community-group#239 related issue about this.

[julrich-bee360]

Another workaround if you cannot mix units is probably (didn't test it), to really give it something to calculate. 😄 So something like this:
0 0 0 - 1px 0.