Add ability to replace theme values used in the config viewer

Addresses #11

README.md

@@ -57,6 +57,56 @@ If an output directory isn't specificied it will be output to `tcv-build`.
 |----|----|----|
 |-c, --config|`tailwind.config.js`|Path to your Tailwind config file|
 
+## Configuration
+
+You can declare a `configViewer` property in your Tailwind configuration's theme object in order to customize certain aspects of the config viewer.
+
+```js
+module.exports = {
+  theme: {
+    // ...your Tailwind theme config
+    configViewer: {
+      // ... configViewer Options
+    }
+  }
+}
+```
+Currently it only supports one config option: `themeReplacements`.
+
+### themeReplacements
+
+In some instances you may want to replace values used in your Tailwind config when it is displayed in the config viewer. One scenario where this is necessary is when you are using CSS variables for your theme values:
+
+```js
+module.exports = {
+  theme: {
+    colors: {
+      black: 'var(--color-black)'
+    }
+  }
+}
+```
+
+In order for the config viewer to properly display this color, you need to provide a replacement for it:
+
+```js
+module.exports = {
+  theme: {
+    colors: {
+      black: 'var(--color-black)'
+    },
+    configViewer: {
+      themeReplacements: {
+        colors: {
+          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.
 
 ## Roadmap
 

lib/tailwindConfigUtils.js

@@ -1,15 +1,48 @@
 const path = require('path')
 const resolveTailwindConfig = require('tailwindcss/resolveConfig')
+const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default
 
 const resolveConfigPath = configPath => path.resolve(process.cwd(), configPath)
 
 const resolveConfig = configPath => {
   const config = require(resolveConfigPath(configPath))
-  return resolveTailwindConfig(config)
+  return transformConfig(resolveTailwindConfig(config))
 }
 
 const resolveConfigToJson = configPath => JSON.stringify(resolveConfig(configPath))
 
+const transformConfig = config => {
+  config.theme = replaceWithOverrides(config.theme)
+  config.theme.colors = flattenColorPalette(config.theme.colors)
+
+  removeConfigProps(config, [
+    'variants',
+    'purge',
+    'plugins',
+    'corePlugins',
+    'target'
+  ])
+
+  return 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]
+      }
+    })
+  }
+
+  return theme
+}
+
+const removeConfigProps = (config, props) => {
+  props.forEach(prop => delete config[prop])
+}
+
 module.exports = {
   resolveConfig,
   resolveConfigPath,

src/components/Canvas/themeComponentMapper.js

@@ -1,5 +1,3 @@
-import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette'
-
 /**
  * Maps Canvas components to theme prop in TW config
  */
@@ -8,7 +6,7 @@ export default function themeComponentMapper (theme) {
     {
       component: 'Colors',
       title: 'Colors',
-      data: flattenColorPalette(theme.colors)
+      data: theme.colors
     },
     {
       component: 'Spacing',