Style-dictionary: Question: Is there a way to transform alias into css variables without resolving the actual value?

[davidx1]

Is there a way to NOT resolve alias to values, but rather transform alias into css variable names?

For example, if I have defined in my properties like so:

//base.json
{
   "color": {
           "g500": { "value": "green" },
       }
    }
}

//other.json
{
   "color": {
           "success": { "value": {color.g500} },
       }
    }
}

Is there a way to generate:

:root {
  --g500: green;  
  --success: var(--g500);
}

EDIT:
The reason I ask is that we want to use StoryBooks' Design Token addon which uses css variable aliases to identify when two tokens are actually the same color and display them as such:

eg: here, both success and published are g500

[dbanksdesign]

There is no way in the built-in transforms and formats, but you could write a custom one to do that (in kind of a hacky way). You could write a custom format that iterates over each token and does a check to see if token.original contains {} meaning it references another token. If it does, get the name of that token and put it in a var() instead of outputting the token's resolved value.

[chazzmoney]

If you build one, we would love a PR for a format that includes this!

[avkvirtru]

FYI, I've been tinkering with the solution to this started in #428

[GarthDB]

This is how Adobe handles aliases (keeping them intact) in Spectrum CSS. I am building a new design system for a personal project and was looking for the same functionality in Style Dictionary. If there's anything I can do to help, let me know.

[avkvirtru]

@GarthDB I have a solution for this locally. Haven't had a chance to open a PR and contribute back here. Would be happy to coordinate on that. Can we start by seeing if my solution helps you: [email protected] ?

[tonyjwalt]

I have this in my PR - https://github.com/amzn/style-dictionary/pull/428
-Tony

On Thu, Sep 10, 2020 at 12:14 PM Garth Braithwaite [e-mail]
wrote:

This is how Adobe handles aliases (keeping them intact) in Spectrum CSS. I
am building a new design system for a personal project and was looking for
the same functionality in Style Dictionary. If there's anything I can do to
help, let me know.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/amzn/style-dictionary/issues/396#issuecomment-690594570,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAQW2RTOZQXFBECE6HGN4EDSFEJQJANCNFSM4LCWD63A
.

[chazzmoney]

This is now possible via the merge of #504

Thanks @dbanksdesign