Style Dictionary Transforms for Tokens Studio 使用教程

Style Dictionary Transforms for Tokens Studio 使用教程

sd-transforms Custom transforms for Style-Dictionary, to work with Design Tokens that are exported from Tokens Studio 项目地址: https://gitcode.com/gh_mirrors/sd/sd-transforms

1. 项目的目录结构及介绍

sd-transforms 项目是一个为 Style-Dictionary 提供自定义转换的npm包，使得可以从 Tokens Studio 导出的设计令牌（Design Tokens）得以在 Style-Dictionary 中使用。以下是项目的目录结构：

.
├── .changeset
├── .github
├── .husky
├── src
│   ├── ts
│   └── css
├── test
├── .eslintignore
├── .eslintrc.cjs
├── .gitignore
├── .lintstagedrc.js
├── .prettierignore
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
└── tsconfig.json

目录说明：

• src/：源代码目录，包含了TypeScript编写的转换逻辑。
• test/：测试目录，包含了项目的单元测试代码。
• .github/：包含GitHub工作流文件，如自动发布的配置等。
• .husky/：包含husky配置文件，用于在提交代码前执行一些任务，比如lint检查。
• README.md：项目说明文件，详细介绍了项目的安装、配置和使用方法。
• LICENSE：项目许可证文件，本项目采用MIT许可证。
• 其他文件：包括项目配置文件、构建脚本和代码风格配置等。

2. 项目的启动文件介绍

项目的启动主要是通过 package.json 中的脚本实现的。以下是 package.json 文件中的部分内容，展示了如何定义启动脚本：

{
  "scripts": {
    "build": "style-dictionary build",
    "clean": "style-dictionary clean",
    "test": "vitest",
    "test:watch": "vitest --watch"
  }
}

在这些脚本中，build 脚本负责构建项目，clean 脚本用于清理构建产物，test 脚本用于运行单元测试，而 test:watch 脚本则用于在开发过程中监视代码变化并运行测试。

3. 项目的配置文件介绍

项目的核心配置文件是 style-dictionary.config.js，它定义了如何从源文件中提取令牌，以及如何转换这些令牌到不同的平台。

以下是一个配置文件的示例：

const StyleDictionary = require('style-dictionary');

module.exports = {
  source: ['tokens/**/*.json'],
  preprocessors: ['tokens-studio'],
  platforms: {
    css: {
      transformGroup: 'tokens-studio',
      transforms: ['name/kebab'],
      buildPath: 'build/css/',
      files: [{
        destination: 'variables.css',
        format: 'css/variables'
      }]
    }
  }
};

在这个配置文件中：

• source 属性定义了令牌文件的路径。
• preprocessors 属性包含了 tokens-studio 预处理器，用于转换 Tokens Studio 的令牌。
• platforms 属性定义了不同的平台配置，本例中定义了一个 css 平台，它指定了转换组 tokens-studio，转换名称为 kebab，构建路径为 build/css/，以及输出文件的目的地和学习格式。

sd-transforms Custom transforms for Style-Dictionary, to work with Design Tokens that are exported from Tokens Studio 项目地址: https://gitcode.com/gh_mirrors/sd/sd-transforms