Merge pull request #156 from blinpete/textstyle-line-height-units

Add support for different units in `TextStyle.lineHeight`
marcomontalbano · Feb 8, 2024 · 0fbc343 · 0fbc343
2 parents 8f56e7a + c32a12b
commit 0fbc343
Show file tree

Hide file tree

Showing 11 changed files with 85 additions and 15 deletions.
diff --git a/packages/core/src/lib/figmaStyles/index.test.ts b/packages/core/src/lib/figmaStyles/index.test.ts
@@ -508,7 +508,40 @@ describe('figmaStyles.', () => {
                             fontVariant: 'normal',
                             fontWeight: 400,
                             letterSpacing: 2,
-                            lineHeight: 30,
+                            lineHeight: '30px',
+                            textAlign: 'left',
+                            textDecoration: 'underline',
+                            textTransform: 'capitalize',
+                            verticalAlign: 'top',
+                        },
+                    },
+                ]);
+            });
+
+            it('should parse a Text style when lineHeightUnit=FONT_SIZE_%', () => {
+                const node = getNode(styleNodes, 'h1');
+
+                // https://jemgold.github.io/figma-js/interfaces/typestyle.html#lineheightunit
+                // @ts-expect-error: "node" has style for sure
+                node.style.lineHeightUnit = 'FONT_SIZE_%';
+
+                const parsed = figmaStyles.parseStyles([node]);
+
+                expect(parsed).to.deep.equal([
+                    {
+                        styleType: 'TEXT',
+                        visible: true,
+                        name: 'h1',
+                        comment: 'Page title',
+                        originalNode: node,
+                        style: {
+                            fontFamily: 'Spinnaker',
+                            fontSize: 24,
+                            fontStyle: 'normal',
+                            fontVariant: 'normal',
+                            fontWeight: 400,
+                            letterSpacing: 2,
+                            lineHeight: '1.25',
                             textAlign: 'left',
                             textDecoration: 'underline',
                             textTransform: 'capitalize',

diff --git a/packages/core/src/lib/figmaStyles/textStyle.ts b/packages/core/src/lib/figmaStyles/textStyle.ts
@@ -56,9 +56,39 @@ const translateVerticalAlign = (figmaTextAlignVertical: string): FigmaExport.Ver
     return map[figmaTextAlignVertical];
 };
 
+const translateLineHeight = ({
+    lineHeightPx,
+    lineHeightPercentFontSize,
+    lineHeightUnit,
+}: Figma.TypeStyle): string => {
+    if (lineHeightUnit === 'FONT_SIZE_%') {
+        // Figma API doesn't return `lineHeightPercentFontSize`
+        // if lineHeightPercent is 100
+        return lineHeightPercentFontSize
+            ? Math.fround(lineHeightPercentFontSize / 100).toString()
+            : '1';
+    }
+
+    // this unit is deprecated and will be
+    // removed in future version of Figma API
+    // https://www.figma.com/developers/api#files-types
+    if (lineHeightUnit === 'INTRINSIC_%') {
+        // this looks wrong at first
+        // but Pixels in this if-branch are intentional
+        // https://github.com/marcomontalbano/figma-export/pull/156#issuecomment-1931415352
+        return `${lineHeightPx}px`;
+    }
+
+    if (lineHeightUnit === 'PIXELS') {
+        return `${lineHeightPx}px`;
+    }
+
+    throw new Error(`Unknown lineHeightUnit: ${lineHeightUnit}`);
+};
+
 const createTextStyle = (textNode: Figma.Style & Figma.Text): FigmaExport.TextStyle => {
     const {
-        fontFamily, fontWeight, fontSize, lineHeightPx, letterSpacing,
+        fontFamily, fontWeight, fontSize, letterSpacing,
         italic, textCase, textDecoration, textAlignHorizontal, textAlignVertical,
     } = textNode.style;
 
@@ -67,7 +97,7 @@ const createTextStyle = (textNode: Figma.Style & Figma.Text): FigmaExport.TextSt
         fontWeight,
         fontSize,
         letterSpacing,
-        lineHeight: lineHeightPx,
+        lineHeight: translateLineHeight(textNode.style),
         fontStyle: italic ? 'italic' : 'normal',
         fontVariant: translateFontVariant(textCase),
         textTransform: translateTextTransform(textCase),

diff --git a/packages/output-styles-as-css/src/index.test.ts b/packages/output-styles-as-css/src/index.test.ts
@@ -75,7 +75,7 @@ const mockText = (visible = true): Style => ({
         fontVariant: 'normal',
         fontWeight: 100,
         letterSpacing: 10,
-        lineHeight: 12,
+        lineHeight: '12px',
         textAlign: 'left',
         textDecoration: 'none',
         textTransform: 'uppercase',

diff --git a/packages/output-styles-as-css/src/index.ts b/packages/output-styles-as-css/src/index.ts
@@ -70,7 +70,7 @@ export = ({
                         text += writeVariable(getVariableName(style, 'font-variant'), `${style.style.fontVariant}`);
                         text += writeVariable(getVariableName(style, 'font-weight'), `${style.style.fontWeight}`);
                         text += writeVariable(getVariableName(style, 'letter-spacing'), `${style.style.letterSpacing}px`);
-                        text += writeVariable(getVariableName(style, 'line-height'), `${style.style.lineHeight}px`);
+                        text += writeVariable(getVariableName(style, 'line-height'), `${style.style.lineHeight}`);
                         text += writeVariable(getVariableName(style, 'text-align'), `${style.style.textAlign}`);
                         text += writeVariable(getVariableName(style, 'text-decoration'), `${style.style.textDecoration}`);
                         text += writeVariable(getVariableName(style, 'text-transform'), `${style.style.textTransform}`);

diff --git a/packages/output-styles-as-less/src/index.test.ts b/packages/output-styles-as-less/src/index.test.ts
@@ -75,7 +75,7 @@ const mockText = (visible = true): Style => ({
         fontVariant: 'normal',
         fontWeight: 100,
         letterSpacing: 10,
-        lineHeight: 12,
+        lineHeight: '12px',
         textAlign: 'left',
         textDecoration: 'none',
         textTransform: 'uppercase',

diff --git a/packages/output-styles-as-less/src/index.ts b/packages/output-styles-as-less/src/index.ts
@@ -62,7 +62,7 @@ export = ({
                             font-variant: ${style.style.fontVariant};
                             font-weight: ${style.style.fontWeight};
                             letter-spacing: ${style.style.letterSpacing}px;
-                            line-height: ${style.style.lineHeight}px;
+                            line-height: ${style.style.lineHeight};
                             text-align: ${style.style.textAlign};
                             text-decoration: ${style.style.textDecoration};
                             text-transform: ${style.style.textTransform};
@@ -77,7 +77,7 @@ export = ({
                         text += writeVariable(style.comment, getVariableName(style, 'font-variant'), `${style.style.fontVariant}`);
                         text += writeVariable(style.comment, getVariableName(style, 'font-weight'), `${style.style.fontWeight}`);
                         text += writeVariable(style.comment, getVariableName(style, 'letter-spacing'), `${style.style.letterSpacing}px`);
-                        text += writeVariable(style.comment, getVariableName(style, 'line-height'), `${style.style.lineHeight}px`);
+                        text += writeVariable(style.comment, getVariableName(style, 'line-height'), `${style.style.lineHeight}`);
                         text += writeVariable(style.comment, getVariableName(style, 'text-align'), `${style.style.textAlign}`);
                         text += writeVariable(style.comment, getVariableName(style, 'text-decoration'), `${style.style.textDecoration}`);
                         text += writeVariable(style.comment, getVariableName(style, 'text-transform'), `${style.style.textTransform}`);

diff --git a/packages/output-styles-as-sass/src/index.test.ts b/packages/output-styles-as-sass/src/index.test.ts
@@ -75,7 +75,7 @@ const mockText = (visible = true): Style => ({
         fontVariant: 'normal',
         fontWeight: 100,
         letterSpacing: 10,
-        lineHeight: 12,
+        lineHeight: '12px',
         textAlign: 'left',
         textDecoration: 'none',
         textTransform: 'uppercase',

diff --git a/packages/output-styles-as-sass/src/index.ts b/packages/output-styles-as-sass/src/index.ts
@@ -67,7 +67,7 @@ export = ({
                             "font-variant": ${style.style.fontVariant},
                             "font-weight": ${style.style.fontWeight},
                             "letter-spacing": ${style.style.letterSpacing}px,
-                            "line-height": ${style.style.lineHeight}px,
+                            "line-height": ${style.style.lineHeight},
                             "text-align": ${style.style.textAlign},
                             "text-decoration": ${style.style.textDecoration},
                             "text-transform": ${style.style.textTransform},
@@ -115,7 +115,7 @@ export = ({
                         text += writeVariable(
                             style.comment,
                             getVariableName(style, 'line-height'),
-                            `${style.style.lineHeight}px`,
+                            `${style.style.lineHeight}`,
                             extension,
                         );
                         text += writeVariable(

diff --git a/packages/output-styles-as-style-dictionary/src/index.test.ts b/packages/output-styles-as-style-dictionary/src/index.test.ts
@@ -75,7 +75,7 @@ const mockText = (visible = true): Style => ({
         fontVariant: 'normal',
         fontWeight: 100,
         letterSpacing: 10,
-        lineHeight: 12,
+        lineHeight: '12px',
         textAlign: 'left',
         textDecoration: 'none',
         textTransform: 'uppercase',

diff --git a/packages/output-styles-as-style-dictionary/src/index.ts b/packages/output-styles-as-style-dictionary/src/index.ts
@@ -66,7 +66,7 @@ export = ({
                         writeVariable(result, style.comment, getVariableName(style, 'font-variant'), `${style.style.fontVariant}`);
                         writeVariable(result, style.comment, getVariableName(style, 'font-weight'), `${style.style.fontWeight}`);
                         writeVariable(result, style.comment, getVariableName(style, 'letter-spacing'), `${style.style.letterSpacing}px`);
-                        writeVariable(result, style.comment, getVariableName(style, 'line-height'), `${style.style.lineHeight}px`);
+                        writeVariable(result, style.comment, getVariableName(style, 'line-height'), `${style.style.lineHeight}`);
                         writeVariable(result, style.comment, getVariableName(style, 'text-align'), `${style.style.textAlign}`);
                         writeVariable(result, style.comment, getVariableName(style, 'text-decoration'), `${style.style.textDecoration}`);
                         writeVariable(result, style.comment, getVariableName(style, 'text-transform'), `${style.style.textTransform}`);

diff --git a/packages/types/src/styles/TextStyle.ts b/packages/types/src/styles/TextStyle.ts
@@ -12,8 +12,15 @@ export type TextStyle = {
     fontWeight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
     /** Font size in px */
     fontSize: number;
-    /** Line height in px */
-    lineHeight: number;
+    /**
+     * Line height value with units.
+     *
+     * Examples: `"18px", "120%", "1.2"`
+     *
+     * ---
+     * More on units https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
+     */
+    lineHeight: string;
     /** Space between characters in px */
     letterSpacing: number;