如何使用样式字典将设计令牌对象转换为SCSS属性？

Question

我有一个与这个线程完全相同的问题：get scss from design tokens json file using style dictionary。这个线程中提到的答案是很好的，但是是否有一种方法来指定某种设置，以便样式字典自动地将样式对象转换为在所述线程中的答案中提到的方式？

我基本上是想转换

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

至

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

通过添加某种格式/转换。我怎样才能做到这一点？

我的config.json对象：

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();

Answer 1

这个问题在我看来是毫无意义的，有关的解决办法已在连结的网站上提及：

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

除此之外，json代表一个配置，必须创建，但是从一种json配置格式到另一种json配置格式的转换可能不是框架的一部分，关于这一点，这个问题可能有点误导。

尽管如此，这两种配置都可以使用，并且应该具有相同的结果。