fix: allow falsy token values for outputReferences, e.g. 0

amzn · Oct 24, 2023 · 83a9934 · 83a9934
1 parent f88fe97
commit 83a9934
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 1 deletion.
diff --git a/__tests__/common/formatHelpers/createPropertyFormatter.test.js b/__tests__/common/formatHelpers/createPropertyFormatter.test.js
@@ -114,6 +114,34 @@ const numberDictionary = createDictionary({
         value: 10,
         type: 'dimension'
       },
+      zero: {
+        original: {
+          value: 0,
+          type: 'dimension',
+        },
+        attributes: {
+          category: 'tokens',
+          type: 'zero',
+        },
+        name: 'tokens-zero',
+        path: ['tokens', 'zero'],
+        value: 0,
+        type: 'dimension',
+      },
+      'ref-zero': {
+        original: {
+          value: '{tokens.zero}',
+          type: 'dimension',
+        },
+        attributes: {
+          category: 'tokens',
+          type: 'ref-zero',
+        },
+        name: 'tokens-ref-zero',
+        path: ['tokens', 'ref-zero'],
+        value: 0,
+        type: 'dimension',
+      },
     }
   }
 })
@@ -229,6 +257,12 @@ describe('common', () => {
           expect(propFormatter(numberDictionary.tokens.tokens.ref)).toEqual('  --tokens-ref: var(--tokens-foo);');
         })
 
+        it('should support valid falsy values for outputReferences', () => {
+          const propFormatter = createPropertyFormatter({ outputReferences: true, dictionary: numberDictionary, format: 'css' })
+          expect(propFormatter(numberDictionary.tokens.tokens.zero)).toEqual('  --tokens-zero: 0;');
+          expect(propFormatter(numberDictionary.tokens.tokens['ref-zero'])).toEqual('  --tokens-ref-zero: var(--tokens-zero);');
+        })
+
         it('should support multiple references for outputReferences', () => {
           const propFormatter = createPropertyFormatter({ outputReferences: true, dictionary: multiDictionary, format: 'css' })
           expect(propFormatter(multiDictionary.tokens.tokens.foo)).toEqual('  --tokens-foo: 10px;');

diff --git a/lib/common/formatHelpers/createPropertyFormatter.js b/lib/common/formatHelpers/createPropertyFormatter.js
@@ -184,7 +184,10 @@ function createPropertyFormatter({
         // because Style Dictionary resolved this in the resolution step.
         // Here we are undoing that by replacing the value with
         // the reference's name
-        if (ref.value && ref.name) {
+
+        // Safe way to check if object contains a property.
+        // below can be replaced with the new safe Object.hasOwn() in evergreen browsers / Node 16.9.0 onwards
+        if (Object.prototype.hasOwnProperty.call(ref, 'value') && Object.prototype.hasOwnProperty.call(ref, 'name')) {
           const replaceFunc = function() {
             if (format === 'css') {
               if (outputReferenceFallbacks) {