How to modify the style dictionary configuration file to output typesetting marks as SCSS variables

Question

I am new to both designing tokens and designing systems. I'm trying to use a style dictionary to convert my design markup into SCSS variables and everything seems to be working fine except that the typography markup turns out to be [object object] in the variables file. Not sure what I'm doing wrong. Any help would be greatly appreciated. Below is the configuration file for my style dictionary.

const StyleDictionary = require('style-dictionary');


module.exports = {
  // This will match any files ending in json or json5
  source: [`tokens/*.json`],

  transforms: [
  {
    type: 'typography',
    fields: {
      fontSize: 'fontsize',
      fontWeight: 'fontWeight',
      lineHeight: 'lineHeight',
    },
  },
],

  platforms: {
    scss: {
      buildPath: `style/`,
      files: [{
        destination: `_variables.scss`,
        format: `scss/variables`
      }]
    }
  }
}

My token JSON is

{
  "btn": {
    "primary": {
      "default": {
        "value": "{colors.accent.sun}",
        "type": "color"
      },
      "hover": {
        "value": "{colors.accent.l_sun}",
        "type": "color"
      },
      "focus": {
        "value": "{colors.accent.sun}",
        "type": "color"
      },
      "focusbr": {
        "value": "{colors.accent.gold}",
        "type": "color"
      },
      "click": {
        "value": "{colors.accent.gold}",
        "type": "color"
      },
      "txtcolor": {
        "value": "{colors.neutral.black}",
        "type": "color"
      }
    },
    "disabled": {
      "value": "{colors.neutral.ll_grey}",
      "type": "color"
    },
    "radius": {
      "value": ".4rem",
      "type": "borderRadius"
    },
    "brwidth": {
      "value": ".2rem",
      "type": "borderWidth"
    },
    "ghostbg": {
      "value": "{colors.neutral.white}",
      "type": "color"
    },
    "ghost": {
      "defaultbr": {
        "value": "{colors.primary.m_blue}",
        "type": "color"
      },
      "focusbr": {
        "value": "{colors.primary.d_blue}",
        "type": "color"
      },
      "clickbr": {
        "value": "{colors.neutral.ll_grey}",
        "type": "color"
      }
    },
    "transparent": {
      "defaultbr": {
        "value": "{colors.neutral.white}",
        "type": "color"
      },
      "focusbr": {
        "value": "{colors.primary.azure}",
        "type": "color"
      },
      "click": {
        "value": "{colors.primary.azure}",
        "type": "color"
      }
    },
    "transparentbg": {
      "value": "{colors.neutral.white}",
      "type": "color"
    },
    "textcolor": {
      "value": "{colors.primary.m_blue}",
      "type": "color"
    }
  },
  "btn-df": {
    "padding": {
      "value": "1.6rem 3.2rem",
      "type": "spacing"
    }
  },
  "btn-dftypography": {
    "value": {
      "fontWeight": "",
      "fontSize": "1.8rem",
      "lineHeight": ""
    },
    "type": "typography"
  },
  "btn-smtypography": {
    "value": {
      "fontSize": "1.4rem",
      "fontWeight": "",
      "lineHeight": ""
    },
    "type": "typography"
  },
  "btn-mdtypography": {
    "value": {
      "fontSize": "1.6rem"
    },
    "type": "typography"
  },
  "btn-dftypographystyles": {
    "value": {
      "fontWeight": "400",
      "lineHeight": "120%"
    },
    "type": "typography"
  },
  "btn-md": {
    "padding": {
      "value": "1.4rem 3.2rem",
      "type": "spacing"
    }
  },
  "btn-sm": {
    "padding": {
      "value": "1.4rem 3.2rem",
      "type": "spacing"
    }
  }
}

Answer 1

Based on the code and token JSON files provided, it appears that the typesetting values ​​are not being converted to SCSS variables correctly.

The problem may be related to how the "value" attribute is set in the layout tag. Currently, it is an object rather than a string, which causes it to be displayed as [object object]. To resolve this issue, you need to set the value to a string in a format that the typesetting transformation can parse and use to create the required SCSS variable.

For example, collapse a value object into a single string.

The following is an example of btn-dftypography after the token is repaired:

"btn-dftypography": {
  "value": "font-size: 1.8rem; font-weight: 400; line-height: 120%",
  "type": "typography"
}

It used to be like this:

"btn-dftypography": {
    "value": {
      "fontWeight": "",
      "fontSize": "1.8rem",
      "lineHeight": ""
    },
    "type": "typography"
  },

Note: You will also need to make similar changes to other typography marks.