Style-dictionary: Token collisions were found

Created on 2 Apr 2020  路  12Comments  路  Source: amzn/style-dictionary

鈿狅笍  ./temp/time.json
While building time.json, token collisions were found; output may be unexpected.
    Output name 0 was generated by:
        time.transition.0   0
        time.delay.0   0
        time.duration.0   0
    Output name 1 was generated by:
        time.transition.1   120ms
        time.delay.1   50ms
        time.duration.1   1000ms

There really are unwanted is there a way to remove them or just hide them from the console via the config?

Most helpful comment

@chazzmoney we aren't actually giving them the same name these values are used being generated for a theme object for our styled-components / styled-system ui library, and we wanted to be able to call them like color.primary.0 which all works fine the only issue we have is that it thinks that time.delay.0 is the same as time.transition.0 their values might be the same but the reason they are different keys is so that they are used in the correct CSS property, and also we might want to change transitions across the board but leave the delays as is.

All 12 comments

Unfortunately not at this time. It is on our backlog to add more robust log levels that would fix this: #367

any ideas as to when this will be implemented.

Probably in a 3.x release.

If you have time to put together a PR, we could probably get it done sooner.

If you do want to try that route, you can search the repo for console.log and GroupMessages in the code to see where logging is generated.

One more question - you are intentionally creating tokens with multiple values and don't mind if the output is any of them?

@The-Code-Monkey just checking in here; I wanted to see if you had further input.

I'd love to understand the use case so I can implement a solution correctly. It sounds like you are generating tokens with the same name on purpose - can you clarify what the intent is?

Thanks!

I think part of this is that for 'nested' style formats like json/nested, they don't use the transformed names because they keep the original object structure. The way we test for collisions is to see if all token names are unique, and if the user doesn't use any name transform, token names might not be unique which would be fine in a nested format where the token names don't matter. A quick fix would be to apply any name transform in the configuration, it won't have any effect on the nested formats, but will get rid of the warnings because all names would be unique. See the discussion here: #489

One quick fix for this that someone suggested was to mark formats as 'nested' or not, and if it is a nested format, don't show name collision warnings.

@chazzmoney we aren't actually giving them the same name these values are used being generated for a theme object for our styled-components / styled-system ui library, and we wanted to be able to call them like color.primary.0 which all works fine the only issue we have is that it thinks that time.delay.0 is the same as time.transition.0 their values might be the same but the reason they are different keys is so that they are used in the correct CSS property, and also we might want to change transitions across the board but leave the delays as is.

https://styled-system.com/theme-specification this is what we are doing but we have just taken it a step further and added a bit extra, for our internal use, sorry I won't be able to show any code as its all private

@The-Code-Monkey as a quick fix, could you try adding any name transform to the platform configuration you are getting those warnings in? It should not affect nested object structure formats like json/nested or javascript/module, but it will get rid of those warnings in the meantime.

Where in the config would I add those, can you link me to the correct part of the docs?

You would add the transform to the transforms array in the platform of the configuration where you are getting those warnings. https://amzn.github.io/style-dictionary/#/config

If you are using a built-in transformGroup, you will need to turn that into a transforms array.

{
  "source": ["tokens/**/*.json"],
  "platforms": {
    "js": {
      // here is where you would add a name transform
      "transforms": ["attribute/cti", "name/cti/kebab", /* other transforms */]

Does that make sense? If you post your configuration I can also tell you exactly where to put it.

Closing this as it is now fixed in 3.0. Feel free to reopen it if you still have an issue.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

valiksb picture valiksb  路  4Comments

johnny353535 picture johnny353535  路  3Comments

blackfalcon picture blackfalcon  路  4Comments

clepore picture clepore  路  5Comments

dbanksdesign picture dbanksdesign  路  5Comments