build directory less and scss builds contain multiple [object object] lines about design-token-transformer

[edwinmesmerise]

Correction, on re-reading that solution it appears to relate to a config of Tokens Studio, not Style Dictionary, although it may still explain the cause and how they solve it.

[lukasoppermann]

hey, sorry for the very late reply.

This issue is probably related to some transformers you use.

Style dictionary can not render objects, so they need to be transformed. You need to use the transformers from this repo or build your own, to combine the objects in a way to output a string or number.

For example to create a padding you could use this: https://github.com/lukasoppermann/design-token-transformer/blob/main/src/web/webPadding.js

module.exports = {
  type: 'value',
  matcher: function (token) {
    return token.type === 'custom-spacing'
  },
  transformer: ({ value: { top, left, bottom, right } }) => {
    if ([bottom, left, right].every(v => v === top)) {
      return `${top}px`
    }
    return `${top}px ${right}px ${bottom}px ${left}px`
  }
}

[edwinbradford]

Thanks and the delay is no problem but have you misunderstood this issue? I haven't run the project or made any changes, those entries are in your project, it looks like something might be wrong, bear in mind I'm completely new to it so I may have misunderstood.

[lukasoppermann]

The problem is that the correct transformers are not loaded. It should be fixed now.

However this is a relatively old workflow. While it works well with the plugin, I would generally recommend to build your won transformations for the plugin based on style-dictionary-utils.