fix: expanding composition tokens across files (#254)

tokens-studio · Jan 23, 2024 · 771428a · 771428a
1 parent 8bde22d
commit 771428a
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 9 deletions.
diff --git a/.changeset/thirty-kings-tan.md b/.changeset/thirty-kings-tan.md
@@ -0,0 +1,5 @@
+---
+'@tokens-studio/sd-transforms': patch
+---
+
+Fix expanding composition tokens flattening to not occur for certain object values and resulting in [object Object].
diff --git a/src/parsers/expand-composites.ts b/src/parsers/expand-composites.ts
@@ -121,15 +121,14 @@ function recurse(
               console.error(e);
             }
             // If every key of the result (object) is a number, the ref value is a multi-value, which means TokenBoxshadowValue[]
-            if (
-              typeof token.value === 'object' &&
-              Object.keys(token.value).every(key => !isNaN(Number(key)))
-            ) {
-              token.value = (Object.values(token.value) as TokenBoxshadowValue[]).map(part =>
-                flattenValues(part),
-              );
-            } else if (!usesReferences(token.value)) {
-              token.value = flattenValues(token.value);
+            if (typeof token.value === 'object') {
+              if (Object.keys(token.value).every(key => !isNaN(Number(key)))) {
+                token.value = (Object.values(token.value) as TokenBoxshadowValue[]).map(part =>
+                  flattenValues(part),
+                );
+              } else {
+                token.value = flattenValues(token.value);
+              }
             }
           }
           slice[key] = expandToken(token, expandType === 'shadow');

diff --git a/test/integration/cross-file-refs.test.ts b/test/integration/cross-file-refs.test.ts
@@ -42,9 +42,22 @@ describe('cross file references', () => {
     expect(file).to.include(`
   --sdTypoFontWeight: 400;
   --sdTypoFontStyle: italic;
+  --sdPrimaryFont: Inter;
+  --sdFontWeight: 800;
+  --sdLineHeight: 1.5;
+  --sdTypo2FontFamily: Inter;
+  --sdTypo2FontWeight: 800;
+  --sdTypo2LineHeight: 1.5;
+  --sdTypo2FontSize: 8px;
+  --sdDimensionScale: 2;
+  --sdDimensionXs: 4px;
   --sdWeight: 400 italic;
   --sdTypoAliasFontWeight: 400;
   --sdTypoAliasFontStyle: italic;
+  --sdTypo3FontFamily: Inter;
+  --sdTypo3FontWeight: 800;
+  --sdTypo3LineHeight: 1.5;
+  --sdTypo3FontSize: 8px;
 `);
   });
 });
diff --git a/test/integration/tokens/cross-file-refs-1.tokens.json b/test/integration/tokens/cross-file-refs-1.tokens.json
@@ -4,5 +4,36 @@
       "fontWeight": "{weight}"
     },
     "type": "typography"
+  },
+  "primaryFont": {
+    "value": "Inter",
+    "type": "fontFamilies"
+  },
+  "fontWeight": {
+    "value": "ExtraBold",
+    "type": "fontWeights"
+  },
+  "lineHeight": {
+    "value": "1.5",
+    "type": "lineHeights"
+  },
+  "typo-2": {
+    "value": {
+      "fontFamily": "{primaryFont}",
+      "fontWeight": "{fontWeight}",
+      "lineHeight": "{lineHeight}",
+      "fontSize": "{dimension.scale}*{dimension.xs}"
+    },
+    "type": "typography"
+  },
+  "dimension": {
+    "scale": {
+      "value": "2",
+      "type": "number"
+    },
+    "xs": {
+      "value": "4px",
+      "type": "number"
+    }
   }
 }
diff --git a/test/integration/tokens/cross-file-refs-3.tokens.json b/test/integration/tokens/cross-file-refs-3.tokens.json
@@ -2,5 +2,9 @@
   "typo-alias": {
     "value": "{typo}",
     "type": "typography"
+  },
+  "typo-3": {
+    "value": "{typo-2}",
+    "type": "typography"
   }
 }