How to convert design token object to SCSS property using style dictionary?

1.4k Views Asked by At

I have the exact same issue as this thread: get scss from design tokens json file using style dictionary. The answer mentioned in this thread is great, but is there a way to specify some setting so that the style-dictionary automatically converts the style object to the way its mentioned in the answer in the mentioned thread?

I basically want to convert

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

to

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

by adding some format / transform. How can I achieve this?

My config.json object:

const StyleDictionary = require("style-dictionary").extend({
  source: ["./tokens.json"],
  platforms: {
    scss: {
      transformGroup: "scss",
      buildPath: "src/tokens/",
      files: [
        {
          destination: "_colors.scss",
          format: "scss/variables",
          filter: {
            type: "color",
          },
        },
        {
          destination: "_shadows.scss",
          format: "scss/variables",
          filter: {
            type: "boxShadow",
          },
        },
        {
          destination: "_fontFamilies.scss",
          format: "scss/variables",
          filter: {
            type: "fontFamilies",
          },
        },
        {
          destination: "_lineHeights.scss",
          format: "scss/variables",
          filter: {
            type: "lineHeights",
          },
        },
        {
          destination: "_fontWeights.scss",
          format: "scss/variables",
          filter: {
            type: "fontWeights",
          },
        },
        {
          destination: "_fontSizes.scss",
          format: "scss/variables",
          filter: {
            type: "fontSizes",
          },
        },
        {
          destination: "_letterSpacing.scss",
          format: "scss/variables",
          filter: {
            type: "letterSpacing",
          },
        },
        {
          destination: "_paragraphSpacing.scss",
          format: "scss/variables",
          filter: {
            type: "paragraphSpacing",
          },
        },
        {
          destination: "_typography.scss",
          format: "scss/variables",
          filter: {
            type: "typography",
          },
        },
        {
          destination: "_textCase.scss",
          format: "scss/variables",
          filter: {
            type: "textCase",
          },
        },
        {
          destination: "_textDecoration.scss",
          format: "scss/variables",
          filter: {
            type: "textDecoration",
          },
        },
      ],
    },
  },
});

StyleDictionary.buildAllPlatforms();

1

There are 1 best solutions below

0
On

The question makes in my opinion no sense, the solution is mentioned on the linked site already:

  "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}"
      }
    }
  }

Beside that the json represents a configuration and has to be created but a conversion from one json configuration format to another json configuration format is probably not part of the framework, concerning this the question might be just a bit misleading.
Nevertheless, both configurations can be used and should have the same result.