Catching `Reference Error` when referencing multiple files

[peterfoeng]

Hi all,

Thanks for the awesome plugin, really appreciate it!

I have the following use case where tokens are created using Figma Tokens (Tokens Studio)

// style.json
{
    "shadow": {
         "base": {
            "value": "{bg.canvas}",
            "type": "shadow"
        }
    }
}

// theme-light.json
{
    "bg": {
         "canvas": {
            "value": "#FFF",
            "type": "color"
        }
    }
}

// theme-dark.json
{
    "bg": {
         "canvas": {
            "value": "#000",
            "type": "color"
        }
    }
}

It'll produce a reference error because it'll get confused about which value to choose from. Is there a way to catch/transform the error reference or handle a situation like this? The following output is ideal but not sure if this is possible:

--shadow-base: var(--bg-canvas);

[nahiyankhan]

In your style.json, the value field needs to be {bg.canvas.value} hence the reference error. I believe Tokens Studio provides this package to output tokens from it the right format for Style Dict.

https://www.npmjs.com/package/token-transformer

[peterfoeng]

that is not the issue, style-dictionary package is able to pick up the value without {.value}

[nahiyankhan]

Oof. You are right, I didn't read it properly. My apologies. It used to be case that it wouldn't work without .value but guess that changed. I learned something new!

You could wrap the build into a loop where it cycles through light and dark and swaps the theme files in the sources. That way, there would only be one bg.canvas on each run.

And --shadow-base: var(--bg-canvas) should be possible by using outputReferences: true Reference: https://amzn.github.io/style-dictionary/#/version_3?id=output-references

[Sidnioulz]

style.json cannot know which reference's value to use as the reference maps two values. The https://github.com/amzn/style-dictionary/tree/main/examples/advanced/multi-brand-multi-platform example shows how to make multiple builds with multiple sets of token values, and might help you.

[dbanksdesign]

Just came in here to +1 what @nahiyankhan said. If you have 2 files with the same token as you do with 'light' and 'dark' files, one will override the other. Style Dictionary throws an error because we cannot be sure which file is the one that is supposed to take precedence.