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.
Describe the bug
When generating the CSS rules to apply to a text segment, the
stylePropsgenerator uses Figma'sTextCasevalue to decide what the value of thetext-transformrule should be. The generator currently has special handling for theORIGINALvalue (settingtext-transformtonone), but for other values it simply lowercases theTextCasevalue, producing invalid styles liketext-transform: upperortext-transform: small_caps.TextCaseto validtext-transformCSS values. Figma's values don't map perfectly onto CSS, so obviously use your best judgement here, but my guess would be:ORIGINALnoneUPPERuppercaseLOWERlowercaseTITLEcapitalizeSMALL_CAPSuppercaseSMALL_CAPS_FORCEDuppercaseFor the
SMALL_CAPScases you could also leave them out of thetext-transformbit and add a new style rule forfont-variantthat would handle small caps. In which case, the mapping might look like this:ORIGINALnonenormalUPPERuppercasenormalLOWERlowercasenormalTITLEcapitalizenormalSMALL_CAPSnonesmall-capsSMALL_CAPS_FORCEDcapitalizesmall-capsReproduction
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: upperunder the selector#f2h-frame-1440 .f2h-text-0in the exported HTML.Logs
No response
System Info
Severity
annoyance
Code of Conduct