fix(references): getReferences now searches the entire object (#812)

* fix(references): getReferences now searches the entire object rather than 1 level deep
* chore(references): cleaning up code

__integration__/__snapshots__/objectValues.test.js.snap

@@ -76,6 +76,32 @@ exports[`integration object values css/variables hsl syntax with references shou
 "
 `;
 
+exports[`integration object values css/variables shadow should match snapshot 1`] = `
+"/**
+ * Do not edit directly
+ * Generated on Sat, 01 Jan 2000 00:00:00 GMT
+ */
+
+:root {
+  --shadow-light: #ff0000, #40bf40;
+  --shadow-dark: #40bf40, #ff0000;
+}
+"
+`;
+
+exports[`integration object values css/variables shadow should match snapshot with references 1`] = `
+"/**
+ * Do not edit directly
+ * Generated on Sat, 01 Jan 2000 00:00:00 GMT
+ */
+
+:root {
+  --shadow-light: var(--color-red), var(--color-green);
+  --shadow-dark: var(--color-green), var(--color-red);
+}
+"
+`;
+
 exports[`integration object values scss/variables should match snapshot 1`] = `
 "
 // Do not edit directly

__integration__/objectValues.test.js

@@ -49,6 +49,22 @@ describe('integration', () => {
               style: "solid"
             }
           },
+        },
+        shadow: {
+          light: {
+            value: [{
+              color: "{color.red.value}"
+            },{
+              color: "{color.green.value}"
+            }]
+          },
+          dark: {
+            value: [{
+              color: "{color.green.value}"
+            },{
+              color: "{color.red.value}"
+            }]
+          }
         }
       },
       transform: {
@@ -75,6 +91,14 @@ describe('integration', () => {
           transformer: (token) => {
             return `${token.value.width} ${token.value.style} ${token.value.color}`
           }
+        },
+        shadow: {
+          type: 'value',
+          transitive: true,
+          matcher: (token) => token.attributes.category === 'shadow',
+          transformer: (token) => {
+            return token.value.map(obj => obj.color).join(', ')
+          }
         }
       },
       platforms: {
@@ -129,6 +153,21 @@ describe('integration', () => {
           }]
         },
 
+        cssShadow: {
+          buildPath,
+          transforms: StyleDictionary.transformGroup.css.concat([`shadow`,`hslToHex`]),
+          files: [{
+            destination: 'shadow.css',
+            format: 'css/variables',
+            filter: (token) => token.attributes.category === `shadow`,
+          },{
+            destination: 'shadowWithReferences.css',
+            format: 'css/variables',
+            filter: (token) => token.attributes.category === `shadow`,
+            options
+          }]
+        },
+
         scss: {
           buildPath,
           transforms: StyleDictionary.transformGroup.css.concat([`cssBorder`,`hslToHex`]),
@@ -188,6 +227,18 @@ describe('integration', () => {
           });
         });
       });
+
+      describe('shadow', () => {
+        it(`should match snapshot`, () => {
+          const output = fs.readFileSync(`${buildPath}shadow.css`, {encoding:'UTF-8'});
+          expect(output).toMatchSnapshot();
+        });
+
+        it(`should match snapshot with references`, () => {
+          const output = fs.readFileSync(`${buildPath}shadowWithReferences.css`, {encoding:'UTF-8'});
+          expect(output).toMatchSnapshot();
+        });
+      })
     });
 
     describe('scss/variables', () => {

lib/common/formatHelpers/sortByReference.js

@@ -30,6 +30,13 @@
     const aComesFirst = -1;
     const bComesFirst = 1;
 
+    // return early if a or b ar undefined
+    if (typeof a === 'undefined') {
+      return aComesFirst;
+    } else if (typeof b === 'undefined') {
+      return bComesFirst;
+    }
+
     // If token a uses a reference and token b doesn't, b might come before a
     // read on..
     if (a.original && dictionary.usesReference(a.original.value)) {

lib/utils/references/getReferences.js

@@ -28,16 +28,13 @@ const GroupMessages = require('../groupMessages');
  *
  * @memberof Dictionary
  * @param {string} value the value that contains a reference
+ * @param {object[]} references array of token's references because a token's value can contain multiple references due to string interpolation
  * @returns {any}
  */
-function getReferences(value) {
+function getReferences(value, references=[]) {
   // `this` is the dictionary object passed to formats and actions
   const self = this;
   const regex = createReferenceRegex({});
-  // because a token's value can contain multiple references due to string interpolation
-  // "{size.padding.base.value} {color.border.primary.value}"
-  // references is an array of 0 or more references
-  const references = [];
 
   // this will update the references array with the referenced tokens it finds.
   function findReference(match, variable) {
@@ -70,6 +67,10 @@ function getReferences(value) {
       if (value.hasOwnProperty(key) && typeof value[key] === 'string') {
         value[key].replace(regex, findReference);
       }
+      // if it is an object, we go further down the rabbit hole
+      if (value.hasOwnProperty(key) && typeof value[key] === 'object') {
+        self.getReferences(value[key], references);
+      }
     }
   }