tailwindcss 3.0.5 → 3.0.9

package/CHANGELOG.md

@@ -9,6 +9,43 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [3.0.9] - 2022-01-03
+
+### Fixed
+
+- Improve `DEBUG` flag ([#6797](https://github.com/tailwindlabs/tailwindcss/pull/6797), [#6804](https://github.com/tailwindlabs/tailwindcss/pull/6804))
+- Ensure we can use `<` and `>` characters in modifiers ([#6851](https://github.com/tailwindlabs/tailwindcss/pull/6851))
+- Validate `theme()` works in arbitrary values ([#6852](https://github.com/tailwindlabs/tailwindcss/pull/6852))
+- Properly detect `theme()` value usage in arbitrary properties ([#6854](https://github.com/tailwindlabs/tailwindcss/pull/6854))
+- Improve collapsing of duplicate declarations ([#6856](https://github.com/tailwindlabs/tailwindcss/pull/6856))
+- Remove support for `TAILWIND_MODE=watch` ([#6858](https://github.com/tailwindlabs/tailwindcss/pull/6858))
+
+## [3.0.8] - 2021-12-28
+
+### Fixed
+
+- Reduce specificity of `abbr` rule in preflight ([#6671](https://github.com/tailwindlabs/tailwindcss/pull/6671))
+- Support HSL with hue units in arbitrary values ([#6726](https://github.com/tailwindlabs/tailwindcss/pull/6726))
+- Add `node16-linux-arm64` target for standalone CLI ([#6693](https://github.com/tailwindlabs/tailwindcss/pull/6693))
+
+## [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
+
+- Support square bracket notation in paths ([#6519](https://github.com/tailwindlabs/tailwindcss/pull/6519))
+- Ensure all plugins are executed for a given candidate ([#6540](https://github.com/tailwindlabs/tailwindcss/pull/6540))
+
 ## [3.0.5] - 2021-12-15
 
 ### Fixed
@@ -19,7 +56,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
-- Insert always on defaults layer in correct spot ([#6526](https://github.com/tailwindlabs/tailwindcss/pull/6526))
+- Insert always-on defaults layer in correct spot ([#6526](https://github.com/tailwindlabs/tailwindcss/pull/6526))
 
 ## [3.0.3] - 2021-12-15
 
@@ -34,7 +71,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Don't output unparsable values ([#6469](https://github.com/tailwindlabs/tailwindcss/pull/6469))
 - Fix text decoration utilities from overriding the new text decoration color/style/thickness utilities when used with a modifier ([#6378](https://github.com/tailwindlabs/tailwindcss/pull/6378))
 - Move defaults to their own always-on layer ([#6500](https://github.com/tailwindlabs/tailwindcss/pull/6500))
-- Support negative values in safelist patterns ([6480](https://github.com/tailwindlabs/tailwindcss/pull/6480))
+- Support negative values in safelist patterns ([#6480](https://github.com/tailwindlabs/tailwindcss/pull/6480))
 
 ## [3.0.2] - 2021-12-13
 
@@ -1723,7 +1760,11 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.5...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.9...HEAD
+[3.0.9]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.8...v3.0.9
+[3.0.8]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.7...v3.0.8
+[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/README.md

@@ -1,10 +1,14 @@
 <p>
-    <a href="https://tailwindcss.com/" target="_blank">
-      <img alt="Tailwind CSS" width="350" src="https://refactoringui.nyc3.cdn.digitaloceanspaces.com/tailwind-logo-sticker.svg">
-    </a><br>
-    A utility-first CSS framework for rapidly building custom user interfaces.
+  <a href="https://tailwindcss.com/#gh-light-mode-only" target="_blank">
+    <img src="./.github/logo-light.svg" alt="Tailwind CSS" width="350" height="70">
+  </a>
+  <a href="https://tailwindcss.com/#gh-dark-mode-only" target="_blank">
+    <img src="./.github/logo-dark.svg" alt="Tailwind CSS" width="350" height="70">
+  </a>
 </p>
 
+A utility-first CSS framework for rapidly building custom user interfaces.
+
 <p>
     <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/workflow/status/tailwindlabs/tailwindcss/Node.js%20CI" alt="Build Status"></a>
     <a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>

package/lib/css/preflight.css

@@ -58,7 +58,7 @@ hr {
 Add the correct text decoration in Chrome, Edge, and Safari.
 */
 
-abbr[title] {
+abbr:where([title]) {
   text-decoration: underline dotted;
 }
 

package/lib/index.js

@@ -1,6 +1,5 @@
 "use strict";
 var _setupTrackingContext = _interopRequireDefault(require("./lib/setupTrackingContext"));
-var _setupWatchingContext = _interopRequireDefault(require("./lib/setupWatchingContext"));
 var _processTailwindFeatures = _interopRequireDefault(require("./processTailwindFeatures"));
 var _sharedState = require("./lib/sharedState");
 function _interopRequireDefault(obj) {
@@ -18,8 +17,7 @@ module.exports = function tailwindcss(configOrPath) {
                 return root;
             },
             function(root, result) {
-                let setupContext = _sharedState.env.TAILWIND_MODE === 'watch' ? (0, _setupWatchingContext).default(configOrPath) : (0, _setupTrackingContext).default(configOrPath);
-                (0, _processTailwindFeatures).default(setupContext)(root, result);
+                (0, _processTailwindFeatures).default((0, _setupTrackingContext).default(configOrPath))(root, result);
             },
             _sharedState.env.DEBUG && function(root) {
                 console.timeEnd('JIT TOTAL');

package/lib/lib/collapseDuplicateDeclarations.js

@@ -8,6 +8,7 @@ function collapseDuplicateDeclarations() {
         root.walkRules((node)=>{
             let seen = new Map();
             let droppable = new Set([]);
+            let byProperty = new Map();
             node.walkDecls((decl)=>{
                 // This could happen if we have nested selectors. In that case the
                 // parent will loop over all its declarations but also the declarations
@@ -17,13 +18,63 @@ function collapseDuplicateDeclarations() {
                     return;
                 }
                 if (seen.has(decl.prop)) {
-                    droppable.add(seen.get(decl.prop));
+                    // Exact same value as what we have seen so far
+                    if (seen.get(decl.prop).value === decl.value) {
+                        // Keep the last one, drop the one we've seen so far
+                        droppable.add(seen.get(decl.prop));
+                        // Override the existing one with the new value. This is necessary
+                        // so that if we happen to have more than one declaration with the
+                        // same value, that we keep removing the previous one. Otherwise we
+                        // will only remove the *first* one.
+                        seen.set(decl.prop, decl);
+                        return;
+                    }
+                    // Not the same value, so we need to check if we can merge it so
+                    // let's collect it first.
+                    if (!byProperty.has(decl.prop)) {
+                        byProperty.set(decl.prop, new Set());
+                    }
+                    byProperty.get(decl.prop).add(seen.get(decl.prop));
+                    byProperty.get(decl.prop).add(decl);
                 }
                 seen.set(decl.prop, decl);
             });
+            // Drop all the duplicate declarations with the exact same value we've
+            // already seen so far.
             for (let decl1 of droppable){
                 decl1.remove();
             }
+            // Analyze the declarations based on its unit, drop all the declarations
+            // with the same unit but the last one in the list.
+            for (let declarations of byProperty.values()){
+                let byUnit = new Map();
+                for (let decl of declarations){
+                    let unit = resolveUnit(decl.value);
+                    if (unit === null) {
+                        continue;
+                    }
+                    if (!byUnit.has(unit)) {
+                        byUnit.set(unit, new Set());
+                    }
+                    byUnit.get(unit).add(decl);
+                }
+                for (let declarations1 of byUnit.values()){
+                    // Get all but the last one
+                    let removableDeclarations = Array.from(declarations1).slice(0, -1);
+                    for (let decl of removableDeclarations){
+                        decl.remove();
+                    }
+                }
+            }
         });
     };
 }
+let UNITLESS_NUMBER = Symbol('unitless-number');
+function resolveUnit(input) {
+    let result = /^-?\d*.?\d+([\w%]+)?$/g.exec(input);
+    if (result) {
+        var ref;
+        return (ref = result[1]) !== null && ref !== void 0 ? ref : UNITLESS_NUMBER;
+    }
+    return null;
+}

package/lib/lib/defaultExtractor.js

@@ -0,0 +1,42 @@
+"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]+\][^<>"'`\s]*)/.source,
+    /([^"'`\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;
+} // Regular utilities
+ // {{modifier}:}*{namespace}{-{suffix}}*{/{opacityModifier}}?
+ // Arbitrary values
+ // {{modifier}:}*{namespace}-[{arbitraryValue}]{/{opacityModifier}}?
+ // arbitraryValue: no whitespace, balanced quotes unless within quotes, balanced brackets unless within quotes
+ // Arbitrary properties
+ // {{modifier}:}*[{validCssPropertyName}:{arbitraryValue}]

package/lib/lib/evaluateTailwindFunctions.js

@@ -43,7 +43,7 @@ function listKeys(obj) {
 function validatePath(config, path, defaultValue) {
     const pathString = Array.isArray(path) ? pathToString(path) : path.replace(/^['"]+/g, '').replace(/['"]+$/g, '');
     const pathSegments = Array.isArray(path) ? path : (0, _toPath).toPath(pathString);
-    const value = (0, _dlv).default(config.theme, pathString, defaultValue);
+    const value = (0, _dlv).default(config.theme, pathSegments, defaultValue);
     if (value === undefined) {
         let error = `'${pathString}' does not exist in your theme config.`;
         const parentSegments = pathSegments.slice(0, -1);

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((candidate)=>candidate === 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()
@@ -331,7 +335,6 @@ function* resolveMatchedPlugins(classCandidate, context) {
                 context.candidateRuleMap.get(prefix),
                 negative ? `-${modifier}` : modifier
             ];
-            return;
         }
     }
 }

package/lib/lib/sharedState.js

@@ -2,13 +2,11 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+exports.resolveDebug = resolveDebug;
 exports.contextSourcesMap = exports.configContextMap = exports.contextMap = exports.env = void 0;
 const env = {
-    TAILWIND_MODE: process.env.TAILWIND_MODE,
     NODE_ENV: process.env.NODE_ENV,
-    DEBUG: process.env.DEBUG !== undefined && process.env.DEBUG !== '0',
-    TAILWIND_DISABLE_TOUCH: process.env.TAILWIND_DISABLE_TOUCH !== undefined,
-    TAILWIND_TOUCH_DIR: process.env.TAILWIND_TOUCH_DIR
+    DEBUG: resolveDebug(process.env.DEBUG)
 };
 exports.env = env;
 const contextMap = new Map();
@@ -17,3 +15,34 @@ const configContextMap = new Map();
 exports.configContextMap = configContextMap;
 const contextSourcesMap = new Map();
 exports.contextSourcesMap = contextSourcesMap;
+function resolveDebug(debug) {
+    if (debug === undefined) {
+        return false;
+    }
+    // Environment variables are strings, so convert to boolean
+    if (debug === 'true' || debug === '1') {
+        return true;
+    }
+    if (debug === 'false' || debug === '0') {
+        return false;
+    }
+    // Keep the debug convention into account:
+    // DEBUG=* -> This enables all debug modes
+    // DEBUG=projectA,projectB,projectC -> This enables debug for projectA, projectB and projectC
+    // DEBUG=projectA:* -> This enables all debug modes for projectA (if you have sub-types)
+    // DEBUG=projectA,-projectB -> This enables debug for projectA and explicitly disables it for projectB
+    if (debug === '*') {
+        return true;
+    }
+    let debuggers = debug.split(',').map((d)=>d.split(':')[0]
+    );
+    // Ignoring tailwindcss
+    if (debuggers.includes('-tailwindcss')) {
+        return false;
+    }
+    // Including tailwindcss
+    if (debuggers.includes('tailwindcss')) {
+        return true;
+    }
+    return false;
+}

package/lib/util/color.js

@@ -15,7 +15,8 @@ let SHORT_HEX = /^#([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i;
 let VALUE = `(?:\\d+|\\d*\\.\\d+)%?`;
 let SEP = `(?:\\s*,\\s*|\\s+)`;
 let ALPHA_SEP = `\\s*[,/]\\s*`;
-let RGB_HSL = new RegExp(`^(rgb|hsl)a?\\(\\s*(${VALUE})${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$`);
+let RGB = new RegExp(`^rgba?\\(\\s*(${VALUE})${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$`);
+let HSL = new RegExp(`^hsla?\\(\\s*((?:${VALUE})(?:deg|rad|grad|turn)?)${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$`);
 function parseColor(value) {
     if (typeof value !== 'string') {
         return null;
@@ -62,18 +63,32 @@ function parseColor(value) {
             alpha: hex[4] ? (parseInt(hex[4], 16) / 255).toString() : undefined
         };
     }
-    let match = value.match(RGB_HSL);
-    if (match !== null) {
+    let rgbMatch = value.match(RGB);
+    if (rgbMatch !== null) {
         var ref, ref1;
         return {
-            mode: match[1],
+            mode: 'rgb',
+            color: [
+                rgbMatch[1],
+                rgbMatch[2],
+                rgbMatch[3]
+            ].map((v)=>v.toString()
+            ),
+            alpha: (ref = rgbMatch[4]) === null || ref === void 0 ? void 0 : (ref1 = ref.toString) === null || ref1 === void 0 ? void 0 : ref1.call(ref)
+        };
+    }
+    let hslMatch = value.match(HSL);
+    if (hslMatch !== null) {
+        var ref2, ref3;
+        return {
+            mode: 'hsl',
             color: [
-                match[2],
-                match[3],
-                match[4]
+                hslMatch[1],
+                hslMatch[2],
+                hslMatch[3]
             ].map((v)=>v.toString()
             ),
-            alpha: (ref = match[5]) === null || ref === void 0 ? void 0 : (ref1 = ref.toString) === null || ref1 === void 0 ? void 0 : ref1.call(ref)
+            alpha: (ref2 = hslMatch[4]) === null || ref2 === void 0 ? void 0 : (ref3 = ref2.toString) === null || ref3 === void 0 ? void 0 : ref3.call(ref2)
         };
     }
     return null;

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/lib/util/toPath.js

@@ -5,5 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.toPath = toPath;
 function toPath(path) {
     if (Array.isArray(path)) return path;
-    return path.split(/[\.\]\[]+/g);
+    let openBrackets = path.split('[').length - 1;
+    let closedBrackets = path.split(']').length - 1;
+    if (openBrackets !== closedBrackets) {
+        throw new Error(`Path is invalid. Has unbalanced brackets: ${path}`);
+    }
+    return path.split(/\.(?![^\[]*\])|[\[\]]/g).filter(Boolean);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "3.0.5",
+  "version": "3.0.9",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -25,7 +25,7 @@
     "prepublishOnly": "npm install --force && npm run swcify",
     "style": "eslint .",
     "pretest": "npm run generate:plugin-list",
-    "test": "cross-env TAILWIND_MODE=build jest",
+    "test": "jest",
     "test:integrations": "npm run test --prefix ./integrations",
     "install:integrations": "node scripts/install-integrations.js",
     "posttest": "npm run style",
@@ -43,22 +43,22 @@
     "*.js"
   ],
   "devDependencies": {
-    "@swc/cli": "^0.1.52",
+    "@swc/cli": "^0.1.55",
     "@swc/core": "^1.2.118",
-    "@swc/jest": "^0.2.11",
+    "@swc/jest": "^0.2.15",
     "@swc/register": "^0.1.7",
     "autoprefixer": "^10.4.0",
     "cross-env": "^7.0.3",
-    "cssnano": "^5.0.12",
+    "cssnano": "^5.0.14",
     "esbuild": "^0.14.2",
     "eslint": "^8.4.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "jest": "^27.4.3",
+    "jest": "^27.4.5",
     "jest-diff": "^27.4.2",
-    "postcss": "^8.4.4",
+    "postcss": "^8.4.5",
     "postcss-cli": "^8.3.1",
-    "prettier": "^2.5.0",
+    "prettier": "^2.5.1",
     "rimraf": "^3.0.0"
   },
   "peerDependencies": {
@@ -82,11 +82,10 @@
     "postcss-js": "^3.0.3",
     "postcss-load-config": "^3.1.0",
     "postcss-nested": "5.0.6",
-    "postcss-selector-parser": "^6.0.6",
+    "postcss-selector-parser": "^6.0.7",
     "postcss-value-parser": "^4.2.0",
     "quick-lru": "^5.1.1",
-    "resolve": "^1.20.0",
-    "tmp": "^0.2.1"
+    "resolve": "^1.20.0"
   },
   "browserslist": [
     "> 1%",