StyleDictionary v4 迁移指南：解决 extend 方法报错问题

问题背景

在使用 StyleDictionary 构建设计令牌系统时，开发者可能会遇到 TypeScript 报错："Property 'extend' does not exist on type 'typeof StyleDictionary'"。这个错误通常发生在从 v3 迁移到 v4 版本的过程中。

原因分析

StyleDictionary v4 版本对 API 进行了重大调整，移除了静态方法 extend，改为使用构造函数模式。这种变化是为了提供更清晰的实例化方式，并更好地支持 TypeScript 类型系统。

解决方案

正确的实例化方式应该是使用 new 关键字：

const StyleOutput = new StyleDictionary(StyleDictionaryConfig, {
  mutateOriginal: true,
  verbosity: 'verbose',
  warnings: 'error'
});

迁移注意事项

1. 配置对象：v4 版本的配置对象结构与 v3 基本保持一致，可以直接复用
2. 插件注册：像 registerTransforms 这样的插件注册方式保持不变
3. 方法调用：构建方法 buildAllPlatforms() 和清理方法 cleanAllPlatforms() 仍然可用

完整示例代码

import StyleDictionary from 'style-dictionary';
import { Config } from 'style-dictionary/types';
import { registerTransforms } from '@tokens-studio/sd-transforms';

registerTransforms(StyleDictionary);

const StyleDictionaryConfig: Config = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: "tokens-studio",
      buildPath: "dist/css/",
      files: [{
        destination: "variables.css",
        format: "css/variables"
      }]
    }
  }
};

const sdInstance = new StyleDictionary(StyleDictionaryConfig, {
  mutateOriginal: true,
  verbosity: 'verbose'
});

sdInstance.cleanAllPlatforms();
sdInstance.buildAllPlatforms();

版本兼容性建议

1. 检查项目中的 StyleDictionary 版本
2. 更新相关文档和构建脚本
3. 考虑在 CI/CD 流程中加入版本检查步骤

通过以上调整，开发者可以顺利迁移到 StyleDictionary v4 版本，并利用其改进的类型系统和更清晰的 API 设计。