Implement support for more text style properties?

[JeroenRoodIHS]

Hi! As I was working my way through processing tokens for text styles, I learned that some properties as provided by the Figma Plugin API TextStyle object are not yet supported. I am talking about the following:

• textDecoration (link)
• textCase (link)

There are other properties, of which I am unsure whether or not they would be useful:

• leadingTrim (link)
• paragraphIndent (link)
• paragraphSpacing (link)
• listSpacing (link)
• hangingPunctuation (link)
• hangingList (link)

I think I can safely implement support for textDecoration and textCase and create a PR. Is that okay?

As for the others, I would like to know what your stance is on this.

[JeroenRoodIHS]

I've created a PR for at least textDecoration and textCase, as I am not sure about the desirability of the other mentioned properties. I thought: let's stay on the safe side of things.

#19

[JeroenRoodIHS]

Mind you, I discovered that fontWeights could be more versatile. Some names, as derived from Google Fonts, are not supported. Examples:

• semiBold, in addition to semi-bold,
• extraLight, in addition to extra-light.

I changed this in /src/utils/text/getFontWeight.ts, which an additional change to the change for supporting textDecoration and textCase.

More details can be found in the update for getFontWeight.ts: 40bbd24

[PavelLaptev]

Thank you @JeroenRoodIHS
I merged the PR 🙂
I'll work on other text props soon

[JeroenRoodIHS]

Thanks! I just realized that I wasn't careful enough with the font weights. I made two oversights. My sincere apologies.

Invalid inputFontWeight heuristics

const inputFontWeight = fontWeight.toLowerCase() -- inputFontWeight returns a weight keyword that is currently not supported in the font weight mapping (it relies on specific casings, and there is no lowercase mapping)

Missing heuristics for mapping all kinds of font weight variations

The font-weights with extra-, semi- or ultra- are occuring with various casings and either with or without dashes.

Example:

semiBold
SemiBold
semibold (?)
Semibold (?)
semi-bold
Semi-Bold (?)
Semi-bold (?)

I know it is probably an impossible effort to map all possible fontWeight keywords used for any font out there. But maybe we can use the mapping as defined on MDN, and apply the casing/dash heuristics on top of that:
https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping

Something along the lines of:

const inputFontWeight = fontWeight.toLowerCase().replaceAll(/[-_.]/gi,"");.

This suggestion seems to work, after some tweaking of getFontWeight(). Is it okay if I make the change?

The function would look like this:

function getFontWeight(fontWeight){
    const inputFontWeight = fontWeight.toLowerCase().replaceAll(/[-_.]/gi,"");
    
    const weights = {
        100 : ["thin", "hairline", "100"],
        200 : ["extralight","ultralight", "200"],
        300 : ["light", "300"],
        400 : ["normal", "regular", "book", "400"],
        500 : ["medium", "500"],
        600 : ["semibold", "demibold", "600"],
        700 : ["bold", "700"],
        800 : ["ultrabold", "extrabold", "800"],
        900 : ["black", "heavy", "900"],
        950 : ["extrablack", "ultrablack", "950"]
    }
    return Object.keys(weights).find(weight => weights[weight].includes(inputFontWeight)) || 400;
}

---

This is how I tested it:

[
"thin",
"Thin",
"hairline",
"Hairline",
"hairLine",
"HairLine",
"hair-line",
"Hair-line",
"hair-Line",
"Hair-Line",
"extralight",
"ExtraLight",
"extraLight",
"Extralight",
"extra-light",
"Extra-Light",
"extra-Light",
"Extra-light",
"ultralight",
"UltraLight",
"ultraLight",
"Ultralight",
"ultra-light",
"Ultra-Light",
"ultra-Light",
"Ultra-light",
"light",
"Light",
"normal",
"Normal",
"regular",
"Regular",
"book",
"Book",
"medium",
"Medium",
"semibold",
"SemiBold",
"semiBold",
"Semibold",
"semi-bold",
"Semi-Bold",
"semi-Bold",
"Semi-bold",
"demibold",
"DemiBold",
"demiBold",
"Demibold",
"demi-bold",
"Demi-Bold",
"demi-Bold",
"Demi-bold",
"bold",
"Bold",
"ultrabold",
"UltraBold",
"ultraBold",
"Ultrabold",
"ultra-bold",
"Ultra-Bold",
"ultra-Bold",
"Ultra-bold",
"extrabold",
"ExtraBold",
"extraBold",
"Extrabold",
"extra-bold",
"Extra-Bold",
"extra-Bold",
"Extra-bold",
"Black",
"black",
"Heavy",
"heavy",
"extrablack",
"ExtraBlack",
"Extrablack",
"extraBlack",
"extra-black",
"Extra-Black",
"Extra-black",
"extra-Black",
"ultrablack",
"UltraBlack",
"ultraBlack",
"Ultrablack",
"ultra-black",
"Ultra-Black",
"ultra-Black",
"Ultra-black",
].forEach(fontWeight => {
    console.log(fontWeight+" = ",getFontWeight(fontWeight));
});

[JeroenRoodIHS]

Here's the PR for correcting the oversights: #20