如何在StyleDictionary的registerTransform方法中访问完整字典对象
Style Dictionary自定义转换获取全量字典数据的解决方案
- 方案1:使用transformer自带的第三个入参(推荐,适用于Style Dictionary v3.x及以上版本)
你用到的transformer方法实际默认支持三个入参,第三个参数就是完整的dictionary对象,包含你需要的dictionary.properties等全量token数据,直接声明即可使用,修改后代码如下:
this.#handler.registerTransform({ name: 'my/size/transform', type: 'value', matcher: (prop) => { return prop?.attributes?.category === 'size' }, // 新增第三个参数dictionary transformer: (prop, options, dictionary) => { // 两种方式获取目标token,按需二选一即可: // 方式1:通过层级路径取properties里的处理后值 const targetTokenVal = dictionary.properties.global.base.size.value // 方式2:通过token的name属性检索全量token列表 const targetTokenVal = dictionary.allTokens.find(token => token.name === '你需要的目标token的name值').value return parseFloat(prop.original.value) + targetTokenVal; } })
- 方案2:旧版本兼容方案
如果你使用的是v3.x以下的旧版本Style Dictionary,不支持第三个入参,可以通过闭包提前存储全量token数据:
// 先加载你的全量token配置,路径替换为你实际的token配置文件路径 const allTokens = require('./your-token-config-path.json') this.#handler.registerTransform({ name: 'my/size/transform', type: 'value', matcher: (prop) => { return prop?.attributes?.category === 'size' }, transformer: (prop, options) => { const targetTokenVal = allTokens.global.base.size.value return parseFloat(prop.original.value) + targetTokenVal; } })
注意:要避免出现token循环依赖,如果你依赖的目标token也会被当前转换规则处理,建议取
original.value原始值进行计算,避免重复转换导致数值错误。
内容的提问来源于stack exchange,提问作者axel
相关产品推荐
相关产品推荐

