From 40413690a2eb1c610a6471ca1b61020e486b55d4 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Tue, 5 Feb 2019 20:18:19 -0500
Subject: [PATCH] Add support for lazy values in theme

---
 __tests__/mergeConfigWithDefaults.test.js | 130 ++++++++++++++++++++++
 src/util/mergeConfigWithDefaults.js       |  11 +-
 2 files changed, 140 insertions(+), 1 deletion(-)

diff --git a/__tests__/mergeConfigWithDefaults.test.js b/__tests__/mergeConfigWithDefaults.test.js
index f92bc9494..0d0f68611 100644
--- a/__tests__/mergeConfigWithDefaults.test.js
+++ b/__tests__/mergeConfigWithDefaults.test.js
@@ -300,3 +300,133 @@ test('missing top level keys are pulled from the default config', () => {
     },
   })
 })
+
+test('functions in the default theme section are lazily evaluated', () => {
+  const userConfig = {
+    theme: {
+      colors: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+    },
+  }
+
+  const defaultConfig = {
+    prefix: '-',
+    important: false,
+    separator: ':',
+    theme: {
+      colors: {
+        cyan: 'cyan',
+        magenta: 'magenta',
+        yellow: 'yellow',
+      },
+      backgroundColors: ({ colors }) => colors,
+      textColors: ({ colors }) => colors,
+    },
+    variants: {
+      backgroundColors: ['responsive', 'hover', 'focus'],
+      textColors: ['responsive', 'hover', 'focus'],
+    },
+  }
+
+  const result = mergeConfigWithDefaults(userConfig, defaultConfig)
+
+  expect(result).toEqual({
+    prefix: '-',
+    important: false,
+    separator: ':',
+    theme: {
+      colors: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+      backgroundColors: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+      textColors: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+    },
+    variants: {
+      backgroundColors: ['responsive', 'hover', 'focus'],
+      textColors: ['responsive', 'hover', 'focus'],
+    },
+  })
+})
+
+test('functions in the user theme section are lazily evaluated', () => {
+  const userConfig = {
+    theme: {
+      colors: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+      backgroundColors: ({ colors }) => ({
+        ...colors,
+        customBackground: '#bada55',
+      }),
+      textColors: ({ colors }) => ({
+        ...colors,
+        customText: '#facade',
+      }),
+    },
+  }
+
+  const defaultConfig = {
+    prefix: '-',
+    important: false,
+    separator: ':',
+    theme: {
+      colors: {
+        cyan: 'cyan',
+        magenta: 'magenta',
+        yellow: 'yellow',
+      },
+      backgroundColors: ({ colors }) => colors,
+      textColors: ({ colors }) => colors,
+    },
+    variants: {
+      backgroundColors: ['responsive', 'hover', 'focus'],
+      textColors: ['responsive', 'hover', 'focus'],
+    },
+  }
+
+  const result = mergeConfigWithDefaults(userConfig, defaultConfig)
+
+  expect(result).toEqual({
+    prefix: '-',
+    important: false,
+    separator: ':',
+    theme: {
+      colors: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+      backgroundColors: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+        customBackground: '#bada55',
+      },
+      textColors: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+        customText: '#facade',
+      },
+    },
+    variants: {
+      backgroundColors: ['responsive', 'hover', 'focus'],
+      textColors: ['responsive', 'hover', 'focus'],
+    },
+  })
+})
diff --git a/src/util/mergeConfigWithDefaults.js b/src/util/mergeConfigWithDefaults.js
index fac9dbb32..57c1fceb0 100644
--- a/src/util/mergeConfigWithDefaults.js
+++ b/src/util/mergeConfigWithDefaults.js
@@ -1,9 +1,18 @@
 import _ from 'lodash'
 
+function resolveFunctionKeys(object) {
+  return Object.keys(object).reduce((resolved, key) => {
+    return {
+      ...resolved,
+      [key]: _.isFunction(object[key]) ? object[key](object) : object[key]
+    }
+  }, {})
+}
+
 export default function(userConfig, defaultConfig) {
   return _.defaults(
     {
-      theme: _.defaults(userConfig.theme, defaultConfig.theme),
+      theme: resolveFunctionKeys(_.defaults(userConfig.theme, defaultConfig.theme)),
       variants: _.defaults(userConfig.variants, defaultConfig.variants),
     },
     userConfig,