From 4eae4a381eb6ffabfa848dccb70cef5109541d4b Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 15 Dec 2021 13:57:59 -0500 Subject: [PATCH 1/2] Don't mutate custom color objects when overriding per-plugin colors --- src/util/resolveConfig.js | 12 ++++++++- tests/basic-usage.test.js | 52 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 63 insertions(+), 1 deletion(-) diff --git a/src/util/resolveConfig.js b/src/util/resolveConfig.js index 3703f56fc46e..15b876e88ff0 100644 --- a/src/util/resolveConfig.js +++ b/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 diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js index 3bb5bf3741c8..2058a92cbe6c 100644 --- a/tests/basic-usage.test.js +++ b/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` +
This should be green text on red background.
+ `, + }, + ], + 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)); + } + `) + }) +}) From f1951d9f09c2042d6cc9161266e8212a646820c4 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 15 Dec 2021 14:03:28 -0500 Subject: [PATCH 2/2] Update changelog --- CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 096dc2593773..1b28ccfe6386 100644 --- a/CHANGELOG.md +++ b/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