Not transforming nested levels if parent level contains values

[marius-eichenberg]

Hi, I'm having issues to get lower levels, e.g. of a color parsed and transformed. I couldn't find any doc of a configuration to switch this behaviour on/off.

Here is an example: There is parent purple color value (+ a light and dark subcolor). For comparison, blue does not have a color on parent level, but only light and dark subcolors.

tokens.json

{
  "color": {
    "purple": {
      "type": "color",
      "value": "#8b00b8ff",
      
      "light": {
        "type": "color",
        "value": "#ecd6f4ff"
      },
      "dark": {
        "type": "color",
        "value": "#75009bff"
      }
    },

    "blue": {
      "light": {
        "type": "color",
        "value": "#e2f6fdff"
      },
      "dark": {
        "type": "color",
        "value": "#23a096ff"
      }
    }
  }
}

My export is the following: color.scss

$color-purple: #8b00b8;
$color-blue-light: #e2f6fd;
$color-blue-dark: #23a096;

Purple as parent color is exported, but not the subcolors. Whereas, blue has the subcolors (as there was no parent color present).

Expected bahavior from my end would be to have purple parent color and purple subcolors.

I was using style dictionary via CLI version 3.7.0 The tokens.json is originally a figma export (https://github.com/lukasoppermann/design-tokens) but I don't expect the .json file to be the issue as even the super simplified example version doesn't produce expected results.

For completeness, config was super simple:

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

Any help how to circumvent or configure properly this would be appreciated. Thanks a lot :)

[JodiWarren]

@marius-eichenberg I found a solution here: https://github.com/amzn/style-dictionary/issues/716#issuecomment-943673202