How do I use matcher function if I have a nested object with more than five levels in my json?

[tokensFan]

The design tokens are organized with this hierarchical tree structure:

Category Type Item Sub-item State

But what if I have a nested object with more than five levels in my json? I could use “token.type” but I have lots of tokens with that same type.

I was trying to build a transform function to create a sass variable with ”getToken” values but I'm not able to do it correctly.

This is what I would like to achieve:

$category-type-item-sub-item-default-getToken: (
  fill: $color,
  border: $border,
  shadow: $shadow,
)

   "category": {
      "type": {
        "item": {
          "sub-item": {
            "state": {
              "default": {
                "getToken": {
                  "value": {
                    "fill": "{color}",
                    "border": "{border}",
                    "shadow": "{shadow}"
                  },
                  "type": "composition"
                }
              },
              "active":{
                ...
               "type": "composition"
              }
            }
          }
        }
      }
    }

Build.js

StyleDictionary.registerTransform({
    name: 'scss/test',
    type: 'value',
    transitive: true,
    matcher: function(token) {
        return (token.attributes.category === 'category' && token.attributes.state === 'state' ) ;
    },
    transformer: (token) => {
        const {value} = token;
        return `(
  fill: ${value.border},
  border: ${value.border},
  shadow: ${shadow},
)`;
    }
})

Thanks in advance !

[nahiyankhan]

Are you asking more so about 'getToken' in the naming of the token? Or a way to match for getToken only. What is the output you are getting currently?

[jorenbroekema]

You'd need a custom attribute type transform to add the attributes that go deeper than what the built-in attribute/cti transform supports