如何修改Style Dictionary编译后变量名，去除父级目录前缀？

要解决编译后变量名包含所有父级文件夹路径的问题，你需要注册一个自定义名称转换规则，让Style Dictionary只取token的末级节点名称作为变量名，具体步骤如下：

1. 添加自定义名称转换Transform #

在你的transform-token.js中，新增一个name/only-last-part的transform，用来覆盖默认的名称生成逻辑：

StyleDictionary.registerTransform({
  name: 'name/only-last-part',
  type: 'name',
  transformer: (token) => {
    // token.path是包含从根到当前节点所有层级key的数组，比如['typography', 'typography', 'headers', 'subheaders', 'subheading1-400']
    const lastPart = token.path[token.path.length - 1];
    // 把连字符格式转成首字母大写的驼峰格式，匹配你期望的Subheading1400样式
    return lastPart.replace(/-([a-z0-9])/g, (match, char) => char.toUpperCase())
      .replace(/^[a-z]/, char => char.toUpperCase());
  }
});

2. 将自定义Transform加入Transform Group #

把上面的transform替换掉transform group里默认的名称转换规则，以你定义的custom/css为例：

StyleDictionary.registerTransformGroup({
  name: 'custom/css',
  transforms: StyleDictionary.transformGroup['css'].map(transform => {
    // 替换所有默认的name类转换规则
    if (transform.startsWith('name/')) {
      return 'name/only-last-part';
    }
    return transform;
  }).concat([
    'size/px',
    'size/percent',
  ]),
});

如果你的配置里是生成JS变量，需要给JS平台单独注册transform group的话，可以参考：

// 可选：针对JS平台的自定义转换组
StyleDictionary.registerTransformGroup({
  name: 'custom/js',
  transforms: StyleDictionary.transformGroup['js'].map(transform => {
    if (transform.startsWith('name/')) {
      return 'name/only-last-part';
    }
    return transform;
  })
});

3. 完整修改后的transform-token.js #

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

// 自定义px单位转换
StyleDictionary.registerTransform({
  name: 'size/px',
  type: 'value',
  matcher: token => {
    return (token.unit === 'pixel' || token.type === 'dimension') && token.value !== 0;
  },
  transformer: token => {
    return `${token.value}px`;
  },
});

// 自定义百分比单位转换
StyleDictionary.registerTransform({
  name: 'size/percent',
  type: 'value',
  matcher: token => {
    return token.unit === 'percent' && token.value !== 0;
  },
  transformer: token => {
    return `${token.value}%`;
  },
});

// 自定义名称转换：仅保留末级节点名称
StyleDictionary.registerTransform({
  name: 'name/only-last-part',
  type: 'name',
  transformer: (token) => {
    const lastPart = token.path[token.path.length - 1];
    // 转驼峰并首字母大写，匹配你期望的Subheading1400格式
    return lastPart.replace(/-([a-z0-9])/g, (match, char) => char.toUpperCase())
      .replace(/^[a-z]/, char => char.toUpperCase());
  }
});

// 自定义CSS转换组，替换默认名称规则
StyleDictionary.registerTransformGroup({
  name: 'custom/css',
  transforms: StyleDictionary.transformGroup['css'].map(transform => {
    if (transform.startsWith('name/')) {
      return 'name/only-last-part';
    }
    return transform;
  }).concat([
    'size/px',
    'size/percent',
  ]),
});

// StyleDictionary.registerFilter({
//   name: 'validToken',
//   matcher: function(token) {
//     return ['dimension', 'string', 'number', 'color'].includes(token.type)
//   }
// });

StyleDictionary
  .extend(baseConfig)
  .buildAllPlatforms();

关键说明 #

• token.path是Style Dictionary自动生成的层级数组，存储了当前token从根节点到自身的所有key，取最后一个元素即可得到末级名称。
• 代码中的驼峰转换是为了匹配你期望的Subheading1400格式，如果不需要可以直接返回lastPart，或者根据需求调整转换逻辑。

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