From c30d4c1f71608002911a447f9e9a983a14b49ae4 Mon Sep 17 00:00:00 2001
From: Joren Broekema <joren.broekema@gmail.com>
Date: Thu, 14 Jul 2022 14:48:33 +0200
Subject: [PATCH] feat: ignoreUseRefValue, ignore token converted to original
 ref (#18)

---
 .changeset/quiet-pigs-march.md |   5 ++
 README.md                      |   2 +-
 src/use-ref-value.js           |   2 +-
 test/use-ref-value.test.js     | 107 +++++++++++++++++++++++++++++++++
 4 files changed, 114 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/quiet-pigs-march.md

diff --git a/.changeset/quiet-pigs-march.md b/.changeset/quiet-pigs-march.md
new file mode 100644
index 0000000..306592d
--- /dev/null
+++ b/.changeset/quiet-pigs-march.md
@@ -0,0 +1,5 @@
+---
+'@divriots/style-dictionary-to-figma': patch
+---
+
+Allow passing ignoreUseRefValue boolean metadata as a sibling to the token value property. It will use the resolved value rather than using the original reference value after conversion when this is set to true.
diff --git a/README.md b/README.md
index a10383b..bac334a 100644
--- a/README.md
+++ b/README.md
@@ -25,7 +25,7 @@ Used by Design Systems in [Backlight](https://backlight.dev) using design tokens
 - 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.
 - 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
+- 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.
 
 ## Usage
 
diff --git a/src/use-ref-value.js b/src/use-ref-value.js
index f333d9e..3b528ba 100644
--- a/src/use-ref-value.js
+++ b/src/use-ref-value.js
@@ -9,7 +9,7 @@
 export function useRefValue(obj) {
   const newObj = { ...obj };
   Object.keys(newObj).forEach(key => {
-    if (key === 'original') {
+    if (key === 'original' && !newObj.ignoreUseRefValue) {
       newObj.value = /** @type {Obj} */ (newObj[key]).value;
     } else if (typeof newObj[key] === 'object') {
       const newValue = useRefValue(/** @type {Obj} */ (newObj[key]));
diff --git a/test/use-ref-value.test.js b/test/use-ref-value.test.js
index 75d409b..c5ba411 100644
--- a/test/use-ref-value.test.js
+++ b/test/use-ref-value.test.js
@@ -18,4 +18,111 @@ describe('trim-name', () => {
     const transformedObj = useRefValue(obj);
     expect(transformedObj).to.eql(expectedObj);
   });
+
+  // See https://github.com/divriots/style-dictionary-to-figma/issues/17
+  // This "feature" is a workaround for https://github.com/six7/figma-tokens/issues/706
+  it('it does not use ref value when it encounters ignoreUseRefValue metadata', () => {
+    const obj = {
+      shadow: {
+        2: {
+          value: {
+            x: '0',
+            y: '1',
+            blur: '2',
+            spread: '0',
+            color: '#000000',
+            type: 'dropShadow',
+          },
+        },
+        4: {
+          value: {
+            x: '0',
+            y: '2',
+            blur: '4',
+            spread: '0',
+            color: '#000000',
+            type: 'dropShadow',
+          },
+        },
+      },
+      elevation: {
+        small: {
+          ignoreUseRefValue: true,
+          original: {
+            value: ['{shadow.4}', '{shadow.2}'],
+          },
+          value: [
+            {
+              x: '0',
+              y: '2',
+              blur: '4',
+              spread: '0',
+              color: '#000000',
+              type: 'dropShadow',
+            },
+            {
+              x: '0',
+              y: '1',
+              blur: '2',
+              spread: '0',
+              color: '#000000',
+              type: 'dropShadow',
+            },
+          ],
+        },
+      },
+    };
+    const expectedObj = {
+      shadow: {
+        2: {
+          value: {
+            x: '0',
+            y: '1',
+            blur: '2',
+            spread: '0',
+            color: '#000000',
+            type: 'dropShadow',
+          },
+        },
+        4: {
+          value: {
+            x: '0',
+            y: '2',
+            blur: '4',
+            spread: '0',
+            color: '#000000',
+            type: 'dropShadow',
+          },
+        },
+      },
+      elevation: {
+        small: {
+          ignoreUseRefValue: true,
+          original: {
+            value: ['{shadow.4}', '{shadow.2}'],
+          },
+          value: [
+            {
+              x: '0',
+              y: '2',
+              blur: '4',
+              spread: '0',
+              color: '#000000',
+              type: 'dropShadow',
+            },
+            {
+              x: '0',
+              y: '1',
+              blur: '2',
+              spread: '0',
+              color: '#000000',
+              type: 'dropShadow',
+            },
+          ],
+        },
+      },
+    };
+    const transformedObj = useRefValue(obj);
+    expect(transformedObj).to.eql(expectedObj);
+  });
 });