如何在编译后转换样式词典变量.js 的约定。忽略它们的父样式文件夹

Question

这是我的transform-token.js 文件：

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

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.registerTransformGroup({
  name: 'custom/css',
  transforms: StyleDictionary.transformGroup['css'].concat([
    'size/px',
    'size/percent',
  ]),
});

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

StyleDictionary
  .extend(baseConfig)
  .buildAllPlatforms();

当我们构建时，我们得到这个：TypographyTypographyHeadersSubheadersSubheading1400，而不是得到类似：“Subheading1400”

这就是令牌导出到其typography.json的方式

{
  "typography": {
    "typography": {
      "headers": {
        "subheaders": {
          "subheading1-400": {
            "value": {
              "font": {
                "type": "font",
                "value": {
                  "family": {
                    "type": "string",
                    "value": "Plus Jakarta Sans"
                  },
                  "subfamily": {
                    "type": "string",
                    "value": "Regular"
                  }
                }
              },

它似乎正在从 Figma 中获取此样式的所有父文件夹并将其放入变量名称中。

我确实编辑了 js 文件，但我不完全确定要解决什么问题。

Answer 1

嗯...您需要对您的

transform-token.js

文件进行一些小调整

现在，命名约定似乎包括 Figma 中样式的父文件夹，这导致了您所描述的问题。

您需要更新

name

方法中的

extend

属性以避免这种情况。

它看起来像这样：

StyleDictionary
  .extend({ ...baseConfig, name: "Subheading1400" })
  .buildAllPlatforms();

这将确保您导出的令牌被命名为

Subheading1400

而不是

TypographyTypographyHeadersSubheadersSubheading1400

。

Answer 2

名称转换负责为输出构建令牌名称。没有内置转换可以从令牌路径返回最后一段，但很容易添加：

styleDictionary.registerTransform({
  name: "name/tail",
  type: "name",
  transformer: (token) => {
    token.original["name"] = token.name;
    token.name = token.path[token.path.length - 1];
  
    return token.name || {};
  },
});

然后您只需将

name/tail

添加到您的自定义变换组即可。