style-dictionary icon indicating copy to clipboard operation
style-dictionary copied to clipboard

Support aliasing both current value, and overridden value

Open stephan-noel opened this issue 1 year ago • 0 comments

Hi, thanks for the great library. I'll try to explain my use cases well as I'm trying to figure out ways to reduce the amount of duplication with aliasing without resorting to javascript.

Motivation

Use Case 1: Be able to keep using JSON aliasing without repeating myself.

{
  "font": {
    "family": {
      "main": {
        "shared": "{font.family.main.value}",
        "value": "var(--jost), {font.family.main.shared}"
      }
    }
  }
}

This results in mutual recursion, but I want the font.family.main.value in "override" to refer to the one I define in ../../../node_modules/shared-tokens/index.json. This way I can augment values.

Config.json

{
  "include": ["../../../node_modules/shared-tokens/index.json"],
  "source": ["./tokens/**/*.json"],}
}

One approach inspired by lage/turborepo is to use ^,

{
  "font": {
    "family": {
      "main": {
        "value": "var(--jost), {^font.family.main.value}"
      }
    }
  }
}

Now it refers to the font.family of the outcome of "include" in the config.json. There may be a lot of complications and dynamicity here, but I'd like to reduce repetition without maually merging myself.

Use Case 2: Live Aliasing

I want the typography.body.font.value to be composed of the same thing, yet have the new font.family.main.value that I am overriding. Currently, I have to repeat:

{ "typography": { "body": { "font": { "value": "{font.weight.regular} {font.size.16} {font.family.main.value}" } }, }

But I'd like font.family.main.value to be overridden with whatever value I set now instead of having the old value, I want the aliases to be live.

Without these, I either have to do a lot of duplication when overriding tokens, or I have to switch to JS and do deep merging manually.

stephan-noel avatar Jul 22 '23 16:07 stephan-noel