design-tokens icon indicating copy to clipboard operation
design-tokens copied to clipboard

Ref / Aliases don't work with slashes

Open derekwsgray opened this issue 2 years ago • 3 comments

For the Standard Draft, and for StyleDictionary, references/alias must use a 'dot' between groups/children. However, for organizing styles in Figma, we are going to tend towards using slashes.

i.e. Where the designer creates a style named in Figma as color/grey-10, if they want to use the alias, they have to remember to use a different form of the name: color.grey-10. It would be nice if the Designer did not have to understand the implementation details of the plugin/specification to remember write it in this different way.

I suggest it accept both, but convert any slashes to dots on export.

derekwsgray avatar Sep 22 '22 14:09 derekwsgray

Hmm, interesting idea. You mean the alias from the description?

Would you be able to send a PR for this?

lukasoppermann avatar Sep 25 '22 19:09 lukasoppermann

Yes, the "ref:" or "alias: " lines in a Description of a colour style for example. I can probably make a PR, but I can't find the unit test / test data that tests the extraction from the 'description' field. Or is there no test for that?

derekwsgray avatar Oct 03 '22 15:10 derekwsgray

Hey, I think this is only tested via the integration tests. But I would be great if you could extract this into a separate function and ts file and test it.

The logic currently lives in the colors file, as it only works with colors atm (https://github.com/lukasoppermann/design-tokens/blob/main/src/extractor/extractColors.ts#L20-L39). If you want to extend this to work with all tokens that can have a description, that would also be nice.

Feel free to work on this in small chunks and send PRs for those, e.g. one pr just to "extract and test" the alias functionality. (Small PRs are easier to check and merge for me).

lukasoppermann avatar Oct 03 '22 19:10 lukasoppermann