get scss from design tokens json file using style dictionary

Question

I want to get the scss rules for design tokens from a json file provided by the design team. I used style dictionary and managed to get the base design tokens, but there are few tokens that use entire objects as value.

This is an example of design token (received from the design team) that I want to transform to scss:

{
"fontFamilies": {
    "inter": {
      "value": "Inter",
      "type": "fontFamilies"
    }
  },
 "fontWeights": {
    "inter-0": {
      "value": "Regular",
      "type": "fontWeights"
    },
  },
"fontSize": {
    "10": {
      "value": "72",
      "type": "fontSizes"
    }
  },
"Display-2xl": {
    "Regular": {
      "value": {
        "fontFamily": "{fontFamilies.inter.value}",
        "fontWeight": "{fontWeights.inter-0.value}",
        "fontSize": "$fontSize.10",
      },
      "type": "typography"
    },
}

Note: the simple tokens are successfully transformed. Style dictionary output looks like this:

$font-families-inter: Inter;
$font-weights-inter-0: Regular;
$font-size-10: 72;
$display-2xl-regular: [object Object];

Is it possible to use style dictionary and output these rules for tokens like display-2xl-regular?

Answer 1

The value has the be the last thing in the leaf node.

This:

{
"fontFamilies": {
    "inter": {
      "value": "Inter",
      "type": "fontFamilies"
    }
  },
 "fontWeights": {
    "inter-0": {
      "value": "Regular",
      "type": "fontWeights"
    }
  },
"fontSize": {
    "10": {
      "value": "72",
      "type": "fontSizes"
    }
  },
  "Display-2xl": {
    "Regular": {
      "type": "typography",
      "fontFamily": {
        "value": "{fontFamilies.inter.value}"
      },
      "fontWeight": {
        "value": "{fontWeights.inter-0.value}"
      },
      "fontSize": {
        "value": "{fontSize.10}"
      }
    }
  }
}
    

Will get you:

$font-families-inter: Inter;
$font-weights-inter-0: Regular;
$font-size-10: 72;
$display-2xl-regular-font-family: Inter;
$display-2xl-regular-font-weight: Regular;
$display-2xl-regular-font-size: 72;

Also, a heads up Style Dictionary will add a prefix typically.

Try playing around in div.riot's Style Dictionary playground. I created an example here.

You can also get away with this is you want a value at the at the parent.

  "Display-2xl": {
    " ": { // Has to be a space. This comment also will break json
     value: "PARENT VALUE"
    },
    "Regular": {
      "type": "typography",
      "fontFamily": {
        "value": "{fontFamilies.inter.value}"
      },
      "fontWeight": {
        "value": "{fontWeights.inter-0.value}"
      },
      "fontSize": {
        "value": "{fontSize.10}"
      }
    }
  }