style-dictionary icon indicating copy to clipboard operation
style-dictionary copied to clipboard

Custom mapValues for output

Open sananes opened this issue 4 years ago • 1 comments

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

sananes avatar Feb 04 '22 06:02 sananes

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 "{}" notation will be resolved to the representation in the dictionary that exists for the dictionary value located at the place referenced by the alias.

You might find that @lukasoppermann may also be able to help as the author of the Figma Design Tokens plugin.

chazzmoney avatar Feb 10 '22 23:02 chazzmoney