themeReplacements options not working correctly

[rogden]

see: https://github.com/rogden/tailwind-config-viewer/pull/17

The current implementation of the themeReplacements option doesn't work unless you specify the expanded key/value pair. For instance:

module.exports = {
  theme: {
    colors: {
      black: 'var(--color-black)'
    },
    configViewer: {
      themeReplacements: {
        colors: {
          black: '#000000'
        }
      }
    }
  }
}

won't result in the black color having the value of #000000 in the config viewer since we are displaying backgroundColor, textColor and borderColor and the replacement happens after the config is resolved.

In order for this to work correctly you would need to specify the following:

module.exports = {
  theme: {
    colors: {
      black: 'var(--color-black)'
    },
    configViewer: {
      themeReplacements: {
        backgroundColor: {
          black: '#000000'
        },
        borderColor: {
          black: '#000000'
        },
        textColor: {
          black: '#000000'
        }
      }
    }
  }
}

Given that the most common scenario for themeReplacements is to replace css variables that are used for values in your tailwind.config file, the following would be a better implementation:

module.exports = {
  theme: {
    colors: {
      black: 'var(--color-black)'
    },
    configViewer: {
      themeReplacements: {
        'var(--color-black)': '#000000'
      }
    }
  }
}

Then a simple find/replace on the resolved config JSON string will handle the replacements.

Unfortunately this will be a small breaking change.