[scss/variables] Nested token name is omitted

[wylliam-miguita]

Hello there.
Maybe this is the correct behavior, but I've found an issue for my project while trying to parse the following token file:

  "color": {
    "alert": {
      "value": "red",
      "light": {
        "value": "lightpink"
      }
    }
  }
}

the output (variables.scss) is only:
$color-alert: #ff0000;

Maybe missing the "$color-alert-light" variable.

the config.json:

  "source": ["tokens/**/*.json"],
  "platforms": {
    "scss": {
      "transformGroup": "scss",
      "buildPath": "./",
      "files": [{
        "destination": "variables.scss",
        "format": "scss/variables"
      }]
    }
  }
}

I'm running in:
Linux Ubuntu 19.04
NodeJS: v10.17.0
NPM: 6.13.1

Also I've noticed that the simple examples do add "-base" at the end of some token names, but to make it seamless with my team UI team, I would prefer to keep the names "color-alert" and "color-alert-light"

Thanks in advance =)

[dbanksdesign]

That is expected behavior, albeit not what everyone expects. What is happening is style dictionary walks down the merged object of all the source files and when it gets to an object with a value attribute, it assumes that object is a design token and it stops going farther down that node. Feel free to +1 or add onto this issue.

One way around this is to put both 'alert' and 'alert-light' in the same object level like this:

{
  "color": {
    "alert": { "value": "red" },
    "alert-light": { "value": "lightpink" }
  }
}

This should still give you the names color-alert and color-alert-light in your output.

Hope this helps!

[alehar9320]

That is expected behavior, albeit not what everyone expects. What is happening is style dictionary walks down the merged object of all the source files and when it gets to an object with a value attribute, it assumes that object is a design token and it stops going farther down that node. Feel free to +1 or add onto this issue.

One way around this is to put both 'alert' and 'alert-light' in the same object level like this:

{
  "color": {
    "alert": { "value": "red" },
    "alert-light": { "value": "lightpink" }
  }
}

This should still give you the names color-alert and color-alert-light in your output.

Hope this helps!

It's true that the suggested solution does provide you with the right names in the output, but any alias/reference will fail.

[dbanksdesign]

What do you mean any alias/reference will fail? This code will work:

{
  "color": {
    "alert": { "value": "red" },
    "alert-light": { "value": "lightpink" },
    "reference": { "value": "{color.alert-light.value}" }
  }
}

If you give a specific example of what would fail I could provide a more concrete answer.