Reverse extend array to guarantee correct precedence

Author: adamwathan

__tests__/resolveConfig.test.js

@@ -1639,3 +1639,75 @@ test('plugin theme extensions are added even if user overrides top-level theme c
     plugins: userConfig.plugins,
   })
 })
+
+test('user theme extensions take precedence over plugin theme extensions with the same key', () => {
+  const userConfig = {
+    theme: {
+      extend: {
+        width: {
+          xl: '6rem'
+        },
+      },
+    },
+    plugins: [
+      {
+        config: {
+          theme: {
+            extend: {
+              width: {
+                xl: '4rem',
+              }
+            } 
+          },
+        },
+        handler() {},
+      },
+    ],
+  }
+
+  const defaultConfig = {
+    prefix: '',
+    important: false,
+    separator: ':',
+    theme: {
+      width: {
+        sm: '1rem',
+        md: '2rem',
+        lg: '3rem',
+      },
+      screens: {
+        mobile: '400px',
+      },
+    },
+    variants: {
+      appearance: ['responsive'],
+      borderCollapse: [],
+      borderColors: ['responsive', 'hover', 'focus'],
+    },
+  }
+
+  const result = resolveConfig([userConfig, defaultConfig])
+
+  expect(result).toEqual({
+    prefix: '',
+    important: false,
+    separator: ':',
+    theme: {
+      width: {
+        sm: '1rem',
+        md: '2rem',
+        lg: '3rem',
+        xl: '6rem',
+      },
+      screens: {
+        mobile: '400px',
+      },
+    },
+    variants: {
+      appearance: ['responsive'],
+      borderCollapse: [],
+      borderColors: ['responsive', 'hover', 'focus'],
+    },
+    plugins: userConfig.plugins,
+  })
+})

src/util/resolveConfig.js

@@ -45,10 +45,10 @@ function mergeThemes(themes) {
         }
 
         if (Array.isArray(mergedValue)) {
-          return [...mergedValue, extendValue]
+          return [extendValue, ...mergedValue]
         }
 
-        return [mergedValue, extendValue]
+        return [extendValue, mergedValue]
       })
     }, {}),
   }
@@ -119,7 +119,6 @@ export default function resolveConfig(configs) {
 
   return defaults(
     {
-      // Need to get a default empty object if the config has no theme
       theme: resolveFunctionKeys(
         mergeExtensions(mergeThemes(map(allConfigs, t => get(t, 'theme', {}))))
       ),