From bab2845e3654ec648ad2e0195b436c92e09105bb Mon Sep 17 00:00:00 2001
From: Andrew Milligan <amilligan@politico.com>
Date: Sun, 4 Aug 2024 09:48:42 -0400
Subject: [PATCH] fix: text-transform CSS from Figma TextCase

The `styleProps` generator was converting [Figma's `TextCase`
values](https://www.figma.com/plugin-docs/api/TextCase/) to
CSS by lowercasing values other than `ORIGINAL`, resulting in invalid
CSS values like `upper` (rather than `uppercase`). This fixes that
conversion by adding a utility function to properly map `TextCase`
values to CSS values.
---
 src/lib/generator/styleProps.ts     |  4 +++-
 src/lib/utils/textCaseFigmaToCss.ts | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/utils/textCaseFigmaToCss.ts

diff --git a/src/lib/generator/styleProps.ts b/src/lib/generator/styleProps.ts
index f5bc5c0..d206e99 100644
--- a/src/lib/generator/styleProps.ts
+++ b/src/lib/generator/styleProps.ts
@@ -1,3 +1,5 @@
+import textCaseFigmaToCss from 'lib/utils/textCaseFigmaToCss';
+
 export const fontList = [];
 
 // TODO: shouldn't this use our stringify function?
@@ -24,7 +26,7 @@ export const styles = (segment: StyledTextSegment) => {
 		'font-weight': segment.fontWeight,
 		'font-size': segment.fontSize + 'px',
 		'text-decoration': segment.textDecoration.toLowerCase(),
-		'text-transform': segment.textCase === 'ORIGINAL' ? 'none' : segment.textCase.toLowerCase(),
+		'text-transform': textCaseFigmaToCss(segment.textCase),
 		'line-height':
 			segment.lineHeight.unit === 'AUTO'
 				? 'normal'
diff --git a/src/lib/utils/textCaseFigmaToCss.ts b/src/lib/utils/textCaseFigmaToCss.ts
new file mode 100644
index 0000000..cdccd82
--- /dev/null
+++ b/src/lib/utils/textCaseFigmaToCss.ts
@@ -0,0 +1,18 @@
+/**
+ * Converts [Figma's TextCase][figma] values to [CSS text-transform][css]
+ * values.
+ *
+ * [figma]: https://www.figma.com/plugin-docs/api/TextCase/
+ * [css]: https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform
+ */
+export default (textCase: TextCase) => {
+	const textCaseMapping = {
+		ORIGINAL: 'none',
+		UPPER: 'uppercase',
+		LOWER: 'lowercase',
+		TITLE: 'capitalize',
+		SMALL_CAPS: 'uppercase',
+		SMALL_CAPS_FORCED: 'uppercase'
+	} as Record<TextCase, string>;
+	return textCaseMapping[textCase];
+};