tailwindcss 3.0.4 → 3.0.8

package/CHANGELOG.md

@@ -7,13 +7,41 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### 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
+
+- Revert: add `li` to list-style reset ([9777562d](https://github.com/tailwindlabs/tailwindcss/commit/9777562da37ee631bbf77374c0d14825f09ef9af))
 
 ## [3.0.4] - 2021-12-15
 
 ### 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
 
@@ -21,13 +49,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Warn about invalid globs in `content` ([#6449](https://github.com/tailwindlabs/tailwindcss/pull/6449))
 - Add standalone tailwindcss CLI ([#6506](https://github.com/tailwindlabs/tailwindcss/pull/6506))
+- Add `li` to list-style reset ([00f60e6](https://github.com/tailwindlabs/tailwindcss/commit/00f60e61013c6e4e3419e4b699371a13eb30b75d))
 
 ### Fixed
 
 - 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
 
@@ -1716,7 +1745,10 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.4...HEAD
+[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
 [3.0.2]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.1...v3.0.2

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;
 }
 
@@ -289,7 +289,6 @@ legend {
 
 ol,
 ul,
-li,
 menu {
   list-style: none;
   margin: 0;

package/lib/lib/defaultExtractor.js

@@ -0,0 +1,40 @@
+"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;
+} // 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/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.4",
+  "version": "3.0.8",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -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-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,7 +82,7 @@
     "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",

package/peers/index.js

@@ -5406,7 +5406,7 @@ var require_processor = __commonJS({
     var Root = require_root();
     var Processor = class {
       constructor(plugins = []) {
-        this.version = "8.4.4";
+        this.version = "8.4.5";
         this.plugins = this.normalize(plugins);
       }
       use(plugin) {
@@ -23880,25 +23880,6 @@ var require_dist2 = __commonJS({
   }
 });
 
-// node_modules/is-resolvable/index.js
-var require_is_resolvable = __commonJS({
-  "node_modules/is-resolvable/index.js"(exports2, module2) {
-    "use strict";
-    var inspect = require("util").inspect;
-    module2.exports = function isResolvable(moduleId, options) {
-      if (typeof moduleId !== "string") {
-        throw new TypeError(inspect(moduleId) + " is not a string. Expected a valid Node.js module identifier (<string>), for example 'eslint', './index.js', './lib'.");
-      }
-      try {
-        require.resolve(moduleId, options);
-        return true;
-      } catch (err) {
-        return false;
-      }
-    };
-  }
-});
-
 // node_modules/timsort/build/timsort.js
 var require_timsort = __commonJS({
   "node_modules/timsort/build/timsort.js"(exports2) {
@@ -29271,7 +29252,7 @@ var require_attributes = __commonJS({
         if (/\s/.test(value)) {
           return boolbase_1.falseFunc;
         }
-        var regex = new RegExp("(?:^|\\s)" + escapeRegex(value) + "(?:$|\\s)", ignoreCase ? "i" : "");
+        var regex = new RegExp("(?:^|\\s)".concat(escapeRegex(value), "(?:$|\\s)"), ignoreCase ? "i" : "");
         return function element(elem) {
           var attr = adapter.getAttributeValue(elem, name);
           return attr != null && attr.length >= value.length && regex.test(attr) && next(elem);
@@ -29520,7 +29501,7 @@ var require_filters = __commonJS({
       },
       "nth-child": function(next, rule, _a) {
         var adapter = _a.adapter, equals = _a.equals;
-        var func = nth_check_1.default(rule);
+        var func = (0, nth_check_1.default)(rule);
         if (func === boolbase_1.falseFunc)
           return boolbase_1.falseFunc;
         if (func === boolbase_1.trueFunc)
@@ -29540,7 +29521,7 @@ var require_filters = __commonJS({
       },
       "nth-last-child": function(next, rule, _a) {
         var adapter = _a.adapter, equals = _a.equals;
-        var func = nth_check_1.default(rule);
+        var func = (0, nth_check_1.default)(rule);
         if (func === boolbase_1.falseFunc)
           return boolbase_1.falseFunc;
         if (func === boolbase_1.trueFunc)
@@ -29560,7 +29541,7 @@ var require_filters = __commonJS({
       },
       "nth-of-type": function(next, rule, _a) {
         var adapter = _a.adapter, equals = _a.equals;
-        var func = nth_check_1.default(rule);
+        var func = (0, nth_check_1.default)(rule);
         if (func === boolbase_1.falseFunc)
           return boolbase_1.falseFunc;
         if (func === boolbase_1.trueFunc)
@@ -29581,7 +29562,7 @@ var require_filters = __commonJS({
       },
       "nth-last-of-type": function(next, rule, _a) {
         var adapter = _a.adapter, equals = _a.equals;
-        var func = nth_check_1.default(rule);
+        var func = (0, nth_check_1.default)(rule);
         if (func === boolbase_1.falseFunc)
           return boolbase_1.falseFunc;
         if (func === boolbase_1.trueFunc)
@@ -29716,10 +29697,10 @@ var require_pseudos = __commonJS({
     function verifyPseudoArgs(func, name, subselect) {
       if (subselect === null) {
         if (func.length > 2) {
-          throw new Error("pseudo-selector :" + name + " requires an argument");
+          throw new Error("pseudo-selector :".concat(name, " requires an argument"));
         }
       } else if (func.length === 2) {
-        throw new Error("pseudo-selector :" + name + " doesn't have any arguments");
+        throw new Error("pseudo-selector :".concat(name, " doesn't have any arguments"));
       }
     }
     exports2.verifyPseudoArgs = verifyPseudoArgs;
@@ -29761,10 +29742,16 @@ var require_aliases = __commonJS({
 var require_subselects = __commonJS({
   "node_modules/css-select/lib/pseudo-selectors/subselects.js"(exports2) {
     "use strict";
-    var __spreadArray = exports2 && exports2.__spreadArray || function(to, from) {
-      for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-      return to;
+    var __spreadArray = exports2 && exports2.__spreadArray || function(to, from, pack) {
+      if (pack || arguments.length === 2)
+        for (var i = 0, l = from.length, ar; i < l; i++) {
+          if (ar || !(i in from)) {
+            if (!ar)
+              ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+          }
+        }
+      return to.concat(ar || Array.prototype.slice.call(from));
     };
     Object.defineProperty(exports2, "__esModule", { value: true });
     exports2.subselects = exports2.getNextSiblings = exports2.ensureIsTag = exports2.PLACEHOLDER_ELEMENT = void 0;
@@ -29803,6 +29790,7 @@ var require_subselects = __commonJS({
     exports2.subselects = {
       is,
       matches: is,
+      where: is,
       not: function(next, token, options, context, compileToken) {
         var opts = {
           xmlMode: !!options.xmlMode,
@@ -29842,7 +29830,7 @@ var require_subselects = __commonJS({
           return function(elem) {
             context[0] = elem;
             var childs = adapter.getChildren(elem);
-            var nextElements = shouldTestNextSiblings ? __spreadArray(__spreadArray([], childs), getNextSiblings(elem, adapter)) : childs;
+            var nextElements = shouldTestNextSiblings ? __spreadArray(__spreadArray([], childs, true), getNextSiblings(elem, adapter), true) : childs;
             return next(elem) && adapter.existsOne(hasElement, nextElements);
           };
         }
@@ -29882,9 +29870,9 @@ var require_pseudo_selectors = __commonJS({
       }
       if (name in aliases_1.aliases) {
         if (data != null) {
-          throw new Error("Pseudo " + name + " doesn't have any arguments");
+          throw new Error("Pseudo ".concat(name, " doesn't have any arguments"));
         }
-        var alias = css_what_1.parse(aliases_1.aliases[name], options);
+        var alias = (0, css_what_1.parse)(aliases_1.aliases[name], options);
         return subselects_1.subselects.is(next, alias, options, context, compileToken);
       }
       if (name in filters_1.filters) {
@@ -29892,14 +29880,14 @@ var require_pseudo_selectors = __commonJS({
       }
       if (name in pseudos_1.pseudos) {
         var pseudo_1 = pseudos_1.pseudos[name];
-        pseudos_1.verifyPseudoArgs(pseudo_1, name, data);
+        (0, pseudos_1.verifyPseudoArgs)(pseudo_1, name, data);
         return pseudo_1 === boolbase_1.falseFunc ? boolbase_1.falseFunc : next === boolbase_1.trueFunc ? function(elem) {
           return pseudo_1(elem, options, data);
         } : function(elem) {
           return pseudo_1(elem, options, data) && next(elem);
         };
       }
-      throw new Error("unmatched pseudo-class :" + name);
+      throw new Error("unmatched pseudo-class :".concat(name));
     }
     exports2.compilePseudoSelector = compilePseudoSelector;
   }
@@ -29921,7 +29909,7 @@ var require_general = __commonJS({
         case "attribute":
           return attributes_1.attributeRules[selector.action](next, selector, options);
         case "pseudo":
-          return pseudo_selectors_1.compilePseudoSelector(next, selector, options, context, compileToken);
+          return (0, pseudo_selectors_1.compilePseudoSelector)(next, selector, options, context, compileToken);
         case "tag":
           return function tag(elem) {
             return adapter.getName(elem) === selector.name && next(elem);
@@ -30023,11 +30011,11 @@ var require_compile2 = __commonJS({
     var subselects_1 = require_subselects();
     function compile(selector, options, context) {
       var next = compileUnsafe(selector, options, context);
-      return subselects_1.ensureIsTag(next, options.adapter);
+      return (0, subselects_1.ensureIsTag)(next, options.adapter);
     }
     exports2.compile = compile;
     function compileUnsafe(selector, options, context) {
-      var token = typeof selector === "string" ? css_what_1.parse(selector, options) : selector;
+      var token = typeof selector === "string" ? (0, css_what_1.parse)(selector, options) : selector;
       return compileToken(token, options, context);
     }
     exports2.compileUnsafe = compileUnsafe;
@@ -30049,7 +30037,7 @@ var require_compile2 = __commonJS({
       }));
       for (var _i = 0, token_1 = token; _i < token_1.length; _i++) {
         var t = token_1[_i];
-        if (t.length > 0 && procedure_1.isTraversal(t[0]) && t[0].type !== "descendant") {
+        if (t.length > 0 && (0, procedure_1.isTraversal)(t[0]) && t[0].type !== "descendant") {
         } else if (hasContext && !t.some(includesScopePseudo)) {
           t.unshift(DESCENDANT_TOKEN);
         } else {
@@ -30088,7 +30076,7 @@ var require_compile2 = __commonJS({
     function compileRules(rules, options, context) {
       var _a;
       return rules.reduce(function(previous, rule) {
-        return previous === boolbase_1.falseFunc ? boolbase_1.falseFunc : general_1.compileGeneralSelector(previous, rule, options, context, compileToken);
+        return previous === boolbase_1.falseFunc ? boolbase_1.falseFunc : (0, general_1.compileGeneralSelector)(previous, rule, options, context, compileToken);
       }, (_a = options.rootFunc) !== null && _a !== void 0 ? _a : boolbase_1.trueFunc);
     }
     function reduceRules(a, b) {
@@ -30170,7 +30158,7 @@ var require_lib9 = __commonJS({
       return function select(query, elements, options) {
         var opts = convertOptionFormats(options);
         if (typeof query !== "function") {
-          query = compile_1.compileUnsafe(query, opts, elements);
+          query = (0, compile_1.compileUnsafe)(query, opts, elements);
         }
         var filteredElements = prepareContext(elements, opts.adapter, query.shouldTestNextSiblings);
         return searchFunc(query, filteredElements, opts);
@@ -30188,8 +30176,9 @@ var require_lib9 = __commonJS({
     exports2.prepareContext = prepareContext;
     function appendNextSiblings(elem, adapter) {
       var elems = Array.isArray(elem) ? elem.slice(0) : [elem];
-      for (var i = 0; i < elems.length; i++) {
-        var nextSiblings = subselects_1.getNextSiblings(elems[i], adapter);
+      var elemsLength = elems.length;
+      for (var i = 0; i < elemsLength; i++) {
+        var nextSiblings = (0, subselects_1.getNextSiblings)(elems[i], adapter);
         elems.push.apply(elems, nextSiblings);
       }
       return elems;
@@ -30202,7 +30191,7 @@ var require_lib9 = __commonJS({
     });
     function is(elem, query, options) {
       var opts = convertOptionFormats(options);
-      return (typeof query === "function" ? query : compile_1.compile(query, opts))(elem);
+      return (typeof query === "function" ? query : (0, compile_1.compile)(query, opts))(elem);
     }
     exports2.is = is;
     exports2.default = exports2.selectAll;
@@ -67097,7 +67086,9 @@ var require_parser4 = __commonJS({
           nextToken = this.nextToken;
         }
         var hasClass = indexesOf(word, ".").filter(function(i) {
-          return word[i - 1] !== "\\";
+          var escapedDot = word[i - 1] === "\\";
+          var isKeyframesPercent = /^\d+\.\d+%$/.test(word);
+          return !escapedDot && !isKeyframesPercent;
         });
         var hasId = indexesOf(word, "#").filter(function(i) {
           return word[i - 1] !== "\\";
@@ -70086,18 +70077,9 @@ var require_minifyColor = __commonJS({
     }
     (0, _colord.extend)([_names.default, _minify.default]);
     function minifyColor(input, options = {}) {
-      const settings = {
-        supportsAlphaHex: false,
-        supportsTransparent: true,
-        ...options
-      };
       const instance = (0, _colord.colord)(input);
       if (instance.isValid()) {
-        const minified = instance.minify({
-          alphaHex: settings.supportsAlphaHex,
-          transparent: settings.supportsTransparent,
-          name: true
-        });
+        const minified = instance.minify(options);
         return minified.length < input.length ? minified : input.toLowerCase();
       } else {
         return input;
@@ -70203,21 +70185,29 @@ var require_dist13 = __commonJS({
       });
       return parsed.toString();
     }
-    function pluginCreator() {
+    function addPluginDefaults(options, browsers) {
+      const defaults = {
+        transparent: browsers.some(hasTransparentBug) === false,
+        alphaHex: (0, _caniuseApi.isSupported)("css-rrggbbaa", browsers),
+        name: true
+      };
+      return {
+        ...defaults,
+        ...options
+      };
+    }
+    function pluginCreator(config = {}) {
       return {
         postcssPlugin: "postcss-colormin",
         prepare(result) {
-          const resultOpts = result.opts || {};
+          const resultOptions = result.opts || {};
           const browsers = (0, _browserslist.default)(null, {
-            stats: resultOpts.stats,
+            stats: resultOptions.stats,
             path: __dirname,
-            env: resultOpts.env
+            env: resultOptions.env
           });
-          const options = {
-            supportsTransparent: browsers.some(hasTransparentBug) === false,
-            supportsAlphaHex: (0, _caniuseApi.isSupported)("css-rrggbbaa", browsers)
-          };
           const cache = {};
+          const options = addPluginDefaults(config, browsers);
           return {
             OnceExit(css) {
               css.walkDecls((decl) => {
@@ -72140,22 +72130,6 @@ var require_normalize_url = __commonJS({
   }
 });
 
-// node_modules/is-absolute-url/index.js
-var require_is_absolute_url = __commonJS({
-  "node_modules/is-absolute-url/index.js"(exports2, module2) {
-    "use strict";
-    module2.exports = (url) => {
-      if (typeof url !== "string") {
-        throw new TypeError(`Expected a \`string\`, got \`${typeof url}\``);
-      }
-      if (/^[a-zA-Z]:\\/.test(url)) {
-        return false;
-      }
-      return /^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(url);
-    };
-  }
-});
-
 // node_modules/postcss-normalize-url/dist/index.js
 var require_dist19 = __commonJS({
   "node_modules/postcss-normalize-url/dist/index.js"(exports2, module2) {
@@ -72167,14 +72141,21 @@ var require_dist19 = __commonJS({
     var _path = _interopRequireDefault(require("path"));
     var _postcssValueParser = _interopRequireDefault(require_lib());
     var _normalizeUrl = _interopRequireDefault(require_normalize_url());
-    var _isAbsoluteUrl = _interopRequireDefault(require_is_absolute_url());
     function _interopRequireDefault(obj) {
       return obj && obj.__esModule ? obj : { default: obj };
     }
     var multiline = /\\[\r\n]/;
     var escapeChars = /([\s\(\)"'])/g;
+    var ABSOLUTE_URL_REGEX = /^[a-zA-Z][a-zA-Z\d+\-.]*?:/;
+    var WINDOWS_PATH_REGEX = /^[a-zA-Z]:\\/;
+    function isAbsolute(url) {
+      if (WINDOWS_PATH_REGEX.test(url)) {
+        return false;
+      }
+      return ABSOLUTE_URL_REGEX.test(url);
+    }
     function convert(url, options) {
-      if ((0, _isAbsoluteUrl.default)(url) || url.startsWith("//")) {
+      if (isAbsolute(url) || url.startsWith("//")) {
         let normalizedURL = null;
         try {
           normalizedURL = (0, _normalizeUrl.default)(url, options);
@@ -75968,11 +75949,18 @@ var require_dist35 = __commonJS({
     var _postcss = _interopRequireDefault(require_postcss());
     var _yaml = _interopRequireDefault(require_yaml());
     var _lilconfig = require_dist2();
-    var _isResolvable = _interopRequireDefault(require_is_resolvable());
     function _interopRequireDefault(obj) {
       return obj && obj.__esModule ? obj : { default: obj };
     }
     var cssnano = "cssnano";
+    function isResolvable(moduleId) {
+      try {
+        require.resolve(moduleId);
+        return true;
+      } catch (e) {
+        return false;
+      }
+    }
     function resolvePreset(preset) {
       let fn, options;
       if (Array.isArray(preset)) {
@@ -75991,11 +75979,11 @@ var require_dist35 = __commonJS({
       if (typeof fn === "function") {
         return fn(options).plugins;
       }
-      if ((0, _isResolvable.default)(fn)) {
+      if (isResolvable(fn)) {
         return require(fn)(options).plugins;
       }
       const sugar = `cssnano-preset-${fn}`;
-      if ((0, _isResolvable.default)(sugar)) {
+      if (isResolvable(sugar)) {
         return require(sugar)(options).plugins;
       }
       throw new Error(`Cannot load preset "${fn}". Please check your configuration for errors and try again.`);
@@ -76033,12 +76021,12 @@ var require_dist35 = __commonJS({
         options.plugins.forEach((plugin) => {
           if (Array.isArray(plugin)) {
             const [pluginDef, opts = {}] = plugin;
-            if (typeof pluginDef === "string" && (0, _isResolvable.default)(pluginDef)) {
+            if (typeof pluginDef === "string" && isResolvable(pluginDef)) {
               options.preset.plugins.push([require(pluginDef), opts]);
             } else {
               options.preset.plugins.push([pluginDef, opts]);
             }
-          } else if (typeof plugin === "string" && (0, _isResolvable.default)(plugin)) {
+          } else if (typeof plugin === "string" && isResolvable(plugin)) {
             options.preset.plugins.push([require(plugin), {}]);
           } else {
             options.preset.plugins.push([plugin, {}]);

package/src/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;
 }
 
@@ -289,7 +289,6 @@ legend {
 
 ol,
 ul,
-li,
 menu {
   list-style: none;
   margin: 0;

package/src/lib/defaultExtractor.js

@@ -0,0 +1,46 @@
+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:`
+
+  // Arbitrary properties
+  // /([^"\s]*\[[^\s]+?\][^"\s]*)/.source,
+  // /([^'\s]*\[[^\s]+?\][^'\s]*)/.source,
+  // /([^`\s]*\[[^\s]+?\][^`\s]*)/.source,
+].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
+}
+
+// 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/src/lib/evaluateTailwindFunctions.js

@@ -42,7 +42,7 @@ function validatePath(config, path, defaultValue) {
     ? pathToString(path)
     : path.replace(/^['"]+/g, '').replace(/['"]+$/g, '')
   const pathSegments = Array.isArray(path) ? path : toPath(pathString)
-  const value = dlv(config.theme, pathString, defaultValue)
+  const value = dlv(config.theme, pathSegments, defaultValue)
 
   if (value === undefined) {
     let error = `'${pathString}' does not exist in your theme config.`

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((candidate) => candidate === 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) {
@@ -325,7 +330,6 @@ function* resolveMatchedPlugins(classCandidate, context) {
   for (let [prefix, modifier] of candidatePermutations(candidatePrefix)) {
     if (context.candidateRuleMap.has(prefix)) {
       yield [context.candidateRuleMap.get(prefix), negative ? `-${modifier}` : modifier]
-      return
     }
   }
 }

package/src/util/color.js

@@ -5,8 +5,11 @@ 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*\\)$`
 )
 
 export function parseColor(value) {
@@ -37,13 +40,23 @@ export function parseColor(value) {
     }
   }
 
-  let match = value.match(RGB_HSL)
+  let rgbMatch = value.match(RGB)
+
+  if (rgbMatch !== null) {
+    return {
+      mode: 'rgb',
+      color: [rgbMatch[1], rgbMatch[2], rgbMatch[3]].map((v) => v.toString()),
+      alpha: rgbMatch[4]?.toString?.(),
+    }
+  }
+
+  let hslMatch = value.match(HSL)
 
-  if (match !== null) {
+  if (hslMatch !== null) {
     return {
-      mode: match[1],
-      color: [match[2], match[3], match[4]].map((v) => v.toString()),
-      alpha: match[5]?.toString?.(),
+      mode: 'hsl',
+      color: [hslMatch[1], hslMatch[2], hslMatch[3]].map((v) => v.toString()),
+      alpha: hslMatch[4]?.toString?.(),
     }
   }
 

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

package/src/util/toPath.js

@@ -1,4 +1,26 @@
+/**
+ * Parse a path string into an array of path segments.
+ *
+ * Square bracket notation `a[b]` may be used to "escape" dots that would otherwise be interpreted as path separators.
+ *
+ * Example:
+ * a -> ['a]
+ * a.b.c -> ['a', 'b', 'c']
+ * a[b].c -> ['a', 'b', 'c']
+ * a[b.c].e.f -> ['a', 'b.c', 'e', 'f']
+ * a[b][c][d] -> ['a', 'b', 'c', 'd']
+ *
+ * @param {string|string[]} path
+ **/
 export 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/stubs/defaultConfig.stub.js

@@ -854,8 +854,8 @@ module.exports = {
       none: 'none',
       all: 'all',
       DEFAULT:
-        'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
-      colors: 'background-color, border-color, color, fill, stroke',
+        'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
+      colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
       opacity: 'opacity',
       shadow: 'box-shadow',
       transform: 'transform',