编译后如何转换我的 Style Dictionary variables.js 的约定。忽略它们的父样式文件夹答案

【问题标题】：How do I transform the convention of my Style Dictionary variables.js after being compiled. To ignore they parent style folder编译后如何转换我的 Style Dictionary variables.js 的约定。忽略它们的父样式文件夹
【发布时间】：2023-02-04 12:16:37
【问题描述】：

这是我的 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 文件，但我不完全确定要解决什么问题。

【问题讨论】：

标签： javascript token figma style-dictionary

【解决方案1】：

嗯...您需要对您的transform-token.js 文件做一个小的调整，这样您就可以更改样式字典变量的命名约定。

现在，似乎命名约定在 Figma 中包含您的样式的父文件夹，这会导致问题。您需要更新 extend 方法中的 name 属性以避免这种情况。

这是它的样子：

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

这将确保您导出的令牌被命名为 Subheading1400 而不是 TypographyTypographyHeadersSubheadersSubheading1400。

【讨论】：