Some `extensions` referenced values not being resolved

[jack-bliss]

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]

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

[jorenbroekema]

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