Style Dictionary自定义格式生成SCSS类异常，输出[object Object]

我尝试在Style Dictionary中定义自定义格式，为所有排版样式生成SCSS类，但输出结果里排版相关的变量显示为[object Object]，得不到预期的SCSS类。

我的tokens文件base.json #

{
  "fontFamilies": {
    "default": {
      "value": "Inter",
      "type": "fontFamily"
    }
  },
  "weights": {
    "bold": {
      "value": "Bold",
      "type": "fontWeight"
    }
  },
  "sizes": {
    "sm": {
      "value": "12",
      "type": "fontSize"
    },
    "md": {
      "value": "16",
      "type": "fontSize"
    },
    "lg": {
      "value": "24",
      "type": "fontSize"
    },
    "xl": {
      "value": "32",
      "type": "fontSize"
    }
  },
  "ls": {
    "headlines": {
      "value": "-1%",
      "type": "letterSpacing"
    },
    "body": {
      "value": "0%",
      "type": "letterSpacing"
    }
  },
  "lh": {
    "headlines": {
      "value": "110%",
      "type": "lineHeight"
    },
    "body": {
      "value": "140%",
      "type": "lineHeight"
    }
  },
  "headlines": {
    "large": {
      "value": {
        "fontFamily": "{fontFamilies.default}",
        "fontWeight": "{weights.bold}",
        "fontSize": "{sizes.xl}",
        "letterSpacing": "{ls.headlines}",
        "lineHeight": "{lh.headlines}"
      },
      "type": "typography"
    },
    "small": {
      "value": {
        "fontFamily": "{fontFamilies.default}",
        "fontWeight": "{weights.bold}",
        "fontSize": "{sizes.lg}",
        "letterSpacing": "{ls.headlines}",
        "lineHeight": "{lh.headlines}"
      },
      "type": "typography"
    }
  },
  "body": {
    "large": {
      "value": {
        "fontFamily": "{fontFamilies.default}",
        "fontWeight": "{weights.bold}",
        "fontSize": "{sizes.md}",
        "letterSpacing": "{ls.body}",
        "lineHeight": "{lh.body}"
      },
      "type": "typography"
    },
    "small": {
      "value": {
        "fontFamily": "{fontFamilies.default}",
        "fontWeight": "{weights.bold}",
        "fontSize": "{sizes.sm}",
        "letterSpacing": "{ls.body}",
        "lineHeight": "{lh.body}"
      },
      "type": "typography"
    }
  }
}

当前_variables.scss输出 #

$font-families-default: Inter;
$weights-bold: Bold;
$sizes-sm: 12;
$sizes-md: 16;
$sizes-lg: 24;
$sizes-xl: 32;
$ls-headlines: -1%;
$ls-body: 0%;
$lh-headlines: 110%;
$lh-body: 140%;
$headlines-large: [object Object];
$headlines-small: [object Object];
$body-large: [object Object];
$body-small: [object Object];

期望的输出结果 #

$font-families-default: Inter;
$weights-bold: Bold;
$sizes-sm: 12;
$sizes-md: 16;
$sizes-lg: 24;
$sizes-xl: 32;
$ls-headlines: -1%;
$ls-body: 0%;
$lh-headlines: 110%;
$lh-body: 140%;
    .headlines-large {
      font-family: Inter;
      font-size: 32px;
      font-weight: Bold;
      line-height: 110%;
    }

相关配置文件 #

build.js #

const StyleDictionary = require('style-dictionary').extend('config.json');

StyleDictionary.registerFormat({
  name: 'css/classFormat',
  formatter: function (dictionary, config) {
    return `
  ${dictionary.allProperties
    .map((prop) => {
      return `
  .${prop.name} {
      font-family: ${prop.value.fontFamily},
      font-size: ${prop.value.fontSize},
      font-weight: ${prop.value.fontWeight},
      line-height: ${prop.value.lineHeight}
  };`})
    .join('\n')}
  `
  },
})

StyleDictionary.buildAllPlatforms();

package.json #

{
  "name": "mytokens",
  "version": "1.0.0",
  "description": "This example code is bare-bones to show you what this framework can do. If you have the style-dictionary module installed globally, you can `cd` into this directory and run: ```bash style-dictionary build ```",
  "main": "index.js",
  "scripts": {
    "build": "node ./build.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

问题原因及解决步骤 #

1. 问题根源：默认SCSS变量格式无法处理对象类型的token，因此输出[object Object]；同时自定义格式未过滤非排版类型token，也未解析token引用的实际值。

2. 修改build.js
   过滤出typography类型的token，解析引用值并修正CSS语法：

const StyleDictionary = require('style-dictionary').extend('config.json');

StyleDictionary.registerFormat({
  name: 'css/classFormat',
  formatter: function (dictionary, config) {
    // 生成基础变量
    const baseVariables = dictionary.allProperties
      .filter(prop => prop.type !== 'typography')
      .map(prop => `$${prop.name}: ${prop.value};`)
      .join('\n');

    // 生成排版类
    const typographyClasses = dictionary.allProperties
      .filter(prop => prop.type === 'typography')
      .map(prop => {
        const resolvedValue = dictionary.getReferences(prop.value);
        return `
.${prop.name} {
  font-family: ${resolvedValue.fontFamily};
  font-size: ${resolvedValue.fontSize}px;
  font-weight: ${resolvedValue.fontWeight};
  line-height: ${resolvedValue.lineHeight};
  letter-spacing: ${resolvedValue.letterSpacing};
}`;
      })
      .join('\n');

    return `${baseVariables}\n${typographyClasses}`;
  },
});

StyleDictionary.buildAllPlatforms();

3. 配置config.json
   确保平台使用自定义格式：

{
  "source": ["tokens/**/*.json"],
  "platforms": {
    "scss": {
      "transformGroup": "scss",
      "buildPath": "build/scss/",
      "files": [
        {
          "destination": "_variables.scss",
          "format": "css/classFormat"
        }
      ]
    }
  }
}

4. 执行构建
   运行npm run build即可得到包含基础变量和排版类的SCSS文件。

内容的提问来源于stack exchange，提问作者designArg