Fix codegen for non-grouped typography tokens

Temzasse · Jul 22, 2022 · 7321166 · 7321166
1 parent f550548
commit 7321166
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/src/codegen.js b/src/codegen.js
@@ -65,12 +65,12 @@ export default class Codegen {
           const tokenName = this.formatTokenName(k, config.tokenCase);
           let tokenValue = v;
 
+          // Format token value object keys for Figma variable groups
+          // Eg. `typography.native/web` or `colors.light/dark`
           if (
             typeof v === "object" &&
-            (name === "colors" || name === "typography")
+            (name === "colors" || (name === "typography" && !("fontSize" in v)))
           ) {
-            // Format token value object keys for Figma variable groups
-            // Eg. `typography.native/web` or `colors.light/dark`
             tokenValue = Object.entries(v).reduce((acc, entry) => {
               const _tokenName = this.formatTokenName(
                 entry[0],

diff --git a/src/tokenizer.js b/src/tokenizer.js
@@ -3,7 +3,7 @@ import fs from "fs";
 import axios from "axios";
 import log from "./log";
 import { optimizeSvg } from "./svgo";
-import { rgbToHex, roundToDecimal } from "./utils";
+import { rgbToHex, roundToDecimal, toFixed } from "./utils";
 
 export default class Tokenizer {
   constructor({ config, figmaAPI, onlyNew }) {
@@ -72,7 +72,7 @@ export default class Tokenizer {
         let color = "";
 
         if (typeof fill.opacity === "number") {
-          const alpha = parseFloat(fill.opacity.toFixed(2));
+          const alpha = toFixed(fill.opacity, 2);
           color = `rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}, ${alpha})`; // prettier-ignore
         } else {
           color = rgbToHex(
@@ -127,10 +127,8 @@ export default class Tokenizer {
           fontWeight: textStyle.fontWeight,
           fontSize: textStyle.fontSize,
           textTransform: textStyle.textCase === "UPPER" ? "uppercase" : "none",
-          letterSpacing: textStyle.letterSpacing,
-          lineHeight: parseFloat(
-            (textStyle.lineHeightPx / textStyle.fontSize).toFixed(3)
-          ),
+          letterSpacing: toFixed(textStyle.letterSpacing, 2),
+          lineHeight: toFixed(textStyle.lineHeightPx / textStyle.fontSize, 3),
         };
 
         if (style.group) {
@@ -150,7 +148,7 @@ export default class Tokenizer {
         // SHADOWS -------------------------------------------------------------
         function getShadow(shadow) {
           const { r, g, b, a } = shadow.color;
-          const alpha = parseFloat(a.toFixed(2));
+          const alpha = toFixed(a, 2);
           const rgba = `rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}, ${alpha})`; // prettier-ignore
           const hex = rgbToHex(
             Math.round(r * 255),

diff --git a/src/utils.js b/src/utils.js
@@ -19,6 +19,8 @@ export const rgbToHex = (r, g, b) => {
   return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
 };
 
-export const roundToDecimal = (n) => Math.abs(Math.round(n * 10) / 10);
+export const roundToDecimal = (num) => Math.abs(Math.round(num * 10) / 10);
+
+export const toFixed = (num, dec) => parseFloat(num.toFixed(dec));
 
 export const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));