Fix style variable decimal import (#3241)

* v1.22.22 * update import styles textsize to round upto 3 decimal points * update import number type variables to round upto 3 decimal points * linting * update to manage trailing zeros * set default baseRem size to 16 if ui setting base Rem is empty * add logic to handle string baseFontSize with px * linting * add tests in pullvariables for decimal values as well * modify a test case to add decimal font value * add changeset
tokens-studio · Jan 9, 2025 · 35a0281 · 35a0281
1 parent b08d2fd
commit 35a0281
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 9 deletions.
diff --git a/.changeset/nervous-waves-move.md b/.changeset/nervous-waves-move.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/figma-plugin": patch
+---
+
+Fix import of decimal values when importing styles and variables
diff --git a/packages/tokens-studio-for-figma/src/plugin/pullStyles.test.ts b/packages/tokens-studio-for-figma/src/plugin/pullStyles.test.ts
@@ -40,7 +40,7 @@ describe('pullStyles', () => {
         name: 'heading/h1/bold',
         id: '456',
         description: 'the big one',
-        fontSize: 24,
+        fontSize: 24.8,
         fontName: {
           family: 'Inter',
           style: 'Bold',
@@ -164,7 +164,7 @@ describe('pullStyles', () => {
       ],
       fontSizes: [
         { name: 'fontSize.0', type: 'fontSizes', value: '16' },
-        { name: 'fontSize.1', type: 'fontSizes', value: '24' },
+        { name: 'fontSize.1', type: 'fontSizes', value: '24.8' },
       ],
       letterSpacing: [{ name: 'letterSpacing.0', type: 'letterSpacing', value: '0%' }],
       paragraphSpacing: [{ name: 'paragraphSpacing.0', type: 'paragraphSpacing', value: '0' },

diff --git a/packages/tokens-studio-for-figma/src/plugin/pullStyles.ts b/packages/tokens-studio-for-figma/src/plugin/pullStyles.ts
@@ -97,7 +97,7 @@ export default function pullStyles(styleTypes: PullStyleOptions): void {
       .sort((a, b) => a - b)
       .map((size, idx) => ({
         name: `fontSize.${idx}`,
-        value: size.toString(),
+        value: Number(size.toFixed(3)).toString(),
         type: TokenTypes.FONT_SIZES,
       }));
 

diff --git a/packages/tokens-studio-for-figma/src/plugin/pullVariables.test.ts b/packages/tokens-studio-for-figma/src/plugin/pullVariables.test.ts
@@ -82,6 +82,18 @@ describe('pullStyles', () => {
             '1:3': 16,
           },
         },
+        {
+          name: 'Number3',
+          remote: false,
+          variableCollectionId: 'coll1',
+          resolvedType: 'FLOAT',
+          valuesByMode: {
+            '1:0': 24.8,
+            '1:1': 24.8,
+            '1:2': 24.8,
+            '1:3': 24.8,
+          },
+        },
         {
           name: 'String',
           remote: false,
@@ -191,6 +203,30 @@ describe('pullStyles', () => {
           type: 'number',
           value: 16,
         },
+        {
+          name: 'Number3',
+          parent: 'Collection 1/Default',
+          type: 'number',
+          value: 24.8,
+        },
+        {
+          name: 'Number3',
+          parent: 'Collection 1/Dark',
+          type: 'number',
+          value: 24.8,
+        },
+        {
+          name: 'Number3',
+          parent: 'Collection 1/Light',
+          type: 'number',
+          value: 24.8,
+        },
+        {
+          name: 'Number3',
+          parent: 'Collection 1/Custom',
+          type: 'number',
+          value: 24.8,
+        },
       ],
       booleans: [{
         name: 'Boolean', parent: 'Collection 1/Default', type: 'boolean', value: 'true',
@@ -292,6 +328,30 @@ describe('pullStyles', () => {
           type: 'dimension',
           value: '16px',
         },
+        {
+          name: 'Number3',
+          parent: 'Collection 1/Default',
+          type: 'dimension',
+          value: '24.8px',
+        },
+        {
+          name: 'Number3',
+          parent: 'Collection 1/Dark',
+          type: 'dimension',
+          value: '24.8px',
+        },
+        {
+          name: 'Number3',
+          parent: 'Collection 1/Light',
+          type: 'dimension',
+          value: '24.8px',
+        },
+        {
+          name: 'Number3',
+          parent: 'Collection 1/Custom',
+          type: 'dimension',
+          value: '24.8px',
+        },
       ],
       booleans: [{
         name: 'Boolean', parent: 'Collection 1/Default', type: 'boolean', value: 'true',
@@ -393,6 +453,30 @@ describe('pullStyles', () => {
           type: 'dimension',
           value: '1rem',
         },
+        {
+          name: 'Number3',
+          parent: 'Collection 1/Default',
+          type: 'dimension',
+          value: '1.55rem',
+        },
+        {
+          name: 'Number3',
+          parent: 'Collection 1/Dark',
+          type: 'dimension',
+          value: '1.55rem',
+        },
+        {
+          name: 'Number3',
+          parent: 'Collection 1/Light',
+          type: 'dimension',
+          value: '1.55rem',
+        },
+        {
+          name: 'Number3',
+          parent: 'Collection 1/Custom',
+          type: 'dimension',
+          value: '1.55rem',
+        },
       ],
       booleans: [{
         name: 'Boolean', parent: 'Collection 1/Default', type: 'boolean', value: 'true',
@@ -494,6 +578,30 @@ describe('pullStyles', () => {
           type: 'dimension',
           value: '1rem',
         },
+        {
+          name: 'Number3',
+          parent: 'Collection 1/Default',
+          type: 'dimension',
+          value: '1.55rem',
+        },
+        {
+          name: 'Number3',
+          parent: 'Collection 1/Dark',
+          type: 'dimension',
+          value: '1.55rem',
+        },
+        {
+          name: 'Number3',
+          parent: 'Collection 1/Light',
+          type: 'dimension',
+          value: '1.55rem',
+        },
+        {
+          name: 'Number3',
+          parent: 'Collection 1/Custom',
+          type: 'dimension',
+          value: '1.55rem',
+        },
       ],
       booleans: [{
         name: 'Boolean', parent: 'Collection 1/Default', type: 'boolean', value: 'true',

diff --git a/packages/tokens-studio-for-figma/src/plugin/pullVariables.ts b/packages/tokens-studio-for-figma/src/plugin/pullVariables.ts
@@ -16,10 +16,15 @@ export default async function pullVariables(options: PullVariablesOptions): Prom
 
   let baseRem = 16;
   if (options.useRem) {
-    baseRem = await figma.clientStorage.getAsync('uiSettings').then(async (uiSettings) => {
-      const settings = JSON.parse(await uiSettings);
-      return settings.baseFontSize;
-    });
+    const uiSettings = await figma.clientStorage.getAsync('uiSettings');
+    const settings = JSON.parse(await uiSettings);
+    if (settings?.baseFontSize) {
+      const baseFontSizeValue = typeof settings.baseFontSize === 'number'
+        ? settings.baseFontSize
+        : parseFloat(settings.baseFontSize);
+
+      baseRem = !isNaN(baseFontSizeValue) ? Number(baseFontSizeValue) : 16;
+    }
   }
 
   const localVariables = await getVariablesWithoutZombies();
@@ -100,9 +105,11 @@ export default async function pullVariables(options: PullVariablesOptions): Prom
               tokenValue = `{${alias?.name.replace(/\//g, '.')}}`;
             } else if (typeof value === 'number') {
               if (options.useRem) {
-                tokenValue = `${Number(tokenValue) / parseFloat(String(baseRem))}rem`;
+                tokenValue = `${Number((Number(tokenValue) / parseFloat(String(baseRem))).toFixed(3))}rem`;
               } else if (options.useDimensions) {
-                tokenValue = `${tokenValue}px`;
+                tokenValue = `${Number(tokenValue.toFixed(3))}px`;
+              } else {
+                tokenValue = Number(tokenValue.toFixed(3));
               }
             }
             const modeName = collection?.modes.find((m) => m.modeId === mode)?.name;