tailwindcss 3.0.6 → 3.0.7

package/CHANGELOG.md

@@ -9,6 +9,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [3.0.7] - 2021-12-17
+
+### Fixed
+
+- Don't mutate custom color palette when overriding per-plugin colors ([#6546](https://github.com/tailwindlabs/tailwindcss/pull/6546))
+- Improve circular dependency detection when using `@apply` ([#6588](https://github.com/tailwindlabs/tailwindcss/pull/6588))
+- Only generate variants for non-`user` layers ([#6589](https://github.com/tailwindlabs/tailwindcss/pull/6589))
+- Properly extract classes with arbitrary values in arrays and classes followed by escaped quotes ([#6590](https://github.com/tailwindlabs/tailwindcss/pull/6590))
+- Improve jsx interpolation candidate matching ([#6593](https://github.com/tailwindlabs/tailwindcss/pull/6593))
+- Ensure `@apply` of a rule inside an AtRule works ([#6594](https://github.com/tailwindlabs/tailwindcss/pull/6594))
+
 ## [3.0.6] - 2021-12-16
 
 ### Fixed
@@ -1730,8 +1741,9 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.6...HEAD
-[3.0.6]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.6...v3.0.6
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.7...HEAD
+[3.0.7]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.6...v3.0.7
+[3.0.6]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.5...v3.0.6
 [3.0.5]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.4...v3.0.5
 [3.0.4]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.3...v3.0.4
 [3.0.3]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.2...v3.0.3

package/lib/lib/defaultExtractor.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.defaultExtractor = defaultExtractor;
+const PATTERNS = [
+    /(?:\['([^'\s]+[^<>"'`\s:\\])')/.source,
+    /(?:\["([^"\s]+[^<>"'`\s:\\])")/.source,
+    /(?:\[`([^`\s]+[^<>"'`\s:\\])`)/.source,
+    /([^<>"'`\s]*\[\w*'[^"`\s]*'?\])/.source,
+    /([^<>"'`\s]*\[\w*"[^'`\s]*"?\])/.source,
+    /([^<>"'`\s]*\[\w*\('[^"'`\s]*'\)\])/.source,
+    /([^<>"'`\s]*\[\w*\("[^"'`\s]*"\)\])/.source,
+    /([^<>"'`\s]*\[\w*\('[^"`\s]*'\)\])/.source,
+    /([^<>"'`\s]*\[\w*\("[^'`\s]*"\)\])/.source,
+    /([^<>"'`\s]*\['[^"'`\s]*'\])/.source,
+    /([^<>"'`\s]*\["[^"'`\s]*"\])/.source,
+    /([^<>"'`\s]*\[[^<>"'`\s]*:'[^"'`\s]*'\])/.source,
+    /([^<>"'`\s]*\[[^<>"'`\s]*:"[^"'`\s]*"\])/.source,
+    /([^<>"'`\s]*\[[^"'`\s]+\][^<>"'`\s]*)/.source,
+    /([^<>"'`\s]*[^"'`\s:\\])/.source
+].join('|');
+const BROAD_MATCH_GLOBAL_REGEXP = new RegExp(PATTERNS, 'g');
+const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g;
+function defaultExtractor(content) {
+    let broadMatches = content.matchAll(BROAD_MATCH_GLOBAL_REGEXP);
+    let innerMatches = content.match(INNER_MATCH_GLOBAL_REGEXP) || [];
+    let results = [
+        ...broadMatches,
+        ...innerMatches
+    ].flat().filter((v)=>v !== undefined
+    );
+    return results;
+}

package/lib/lib/expandApplyAtRules.js

@@ -13,17 +13,28 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-function containsBase(selector, classCandidateBase, separator) {
-    return (0, _postcssSelectorParser).default((selectors)=>{
-        let contains = false;
-        selectors.walkClasses((classSelector)=>{
-            if (classSelector.value.split(separator).pop() === classCandidateBase) {
-                contains = true;
-                return false;
-            }
-        });
-        return contains;
-    }).transformSync(selector);
+function extractClasses(node) {
+    let classes = new Set();
+    let container = _postcss.default.root({
+        nodes: [
+            node.clone()
+        ]
+    });
+    container.walkRules((rule)=>{
+        (0, _postcssSelectorParser).default((selectors)=>{
+            selectors.walkClasses((classSelector)=>{
+                classes.add(classSelector.value);
+            });
+        }).processSync(rule.selector);
+    });
+    return Array.from(classes);
+}
+function extractBaseCandidates(candidates, separator) {
+    let baseClasses = new Set();
+    for (let candidate of candidates){
+        baseClasses.add(candidate.split(separator).pop());
+    }
+    return Array.from(baseClasses);
 }
 function prefix(context, selector) {
     let prefix1 = context.tailwindConfig.prefix;
@@ -186,10 +197,36 @@ function processApply(root, context) {
         for (const [parent, candidates] of perParentApplies){
             let siblings = [];
             for (let [applyCandidate, important, rules] of candidates){
-                let base = applyCandidate.split(context.tailwindConfig.separator).pop();
                 for (let [meta, node] of rules){
-                    if (containsBase(parent.selector, base, context.tailwindConfig.separator) && containsBase(node.selector, base, context.tailwindConfig.separator)) {
-                        throw node.error(`Circular dependency detected when using: \`@apply ${applyCandidate}\``);
+                    let parentClasses = extractClasses(parent);
+                    let nodeClasses = extractClasses(node);
+                    // Add base utility classes from the @apply node to the list of
+                    // classes to check whether it intersects and therefore results in a
+                    // circular dependency or not.
+                    //
+                    // E.g.:
+                    // .foo {
+                    //   @apply hover:a; // This applies "a" but with a modifier
+                    // }
+                    //
+                    // We only have to do that with base classes of the `node`, not of the `parent`
+                    // E.g.:
+                    // .hover\:foo {
+                    //   @apply bar;
+                    // }
+                    // .bar {
+                    //   @apply foo;
+                    // }
+                    //
+                    // This should not result in a circular dependency because we are
+                    // just applying `.foo` and the rule above is `.hover\:foo` which is
+                    // unrelated. However, if we were to apply `hover:foo` then we _did_
+                    // have to include this one.
+                    nodeClasses = nodeClasses.concat(extractBaseCandidates(nodeClasses, context.tailwindConfig.separator));
+                    let intersects = parentClasses.some((selector)=>nodeClasses.includes(selector)
+                    );
+                    if (intersects) {
+                        throw node.error(`You cannot \`@apply\` the \`${applyCandidate}\` utility here because it creates a circular dependency.`);
                     }
                     let root = _postcss.default.root({
                         nodes: [
@@ -199,6 +236,42 @@ function processApply(root, context) {
                     let canRewriteSelector = node.type !== 'atrule' || node.type === 'atrule' && node.name !== 'keyframes';
                     if (canRewriteSelector) {
                         root.walkRules((rule)=>{
+                            // Let's imagine you have the following structure:
+                            //
+                            // .foo {
+                            //   @apply bar;
+                            // }
+                            //
+                            // @supports (a: b) {
+                            //   .bar {
+                            //     color: blue
+                            //   }
+                            //
+                            //   .something-unrelated {}
+                            // }
+                            //
+                            // In this case we want to apply `.bar` but it happens to be in
+                            // an atrule node. We clone that node instead of the nested one
+                            // because we still want that @supports rule to be there once we
+                            // applied everything.
+                            //
+                            // However it happens to be that the `.something-unrelated` is
+                            // also in that same shared @supports atrule. This is not good,
+                            // and this should not be there. The good part is that this is
+                            // a clone already and it can be safely removed. The question is
+                            // how do we know we can remove it. Basically what we can do is
+                            // match it against the applyCandidate that you want to apply. If
+                            // it doesn't match the we can safely delete it.
+                            //
+                            // If we didn't do this, then the `replaceSelector` function
+                            // would have replaced this with something that didn't exist and
+                            // therefore it removed the selector altogether. In this specific
+                            // case it would result in `{}` instead of `.something-unrelated {}`
+                            if (!extractClasses(rule).some((thing)=>thing === applyCandidate
+                            )) {
+                                rule.remove();
+                                return;
+                            }
                             rule.selector = replaceSelector(parent.selector, rule.selector, applyCandidate);
                             rule.walkDecls((d)=>{
                                 d.important = meta.important || important;
@@ -220,7 +293,6 @@ function processApply(root, context) {
             let nodes = siblings.sort(([a], [z])=>(0, _bigSign).default(a.sort - z.sort)
             ).map((s)=>s[1]
             );
-            // console.log(parent)
             // `parent` refers to the node at `.abc` in: .abc { @apply mt-2 }
             parent.after(nodes);
         }

package/lib/lib/expandTailwindAtRules.js

@@ -9,6 +9,7 @@ var sharedState = _interopRequireWildcard(require("./sharedState"));
 var _generateRules = require("./generateRules");
 var _bigSign = _interopRequireDefault(require("../util/bigSign"));
 var _cloneNodes = _interopRequireDefault(require("../util/cloneNodes"));
+var _defaultExtractor = require("./defaultExtractor");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -38,31 +39,8 @@ function _interopRequireWildcard(obj) {
     }
 }
 let env = sharedState.env;
-const PATTERNS = [
-    /([^<>"'`\s]*\[\w*'[^"`\s]*'?\])/.source,
-    /([^<>"'`\s]*\[\w*"[^"`\s]*"?\])/.source,
-    /([^<>"'`\s]*\[\w*\('[^"'`\s]*'\)\])/.source,
-    /([^<>"'`\s]*\[\w*\("[^"'`\s]*"\)\])/.source,
-    /([^<>"'`\s]*\[\w*\('[^"`\s]*'\)\])/.source,
-    /([^<>"'`\s]*\[\w*\("[^'`\s]*"\)\])/.source,
-    /([^<>"'`\s]*\['[^"'`\s]*'\])/.source,
-    /([^<>"'`\s]*\["[^"'`\s]*"\])/.source,
-    /([^<>"'`\s]*\[[^<>"'`\s]*:'[^"'`\s]*'\])/.source,
-    /([^<>"'`\s]*\[[^<>"'`\s]*:"[^"'`\s]*"\])/.source,
-    /([^<>"'`\s]*\[[^"'`\s]+\][^<>"'`\s]*)/.source,
-    /([^<>"'`\s]*[^"'`\s:])/.source
-].join('|');
-const BROAD_MATCH_GLOBAL_REGEXP = new RegExp(PATTERNS, 'g');
-const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%]*[^<>"'`\s.(){}[\]#=%:]/g;
 const builtInExtractors = {
-    DEFAULT: (content)=>{
-        let broadMatches = content.match(BROAD_MATCH_GLOBAL_REGEXP) || [];
-        let innerMatches = content.match(INNER_MATCH_GLOBAL_REGEXP) || [];
-        return [
-            ...broadMatches,
-            ...innerMatches
-        ];
-    }
+    DEFAULT: _defaultExtractor.defaultExtractor
 };
 const builtInTransformers = {
     DEFAULT: (content)=>content

package/lib/lib/generateRules.js

@@ -124,6 +124,10 @@ function applyVariant(variant, matches, context) {
         let variantFunctionTuples = context.variantMap.get(variant);
         let result = [];
         for (let [meta, rule1] of matches){
+            // Don't generate variants for user css
+            if (meta.layer === 'user') {
+                continue;
+            }
             let container = _postcss.default.root({
                 nodes: [
                     rule1.clone()

package/lib/util/resolveConfig.js

@@ -11,6 +11,8 @@ var _colors = _interopRequireDefault(require("../public/colors"));
 var _defaults = require("./defaults");
 var _toPath = require("./toPath");
 var _normalizeConfig = require("./normalizeConfig");
+var _isPlainObject = _interopRequireDefault(require("./isPlainObject"));
+var _cloneDeep = require("./cloneDeep");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -143,7 +145,13 @@ function resolveFunctionKeys(object) {
             val = val[path[index++]];
             val = isFunction(val) ? val(resolvePath, configUtils) : val;
         }
-        return val === undefined ? defaultValue : val;
+        if (val === undefined) {
+            return defaultValue;
+        }
+        if ((0, _isPlainObject).default(val)) {
+            return (0, _cloneDeep).cloneDeep(val);
+        }
+        return val;
     };
     resolvePath.theme = resolvePath;
     for(let key1 in configUtils){

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",

package/src/lib/defaultExtractor.js

@@ -0,0 +1,31 @@
+const PATTERNS = [
+  /(?:\['([^'\s]+[^<>"'`\s:\\])')/.source, // ['text-lg' -> text-lg
+  /(?:\["([^"\s]+[^<>"'`\s:\\])")/.source, // ["text-lg" -> text-lg
+  /(?:\[`([^`\s]+[^<>"'`\s:\\])`)/.source, // [`text-lg` -> text-lg
+  /([^<>"'`\s]*\[\w*'[^"`\s]*'?\])/.source, // font-['some_font',sans-serif]
+  /([^<>"'`\s]*\[\w*"[^'`\s]*"?\])/.source, // font-["some_font",sans-serif]
+  /([^<>"'`\s]*\[\w*\('[^"'`\s]*'\)\])/.source, // bg-[url('...')]
+  /([^<>"'`\s]*\[\w*\("[^"'`\s]*"\)\])/.source, // bg-[url("...")]
+  /([^<>"'`\s]*\[\w*\('[^"`\s]*'\)\])/.source, // bg-[url('...'),url('...')]
+  /([^<>"'`\s]*\[\w*\("[^'`\s]*"\)\])/.source, // bg-[url("..."),url("...")]
+  /([^<>"'`\s]*\['[^"'`\s]*'\])/.source, // `content-['hello']` but not `content-['hello']']`
+  /([^<>"'`\s]*\["[^"'`\s]*"\])/.source, // `content-["hello"]` but not `content-["hello"]"]`
+  /([^<>"'`\s]*\[[^<>"'`\s]*:'[^"'`\s]*'\])/.source, // `[content:'hello']` but not `[content:"hello"]`
+  /([^<>"'`\s]*\[[^<>"'`\s]*:"[^"'`\s]*"\])/.source, // `[content:"hello"]` but not `[content:'hello']`
+  /([^<>"'`\s]*\[[^"'`\s]+\][^<>"'`\s]*)/.source, // `fill-[#bada55]`, `fill-[#bada55]/50`
+  /([^<>"'`\s]*[^"'`\s:\\])/.source, //  `px-1.5`, `uppercase` but not `uppercase:`
+].join('|')
+
+const BROAD_MATCH_GLOBAL_REGEXP = new RegExp(PATTERNS, 'g')
+const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g
+
+/**
+ * @param {string} content
+ */
+export function defaultExtractor(content) {
+  let broadMatches = content.matchAll(BROAD_MATCH_GLOBAL_REGEXP)
+  let innerMatches = content.match(INNER_MATCH_GLOBAL_REGEXP) || []
+  let results = [...broadMatches, ...innerMatches].flat().filter((v) => v !== undefined)
+
+  return results
+}

package/src/lib/expandApplyAtRules.js

@@ -1,22 +1,33 @@
 import postcss from 'postcss'
 import parser from 'postcss-selector-parser'
+
 import { resolveMatches } from './generateRules'
 import bigSign from '../util/bigSign'
 import escapeClassName from '../util/escapeClassName'
 
-function containsBase(selector, classCandidateBase, separator) {
-  return parser((selectors) => {
-    let contains = false
+function extractClasses(node) {
+  let classes = new Set()
+  let container = postcss.root({ nodes: [node.clone()] })
 
-    selectors.walkClasses((classSelector) => {
-      if (classSelector.value.split(separator).pop() === classCandidateBase) {
-        contains = true
-        return false
-      }
-    })
+  container.walkRules((rule) => {
+    parser((selectors) => {
+      selectors.walkClasses((classSelector) => {
+        classes.add(classSelector.value)
+      })
+    }).processSync(rule.selector)
+  })
+
+  return Array.from(classes)
+}
+
+function extractBaseCandidates(candidates, separator) {
+  let baseClasses = new Set()
 
-    return contains
-  }).transformSync(selector)
+  for (let candidate of candidates) {
+    baseClasses.add(candidate.split(separator).pop())
+  }
+
+  return Array.from(baseClasses)
 }
 
 function prefix(context, selector) {
@@ -212,15 +223,40 @@ function processApply(root, context) {
       let siblings = []
 
       for (let [applyCandidate, important, rules] of candidates) {
-        let base = applyCandidate.split(context.tailwindConfig.separator).pop()
-
         for (let [meta, node] of rules) {
-          if (
-            containsBase(parent.selector, base, context.tailwindConfig.separator) &&
-            containsBase(node.selector, base, context.tailwindConfig.separator)
-          ) {
+          let parentClasses = extractClasses(parent)
+          let nodeClasses = extractClasses(node)
+
+          // Add base utility classes from the @apply node to the list of
+          // classes to check whether it intersects and therefore results in a
+          // circular dependency or not.
+          //
+          // E.g.:
+          // .foo {
+          //   @apply hover:a; // This applies "a" but with a modifier
+          // }
+          //
+          // We only have to do that with base classes of the `node`, not of the `parent`
+          // E.g.:
+          // .hover\:foo {
+          //   @apply bar;
+          // }
+          // .bar {
+          //   @apply foo;
+          // }
+          //
+          // This should not result in a circular dependency because we are
+          // just applying `.foo` and the rule above is `.hover\:foo` which is
+          // unrelated. However, if we were to apply `hover:foo` then we _did_
+          // have to include this one.
+          nodeClasses = nodeClasses.concat(
+            extractBaseCandidates(nodeClasses, context.tailwindConfig.separator)
+          )
+
+          let intersects = parentClasses.some((selector) => nodeClasses.includes(selector))
+          if (intersects) {
             throw node.error(
-              `Circular dependency detected when using: \`@apply ${applyCandidate}\``
+              `You cannot \`@apply\` the \`${applyCandidate}\` utility here because it creates a circular dependency.`
             )
           }
 
@@ -230,6 +266,42 @@ function processApply(root, context) {
 
           if (canRewriteSelector) {
             root.walkRules((rule) => {
+              // Let's imagine you have the following structure:
+              //
+              // .foo {
+              //   @apply bar;
+              // }
+              //
+              // @supports (a: b) {
+              //   .bar {
+              //     color: blue
+              //   }
+              //
+              //   .something-unrelated {}
+              // }
+              //
+              // In this case we want to apply `.bar` but it happens to be in
+              // an atrule node. We clone that node instead of the nested one
+              // because we still want that @supports rule to be there once we
+              // applied everything.
+              //
+              // However it happens to be that the `.something-unrelated` is
+              // also in that same shared @supports atrule. This is not good,
+              // and this should not be there. The good part is that this is
+              // a clone already and it can be safely removed. The question is
+              // how do we know we can remove it. Basically what we can do is
+              // match it against the applyCandidate that you want to apply. If
+              // it doesn't match the we can safely delete it.
+              //
+              // If we didn't do this, then the `replaceSelector` function
+              // would have replaced this with something that didn't exist and
+              // therefore it removed the selector altogether. In this specific
+              // case it would result in `{}` instead of `.something-unrelated {}`
+              if (!extractClasses(rule).some((thing) => thing === applyCandidate)) {
+                rule.remove()
+                return
+              }
+
               rule.selector = replaceSelector(parent.selector, rule.selector, applyCandidate)
 
               rule.walkDecls((d) => {
@@ -250,7 +322,6 @@ function processApply(root, context) {
       // Inject the rules, sorted, correctly
       let nodes = siblings.sort(([a], [z]) => bigSign(a.sort - z.sort)).map((s) => s[1])
 
-      // console.log(parent)
       // `parent` refers to the node at `.abc` in: .abc { @apply mt-2 }
       parent.after(nodes)
     }

package/src/lib/expandTailwindAtRules.js

@@ -3,33 +3,12 @@ import * as sharedState from './sharedState'
 import { generateRules } from './generateRules'
 import bigSign from '../util/bigSign'
 import cloneNodes from '../util/cloneNodes'
+import { defaultExtractor } from './defaultExtractor'
 
 let env = sharedState.env
 
-const PATTERNS = [
-  /([^<>"'`\s]*\[\w*'[^"`\s]*'?\])/.source, // font-['some_font',sans-serif]
-  /([^<>"'`\s]*\[\w*"[^"`\s]*"?\])/.source, // font-["some_font",sans-serif]
-  /([^<>"'`\s]*\[\w*\('[^"'`\s]*'\)\])/.source, // bg-[url('...')]
-  /([^<>"'`\s]*\[\w*\("[^"'`\s]*"\)\])/.source, // bg-[url("...")]
-  /([^<>"'`\s]*\[\w*\('[^"`\s]*'\)\])/.source, // bg-[url('...'),url('...')]
-  /([^<>"'`\s]*\[\w*\("[^'`\s]*"\)\])/.source, // bg-[url("..."),url("...")]
-  /([^<>"'`\s]*\['[^"'`\s]*'\])/.source, // `content-['hello']` but not `content-['hello']']`
-  /([^<>"'`\s]*\["[^"'`\s]*"\])/.source, // `content-["hello"]` but not `content-["hello"]"]`
-  /([^<>"'`\s]*\[[^<>"'`\s]*:'[^"'`\s]*'\])/.source, // `[content:'hello']` but not `[content:"hello"]`
-  /([^<>"'`\s]*\[[^<>"'`\s]*:"[^"'`\s]*"\])/.source, // `[content:"hello"]` but not `[content:'hello']`
-  /([^<>"'`\s]*\[[^"'`\s]+\][^<>"'`\s]*)/.source, // `fill-[#bada55]`, `fill-[#bada55]/50`
-  /([^<>"'`\s]*[^"'`\s:])/.source, //  `px-1.5`, `uppercase` but not `uppercase:`
-].join('|')
-const BROAD_MATCH_GLOBAL_REGEXP = new RegExp(PATTERNS, 'g')
-const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%]*[^<>"'`\s.(){}[\]#=%:]/g
-
 const builtInExtractors = {
-  DEFAULT: (content) => {
-    let broadMatches = content.match(BROAD_MATCH_GLOBAL_REGEXP) || []
-    let innerMatches = content.match(INNER_MATCH_GLOBAL_REGEXP) || []
-
-    return [...broadMatches, ...innerMatches]
-  },
+  DEFAULT: defaultExtractor,
 }
 
 const builtInTransformers = {

package/src/lib/generateRules.js

@@ -112,6 +112,11 @@ function applyVariant(variant, matches, context) {
     let result = []
 
     for (let [meta, rule] of matches) {
+      // Don't generate variants for user css
+      if (meta.layer === 'user') {
+        continue
+      }
+
       let container = postcss.root({ nodes: [rule.clone()] })
 
       for (let [variantSort, variantFunction] of variantFunctionTuples) {

package/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