Support textStyleId

[donfour]

Resources:

• Use getStyleById() to get a text style (reference)
• TextStyle object
• Guide to creating a text style in Figma UI

Thoughts:

• Text styles are not much use in HTML + inline CSS
• For JS + inline CSS, we can create an object variable from the text style, then use it whenever the text style needs to be applied to a node. For example:

const headerStyles = {
  fontSize: "24px",
  fontWeight: "800"
}
// inside the component...
<div style={{...headerStyles, /* other styles */}}>Title</div>

• For JS/HTML + Tailwind CSS, there could be multiple approaches:
  1. (JS only) Similar to the inline CSS approach, we can create a string variable from the text style.

  const headerStyles = {
    fontSize: "24px",
    fontWeight: "800"
  }
  // inside the component...
  <div style={{...headerStyles, /* other styles */}}>Title</div>

  2. We could do nothing (following Tailwind's utility-first philosophy)
  3. (For both HTML & JS) Use @apply directive (also recommended by Tailwind)

I like the 3rd option, because if the designer has bothered to create text styles in Figma, they must be frequently used enough to justify it. Also it works across different UI and CSS frameworks.