Style Dictionary项目中处理Tokens Studio字体尺寸单位问题

问题背景

在使用Style Dictionary处理来自Tokens Studio for Figma的设计令牌时，开发者遇到了一个常见问题：无法为字体尺寸值自动添加px或rem单位。原始令牌数据如下所示：

"body": {
  "value": "16",
  "type": "fontSizes"
}

开发者期望的输出是带有单位的CSS变量，例如：

$sd-font-sizes-body: 16px;

但实际得到的输出却是不带单位的纯数字：

$sd-font-sizes-body: 16;

问题根源分析

这个问题源于Tokens Studio与DTCG(Design Token Community Group)规范在类型命名上的不一致：

1. DTCG规范中定义字体尺寸的类型名称为fontSize(单数形式)
2. Tokens Studio则使用了fontSizes(复数形式)作为类型名称

Style Dictionary内置的size/px和size/rem转换器是按照DTCG规范实现的，因此只识别fontSize类型的令牌，而忽略了fontSizes类型的令牌。

解决方案

针对使用Tokens Studio生成的设计令牌，推荐以下解决方案：

1. 使用专门为Tokens Studio设计的转换器
   可以使用@tokens-studio/sd-transforms包中的ts/size/px转换器，这个转换器专门适配了Tokens Studio的类型命名约定。

2. 配置转换器
   在Style Dictionary配置文件中，将转换器从size/px替换为ts/size/px：

   "transforms": [
     "attribute/cti",
     "name/cti/kebab",
     "time/seconds",
     "content/icon",
     "color/css",
     "ts/size/px"
   ]
   

深入理解

1. 设计令牌类型系统
   设计令牌的类型系统是确保转换器正确工作的关键。不同的工具可能对同一概念使用不同的类型名称，这是跨工具协作时常见的兼容性问题。

2. 单位转换的重要性
   自动添加单位是设计系统工作流中的重要环节，可以确保输出样式的一致性，避免开发者手动添加单位可能带来的错误。

3. 转换器的工作机制
   Style Dictionary的转换器是基于令牌类型进行匹配的。当类型名称不匹配时，转换器将不会对相应的令牌值进行处理。

最佳实践建议

1. 统一工具链
   如果项目中使用Tokens Studio作为设计输入，建议在整个工具链中使用专为它优化的转换器和插件。

2. 明确类型约定
   在团队内部明确设计令牌的类型命名规范，确保设计工具和开发工具使用相同的约定。

3. 测试输出结果
   在设置转换器后，应该验证生成的样式文件是否包含预期的单位，确保转换器按预期工作。

通过理解这些原理和解决方案，开发者可以更有效地使用Style Dictionary处理来自不同设计工具的设计令牌，确保输出结果符合预期。