Fix theme replacement issue #18

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
 

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])
 }