Text segment CSS produces invalid values for text-transform

[andrewmilligan]

Describe the bug

When generating the CSS rules to apply to a text segment, the styleProps generator uses Figma's TextCase value to decide what the value of the text-transform rule should be. The generator currently has special handling for the ORIGINAL value (setting text-transform to none), but for other values it simply lowercases the TextCase value, producing invalid styles like text-transform: upper or text-transform: small_caps.

Ideally there should be a slightly more nuanced conversion from the possible values of TextCase to valid text-transform CSS values. Figma's values don't map perfectly onto CSS, so obviously use your best judgement here, but my guess would be:

Figma Value	CSS Value	Notes
ORIGINAL	none	this is already the case
UPPER	uppercase
LOWER	lowercase
TITLE	capitalize
SMALL_CAPS	uppercase	seems like the closest for small caps 🤷
SMALL_CAPS_FORCED	uppercase

For the SMALL_CAPS cases you could also leave them out of the text-transform bit and add a new style rule for font-variant that would handle small caps. In which case, the mapping might look like this:

Figma Value	text-transform	font-variant
ORIGINAL	none	normal
UPPER	uppercase	normal
LOWER	lowercase	normal
TITLE	capitalize	normal
SMALL_CAPS	none	small-caps
SMALL_CAPS_FORCED	capitalize	small-caps

Reproduction

I came across this problem with a font definition that forcibly uppercases everything. You should be able to reproduce by exporting a frame with a text layer that has its "Case" set to anything other than the default. Here's a reproduction — hope I set up the permissions correctly so that you can get what you need! You should see the invalid CSS rule text-transform: upper under the selector #f2h-frame-1440 .f2h-text-0 in the exported HTML.

Logs

No response

System Info

- figma2html v1.1.0
- Figma Desktop App version 124.1.16
- MacOS Sonoma 14.1.2 (23B92)

Severity

annoyance

Code of Conduct

• I agree to follow figma2html's Code of Conduct