Custom mapValues for output
Hi guys,
First of all, I am so thankful for this amazing project, it really has changed a lot of things for me.
I have a question which I'm struggling with at the moment. I want to create my own properties for typography, this is so I can have it available for Figma tokens:
{
"font": {
"size": {
"heading": {
"0": {
"value": 1,
"mapValue": {
"fontWeight": "Bold",
"lineHeight": "150%",
"fontSize": "{font.size.0.value}",
"letterSpacing": "0",
"paragraphSpacing": "0"
},
"attributes": {
"category": "typography",
"type": "figma"
}
}
}
}
}
}
I want to be able to add a custom transform that will output the values like so while still applying the alias values:
"$font-size-heading-0": {
"value": {
"fontWeight": "Bold",
"lineHeight": "150%",
"fontSize": "0.625rem",
"letterSpacing": "0",
"paragraphSpacing": "0"
},
"type": "typography"
},
I've been struggling with this and would love for someone to help if possible. One thing I've noticed. With my custom transform I've managed to get close, but when the property with the alias add it's own "fontSize": {"value": "1rem"}. Which ends up looking like this:
"$font-size-heading-0": {
"value": {
"fontWeight": "Bold",
"lineHeight": "150%",
"fontSize": {"value": "0.625em", ...},
"letterSpacing": "0",
"paragraphSpacing": "0"
},
"type": "typography"
},
Anyway I hope this was enough to get my point across! Any help would be very appreciated.
Thanks in advance!
EDIT: I think this relates to https://github.com/amzn/style-dictionary/issues/695
Hey, thanks for the question. Unfortunately I'm not entirely sure what you are trying to do. I'm not sure what mapValue is for or how you are trying to use the alias resolving internal to SD.
I can tell you that any token with a value property will attempted to be resolved by SD, and aliases using the "{
You might find that @lukasoppermann may also be able to help as the author of the Figma Design Tokens plugin.