Feat: Include simple arithmetic in JSON

As a user when I have following JSON file:

{
    "base": {
        "value": 8
    },
    "spacing-unit": {
        "magnitude": "3",
        "value": "{base.value} * {spacing-unit.magnitude.value}"
    }
}

I would like the result:

{
    "base": {
        "value: 8
    },
    "spacing-unit": {
        "magnitude: "3"
        "value: 24
    }
}

Reading through CONTRIBUTING.md, it’s noted “Do not mutate property names or values in a format.”

Let me know if this feature is possible. Else, any chance of myself or the style-dictionary time including some sort of transformer, for this behaviour

[showered]

Perhaps consider using Javascript instead of JSON. It gives you some flexibility in your code rather than having to rely on style-dictionary to do the magic.

For example:

const buttonBaseSize = 10;

module.exports = {
  size: {
    button: {
      base: {
        height: { value: buttonBaseSize },
      },
      large: {
        height: { value: buttonBaseSize * 2 },
      }
    }
  }
}

You might run in to issues with brand/platform overrides, but this is the best I can suggest right now!

[tonyjwalt]

@danilovaz, your question references CSS custom properties.

Are those also tokens? Do you want the references maintained in your output?

It seems like what you want is this:

{
    "test": {
        "value": "calc({size.icon.small.value} * {size.icon.proportion.value})"
    }
}

which, assuming those references are also tokens, should generate this token:

test: calc(16*10)

or with a CSS-deep format (does not come with style dictionary currently, but could be extended) you could get this token:

test: calc(var(--size-icon-small) * var(--size-icon-proportion));