Page MenuHomePhabricator

Style Dictionary build throws warning about z-index token collision
Closed, ResolvedPublic

Description

When running npm run -w @wikimedia/codex-design-tokens build, you get the following warning:

While building theme-wikimedia-ui.js, token collisions were found; output may be unexpected.
    Output name cdxZIndex100 was generated by:
        z-index.100   100
        z-index.-100   -100
This many-to-one issue is usually caused by some combination of:
    * conflicting or similar paths/names in property definitions
    * platform transforms/transformGroups affecting names, especially when removing specificity
    * overly inclusive file filters

There is more discussion about this on the Gerrit patch that introduced this code: https://gerrit.wikimedia.org/r/c/design/codex/+/987492

We should explore whether we can work around this by:

  • stacking name transforms, despite the Style Dictionary docs saying that it doesn't make sense to do this; or
  • writing a custom name transform that applies the built-in camelCase transform but also avoids this collision; or
  • filtering out the option tokens / theme tokens using Style Dictionary's built-in filter feature (and somehow avoiding/suppressing the other warnings that would result from that)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Change 993027 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[design/codex@main] build, tokens: Add a custom "camelCaseNegative" transformer

https://gerrit.wikimedia.org/r/993027

Change 993027 merged by jenkins-bot:

[design/codex@main] build, tokens: Add a custom "camelCaseNegative" transformer

https://gerrit.wikimedia.org/r/993027

egardner claimed this task.
egardner subscribed.

We should explore whether we can work around this by:

  • stacking name transforms, despite the Style Dictionary docs saying that it doesn't make sense to do this; or
  • writing a custom name transform that applies the built-in camelCase transform but also avoids this collision; or
  • filtering out the option tokens / theme tokens using Style Dictionary's built-in filter feature (and somehow avoiding/suppressing the other warnings that would result from that)

This issue was resolved by basically combining the first 2 options here – we added a new name transform but limited it to only touch the impacted tokens here, so nothing else is modified.

Now the offending token would have a name of cdxZIndexNegative100 if it was actually included in our output (which it isn't), and the annoying warning is gone.

Change 997931 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] Update Codex from v1.3.1 to v1.3.2

https://gerrit.wikimedia.org/r/997931

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/2e8b582c42/w

Change 997931 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v1.3.1 to v1.3.2

https://gerrit.wikimedia.org/r/997931