fix: proper isObject checks where applicable (#23)

.changeset/tiny-hornets-guess.md

@@ -0,0 +1,5 @@
+---
+'@divriots/style-dictionary-to-figma': patch
+---
+
+Do proper isObject check (typeof null and Array are also 'object') where needed. Fixes bug with metadata props with type Array getting altered by trimValue to become Objects.

README.md

@@ -22,7 +22,24 @@ Used by Design Systems in [Backlight](https://backlight.dev) using design tokens
 
 ## Features
 
-- Allows marking a category as a custom tokenset so that it will appear as a separate tokenset in Figma. This is useful if you want to combine many base tokens into a "global" set for example.
+- **Mandatory action required**: Supports marking a category as a custom tokenset so that it will appear as a separate tokenset in Figma. This is useful if you want to combine many base tokens into a "global" set for example and a mandatory step for Figma Tokens Plugin currently, or your references will not work. You can configure it like so:
+
+  ```json
+  {
+    "color": {
+      "tokenset": "global",
+      "primary": {
+        "base": {
+          "type": "color",
+          "value": "#14b8a6"
+        }
+      }
+    }
+  }
+  ```
+
+  `color.primary.base` token will appear under `global` tokenset now in the plugin.
+
 - Trims `.value` from reference values as Figma Tokens plugin does not use this suffix.
 - Trims the `name` properties from tokens since Figma Tokens plugin uses this property to name its tokens, however, without a name property it creates its own naming/nesting by the object structure which is way nicer.
 - Use the reference values rather than its resolved values. Put `ignoreUseRefValue: true` as a sibling property to the value prop if you want to make an exception and keep it as a resolved value.

src/mark-tokenset.js

@@ -1,3 +1,5 @@
+import { isObject } from './utils/isObject.js';
+
 /**
  * @typedef {import('./style-dictionary-to-figma.js').Obj} Obj
  */
@@ -9,14 +11,14 @@
 export function markTokenset(obj) {
   const _obj = { ...obj };
   Object.keys(_obj).forEach(key => {
-    if (typeof _obj[key] === 'object') {
-      // typeof check so we know it's an object
+    if (isObject(_obj[key])) {
+      // check so we know it's an object
       const nestedObj = /** @type {Obj} */ (_obj[key]);
       Object.keys(nestedObj).forEach(nestedKey => {
         if (nestedKey === 'tokenset') {
           // tokenset value may only be string
           const tokenset = /** @type {string} */ (nestedObj[nestedKey]);
-          if (typeof _obj[tokenset] !== 'object') {
+          if (!isObject(_obj[tokenset])) {
             _obj[tokenset] = {};
           }
           /** @type {Obj} */ (_obj[tokenset])[key] = nestedObj;

src/trim-name.js

@@ -1,3 +1,5 @@
+import { isObject } from './utils/isObject.js';
+
 /**
  * @typedef {import('./style-dictionary-to-figma.js').Obj} Obj
  */
@@ -12,7 +14,7 @@ export function trimName(obj) {
   Object.keys(newObj).forEach(key => {
     if (key === 'name') {
       delete newObj[key];
-    } else if (typeof newObj[key] === 'object') {
+    } else if (isObject(newObj[key]) || Array.isArray(newObj[key])) {
       const newValue = trimName(/** @type {Obj} */ (newObj[key]));
       newObj[key] = Array.isArray(newObj[key]) ? Object.values(newValue) : newValue;
     }

src/trim-value.js

@@ -1,3 +1,4 @@
+import { isObject } from './utils/isObject.js';
 /**
  * @typedef {import('./style-dictionary-to-figma.js').Obj} Obj
  */
@@ -18,11 +19,11 @@ export function trimValue(obj, isValueObj = false) {
         if (matches && matches[1]) {
           newObj[key] = val.replace('.value', '');
         }
-      } else if (typeof newObj[key] === 'object') {
+      } else if (isObject(newObj[key]) || Array.isArray(newObj[key])) {
         const newValue = trimValue(/** @type {Obj} */ (newObj[key]), true);
         newObj[key] = Array.isArray(newObj[key]) ? Object.values(newValue) : newValue;
       }
-    } else if (typeof newObj[key] === 'object') {
+    } else if (isObject(newObj[key])) {
       newObj[key] = trimValue(/** @type {Obj} */ (newObj[key]));
     }
   });

src/use-ref-value.js

@@ -1,3 +1,5 @@
+import { isObject } from './utils/isObject.js';
+
 /**
  * @typedef {import('./style-dictionary-to-figma.js').Obj} Obj
  * @typedef {string|Object|Array<unknown>|number} Value
@@ -35,7 +37,7 @@ export function useRefValue(obj) {
       if (isRefValue(originalValue)) {
         newObj.value = /** @type {Obj} */ (newObj[key]).value;
       }
-    } else if (typeof newObj[key] === 'object') {
+    } else if (isObject(newObj[key]) || Array.isArray(newObj[key])) {
       const newValue = useRefValue(/** @type {Obj} */ (newObj[key]));
       newObj[key] = Array.isArray(newObj[key]) ? Object.values(newValue) : newValue;
     }

src/utils/isObject.js

@@ -0,0 +1,7 @@
+/**
+ * @param {any} val
+ * @returns {boolean}
+ */
+export function isObject(val) {
+  return typeof val === 'object' && val !== null && !Array.isArray(val);
+}

test/trim-value.test.js

@@ -139,4 +139,37 @@ describe('trim-value', () => {
 
     expect(trimmedObj).to.eql(expectedObj);
   });
+
+  it('keeps arbitrary metadata intact', () => {
+    const obj = {
+      core: {
+        color: {
+          primary: {
+            base: {
+              type: 'color',
+              value: '#14b8a6',
+              path: ['core', 'color', 'primary', 'base'],
+            },
+          },
+        },
+      },
+    };
+
+    const expectedObj = {
+      core: {
+        color: {
+          primary: {
+            base: {
+              type: 'color',
+              value: '#14b8a6',
+              path: ['core', 'color', 'primary', 'base'],
+            },
+          },
+        },
+      },
+    };
+
+    const transformedObj = trimValue(obj);
+    expect(transformedObj).to.eql(expectedObj);
+  });
 });

test/utils/isObject.test.js

@@ -0,0 +1,11 @@
+import { expect } from '@esm-bundle/chai';
+import { isObject } from '../../src/utils/isObject.js';
+
+describe('isObject utility', () => {
+  it('detects if something is an object', () => {
+    expect(isObject({})).to.be.true;
+    expect(isObject({ foo: 'bar', qux: { test: '1', testTwo: '2' } })).to.be.true;
+    expect(isObject(['foo', { test: '1', testTwo: '2' }])).to.be.false;
+    expect(isObject(null)).to.be.false;
+  });
+});