Don't mutate custom color palette when overriding per-plugin colors (#…

…6546)

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Don't mutate custom color palette when overriding per-plugin colors ([#6546](https://github.com/tailwindlabs/tailwindcss/pull/6546))
 
 ## [3.0.6] - 2021-12-16
 

src/util/resolveConfig.js

@@ -6,6 +6,8 @@ import colors from '../public/colors'
 import { defaults } from './defaults'
 import { toPath } from './toPath'
 import { normalizeConfig } from './normalizeConfig'
+import isPlainObject from './isPlainObject'
+import { cloneDeep } from './cloneDeep'
 
 function isFunction(input) {
   return typeof input === 'function'
@@ -144,7 +146,15 @@ function resolveFunctionKeys(object) {
       val = isFunction(val) ? val(resolvePath, configUtils) : val
     }
 
-    return val === undefined ? defaultValue : val
+    if (val === undefined) {
+      return defaultValue
+    }
+
+    if (isPlainObject(val)) {
+      return cloneDeep(val)
+    }
+
+    return val
   }
 
   resolvePath.theme = resolvePath

tests/basic-usage.test.js

@@ -57,3 +57,55 @@ test('all plugins are executed that match a candidate', () => {
     `)
   })
 })
+
+test('per-plugin colors with the same key can differ when using a custom colors object', () => {
+  let config = {
+    content: [
+      {
+        raw: html`
+          <div class="bg-theme text-theme">This should be green text on red background.</div>
+        `,
+      },
+    ],
+    theme: {
+      // colors & theme MUST be plain objects
+      // If they're functions here the test passes regardless
+      colors: {
+        theme: {
+          bg: 'red',
+          text: 'green',
+        },
+      },
+      extend: {
+        textColor: {
+          theme: {
+            DEFAULT: 'green',
+          },
+        },
+        backgroundColor: {
+          theme: {
+            DEFAULT: 'red',
+          },
+        },
+      },
+    },
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .bg-theme {
+        --tw-bg-opacity: 1;
+        background-color: rgb(255 0 0 / var(--tw-bg-opacity));
+      }
+      .text-theme {
+        --tw-text-opacity: 1;
+        color: rgb(0 128 0 / var(--tw-text-opacity));
+      }
+    `)
+  })
+})