Style Dictionary中实现可复用文本样式分组的技术方案

在基于Style Dictionary构建设计系统时，我们经常需要处理复杂的排版样式。这些样式通常包含多个属性，如字体、字号、行高等。本文将介绍如何在Style Dictionary中将这些分散的排版属性分组为可复用的CSS类。

问题背景

当使用Style Dictionary管理排版样式时，常见的JSON结构会将每个排版属性（如fontFamily、fontSize等）定义为独立的token。这种结构虽然清晰，但在实际CSS使用中不够便捷，因为开发者需要为每个元素手动组合多个CSS变量。

解决方案概述

通过自定义格式和属性转换，我们可以将相关的排版属性自动组合成完整的CSS类。核心思路是：

1. 为每个排版token添加CSS属性标识
2. 根据token路径生成对应的CSS类名
3. 将相同类名的属性分组并生成完整的CSS规则

实现步骤详解

1. 添加CSS属性标识

首先需要创建一个属性转换器，为每个排版token添加元数据：

{
  value: 'Stolzl',
  type: 'fontFamily',
  attributes: {
    cssProp: 'font-family',
    cssClass: 'typography-desktop-body-regular-xl'
  },
  name: 'typography-desktop-body-regular-xl-font-family'
}

2. 自定义格式实现

创建自定义格式来处理这些带有CSS类信息的token：

StyleDictionary.registerFormat({
  name: 'css/typographyClasses',
  formatter: function({ dictionary }) {
    const classMap = new Map();
    
    dictionary.allTokens.forEach(token => {
      if (token.attributes?.cssClass) {
        if (!classMap.has(token.attributes.cssClass)) {
          classMap.set(token.attributes.cssClass, []);
        }
        classMap.get(token.attributes.cssClass).push(token);
      }
    });
    
    let output = '';
    classMap.forEach((tokens, className) => {
      output += `.${className} {\n`;
      tokens.forEach(token => {
        const fallback = token.type === 'fontFamily' ? ', sans-serif' : '';
        output += `  ${token.attributes.cssProp}: var(--${token.name})${fallback};\n`;
      });
      output += `}\n\n`;
    });
    
    return output;
  }
});

3. 配置Style Dictionary

在配置文件中应用这个自定义格式：

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

生成结果示例

执行构建后，将生成如下CSS：

.typography-desktop-body-regular-xl {
  font-family: var(--typography-desktop-body-regular-xl-font-family), sans-serif;
  font-weight: var(--typography-desktop-body-regular-xl-font-weight);
  line-height: var(--typography-desktop-body-regular-xl-line-height);
  font-size: var(--typography-desktop-body-regular-xl-font-size);
  letter-spacing: var(--typography-desktop-body-regular-xl-letter-spacing);
  text-transform: var(--typography-desktop-body-regular-xl-text-case);
  text-decoration: var(--typography-desktop-body-regular-xl-text-decoration);
}

进阶优化建议

1. 智能回退值：可以根据属性类型自动添加适当的回退值，如字体栈、默认行高等

2. 响应式处理：通过媒体查询包装类，实现不同断点的排版样式

3. Sass/Less扩展：生成mixin或函数，提供更灵活的调用方式

4. 文档生成：同时生成样式使用文档，方便开发者查阅

总结

通过Style Dictionary的自定义格式功能，我们可以将分散的排版属性智能地组合成完整的CSS类。这种方法不仅提高了开发效率，还确保了设计系统的一致性和可维护性。虽然实现过程需要一定的自定义开发，但带来的长期收益是值得的。