tailwindcss 3.0.19 → 3.0.23

package/CHANGELOG.md

@@ -7,7 +7,34 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-Nothing yet!
+- Nothing yet!
+
+## [3.0.23] - 2022-02-16
+
+### Fixed
+
+- Remove opacity variables from `:visited` pseudo class ([#7458](https://github.com/tailwindlabs/tailwindcss/pull/7458))
+- Support arbitrary values + calc + theme with quotes ([#7462](https://github.com/tailwindlabs/tailwindcss/pull/7462))
+- Don't duplicate layer output when scanning content with variants + wildcards ([#7478](https://github.com/tailwindlabs/tailwindcss/pull/7478))
+- Implement `getClassOrder` instead of `sortClassList` ([#7459](https://github.com/tailwindlabs/tailwindcss/pull/7459))
+
+## [3.0.22] - 2022-02-11
+
+### Fixed
+
+- Temporarily move postcss to dependencies ([#7424](https://github.com/tailwindlabs/tailwindcss/pull/7424))
+
+## [3.0.21] - 2022-02-10
+
+### Fixed
+
+- Move prettier plugin to dev dependencies ([#7418](https://github.com/tailwindlabs/tailwindcss/pull/7418))
+
+## [3.0.20] - 2022-02-10
+
+### Added
+
+- Expose `context.sortClassList(classes)` ([#7412](https://github.com/tailwindlabs/tailwindcss/pull/7412))
 
 ## [3.0.19] - 2022-02-07
 
@@ -1847,7 +1874,11 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.19...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.23...HEAD
+[3.0.23]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.22...v3.0.23
+[3.0.22]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.21...v3.0.22
+[3.0.21]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.20...v3.0.21
+[3.0.20]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.19...v3.0.20
 [3.0.19]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.18...v3.0.19
 [3.0.18]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.17...v3.0.18
 [3.0.17]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.16...v3.0.17

package/lib/corePlugins.js

@@ -116,7 +116,28 @@ let variantPlugins = {
             'last-of-type',
             'only-of-type',
             // State
-            'visited',
+            [
+                'visited',
+                ({ container  })=>{
+                    let toRemove = [
+                        '--tw-text-opacity',
+                        '--tw-border-opacity',
+                        '--tw-bg-opacity'
+                    ];
+                    container.walkDecls((decl)=>{
+                        if (toRemove.includes(decl.prop)) {
+                            decl.remove();
+                            return;
+                        }
+                        for (const varName of toRemove){
+                            if (decl.value.includes(`/ var(${varName})`)) {
+                                decl.value = decl.value.replace(`/ var(${varName})`, '');
+                            }
+                        }
+                    });
+                    return ':visited';
+                }, 
+            ],
             'target',
             [
                 'open',
@@ -149,13 +170,22 @@ let variantPlugins = {
             ]
         );
         for (let [variantName, state] of pseudoVariants){
-            addVariant(variantName, `&${state}`);
+            addVariant(variantName, (ctx)=>{
+                let result = typeof state === 'function' ? state(ctx) : state;
+                return `&${result}`;
+            });
         }
         for (let [variantName1, state1] of pseudoVariants){
-            addVariant(`group-${variantName1}`, `:merge(.group)${state1} &`);
+            addVariant(`group-${variantName1}`, (ctx)=>{
+                let result = typeof state1 === 'function' ? state1(ctx) : state1;
+                return `:merge(.group)${result} &`;
+            });
         }
         for (let [variantName2, state2] of pseudoVariants){
-            addVariant(`peer-${variantName2}`, `:merge(.peer)${state2} ~ &`);
+            addVariant(`peer-${variantName2}`, (ctx)=>{
+                let result = typeof state2 === 'function' ? state2(ctx) : state2;
+                return `:merge(.peer)${result} ~ &`;
+            });
         }
     },
     directionVariants: ({ addVariant  })=>{

package/lib/lib/defaultExtractor.js

@@ -13,6 +13,8 @@ const PATTERNS = [
     /([^<>"'`\s]*\[\w*\("[^"'`\s]*"\)\])/.source,
     /([^<>"'`\s]*\[\w*\('[^"`\s]*'\)\])/.source,
     /([^<>"'`\s]*\[\w*\("[^'`\s]*"\)\])/.source,
+    /([^<>"'`\s]*\[[^<>"'`\s]*\('[^"`\s]*'\)+\])/.source,
+    /([^<>"'`\s]*\[[^<>"'`\s]*\("[^'`\s]*"\)+\])/.source,
     /([^<>"'`\s]*\['[^"'`\s]*'\])/.source,
     /([^<>"'`\s]*\["[^"'`\s]*"\])/.source,
     /([^<>"'`\s]*\[[^<>"'`\s]*:[^\]\s]*\])/.source,

package/lib/lib/expandApplyAtRules.js

@@ -140,11 +140,14 @@ function processApply(root, context) {
                 throw apply.error(`@apply is not supported within nested at-rules like @${apply.parent.name}. You can fix this by un-nesting @${apply.parent.name}.`);
             }
             for (let applyCandidate of applyCandidates){
+                if ([
+                    prefix(context, 'group'),
+                    prefix(context, 'peer')
+                ].includes(applyCandidate)) {
+                    // TODO: Link to specific documentation page with error code.
+                    throw apply.error(`@apply should not be used with the '${applyCandidate}' utility`);
+                }
                 if (!applyClassCache.has(applyCandidate)) {
-                    if (applyCandidate === prefix(context, 'group')) {
-                        // TODO: Link to specific documentation page with error code.
-                        throw apply.error(`@apply should not be used with the '${applyCandidate}' utility`);
-                    }
                     throw apply.error(`The \`${applyCandidate}\` class does not exist. If \`${applyCandidate}\` is a custom class, make sure it is defined within a \`@layer\` directive.`);
                 }
                 let rules = applyClassCache.get(applyCandidate);

package/lib/lib/expandTailwindAtRules.js

@@ -157,7 +157,7 @@ function expandTailwindAtRules(context) {
         // ---
         // Find potential rules in changed files
         let candidates = new Set([
-            '*'
+            sharedState.NOT_ON_DEMAND
         ]);
         let seen = new Set();
         env.DEBUG && console.time('Reading changed files');

package/lib/lib/generateRules.js

@@ -10,6 +10,7 @@ var _isPlainObject = _interopRequireDefault(require("../util/isPlainObject"));
 var _prefixSelector = _interopRequireDefault(require("../util/prefixSelector"));
 var _pluginUtils = require("../util/pluginUtils");
 var _log = _interopRequireDefault(require("../util/log"));
+var sharedState = _interopRequireWildcard(require("./sharedState"));
 var _formatVariantSelector = require("../util/formatVariantSelector");
 var _nameClass = require("../util/nameClass");
 var _dataTypes = require("../util/dataTypes");
@@ -19,6 +20,27 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
+function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+        return obj;
+    } else {
+        var newObj = {};
+        if (obj != null) {
+            for(var key in obj){
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
+                    if (desc.get || desc.set) {
+                        Object.defineProperty(newObj, key, desc);
+                    } else {
+                        newObj[key] = obj[key];
+                    }
+                }
+            }
+        }
+        newObj.default = obj;
+        return newObj;
+    }
+}
 let classNameParser = (0, _postcssSelectorParser).default((selectors)=>{
     return selectors.first.filter(({ type  })=>type === 'class'
     ).pop().value;
@@ -228,6 +250,7 @@ function applyVariant(variant, matches, context) {
                 // .sm:underline {} is a variant of something in the utilities layer
                 // .sm:container {} is a variant of the container component
                 clone.nodes[0].raws.tailwind = {
+                    ...clone.nodes[0].raws.tailwind,
                     parentLayer: meta.layer
                 };
                 var _collectedFormats;
@@ -374,11 +397,17 @@ function* resolveMatchedPlugins(classCandidate, context) {
     }
 }
 function splitWithSeparator(input, separator) {
+    if (input === sharedState.NOT_ON_DEMAND) {
+        return [
+            sharedState.NOT_ON_DEMAND
+        ];
+    }
     return input.split(new RegExp(`\\${separator}(?![^[]*\\])`, 'g'));
 }
 function* recordCandidates(matches, classCandidate) {
     for (const match of matches){
         match[1].raws.tailwind = {
+            ...match[1].raws.tailwind,
             classCandidate
         };
         yield match;
@@ -503,6 +532,10 @@ function* resolveMatches(candidate, context) {
             matches = applyVariant(variant, matches, context);
         }
         for (let match1 of matches){
+            match1[1].raws.tailwind = {
+                ...match1[1].raws.tailwind,
+                candidate
+            };
             // Apply final format selector
             if (match1[0].collectedFormats) {
                 let finalFormat = (0, _formatVariantSelector).formatVariantSelector('&', ...match1[0].collectedFormats);

package/lib/lib/setupContextUtils.js

@@ -24,6 +24,7 @@ var _toPath = require("../util/toPath");
 var _log = _interopRequireDefault(require("../util/log"));
 var _negateValue = _interopRequireDefault(require("../util/negateValue"));
 var _isValidArbitraryValue = _interopRequireDefault(require("../util/isValidArbitraryValue"));
+var _generateRules = require("./generateRules");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -50,6 +51,10 @@ function _interopRequireWildcard(obj) {
         return newObj;
     }
 }
+function prefix(context, selector) {
+    let prefix1 = context.tailwindConfig.prefix;
+    return typeof prefix1 === 'function' ? prefix1(selector) : prefix1 + selector;
+}
 function parseVariantFormatString(input) {
     if (input.includes('{')) {
         if (!isBalanced(input)) throw new Error(`Your { and } are unbalanced.`);
@@ -147,7 +152,7 @@ function withIdentifiers(styles) {
         let [containsNonOnDemandableSelectors, candidates] = extractCandidates(node);
         // If this isn't "on-demandable", assign it a universal candidate to always include it.
         if (containsNonOnDemandableSelectors) {
-            candidates.unshift('*');
+            candidates.unshift(sharedState.NOT_ON_DEMAND);
         }
         // However, it could be that it also contains "on-demandable" candidates.
         // E.g.: `span, .foo {}`, in that case it should still be possible to use
@@ -171,8 +176,8 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
         return (0, _prefixSelector).default(tailwindConfig.prefix, selector);
     }
     function prefixIdentifier(identifier, options) {
-        if (identifier === '*') {
-            return '*';
+        if (identifier === sharedState.NOT_ON_DEMAND) {
+            return sharedState.NOT_ON_DEMAND;
         }
         if (!options.respectPrefix) {
             return identifier;
@@ -736,9 +741,38 @@ function registerPlugins(plugins, context) {
             }
         }
     }
+    // A list of utilities that are used by certain Tailwind CSS utilities but
+    // that don't exist on their own. This will result in them "not existing" and
+    // sorting could be weird since you still require them in order to make the
+    // host utitlies work properly. (Thanks Biology)
+    let parasiteUtilities = new Set([
+        prefix(context, 'group'),
+        prefix(context, 'peer')
+    ]);
+    context.getClassOrder = function getClassOrder(classes) {
+        let sortedClassNames = new Map();
+        for (let [sort, rule] of (0, _generateRules).generateRules(new Set(classes), context)){
+            if (sortedClassNames.has(rule.raws.tailwind.candidate)) continue;
+            sortedClassNames.set(rule.raws.tailwind.candidate, sort);
+        }
+        return classes.map((className)=>{
+            var ref;
+            let order = (ref = sortedClassNames.get(className)) !== null && ref !== void 0 ? ref : null;
+            if (order === null && parasiteUtilities.has(className)) {
+                // This will make sure that it is at the very beginning of the
+                // `components` layer which technically means 'before any
+                // components'.
+                order = context.layerOrder.components;
+            }
+            return [
+                className,
+                order
+            ];
+        });
+    };
     // Generate a list of strings for autocompletion purposes, e.g.
     // ['uppercase', 'lowercase', ...]
-    context.getClassList = function() {
+    context.getClassList = function getClassList() {
         let output = [];
         for (let util of classList){
             if (Array.isArray(util)) {

package/lib/lib/sharedState.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.resolveDebug = resolveDebug;
-exports.contextSourcesMap = exports.configContextMap = exports.contextMap = exports.env = void 0;
+exports.NOT_ON_DEMAND = exports.contextSourcesMap = exports.configContextMap = exports.contextMap = exports.env = void 0;
 const env = {
     NODE_ENV: process.env.NODE_ENV,
     DEBUG: resolveDebug(process.env.DEBUG)
@@ -15,6 +15,8 @@ const configContextMap = new Map();
 exports.configContextMap = configContextMap;
 const contextSourcesMap = new Map();
 exports.contextSourcesMap = contextSourcesMap;
+const NOT_ON_DEMAND = new String('*');
+exports.NOT_ON_DEMAND = NOT_ON_DEMAND;
 function resolveDebug(debug) {
     if (debug === undefined) {
         return false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "3.0.19",
+  "version": "3.0.23",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -44,14 +44,14 @@
     "@swc/register": "^0.1.10",
     "autoprefixer": "^10.4.2",
     "cssnano": "^5.0.16",
-    "esbuild": "^0.14.10",
+    "esbuild": "^0.14.21",
     "eslint": "^8.8.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "jest": "^27.4.7",
-    "jest-diff": "^27.4.6",
-    "postcss": "^8.4.5",
+    "jest": "^27.5.1",
+    "jest-diff": "^27.5.1",
     "prettier": "^2.5.1",
+    "prettier-plugin-tailwindcss": "^0.1.7",
     "rimraf": "^3.0.0"
   },
   "peerDependencies": {
@@ -72,6 +72,7 @@
     "is-glob": "^4.0.3",
     "normalize-path": "^3.0.0",
     "object-hash": "^2.2.0",
+    "postcss": "^8.4.6",
     "postcss-js": "^4.0.0",
     "postcss-load-config": "^3.1.0",
     "postcss-nested": "5.0.6",

package/peers/index.js

@@ -22,31 +22,31 @@ var require_picocolors = __commonJS({
     };
     var createColors = (enabled = isColorSupported) => ({
       isColorSupported: enabled,
-      reset: enabled ? (s) => `${s}` : String,
-      bold: enabled ? formatter("", "", "") : String,
-      dim: enabled ? formatter("", "", "") : String,
-      italic: enabled ? formatter("", "") : String,
-      underline: enabled ? formatter("", "") : String,
-      inverse: enabled ? formatter("", "") : String,
-      hidden: enabled ? formatter("", "") : String,
-      strikethrough: enabled ? formatter("", "") : String,
-      black: enabled ? formatter("", "") : String,
-      red: enabled ? formatter("", "") : String,
-      green: enabled ? formatter("", "") : String,
-      yellow: enabled ? formatter("", "") : String,
-      blue: enabled ? formatter("", "") : String,
-      magenta: enabled ? formatter("", "") : String,
-      cyan: enabled ? formatter("", "") : String,
-      white: enabled ? formatter("", "") : String,
-      gray: enabled ? formatter("", "") : String,
-      bgBlack: enabled ? formatter("", "") : String,
-      bgRed: enabled ? formatter("", "") : String,
-      bgGreen: enabled ? formatter("", "") : String,
-      bgYellow: enabled ? formatter("", "") : String,
-      bgBlue: enabled ? formatter("", "") : String,
-      bgMagenta: enabled ? formatter("", "") : String,
-      bgCyan: enabled ? formatter("", "") : String,
-      bgWhite: enabled ? formatter("", "") : String
+      reset: enabled ? (s) => `\x1B[0m${s}\x1B[0m` : String,
+      bold: enabled ? formatter("\x1B[1m", "\x1B[22m", "\x1B[22m\x1B[1m") : String,
+      dim: enabled ? formatter("\x1B[2m", "\x1B[22m", "\x1B[22m\x1B[2m") : String,
+      italic: enabled ? formatter("\x1B[3m", "\x1B[23m") : String,
+      underline: enabled ? formatter("\x1B[4m", "\x1B[24m") : String,
+      inverse: enabled ? formatter("\x1B[7m", "\x1B[27m") : String,
+      hidden: enabled ? formatter("\x1B[8m", "\x1B[28m") : String,
+      strikethrough: enabled ? formatter("\x1B[9m", "\x1B[29m") : String,
+      black: enabled ? formatter("\x1B[30m", "\x1B[39m") : String,
+      red: enabled ? formatter("\x1B[31m", "\x1B[39m") : String,
+      green: enabled ? formatter("\x1B[32m", "\x1B[39m") : String,
+      yellow: enabled ? formatter("\x1B[33m", "\x1B[39m") : String,
+      blue: enabled ? formatter("\x1B[34m", "\x1B[39m") : String,
+      magenta: enabled ? formatter("\x1B[35m", "\x1B[39m") : String,
+      cyan: enabled ? formatter("\x1B[36m", "\x1B[39m") : String,
+      white: enabled ? formatter("\x1B[37m", "\x1B[39m") : String,
+      gray: enabled ? formatter("\x1B[90m", "\x1B[39m") : String,
+      bgBlack: enabled ? formatter("\x1B[40m", "\x1B[49m") : String,
+      bgRed: enabled ? formatter("\x1B[41m", "\x1B[49m") : String,
+      bgGreen: enabled ? formatter("\x1B[42m", "\x1B[49m") : String,
+      bgYellow: enabled ? formatter("\x1B[43m", "\x1B[49m") : String,
+      bgBlue: enabled ? formatter("\x1B[44m", "\x1B[49m") : String,
+      bgMagenta: enabled ? formatter("\x1B[45m", "\x1B[49m") : String,
+      bgCyan: enabled ? formatter("\x1B[46m", "\x1B[49m") : String,
+      bgWhite: enabled ? formatter("\x1B[47m", "\x1B[49m") : String
     });
     module2.exports = createColors();
     module2.exports.createColors = createColors;
@@ -4407,11 +4407,13 @@ var require_parser = __commonJS({
         if (brackets.length > 0)
           this.unclosedBracket(bracket);
         if (end && colon) {
-          while (tokens.length) {
-            token = tokens[tokens.length - 1][0];
-            if (token !== "space" && token !== "comment")
-              break;
-            this.tokenizer.back(tokens.pop());
+          if (!customProperty) {
+            while (tokens.length) {
+              token = tokens[tokens.length - 1][0];
+              if (token !== "space" && token !== "comment")
+                break;
+              this.tokenizer.back(tokens.pop());
+            }
           }
           this.decl(tokens, customProperty);
         } else {
@@ -4467,7 +4469,14 @@ var require_parser = __commonJS({
           node.raws.before += node.prop[0];
           node.prop = node.prop.slice(1);
         }
-        let firstSpaces = this.spacesAndCommentsFromStart(tokens);
+        let firstSpaces = [];
+        let next;
+        while (tokens.length) {
+          next = tokens[0][0];
+          if (next !== "space" && next !== "comment")
+            break;
+          firstSpaces.push(tokens.shift());
+        }
         this.precheckMissedSemicolon(tokens);
         for (let i = tokens.length - 1; i >= 0; i--) {
           token = tokens[i];
@@ -4499,12 +4508,11 @@ var require_parser = __commonJS({
           }
         }
         let hasWord = tokens.some((i) => i[0] !== "space" && i[0] !== "comment");
-        this.raw(node, "value", tokens);
         if (hasWord) {
-          node.raws.between += firstSpaces;
-        } else {
-          node.value = firstSpaces + node.value;
+          node.raws.between += firstSpaces.map((i) => i[1]).join("");
+          firstSpaces = [];
         }
+        this.raw(node, "value", firstSpaces.concat(tokens), customProperty);
         if (node.value.includes(":") && !customProperty) {
           this.checkMissedSemicolon(tokens);
         }
@@ -4635,28 +4643,25 @@ var require_parser = __commonJS({
         if (node.type !== "comment")
           this.semicolon = false;
       }
-      raw(node, prop, tokens) {
+      raw(node, prop, tokens, customProperty) {
         let token, type;
         let length = tokens.length;
         let value = "";
         let clean = true;
         let next, prev;
-        let pattern = /^([#.|])?(\w)+/i;
         for (let i = 0; i < length; i += 1) {
           token = tokens[i];
           type = token[0];
-          if (type === "comment" && node.type === "rule") {
+          if (type === "space" && i === length - 1 && !customProperty) {
+            clean = false;
+          } else if (type === "comment") {
             prev = tokens[i - 1];
             next = tokens[i + 1];
-            if (prev[0] !== "space" && next[0] !== "space" && pattern.test(prev[1]) && pattern.test(next[1])) {
+            if (prev && next && prev[0] !== "space" && next[0] !== "space") {
               value += token[1];
             } else {
               clean = false;
             }
-            continue;
-          }
-          if (type === "comment" || type === "space" && i === length - 1) {
-            clean = false;
           } else {
             value += token[1];
           }
@@ -5356,8 +5361,12 @@ var require_no_work_result = __commonJS({
         } catch (error) {
           this.error = error;
         }
-        this._root = root;
-        return root;
+        if (this.error) {
+          throw this.error;
+        } else {
+          this._root = root;
+          return root;
+        }
       }
       get messages() {
         return [];
@@ -5408,7 +5417,7 @@ var require_processor = __commonJS({
     var Root = require_root();
     var Processor = class {
       constructor(plugins = []) {
-        this.version = "8.4.5";
+        this.version = "8.4.6";
         this.plugins = this.normalize(plugins);
       }
       use(plugin) {
@@ -19734,7 +19743,7 @@ var require_parse_cst = __commonJS({
                 str += "\b";
                 break;
               case "e":
-                str += "";
+                str += "\x1B";
                 break;
               case "f":
                 str += "\f";

package/src/corePlugins.js

@@ -70,7 +70,28 @@ export let variantPlugins = {
       'only-of-type',
 
       // State
-      'visited',
+      [
+        'visited',
+        ({ container }) => {
+          let toRemove = ['--tw-text-opacity', '--tw-border-opacity', '--tw-bg-opacity']
+
+          container.walkDecls((decl) => {
+            if (toRemove.includes(decl.prop)) {
+              decl.remove()
+
+              return
+            }
+
+            for (const varName of toRemove) {
+              if (decl.value.includes(`/ var(${varName})`)) {
+                decl.value = decl.value.replace(`/ var(${varName})`, '')
+              }
+            }
+          })
+
+          return ':visited'
+        },
+      ],
       'target',
       ['open', '[open]'],
 
@@ -100,15 +121,27 @@ export let variantPlugins = {
     ].map((variant) => (Array.isArray(variant) ? variant : [variant, `:${variant}`]))
 
     for (let [variantName, state] of pseudoVariants) {
-      addVariant(variantName, `&${state}`)
+      addVariant(variantName, (ctx) => {
+        let result = typeof state === 'function' ? state(ctx) : state
+
+        return `&${result}`
+      })
     }
 
     for (let [variantName, state] of pseudoVariants) {
-      addVariant(`group-${variantName}`, `:merge(.group)${state} &`)
+      addVariant(`group-${variantName}`, (ctx) => {
+        let result = typeof state === 'function' ? state(ctx) : state
+
+        return `:merge(.group)${result} &`
+      })
     }
 
     for (let [variantName, state] of pseudoVariants) {
-      addVariant(`peer-${variantName}`, `:merge(.peer)${state} ~ &`)
+      addVariant(`peer-${variantName}`, (ctx) => {
+        let result = typeof state === 'function' ? state(ctx) : state
+
+        return `:merge(.peer)${result} ~ &`
+      })
     }
   },
 

package/src/lib/defaultExtractor.js

@@ -8,6 +8,8 @@ const PATTERNS = [
   /([^<>"'`\s]*\[\w*\("[^"'`\s]*"\)\])/.source, // bg-[url("...")]
   /([^<>"'`\s]*\[\w*\('[^"`\s]*'\)\])/.source, // bg-[url('...'),url('...')]
   /([^<>"'`\s]*\[\w*\("[^'`\s]*"\)\])/.source, // bg-[url("..."),url("...")]
+  /([^<>"'`\s]*\[[^<>"'`\s]*\('[^"`\s]*'\)+\])/.source, // h-[calc(100%-theme('spacing.1'))]
+  /([^<>"'`\s]*\[[^<>"'`\s]*\("[^'`\s]*"\)+\])/.source, // h-[calc(100%-theme("spacing.1"))]
   /([^<>"'`\s]*\['[^"'`\s]*'\])/.source, // `content-['hello']` but not `content-['hello']']`
   /([^<>"'`\s]*\["[^"'`\s]*"\])/.source, // `content-["hello"]` but not `content-["hello"]"]`
   /([^<>"'`\s]*\[[^<>"'`\s]*:[^\]\s]*\])/.source, // `[attr:value]`

package/src/lib/expandApplyAtRules.js

@@ -161,12 +161,12 @@ function processApply(root, context) {
       }
 
       for (let applyCandidate of applyCandidates) {
-        if (!applyClassCache.has(applyCandidate)) {
-          if (applyCandidate === prefix(context, 'group')) {
-            // TODO: Link to specific documentation page with error code.
-            throw apply.error(`@apply should not be used with the '${applyCandidate}' utility`)
-          }
+        if ([prefix(context, 'group'), prefix(context, 'peer')].includes(applyCandidate)) {
+          // TODO: Link to specific documentation page with error code.
+          throw apply.error(`@apply should not be used with the '${applyCandidate}' utility`)
+        }
 
+        if (!applyClassCache.has(applyCandidate)) {
           throw apply.error(
             `The \`${applyCandidate}\` class does not exist. If \`${applyCandidate}\` is a custom class, make sure it is defined within a \`@layer\` directive.`
           )

package/src/lib/expandTailwindAtRules.js

@@ -158,7 +158,7 @@ export default function expandTailwindAtRules(context) {
     // ---
 
     // Find potential rules in changed files
-    let candidates = new Set(['*'])
+    let candidates = new Set([sharedState.NOT_ON_DEMAND])
     let seen = new Set()
 
     env.DEBUG && console.time('Reading changed files')

package/src/lib/generateRules.js

@@ -5,6 +5,7 @@ import isPlainObject from '../util/isPlainObject'
 import prefixSelector from '../util/prefixSelector'
 import { updateAllClasses } from '../util/pluginUtils'
 import log from '../util/log'
+import * as sharedState from './sharedState'
 import { formatVariantSelector, finalizeSelector } from '../util/formatVariantSelector'
 import { asClass } from '../util/nameClass'
 import { normalize } from '../util/dataTypes'
@@ -234,7 +235,7 @@ function applyVariant(variant, matches, context) {
         // For example:
         // .sm:underline {} is a variant of something in the utilities layer
         // .sm:container {} is a variant of the container component
-        clone.nodes[0].raws.tailwind = { parentLayer: meta.layer }
+        clone.nodes[0].raws.tailwind = { ...clone.nodes[0].raws.tailwind, parentLayer: meta.layer }
 
         let withOffset = [
           {
@@ -382,12 +383,16 @@ function* resolveMatchedPlugins(classCandidate, context) {
 }
 
 function splitWithSeparator(input, separator) {
+  if (input === sharedState.NOT_ON_DEMAND) {
+    return [sharedState.NOT_ON_DEMAND]
+  }
+
   return input.split(new RegExp(`\\${separator}(?![^[]*\\])`, 'g'))
 }
 
 function* recordCandidates(matches, classCandidate) {
   for (const match of matches) {
-    match[1].raws.tailwind = { classCandidate }
+    match[1].raws.tailwind = { ...match[1].raws.tailwind, classCandidate }
 
     yield match
   }
@@ -517,6 +522,8 @@ function* resolveMatches(candidate, context) {
     }
 
     for (let match of matches) {
+      match[1].raws.tailwind = { ...match[1].raws.tailwind, candidate }
+
       // Apply final format selector
       if (match[0].collectedFormats) {
         let finalFormat = formatVariantSelector('&', ...match[0].collectedFormats)

package/src/lib/setupContextUtils.js

@@ -19,6 +19,12 @@ import { toPath } from '../util/toPath'
 import log from '../util/log'
 import negateValue from '../util/negateValue'
 import isValidArbitraryValue from '../util/isValidArbitraryValue'
+import { generateRules } from './generateRules'
+
+function prefix(context, selector) {
+  let prefix = context.tailwindConfig.prefix
+  return typeof prefix === 'function' ? prefix(selector) : prefix + selector
+}
 
 function parseVariantFormatString(input) {
   if (input.includes('{')) {
@@ -132,7 +138,7 @@ function withIdentifiers(styles) {
 
     // If this isn't "on-demandable", assign it a universal candidate to always include it.
     if (containsNonOnDemandableSelectors) {
-      candidates.unshift('*')
+      candidates.unshift(sharedState.NOT_ON_DEMAND)
     }
 
     // However, it could be that it also contains "on-demandable" candidates.
@@ -157,8 +163,8 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
   }
 
   function prefixIdentifier(identifier, options) {
-    if (identifier === '*') {
-      return '*'
+    if (identifier === sharedState.NOT_ON_DEMAND) {
+      return sharedState.NOT_ON_DEMAND
     }
 
     if (!options.respectPrefix) {
@@ -733,9 +739,35 @@ function registerPlugins(plugins, context) {
     }
   }
 
+  // A list of utilities that are used by certain Tailwind CSS utilities but
+  // that don't exist on their own. This will result in them "not existing" and
+  // sorting could be weird since you still require them in order to make the
+  // host utitlies work properly. (Thanks Biology)
+  let parasiteUtilities = new Set([prefix(context, 'group'), prefix(context, 'peer')])
+  context.getClassOrder = function getClassOrder(classes) {
+    let sortedClassNames = new Map()
+    for (let [sort, rule] of generateRules(new Set(classes), context)) {
+      if (sortedClassNames.has(rule.raws.tailwind.candidate)) continue
+      sortedClassNames.set(rule.raws.tailwind.candidate, sort)
+    }
+
+    return classes.map((className) => {
+      let order = sortedClassNames.get(className) ?? null
+
+      if (order === null && parasiteUtilities.has(className)) {
+        // This will make sure that it is at the very beginning of the
+        // `components` layer which technically means 'before any
+        // components'.
+        order = context.layerOrder.components
+      }
+
+      return [className, order]
+    })
+  }
+
   // Generate a list of strings for autocompletion purposes, e.g.
   // ['uppercase', 'lowercase', ...]
-  context.getClassList = function () {
+  context.getClassList = function getClassList() {
     let output = []
 
     for (let util of classList) {

package/src/lib/sharedState.js

@@ -5,6 +5,7 @@ export const env = {
 export const contextMap = new Map()
 export const configContextMap = new Map()
 export const contextSourcesMap = new Map()
+export const NOT_ON_DEMAND = new String('*')
 
 export function resolveDebug(debug) {
   if (debug === undefined) {