Token collisions in ESM modules

[TrevorRice]

Hi all.

Our color tokens are currently split among many files:

tokens/
├── colors/
│   ├── global.js
│   ├── background.js
│   ├── foreground.js
│   └── ...
├── spacing.js
└── ...

I noticed when updating to v4, while all the tokens are still created, SD logs the following message:

Token collisions detected (1):

Collision detected at: colors! Original value: color, New value: color

It's worth noting, that as part of this migration, we're moving from module.exports to export default in each of our token files.

// colors/global.js

- module.exports = {
+ export default {
  colors: {
    // tokens
  }
}

// colors/background.js

- module.exports = {
+ export default {
  colors: {
    // tokens
  }
}

Anything I should be doing differently?

[jorenbroekema]

Did you find which tokens are causing the collision? Without knowing the contents of your token files I won't be able to tell you why the collision warning occurs

[TrevorRice]

It turns out that this is not unique to ESM. I've created a minimally reproducible example that has two files for defining colors: colors-1.json and colors-2.json. When running npm run tokens (which calls Style Dictionary), the CSS file is generated correctly, but the following warning is logged:

Token collisions detected (1):

Collision detected at: colors! Original value: color, New value: color

I did some investigating, and it's a result of the "$type": "color" property being used in both files. Removing it in one or both files resolves the logging issue.

Given that $type is not a token definition, I would not expect for a "collision" to be detected.

Hope this helps! I'm happy to open an issue and contribute a fix if you agree this is worth addressing.

[jorenbroekema]

Ah yes that's most certainly a bug, I'm surprised it's the first time I'm seeing it. Feel free to raise an issue, if you wanna take a stab at a fix that would be much appreciated! I suspect the issue to be somewhere in the deepExtend/combineJSON utilities

[TrevorRice]

Issue created: #1316