tailwindcss 0.0.0-insiders.d87bdb2 → 0.0.0-insiders.db475be

package/CHANGELOG.md

@@ -9,9 +9,37 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### 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))
+
+## [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
+
+### Fixed
+
 - Fix preflight border color fallback ([#7288](https://github.com/tailwindlabs/tailwindcss/pull/7288))
 - Correctly parse shadow lengths without a leading zero ([#7289](https://github.com/tailwindlabs/tailwindcss/pull/7289))
 - Don't crash when scanning extremely long class candidates ([#7331](https://github.com/tailwindlabs/tailwindcss/pull/7331))
+- Use less hacky fix for URLs detected as custom properties ([#7275](https://github.com/tailwindlabs/tailwindcss/pull/7275))
+- Correctly generate negative utilities when dash is before the prefix ([#7295](https://github.com/tailwindlabs/tailwindcss/pull/7295))
+- Detect prefixed negative utilities in the safelist ([#7295](https://github.com/tailwindlabs/tailwindcss/pull/7295))
 
 ## [3.0.18] - 2022-01-28
 
@@ -1840,7 +1868,11 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.18...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.22...HEAD
+[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
 [3.0.16]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.15...v3.0.16

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/generateRules.js

@@ -72,8 +72,14 @@ function applyPrefix(matches, context) {
                     match[1].clone()
                 ]
             });
+            let classCandidate = match[1].raws.tailwind.classCandidate;
             container.walkRules((r)=>{
-                r.selector = (0, _prefixSelector).default(context.tailwindConfig.prefix, r.selector);
+                // If this is a negative utility with a dash *before* the prefix we
+                // have to ensure that the generated selector matches the candidate
+                // Not doing this will cause `-tw-top-1` to generate the class `.tw--top-1`
+                // The disconnect between candidate <-> class can cause @apply to hard crash.
+                let shouldPrependNegative = classCandidate.startsWith('-');
+                r.selector = (0, _prefixSelector).default(context.tailwindConfig.prefix, r.selector, shouldPrependNegative);
             });
             match[1] = container.nodes[0];
         }
@@ -222,6 +228,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;
@@ -265,10 +272,32 @@ function parseRules(rule, cache, options = {}) {
 }
 const IS_VALID_PROPERTY_NAME = /^[a-z_-]/;
 function isValidPropName(name) {
-    // TODO: properly fix this!
-    return IS_VALID_PROPERTY_NAME.test(name) && !name.startsWith('http');
+    return IS_VALID_PROPERTY_NAME.test(name);
+}
+/**
+ * @param {string} declaration
+ * @returns {boolean}
+ */ function looksLikeUri(declaration) {
+    // Quick bailout for obvious non-urls
+    // This doesn't support schemes that don't use a leading // but that's unlikely to be a problem
+    if (!declaration.includes('://')) {
+        return false;
+    }
+    try {
+        const url = new URL(declaration);
+        return url.scheme !== '' && url.host !== '';
+    } catch (err) {
+        // Definitely not a valid url
+        return false;
+    }
 }
 function isParsableCssValue(property, value) {
+    // We don't want to to treat [https://example.com] as a custom property
+    // Even though, according to the CSS grammar, it's a totally valid CSS declaration
+    // So we short-circuit here by checking if the custom property looks like a url
+    if (looksLikeUri(`${property}:${value}`)) {
+        return false;
+    }
     try {
         _postcss.default.parse(`a{${property}:${value}}`).toResult();
         return true;
@@ -348,6 +377,15 @@ function* resolveMatchedPlugins(classCandidate, context) {
 function splitWithSeparator(input, separator) {
     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;
+    }
+}
 function* resolveMatches(candidate, context) {
     let separator = context.tailwindConfig.separator;
     let [classCandidate, ...variants] = splitWithSeparator(candidate, separator).reverse();
@@ -457,7 +495,9 @@ function* resolveMatches(candidate, context) {
             ]);
             continue;
         }
-        matches = applyPrefix(matches.flat(), context);
+        matches = matches.flat();
+        matches = Array.from(recordCandidates(matches, classCandidate));
+        matches = applyPrefix(matches, context);
         if (important) {
             matches = applyImportant(matches, context);
         }
@@ -465,6 +505,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.`);
@@ -673,18 +678,31 @@ function registerPlugins(plugins, context) {
         }
         if (checks.length > 0) {
             let patternMatchingCount = new Map();
+            let prefixLength = context.tailwindConfig.prefix.length;
             for (let util of classList){
                 let utils = Array.isArray(util) ? (()=>{
                     let [utilName, options] = util;
                     var ref;
-                    let classes = Object.keys((ref = options === null || options === void 0 ? void 0 : options.values) !== null && ref !== void 0 ? ref : {}).map((value)=>(0, _nameClass).formatClass(utilName, value)
+                    let values = Object.keys((ref = options === null || options === void 0 ? void 0 : options.values) !== null && ref !== void 0 ? ref : {});
+                    let classes = values.map((value)=>(0, _nameClass).formatClass(utilName, value)
                     );
                     if (options === null || options === void 0 ? void 0 : options.supportsNegativeValues) {
+                        // This is the normal negated version
+                        // e.g. `-inset-1` or `-tw-inset-1`
                         classes = [
                             ...classes,
                             ...classes.map((cls)=>'-' + cls
                             )
                         ];
+                        // This is the negated version *after* the prefix
+                        // e.g. `tw--inset-1`
+                        // The prefix is already attached to util name
+                        // So we add the negative after the prefix
+                        classes = [
+                            ...classes,
+                            ...classes.map((cls)=>cls.slice(0, prefixLength) + '-' + cls.slice(prefixLength)
+                            ), 
+                        ];
                     }
                     return classes;
                 })() : [
@@ -723,9 +741,44 @@ 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.sortClassList = function sortClassList(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
+            ];
+        }).sort(([, a], [, z])=>{
+            if (a === z) return 0;
+            if (a === null) return -1;
+            if (z === null) return 1;
+            return (0, _bigSign).default(a - z);
+        }).map(([className])=>className
+        );
+    };
     // 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/util/prefixSelector.js

@@ -4,18 +4,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = _default;
 var _postcssSelectorParser = _interopRequireDefault(require("postcss-selector-parser"));
-var _tap = require("./tap");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function _default(prefix, selector) {
+function _default(prefix, selector, prependNegative = false) {
     return (0, _postcssSelectorParser).default((selectors)=>{
         selectors.walkClasses((classSelector)=>{
-            (0, _tap).tap(classSelector.value, (baseClass)=>{
-                classSelector.value = `${prefix}${baseClass}`;
-            });
+            let baseClass = classSelector.value;
+            let shouldPlaceNegativeBeforePrefix = prependNegative && baseClass.startsWith('-');
+            classSelector.value = shouldPlaceNegativeBeforePrefix ? `-${prefix}${baseClass.slice(1)}` : `${prefix}${baseClass}`;
         });
     }).processSync(selector);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "0.0.0-insiders.d87bdb2",
+  "version": "0.0.0-insiders.db475be",
   "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/generateRules.js

@@ -63,9 +63,23 @@ function applyPrefix(matches, context) {
     let [meta] = match
     if (meta.options.respectPrefix) {
       let container = postcss.root({ nodes: [match[1].clone()] })
+      let classCandidate = match[1].raws.tailwind.classCandidate
+
       container.walkRules((r) => {
-        r.selector = prefixSelector(context.tailwindConfig.prefix, r.selector)
+        // If this is a negative utility with a dash *before* the prefix we
+        // have to ensure that the generated selector matches the candidate
+
+        // Not doing this will cause `-tw-top-1` to generate the class `.tw--top-1`
+        // The disconnect between candidate <-> class can cause @apply to hard crash.
+        let shouldPrependNegative = classCandidate.startsWith('-')
+
+        r.selector = prefixSelector(
+          context.tailwindConfig.prefix,
+          r.selector,
+          shouldPrependNegative
+        )
       })
+
       match[1] = container.nodes[0]
     }
   }
@@ -220,7 +234,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 = [
           {
@@ -262,11 +276,37 @@ function parseRules(rule, cache, options = {}) {
 const IS_VALID_PROPERTY_NAME = /^[a-z_-]/
 
 function isValidPropName(name) {
-  // TODO: properly fix this!
-  return IS_VALID_PROPERTY_NAME.test(name) && !name.startsWith('http')
+  return IS_VALID_PROPERTY_NAME.test(name)
+}
+
+/**
+ * @param {string} declaration
+ * @returns {boolean}
+ */
+function looksLikeUri(declaration) {
+  // Quick bailout for obvious non-urls
+  // This doesn't support schemes that don't use a leading // but that's unlikely to be a problem
+  if (!declaration.includes('://')) {
+    return false
+  }
+
+  try {
+    const url = new URL(declaration)
+    return url.scheme !== '' && url.host !== ''
+  } catch (err) {
+    // Definitely not a valid url
+    return false
+  }
 }
 
 function isParsableCssValue(property, value) {
+  // We don't want to to treat [https://example.com] as a custom property
+  // Even though, according to the CSS grammar, it's a totally valid CSS declaration
+  // So we short-circuit here by checking if the custom property looks like a url
+  if (looksLikeUri(`${property}:${value}`)) {
+    return false
+  }
+
   try {
     postcss.parse(`a{${property}:${value}}`).toResult()
     return true
@@ -345,6 +385,14 @@ function splitWithSeparator(input, separator) {
   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
+  }
+}
+
 function* resolveMatches(candidate, context) {
   let separator = context.tailwindConfig.separator
   let [classCandidate, ...variants] = splitWithSeparator(candidate, separator).reverse()
@@ -456,7 +504,9 @@ function* resolveMatches(candidate, context) {
       continue
     }
 
-    matches = applyPrefix(matches.flat(), context)
+    matches = matches.flat()
+    matches = Array.from(recordCandidates(matches, classCandidate))
+    matches = applyPrefix(matches, context)
 
     if (important) {
       matches = applyImportant(matches, context)
@@ -467,6 +517,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('{')) {
@@ -666,17 +672,30 @@ function registerPlugins(plugins, context) {
 
     if (checks.length > 0) {
       let patternMatchingCount = new Map()
+      let prefixLength = context.tailwindConfig.prefix.length
 
       for (let util of classList) {
         let utils = Array.isArray(util)
           ? (() => {
               let [utilName, options] = util
-              let classes = Object.keys(options?.values ?? {}).map((value) =>
-                formatClass(utilName, value)
-              )
+              let values = Object.keys(options?.values ?? {})
+              let classes = values.map((value) => formatClass(utilName, value))
 
               if (options?.supportsNegativeValues) {
+                // This is the normal negated version
+                // e.g. `-inset-1` or `-tw-inset-1`
                 classes = [...classes, ...classes.map((cls) => '-' + cls)]
+
+                // This is the negated version *after* the prefix
+                // e.g. `tw--inset-1`
+                // The prefix is already attached to util name
+                // So we add the negative after the prefix
+                classes = [
+                  ...classes,
+                  ...classes.map(
+                    (cls) => cls.slice(0, prefixLength) + '-' + cls.slice(prefixLength)
+                  ),
+                ]
               }
 
               return classes
@@ -720,9 +739,43 @@ 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.sortClassList = function sortClassList(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]
+      })
+      .sort(([, a], [, z]) => {
+        if (a === z) return 0
+        if (a === null) return -1
+        if (z === null) return 1
+        return bigSign(a - z)
+      })
+      .map(([className]) => className)
+  }
+
   // 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/util/prefixSelector.js

@@ -1,12 +1,14 @@
 import parser from 'postcss-selector-parser'
-import { tap } from './tap'
 
-export default function (prefix, selector) {
+export default function (prefix, selector, prependNegative = false) {
   return parser((selectors) => {
     selectors.walkClasses((classSelector) => {
-      tap(classSelector.value, (baseClass) => {
-        classSelector.value = `${prefix}${baseClass}`
-      })
+      let baseClass = classSelector.value
+      let shouldPlaceNegativeBeforePrefix = prependNegative && baseClass.startsWith('-')
+
+      classSelector.value = shouldPlaceNegativeBeforePrefix
+        ? `-${prefix}${baseClass.slice(1)}`
+        : `${prefix}${baseClass}`
     })
   }).processSync(selector)
 }