From 0509f92db26ff93236106abedb18a5552609fb3e Mon Sep 17 00:00:00 2001
From: Ryan Ogden <ryan@expandtheroom.com>
Date: Sun, 13 Dec 2020 10:13:42 -0500
Subject: [PATCH] Fix theme replacement issue #18

---
 README.md                  |  6 ++----
 lib/tailwindConfigUtils.js | 20 +++++++++++++++-----
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 5f8df72..7a47f0f 100644
--- a/README.md
+++ b/README.md
@@ -97,16 +97,14 @@ module.exports = {
     },
     configViewer: {
       themeReplacements: {
-        colors: {
-          black: '#000000'
-        }
+        'var(--color-black)': '#000000'
       }
     }
   }
 }
 ```
 
-You can replace any value in your theme for display in the config viewer by setting the corresponding property/value in the `themeReplacements` object.
+You can replace any value in your theme for display in the config viewer by setting the corresponding `valueToFind: valueToReplace` in the `themeReplacements` object.
 
 ## Roadmap
 
diff --git a/lib/tailwindConfigUtils.js b/lib/tailwindConfigUtils.js
index 55e91bf..a7c95bc 100644
--- a/lib/tailwindConfigUtils.js
+++ b/lib/tailwindConfigUtils.js
@@ -19,7 +19,6 @@ const transformConfig = config => {
   config.theme.backgroundColor = flattenColorPalette(config.theme.backgroundColor)
   config.theme.textColor = flattenColorPalette(config.theme.textColor)
   config.theme.borderColor = flattenColorPalette(config.theme.borderColor)
-
   removeConfigProps(config, [
     'variants',
     'purge',
@@ -34,16 +33,27 @@ const transformConfig = config => {
 const replaceWithOverrides = (theme) => {
   if (theme.configViewer && theme.configViewer.themeReplacements) {
     Object.keys(theme.configViewer.themeReplacements).forEach(key => {
-      theme[key] = {
-        ...theme[key],
-        ...theme.configViewer.themeReplacements[key]
-      }
+      theme = findAndReplaceRecursively(theme, key, theme.configViewer.themeReplacements[key])
     })
   }
 
   return theme
 }
 
+function findAndReplaceRecursively (target, find, replaceWith) {
+  if (typeof target !== 'object') {
+    if (target === find) return replaceWith
+    return target
+  }
+
+  return Object.keys(target)
+    .reduce((carry, key) => {
+      const val = target[key]
+      carry[key] = findAndReplaceRecursively(val, find, replaceWith)
+      return carry
+    }, {})
+}
+
 const removeConfigProps = (config, props) => {
   props.forEach(prop => delete config[prop])
 }