如何在样式词典中将 json 转换为 css class？

Question

我有以下button.json

{
  "component": {
  "button": {
    "padding": { "value": "{size.padding.medium.value}" },
    "font-size": { "value": 2 },
    "text-align": { "value": "center" },
  
    "primary": {
      "background-color": { "value": "hsl(10, 80, 50)" },
      "color": { "value": "{color.font.inverse.value}" }
    },
  
    "secondary": {
      "background-color": { "value": "{color.background.primary.value}" },
      "color": { "value": "{color.font.link.value}" }
    }
  }
}

我可以使用 amazon style-dictionary 生成样式标记。我想要生成的是 json.

中的完整 sass css

例如：

.component-button {

    padding: " ";
    font-size: " ";

    & .primary {
        background-color: "",
        color: ""
    }
}

Answer 1

实现此目的的一种方法是使用自定义模板创建自定义格式以呈现 .scss 文件。我在下面包含了执行此操作的基本代码。

首先，这是我使用的button.json文件：

{
  "color": {
    "background": {
      "primary": { "value": "hsl(10, 80, 50)" },
      "secondary": { "value": "hsl(10, 80, 90)" }
    },
    "font": {
      "inverse": { "value": "#fff" },
      "link": { "value": "#00f" }
    }
  },
  "size": {
    "2": { "value": 16 },
    "padding": {
      "medium": { "value": 16 }
    }
  },
  "component": {
    "button": {
      "padding": { "value": "{size.padding.medium.value}" },
      "font-size": { "value": "{size.2.value}" },
      "text-align": { "value": "center" },
      "primary": {
        "background-color": { "value": "{color.background.primary.value}" },
        "color": { "value": "{color.font.inverse.value}" }
      },
      "secondary": {
        "background-color": { "value": "{color.background.secondary.value}" },
        "color": { "value": "{color.font.link.value}" }
      }
    }
  }
}

我添加了一个额外的 color 和 size 对象，以便指针可以正确解析。我还对您的令牌的结构做了一些假设（例如 size.2 代表 font-size），但希望总体思路在那里很清楚。

这是主要的 JavaScript 代码。我添加了评论以尝试解释所有内容。

const _ = require('lodash')

/*
  This is formatted oddly in order to get a nice final shape
  in `button.scss`.

  Essentially what the template is doing is looping through
  the props object and outputting the top-level properties
  as the parent classnames, then for each child props of
  "classname" it looks to see if the child prop is an object,
  if it is, then it outputs the Sass `&.` operator with the
  child prop rule as the sub classname and then each child
  prop of the value as the final CSS style rule and value.
  If it's not an object then it outputs the rule and value
  as the CSS style rule and value.
*/
const template = _.template(`<% _.each(props, function(prop, classname) { %>.<%= classname %> {
<% _.each(prop, (value, rule) => { %><% if (typeof value === 'object') { %>  &.<%= rule %> {<% _.each(value, (subvalue, subrule) => { %>
    <%= subrule %>: <%= subvalue %>;<% }) %>
  }<% } else { %>  <%= rule %>: <%= value %>;<% } %>
<% }) %><% }) %>}
`)

const StyleDictionary = require('style-dictionary')
  .registerFormat({
    name: 'scss/button',
    formatter: function(dictionary, config) {
      /*
        allProperties is an array containing all the matched
        tokens based on the filter.
      */
      const { allProperties } = dictionary

      /*
        Set up an empty object to hold the final shape to pass
        to the custom template.

        After the allProperties.map(), props will look like this:
        {
          'component-button': {
            padding: '16px',
            'font-size': '16px',
            'text-align': 'center',
            primary: { 'background-color': '#e63c19', color: '#ffffff' },
            secondary: { 'background-color': '#fad8d1', color: '#0000ff' }
          }
        }
      */
      const props = {}

      // go through properties and structure final props object
      allProperties.map(prop => {
        /*
          Extract the attributes object created by the 'attribute/cti'
          transform and the transformed token value.
        */
        const { attributes, value } = prop

        // extract attributes to build custom class and style rules
        const { category, type, item, subitem } = attributes

        // build main classname for .scss file
        const classname = `${category}-${type}`

        /*
          Add to the props object if it doesn't already exist.
          We run the check to see if the classname exists already as an
          object property because in our case, `classname` will be the
          same for each token object in allProperties because each token
          is under the same category and type.
        */
        if (!props.hasOwnProperty(classname)) {
          props[classname] = {}
        }

        /*
          If the token object has a subitem, use the item as the subclass.
          Run the same check to see if this particular subclass (item) has
          been added yet.
        */
        if (subitem) {
          if (!props[classname].hasOwnProperty(item)) {
            props[classname][item] = {}
          }

          // add the subitem and value as final CSS rule
          props[classname][item][subitem] = value
        }
        else {
          // add the item as a CSS rule, not a subclass
          props[classname][item] = value
        }
      })

      /*
        Pass the final `props` object to our custom template to render
        the contents for the final button.scss file.
      */
      return template({ props })
    }
  })
  .extend({
    source: ['button.json'],
    platforms: {
      scss: {
        buildPath: 'build/',
        transforms: [
          'attribute/cti',  // setup attributes object
          'color/css',      // transform color values to hex
          'name/cti/kebab', // prevent name collisions
          'size/px'         // transform size values to px
        ],
        files: [
          {
            destination: 'button.scss',
            format: 'scss/button',
            filter: {
              attributes: {
                category: 'component',
                type: 'button'
              }
            }
          }
        ]
      }
    }
  })

// run Style Dictionary
StyleDictionary.buildAllPlatforms()

如果你运行这个你应该得到一个最终文件（build/button.scss），看起来像这样：

.component-button {
  padding: 16px;
  font-size: 16px;
  text-align: center;
  &.primary {
    background-color: #e63c19;
    color: #ffffff;
  }
  &.secondary {
    background-color: #fad8d1;
    color: #0000ff;
  }
}

如何在样式词典中将 json 转换为 css class？

How to transform a json into a css class in style-dictionary?

css

json

styles

token

style-dictionary