Apply config modifications to default config, before resolving config

Author: adamwathan

__tests__/resolveConfig.test.js

@@ -1359,3 +1359,105 @@ test('more than two config objects can be resolved', () => {
     },
   })
 })
+test('plugin config modifications are applied', () => {
+  const userConfig = {
+    plugins: [
+      {
+        modifyConfig: function (config) {
+          return {
+            ...config,
+            prefix: 'tw-'
+          }
+        },
+        handler: function () {}
+      }
+    ]
+  }
+
+  const defaultConfig = {
+    prefix: '',
+    important: false,
+    separator: ':',
+    theme: {
+      screens: {
+        mobile: '400px',
+      },
+    },
+    variants: {
+      appearance: ['responsive'],
+      borderCollapse: [],
+      borderColors: ['responsive', 'hover', 'focus'],
+    },
+  }
+
+  const result = resolveConfig([userConfig, defaultConfig])
+  
+  expect(result).toEqual({
+    prefix: 'tw-',
+    important: false,
+    separator: ':',
+    theme: {
+      screens: {
+        mobile: '400px',
+      },
+    },
+    variants: {
+      appearance: ['responsive'],
+      borderCollapse: [],
+      borderColors: ['responsive', 'hover', 'focus'],
+    },
+    plugins: userConfig.plugins,
+  })
+})
+
+test('user config takes precedence over plugin config modifications', () => {
+  const userConfig = {
+    prefix: 'user-',
+    plugins: [
+      {
+        modifyConfig: function (config) {
+          return {
+            ...config,
+            prefix: 'plugin-'
+          }
+        },
+        handler: function () {}
+      }
+    ]
+  }
+
+  const defaultConfig = {
+    prefix: '',
+    important: false,
+    separator: ':',
+    theme: {
+      screens: {
+        mobile: '400px',
+      },
+    },
+    variants: {
+      appearance: ['responsive'],
+      borderCollapse: [],
+      borderColors: ['responsive', 'hover', 'focus'],
+    },
+  }
+
+  const result = resolveConfig([userConfig, defaultConfig])
+  
+  expect(result).toEqual({
+    prefix: 'user-',
+    important: false,
+    separator: ':',
+    theme: {
+      screens: {
+        mobile: '400px',
+      },
+    },
+    variants: {
+      appearance: ['responsive'],
+      borderCollapse: [],
+      borderColors: ['responsive', 'hover', 'focus'],
+    },
+    plugins: userConfig.plugins,
+  })
+})

__tmp_4/tailwind.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+        theme: {
+          screens: {
+            mobile: '400px',
+          },
+        },
+      }

src/index.js

@@ -44,12 +44,6 @@ function resolveConfigPath(filePath) {
   }
 }
 
-function applyPluginConfigModifications(config) {
-  return [...config.plugins].reduce((modified, plugin) => {
-    return _.get(plugin, 'modifyConfig', _.identity)(modified)
-  }, config)
-}
-
 const getConfigFunction = config => () => {
   if (_.isUndefined(config) && !_.isObject(config)) {
     return resolveConfig([defaultConfig])
@@ -63,7 +57,7 @@ const getConfigFunction = config => () => {
 
   const configObject = _.isObject(config) ? _.get(config, 'config', config) : require(config)
 
-  return resolveConfig([applyPluginConfigModifications(configObject), defaultConfig])
+  return resolveConfig([configObject, defaultConfig])
 }
 
 const plugin = postcss.plugin('tailwind', config => {

src/util/resolveConfig.js

@@ -3,6 +3,8 @@ import mergeWith from 'lodash/mergeWith'
 import isFunction from 'lodash/isFunction'
 import isUndefined from 'lodash/isUndefined'
 import defaults from 'lodash/defaults'
+import identity from 'lodash/identity'
+import get from 'lodash/get'
 import map from 'lodash/map'
 import get from 'lodash/get'
 import toPath from 'lodash/toPath'
@@ -22,6 +24,12 @@ const configUtils = {
   },
 }
 
+function applyPluginConfigModifications(config, plugins) {
+  return plugins.reduce((modified, plugin) => {
+    return get(plugin, 'modifyConfig', identity)(modified)
+  }, config)
+}
+
 function value(valueToResolve, ...args) {
   return isFunction(valueToResolve) ? valueToResolve(...args) : valueToResolve
 }
@@ -94,7 +102,10 @@ function resolveFunctionKeys(object) {
   }, {})
 }
 
-export default function resolveConfig(configs) {
+export default function resolveConfig([userConfig, defaultConfig]) {
+  const modifiedDefaultConfig = applyPluginConfigModifications(defaultConfig, get(userConfig, 'plugins', []))
+  const configs = [userConfig, modifiedDefaultConfig]
+
   return defaults(
     {
       // Need to get a default empty object if the config has no theme