Add support for different units in TextStyle.lineHeight

[blinpete]

This pull request adds support for different line height units.

Issue

Currently TextStyle.lineHeight is a unitless number and stores lineHeightPx coming from figma-js and Figma API itself. Which results in unexpected behavior when you set up your line height in font size percentage but still end up with pixels exported.

Having this as the default behavior is a bit confusing cuz a unitless line height in web development carries a different meaning.

Solution

Figma supports 3 line height units PIXELS, INTRINSIC_% and FONT_SIZE_%.
Now TextStyle.lineHeight is a string and the textStyle parser handles all of the units correctly according to lineHeightUnit value.

The difference in behavior

{
  type: "TEXT",
  style: {
      ...,
      lineHeightPx: 30,
      lineHeightPercent: 106,
      lineHeightPercentFontSize: 125,
      lineHeightUnit: ... // "PIXELS" or "INTRINSIC_%" or "FONT_SIZE_%"
  }
}

Considering this Figma TextNode here's how figma-export handles a line height depending on the lineHeightUnit key:

Figma API lineHeightUnit	figma-export (main branch)	figma-export (on this branch)
PIXELS	lineHeight: 30 ✅	lineHeight: "30px" ✅
INTRINSIC_%	lineHeight: 30 ❌	lineHeight: "106%" ✅
FONT_SIZE_%	lineHeight: 30 ❌	lineHeight: "1.25" ✅

---

@marcomontalbano Thanks for your work, figma-export is damn well designed!

[marcomontalbano]

Hi @blinpete, thanks a lot for your PR, it looks amazing!

I have just one doubt. In my figma-export example file, I have two different texts (different font-size) with line-height set to Auto.

// first text with line-height: Auto
{
  type: "TEXT",
  style: {
    ...,
    "fontSize": 14,
    "lineHeightPx": 16.40625,
    "lineHeightPercent": 100,
    "lineHeightUnit": "INTRINSIC_%"
  }
}

// second text with line-height: Auto
{
  type: "TEXT",
  style: {
    ...,
    "fontSize": 18,
    "lineHeightPx": 21.09375,
    "lineHeightPercent": 100,
    "lineHeightUnit": "INTRINSIC_%"
  }
}

Before this change, the line height was generated as 16.40625px and 21.09375px respectively. With this PR it will change to 100% for both and it will render differently from before (I tested here for the final result and it looks like a breaking change).

What do you think about it? How can we manage it?

[blinpete]

Hey @marcomontalbano!

not sure about this

1. we can try to dive into typography and calculate what Figma is doing under the hood. There are tricks like basekick and capsizecss. seems like SEEK-OSS are far ahead here.
2. or we can revert INTRINSIC_% if-branch to use pixels. INTRINSIC_% is deprecated by Figma anyway

what are your thoughts on this?

[marcomontalbano]

I would proceed with the option 2. Since INTRINSIC_% is deprecated, this way we'll not have to change the code in future Figma API releases.

[blinpete]

@marcomontalbano
Yeah sure, just pushed a commit doing the 2nd option 👍

[marcomontalbano]

Well done, thanks!

[marcomontalbano]

I just released v4.8.0-alpha.1

Let me know if everything is working as expected.

[blinpete]

Yep, figma-export handles all the line heights as expected.
Thanks for such a quick merge 🚀