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

Question

我有与此线程完全相同的问题：使用样式字典从设计令牌 json 文件中获取 scss。这个线程中提到的答案很好，但是有没有办法指定一些设置，以便样式字典自动将样式对象转换为上述线程中答案中提到的方式？

我基本上想转换

"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 配置格式的转换可能不是框架的一部分，关于这一点，这个问题可能有点误导。
尽管如此，两种配置都可以使用并且应该具有相同的结果。