Some `extensions` referenced values not being resolved

jack-bliss commented 1 year ago

Hello! First off, thanks so much for the package! Being able to write my own transforms has been very useful.

I tend to do my technical writing in bullet points because i find it easier to read, hope that's okay!

Context

I am using style-dictionary to parse tokens from Tokens Studio for Figma.
Tokens Studio has recently started beta testing a feature where you can use an extension to modify a color token's value, for example by mixing it with another colour.
I would like to support this feature.
I have already written a transformer that can apply the colour modifier by mixing colours (using chroma-js).

The issue

Some of the token values in the colour modifier are not being resolved correctly.
Here is a reduced version of the tokens I am passing to style-dictionary that reproduces the error:

{
  "base": {
    "color": {
      "primary": {
        "20": {
          "value": "#3d008f",
          "type": "color",
          "isSource": true
        },
        "80": {
          "value": "#d0bcff",
          "type": "color",
          "isSource": true
        }
      },
      "neutral": {
        "10": {
          "value": "#1c1b1e",
          "type": "color",
          "isSource": true
        },
        "90": {
          "value": "#e6e1e6",
          "type": "color",
          "isSource": true
        }
      }
    }
  },
  "semantic": {
    "color": {
      "primary": {
        "base": {
          "default": {
            "value": "{base.color.primary.80}",
            "type": "color",
            "isSource": true
          },
          "on-base": {
            "value": "{base.color.primary.20}",
            "type": "color",
            "isSource": true
          },
          "hover": {
            "value": "{semantic.color.primary.base.default}",
            "type": "color",
            "$extensions": {
              "studio.tokens": {
                "modify": {
                  "type": "mix",
                  "value": 0.08,
                  "space": "sRGB",
                  "color": "{semantic.color.primary.base.on-base}"
                }
              }
            },
            "isSource": true
          }
        }
      },
      "surface": {
        "base": {
          "level-0": {
            "value": "{base.color.neutral.10}",
            "type": "color",
            "isSource": true
          },
          "level-1": {
            "value": "{base.color.neutral.10}",
            "type": "color",
            "$extensions": {
              "studio.tokens": {
                "modify": {
                  "type": "mix",
                  "value": "0.05",
                  "space": "sRGB",
                  "color": "{semantic.color.primary.base.default}"
                }
              }
            },
            "isSource": true
          },
          "level-2": {
            "value": "{base.color.neutral.10}",
            "type": "color",
            "$extensions": {
              "studio.tokens": {
                "modify": {
                  "type": "mix",
                  "value": "0.08",
                  "space": "sRGB",
                  "color": "{semantic.color.primary.base.default}"
                }
              }
            },
            "isSource": true
          }
        }
      }
    }
  },
  "body": {
    "background": {
      "value": "{semantic.color.surface.base.level-1}",
      "type": "color",
      "isSource": false
    }
  }
}

The extensions color property IS being resolved correctly for the semantic.color.primary.base.hover token
The property is NOT being resolved at all for the semantic.color.surface.base.level-1 and semantic.color.surface.base.level-2 tokens

Things I have tried

Changing the token to directly reference the base.color.primary.20 token correctly works - the property gets the correct value
Removing the hyphens and numbers in the token names does not work

Does anyone have any ideas? I can ask my designers to use the baase.color tokens for this particular instance but it feels like a bit of a hacky solution since the problem might come back.

DmitryShev24 commented 1 year ago

Hello! This error is also relevant for me, is there any solution?

jorenbroekema commented 5 months ago

I've fixed this in Style Dictionary v4, transforms can now defer themselves until the next reference resolution cycle when the transformation relies on metadata properties that contain references https://v4.styledictionary.com/reference/hooks/transforms/#defer-transitive-transformation-manually

The latest sd-transforms package from Tokens Studio is using this feature for the color modifiers, so that should fix this problem in its entirety

amzn / style-dictionary