amzn / style-dictionary

A build system for creating cross-platform styles.
https://styledictionary.com
Apache License 2.0
3.93k stars 557 forks source link

[Question]: Custom format to look for official `$description` in group? #1003

Open chris-dura opened 1 year ago

chris-dura commented 1 year ago

I don't believe the official group $description property is supported in SD currently.

But, I'd like to start using it to author my tokens to be better prepared for the future. And, I want to write a custom formatter to use the official $description instead of SD's comment attribute. This is pretty straight-forward if I'm looking for $description on individual tokens themselves; however, trying to discover if there is a $description on a "parent group" seems like it'll be trickier, and probably involve some recursion...

So, just wanted to see if anyone had a recommendation on an efficient approach using the dictionary.allTokens or token objects in a format?

Example source:

// my-container.js

module.exports = {
    "my-container": {
        $description: "These tokens define generic containers",
        color: {
            value: "#fff",
            comment: "{my-container.color.$description}",
            $description: "This is the default color for a container"
        },
        margin: {
            value: 24,
            comment: "{my-container.margin.$description}",
            $description: "This is the default margin for a container"
        }
    }
}

And, let's say I wanted to write a custom formatter to output a markdown table template like this...


<!-- my-template.md.template -->

## ${group.name}

> ${group.$description}

| Name          | Description          | Value         |
|---------------|----------------------|---------------|
| ${token.name} | ${token.description} | ${token.value |

Resulting in an output of:

My Container

These tokens define generic containers

Name Description Value
my-container-color This is the default color for a container #fff
my-container-margin This is the default margin for a container 1.5rem

I know how to do most of it, but, just asking if anyone has an elegant way to do this logic in the formatter? Or, am I stuck with just searching the JSON objects up the ancestor chain?

// my-custom-format.js

// If the token has a parent group with a `$description` property
if (????) {
  let group.description = "the-group's-description";
}