Camelcase in `json/nested`

Hello style-dictionnary team,

We are having a small problem, not sure if it is a bug or if we are incorrectly using the project. In our properties, we have colors defined something like:

{
  "color": {
      "space-gray": {
          "value": "#ccc"
      },
      "space-gray-w50": {
          "value": "#dadada"
      }
  }
}

As an output from the json-nested transform group, and more particularly from the name/cti/camel, I would expect to find as an output:

{
  "color": {
      "spaceGray": "#ccc",
      "spaceGrayW50": "#dadada"
  }
}

Unfortunately the keys of the values themselves aren’t camelCased and I get:

{
  "color": {
      "space-gray": "#ccc",
      "space-gray-w50": "#dadada"
  }
}

Is that expected behaviour?

I see how we could try to nest things more so that the path is picked up better, but we would loose the ability to have the first one being only spaceGray and not spaceGrayBase or something similar.

[dbanksdesign]

Hmm that is expected behavior. Let me try to explain why.

Because design tokens are defined in a nested object structure in style dictionary, we need to be able to flatten that object for platforms and filetypes that expect a flat array of variables, like and an Android resource XML file, or a CSS variables file. Internally what happens is any node in the object structure that has a “value” attribute is added to an array of tokens. To be able to turn the object structure into variable names, Style Dictionary adds a path array on the token with the object path to get to that token. In your example the object path would be ['color', 'space-gray']. The name transforms that are included, such as name/cti/camel use this path to create a name attribute on the token, so after being transformed, the token would look like:

{
  "name": "colorSpaceGray",
  "value": "#ccc",
  "path": ["color", "space-gray"]
}

Name transforms edit the “name” attribute on the token object itself, and not the overall object structure itself.

Nested formats will keep the object structure of your original JSON, but because the name transforms only affect the tokens themselves and not any other part of the object, that is why it is “space-gray” is not camel-cased. If you want to take a look at the raw, transformed style dictionary object, you can use the ‘javascript/module’ format, which just outputs the whole object.

Long story short, name transforms don’t work like you expect in nested style formats, like json/nested (TBH I never realized that until you filed this issue) because it only modifying the token itself and not the key of the token in the overall object. You could achieve what you want by writing a custom format, or maybe the json/flat format might be good enough? In your case it would output:

{
  "colorSpaceGray": "#ccc",
  "colorSpaceGrayW50": "#dadada"
}

Let me know if that helps. Also open to suggestions on how to fix the issue of nested formats and name transforms.

[chazzmoney]

Great catch @didoo !

I’ll pull together a PR on this bug. Here is what I have in mind:

• Detect collisions that occur after name transforms
• Collect the collisions using the same methods we use to collect other errors
• Output as warning in console, limiting the errors