tailwindcss 0.0.0-insiders.ea139f2 → 0.0.0-insiders.ea4e1cd

package/lib/lib/generateRules.js

@@ -2,26 +2,85 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.generateRules = exports.resolveMatches = void 0;
-var _postcss = _interopRequireDefault(require("postcss"));
-var _postcssSelectorParser = _interopRequireDefault(require("postcss-selector-parser"));
-var _parseObjectStyles = _interopRequireDefault(require("../util/parseObjectStyles"));
-var _isPlainObject = _interopRequireDefault(require("../util/isPlainObject"));
-var _prefixSelector = _interopRequireDefault(require("../util/prefixSelector"));
-var _pluginUtils = require("../util/pluginUtils");
-var _log = _interopRequireDefault(require("../util/log"));
-var _formatVariantSelector = require("../util/formatVariantSelector");
-var _nameClass = require("../util/nameClass");
-var _dataTypes = require("../util/dataTypes");
-var _isValidArbitraryValue = _interopRequireDefault(require("../util/isValidArbitraryValue"));
-function _interopRequireDefault(obj) {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getClassNameFromSelector: function() {
+        return getClassNameFromSelector;
+    },
+    resolveMatches: function() {
+        return resolveMatches;
+    },
+    generateRules: function() {
+        return generateRules;
+    }
+});
+const _postcss = /*#__PURE__*/ _interop_require_default(require("postcss"));
+const _postcssselectorparser = /*#__PURE__*/ _interop_require_default(require("postcss-selector-parser"));
+const _parseObjectStyles = /*#__PURE__*/ _interop_require_default(require("../util/parseObjectStyles"));
+const _isPlainObject = /*#__PURE__*/ _interop_require_default(require("../util/isPlainObject"));
+const _prefixSelector = /*#__PURE__*/ _interop_require_default(require("../util/prefixSelector"));
+const _pluginUtils = require("../util/pluginUtils");
+const _log = /*#__PURE__*/ _interop_require_default(require("../util/log"));
+const _sharedState = /*#__PURE__*/ _interop_require_wildcard(require("./sharedState"));
+const _formatVariantSelector = require("../util/formatVariantSelector");
+const _nameClass = require("../util/nameClass");
+const _dataTypes = require("../util/dataTypes");
+const _setupContextUtils = require("./setupContextUtils");
+const _isSyntacticallyValidPropertyValue = /*#__PURE__*/ _interop_require_default(require("../util/isSyntacticallyValidPropertyValue"));
+const _splitAtTopLevelOnly = require("../util/splitAtTopLevelOnly.js");
+const _featureFlags = require("../featureFlags");
+const _applyImportantSelector = require("../util/applyImportantSelector");
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-let classNameParser = (0, _postcssSelectorParser).default((selectors)=>{
-    return selectors.first.filter(({ type  })=>type === 'class'
-    ).pop().value;
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+let classNameParser = (0, _postcssselectorparser.default)((selectors)=>{
+    return selectors.first.filter(({ type  })=>type === "class").pop().value;
 });
 function getClassNameFromSelector(selector) {
     return classNameParser.transformSync(selector);
@@ -33,35 +92,47 @@ function getClassNameFromSelector(selector) {
 // Example with dynamic classes:
 // ['grid-cols', '[[linename],1fr,auto]']
 // ['grid', 'cols-[[linename],1fr,auto]']
-function* candidatePermutations(candidate, lastIndex = Infinity) {
-    if (lastIndex < 0) {
-        return;
-    }
-    let dashIdx;
-    if (lastIndex === Infinity && candidate.endsWith(']')) {
-        let bracketIdx = candidate.indexOf('[');
-        // If character before `[` isn't a dash or a slash, this isn't a dynamic class
-        // eg. string[]
-        dashIdx = [
-            '-',
-            '/'
-        ].includes(candidate[bracketIdx - 1]) ? bracketIdx - 1 : -1;
-    } else {
-        dashIdx = candidate.lastIndexOf('-', lastIndex);
-    }
-    if (dashIdx < 0) {
-        return;
-    }
-    let prefix = candidate.slice(0, dashIdx);
-    let modifier = candidate.slice(dashIdx + 1);
-    yield [
-        prefix,
-        modifier
-    ];
-    yield* candidatePermutations(candidate, dashIdx - 1);
+function* candidatePermutations(candidate) {
+    let lastIndex = Infinity;
+    while(lastIndex >= 0){
+        let dashIdx;
+        let wasSlash = false;
+        if (lastIndex === Infinity && candidate.endsWith("]")) {
+            let bracketIdx = candidate.indexOf("[");
+            // If character before `[` isn't a dash or a slash, this isn't a dynamic class
+            // eg. string[]
+            if (candidate[bracketIdx - 1] === "-") {
+                dashIdx = bracketIdx - 1;
+            } else if (candidate[bracketIdx - 1] === "/") {
+                dashIdx = bracketIdx - 1;
+                wasSlash = true;
+            } else {
+                dashIdx = -1;
+            }
+        } else if (lastIndex === Infinity && candidate.includes("/")) {
+            dashIdx = candidate.lastIndexOf("/");
+            wasSlash = true;
+        } else {
+            dashIdx = candidate.lastIndexOf("-", lastIndex);
+        }
+        if (dashIdx < 0) {
+            break;
+        }
+        let prefix = candidate.slice(0, dashIdx);
+        let modifier = candidate.slice(wasSlash ? dashIdx : dashIdx + 1);
+        lastIndex = dashIdx - 1;
+        // TODO: This feels a bit hacky
+        if (prefix === "" || modifier === "/") {
+            continue;
+        }
+        yield [
+            prefix,
+            modifier
+        ];
+    }
 }
 function applyPrefix(matches, context) {
-    if (matches.length === 0 || context.tailwindConfig.prefix === '') {
+    if (matches.length === 0 || context.tailwindConfig.prefix === "") {
         return matches;
     }
     for (let match of matches){
@@ -72,15 +143,21 @@ 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];
         }
     }
     return matches;
 }
-function applyImportant(matches) {
+function applyImportant(matches, classCandidate) {
     if (matches.length === 0) {
         return matches;
     }
@@ -92,11 +169,13 @@ function applyImportant(matches) {
             ]
         });
         container.walkRules((r)=>{
-            r.selector = (0, _pluginUtils).updateAllClasses(r.selector, (className)=>{
-                return `!${className}`;
-            });
-            r.walkDecls((d)=>d.important = true
-            );
+            let ast = (0, _postcssselectorparser.default)().astSync(r.selector);
+            // Remove extraneous selectors that do not include the base candidate
+            ast.each((sel)=>(0, _formatVariantSelector.eliminateIrrelevantSelectors)(sel, classCandidate));
+            // Update all instances of the base candidate to include the important marker
+            (0, _pluginUtils.updateAllClasses)(ast, (className)=>className === classCandidate ? `!${className}` : className);
+            r.selector = ast.toString();
+            r.walkDecls((d)=>d.important = true);
         });
         result.push([
             {
@@ -120,28 +199,94 @@ function applyVariant(variant, matches, context) {
     if (matches.length === 0) {
         return matches;
     }
+    /** @type {{modifier: string | null, value: string | null}} */ let args = {
+        modifier: null,
+        value: _sharedState.NONE
+    };
+    // Retrieve "modifier"
+    {
+        let [baseVariant, ...modifiers] = (0, _splitAtTopLevelOnly.splitAtTopLevelOnly)(variant, "/");
+        // This is a hack to support variants with `/` in them, like `ar-1/10/20:text-red-500`
+        // In this case 1/10 is a value but /20 is a modifier
+        if (modifiers.length > 1) {
+            baseVariant = baseVariant + "/" + modifiers.slice(0, -1).join("/");
+            modifiers = modifiers.slice(-1);
+        }
+        if (modifiers.length && !context.variantMap.has(variant)) {
+            variant = baseVariant;
+            args.modifier = modifiers[0];
+            if (!(0, _featureFlags.flagEnabled)(context.tailwindConfig, "generalizedModifiers")) {
+                return [];
+            }
+        }
+    }
+    // Retrieve "arbitrary value"
+    if (variant.endsWith("]") && !variant.startsWith("[")) {
+        // We either have:
+        //   @[200px]
+        //   group-[:hover]
+        //
+        // But we don't want:
+        //   @-[200px]        (`-` is incorrect)
+        //   group[:hover]    (`-` is missing)
+        let match = /(.)(-?)\[(.*)\]/g.exec(variant);
+        if (match) {
+            let [, char, seperator, value] = match;
+            // @-[200px] case
+            if (char === "@" && seperator === "-") return [];
+            // group[:hover] case
+            if (char !== "@" && seperator === "") return [];
+            variant = variant.replace(`${seperator}[${value}]`, "");
+            args.value = value;
+        }
+    }
+    // Register arbitrary variants
+    if (isArbitraryValue(variant) && !context.variantMap.has(variant)) {
+        let sort = context.offsets.recordVariant(variant);
+        let selector = (0, _dataTypes.normalize)(variant.slice(1, -1));
+        let selectors = (0, _splitAtTopLevelOnly.splitAtTopLevelOnly)(selector, ",");
+        // We do not support multiple selectors for arbitrary variants
+        if (selectors.length > 1) {
+            return [];
+        }
+        if (!selectors.every(_setupContextUtils.isValidVariantFormatString)) {
+            return [];
+        }
+        let records = selectors.map((sel, idx)=>[
+                context.offsets.applyParallelOffset(sort, idx),
+                (0, _setupContextUtils.parseVariant)(sel.trim())
+            ]);
+        context.variantMap.set(variant, records);
+    }
     if (context.variantMap.has(variant)) {
-        let variantFunctionTuples = context.variantMap.get(variant);
+        let isArbitraryVariant = isArbitraryValue(variant);
+        let variantFunctionTuples = context.variantMap.get(variant).slice();
         let result = [];
-        for (let [meta, rule1] of matches){
+        for (let [meta, rule] of matches){
+            // Don't generate variants for user css
+            if (meta.layer === "user") {
+                continue;
+            }
             let container = _postcss.default.root({
                 nodes: [
-                    rule1.clone()
+                    rule.clone()
                 ]
             });
-            for (let [variantSort, variantFunction] of variantFunctionTuples){
-                let clone = container.clone();
+            for (let [variantSort, variantFunction, containerFromArray] of variantFunctionTuples){
+                let clone = (containerFromArray !== null && containerFromArray !== void 0 ? containerFromArray : container).clone();
                 let collectedFormats = [];
-                let originals = new Map();
                 function prepareBackup() {
-                    if (originals.size > 0) return; // Already prepared, chicken out
-                    clone.walkRules((rule)=>originals.set(rule, rule.selector)
-                    );
+                    // Already prepared, chicken out
+                    if (clone.raws.neededBackup) {
+                        return;
+                    }
+                    clone.raws.neededBackup = true;
+                    clone.walkRules((rule)=>rule.raws.originalSelector = rule.selector);
                 }
                 function modifySelectors(modifierFunction) {
                     prepareBackup();
                     clone.each((rule)=>{
-                        if (rule.type !== 'rule') {
+                        if (rule.type !== "rule") {
                             return;
                         }
                         rule.selectors = rule.selectors.map((selector)=>{
@@ -171,29 +316,56 @@ function applyVariant(variant, matches, context) {
                         clone.append(wrapper);
                     },
                     format (selectorFormat) {
-                        collectedFormats.push(selectorFormat);
-                    }
+                        collectedFormats.push({
+                            format: selectorFormat,
+                            isArbitraryVariant
+                        });
+                    },
+                    args
                 });
-                if (typeof ruleWithVariant === 'string') {
-                    collectedFormats.push(ruleWithVariant);
+                // It can happen that a list of format strings is returned from within the function. In that
+                // case, we have to process them as well. We can use the existing `variantSort`.
+                if (Array.isArray(ruleWithVariant)) {
+                    for (let [idx, variantFunction] of ruleWithVariant.entries()){
+                        // This is a little bit scary since we are pushing to an array of items that we are
+                        // currently looping over. However, you can also think of it like a processing queue
+                        // where you keep handling jobs until everything is done and each job can queue more
+                        // jobs if needed.
+                        variantFunctionTuples.push([
+                            context.offsets.applyParallelOffset(variantSort, idx),
+                            variantFunction,
+                            // If the clone has been modified we have to pass that back
+                            // though so each rule can use the modified container
+                            clone.clone()
+                        ]);
+                    }
+                    continue;
+                }
+                if (typeof ruleWithVariant === "string") {
+                    collectedFormats.push({
+                        format: ruleWithVariant,
+                        isArbitraryVariant
+                    });
                 }
                 if (ruleWithVariant === null) {
                     continue;
                 }
-                // We filled the `originals`, therefore we assume that somebody touched
+                // We had to backup selectors, therefore we assume that somebody touched
                 // `container` or `modifySelectors`. Let's see if they did, so that we
                 // can restore the selectors, and collect the format strings.
-                if (originals.size > 0) {
+                if (clone.raws.neededBackup) {
+                    delete clone.raws.neededBackup;
                     clone.walkRules((rule)=>{
-                        if (!originals.has(rule)) return;
-                        let before = originals.get(rule);
+                        let before = rule.raws.originalSelector;
+                        if (!before) return;
+                        delete rule.raws.originalSelector;
                         if (before === rule.selector) return; // No mutation happened
                         let modified = rule.selector;
                         // Rebuild the base selector, this is what plugin authors would do
                         // as well. E.g.: `${variant}${separator}${className}`.
                         // However, plugin authors probably also prepend or append certain
                         // classes, pseudos, ids, ...
-                        let rebuiltBase = (0, _postcssSelectorParser).default((selectors)=>{
+                        let rebuiltBase = (0, _postcssselectorparser.default)((selectors)=>{
                             selectors.walkClasses((classNode)=>{
                                 classNode.value = `${variant}${context.tailwindConfig.separator}${classNode.value}`;
                             });
@@ -209,18 +381,29 @@ function applyVariant(variant, matches, context) {
                         //      modified (by plugin): .foo .foo\\:markdown > p
                         //    rebuiltBase (internal): .foo\\:markdown > p
                         //                    format: .foo &
-                        collectedFormats.push(modified.replace(rebuiltBase, '&'));
+                        collectedFormats.push({
+                            format: modified.replace(rebuiltBase, "&"),
+                            isArbitraryVariant
+                        });
                         rule.selector = before;
                     });
                 }
-                var _collectedFormats;
+                // This tracks the originating layer for the variant
+                // 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 = {
+                    ...clone.nodes[0].raws.tailwind,
+                    parentLayer: meta.layer
+                };
+                var _meta_collectedFormats;
                 let withOffset = [
                     {
                         ...meta,
-                        sort: variantSort | meta.sort,
-                        collectedFormats: ((_collectedFormats = meta.collectedFormats) !== null && _collectedFormats !== void 0 ? _collectedFormats : []).concat(collectedFormats)
+                        sort: context.offsets.applyVariantOffset(meta.sort, variantSort, Object.assign(args, context.variantOptions.get(variant))),
+                        collectedFormats: ((_meta_collectedFormats = meta.collectedFormats) !== null && _meta_collectedFormats !== void 0 ? _meta_collectedFormats : []).concat(collectedFormats)
                     },
-                    clone.nodes[0], 
+                    clone.nodes[0]
                 ];
                 result.push(withOffset);
             }
@@ -229,10 +412,9 @@ function applyVariant(variant, matches, context) {
     }
     return [];
 }
-function parseRules(rule, cache, options = {
-}) {
+function parseRules(rule, cache, options = {}) {
     // PostCSS node
-    if (!(0, _isPlainObject).default(rule) && !Array.isArray(rule)) {
+    if (!(0, _isPlainObject.default)(rule) && !Array.isArray(rule)) {
         return [
             [
                 rule
@@ -246,65 +428,117 @@ function parseRules(rule, cache, options = {
     }
     // Simple object
     if (!cache.has(rule)) {
-        cache.set(rule, (0, _parseObjectStyles).default(rule));
+        cache.set(rule, (0, _parseObjectStyles.default)(rule));
     }
     return [
         cache.get(rule),
         options
     ];
 }
+const IS_VALID_PROPERTY_NAME = /^[a-z_-]/;
+function isValidPropName(name) {
+    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 isParsableNode(node) {
+    let isParsable = true;
+    node.walkDecls((decl)=>{
+        if (!isParsableCssValue(decl.prop, decl.value)) {
+            isParsable = false;
+            return false;
+        }
+    });
+    return isParsable;
+}
+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;
+    } catch (err) {
+        return false;
+    }
+}
 function extractArbitraryProperty(classCandidate, context) {
-    var ref;
-    let [, property, value] = (ref = classCandidate.match(/^\[([a-zA-Z0-9-_]+):(\S+)\]$/)) !== null && ref !== void 0 ? ref : [];
+    var _classCandidate_match;
+    let [, property, value] = (_classCandidate_match = classCandidate.match(/^\[([a-zA-Z0-9-_]+):(\S+)\]$/)) !== null && _classCandidate_match !== void 0 ? _classCandidate_match : [];
     if (value === undefined) {
         return null;
     }
-    let normalized = (0, _dataTypes).normalize(value);
-    if (!(0, _isValidArbitraryValue).default(normalized)) {
+    if (!isValidPropName(property)) {
+        return null;
+    }
+    if (!(0, _isSyntacticallyValidPropertyValue.default)(value)) {
         return null;
     }
+    let normalized = (0, _dataTypes.normalize)(value);
+    if (!isParsableCssValue(property, normalized)) {
+        return null;
+    }
+    let sort = context.offsets.arbitraryProperty();
     return [
         [
             {
-                sort: context.arbitraryPropertiesSort,
-                layer: 'utilities'
+                sort,
+                layer: "utilities"
             },
             ()=>({
-                    [(0, _nameClass).asClass(classCandidate)]: {
+                    [(0, _nameClass.asClass)(classCandidate)]: {
                         [property]: normalized
                     }
                 })
-            , 
-        ], 
+        ]
     ];
 }
 function* resolveMatchedPlugins(classCandidate, context) {
     if (context.candidateRuleMap.has(classCandidate)) {
         yield [
             context.candidateRuleMap.get(classCandidate),
-            'DEFAULT'
+            "DEFAULT"
         ];
     }
-    yield* (function*(arbitraryPropertyRule) {
+    yield* function*(arbitraryPropertyRule) {
         if (arbitraryPropertyRule !== null) {
             yield [
                 arbitraryPropertyRule,
-                'DEFAULT'
+                "DEFAULT"
             ];
         }
-    })(extractArbitraryProperty(classCandidate, context));
+    }(extractArbitraryProperty(classCandidate, context));
     let candidatePrefix = classCandidate;
     let negative = false;
     const twConfigPrefix = context.tailwindConfig.prefix;
     const twConfigPrefixLen = twConfigPrefix.length;
-    if (candidatePrefix[twConfigPrefixLen] === '-') {
+    const hasMatchingPrefix = candidatePrefix.startsWith(twConfigPrefix) || candidatePrefix.startsWith(`-${twConfigPrefix}`);
+    if (candidatePrefix[twConfigPrefixLen] === "-" && hasMatchingPrefix) {
         negative = true;
         candidatePrefix = twConfigPrefix + candidatePrefix.slice(twConfigPrefixLen + 1);
     }
     if (negative && context.candidateRuleMap.has(candidatePrefix)) {
         yield [
             context.candidateRuleMap.get(candidatePrefix),
-            '-DEFAULT'
+            "-DEFAULT"
         ];
     }
     for (let [prefix, modifier] of candidatePermutations(candidatePrefix)){
@@ -313,21 +547,45 @@ function* resolveMatchedPlugins(classCandidate, context) {
                 context.candidateRuleMap.get(prefix),
                 negative ? `-${modifier}` : modifier
             ];
-            return;
         }
     }
 }
 function splitWithSeparator(input, separator) {
-    return input.split(new RegExp(`\\${separator}(?![^[]*\\])`, 'g'));
+    if (input === _sharedState.NOT_ON_DEMAND) {
+        return [
+            _sharedState.NOT_ON_DEMAND
+        ];
+    }
+    return (0, _splitAtTopLevelOnly.splitAtTopLevelOnly)(input, separator);
+}
+function* recordCandidates(matches, classCandidate) {
+    for (const match of matches){
+        var _match__options;
+        var _match__options_preserveSource;
+        match[1].raws.tailwind = {
+            ...match[1].raws.tailwind,
+            classCandidate,
+            preserveSource: (_match__options_preserveSource = (_match__options = match[0].options) === null || _match__options === void 0 ? void 0 : _match__options.preserveSource) !== null && _match__options_preserveSource !== void 0 ? _match__options_preserveSource : false
+        };
+        yield match;
+    }
 }
-function* resolveMatches(candidate, context) {
+function* resolveMatches(candidate, context, original = candidate) {
     let separator = context.tailwindConfig.separator;
     let [classCandidate, ...variants] = splitWithSeparator(candidate, separator).reverse();
     let important = false;
-    if (classCandidate.startsWith('!')) {
+    if (classCandidate.startsWith("!")) {
         important = true;
         classCandidate = classCandidate.slice(1);
     }
+    if ((0, _featureFlags.flagEnabled)(context.tailwindConfig, "variantGrouping")) {
+        if (classCandidate.startsWith("(") && classCandidate.endsWith(")")) {
+            let base = variants.slice().reverse().join(separator);
+            for (let part of (0, _splitAtTopLevelOnly.splitAtTopLevelOnly)(classCandidate.slice(1, -1), ",")){
+                yield* resolveMatches(base + separator + part, context, original);
+            }
+        }
+    }
     // TODO: Reintroduce this in ways that doesn't break on false positives
     // function sortAgainst(toSort, against) {
     //   return toSort.slice().sort((a, z) => {
@@ -346,7 +604,7 @@ function* resolveMatches(candidate, context) {
         let isOnlyPlugin = plugins.length === 1;
         for (let [sort, plugin] of plugins){
             let matchesPerPlugin = [];
-            if (typeof plugin === 'function') {
+            if (typeof plugin === "function") {
                 for (let ruleSet of [].concat(plugin(modifier, {
                     isOnlyPlugin
                 }))){
@@ -364,7 +622,7 @@ function* resolveMatches(candidate, context) {
                         ]);
                     }
                 }
-            } else if (modifier === 'DEFAULT' || modifier === '-DEFAULT') {
+            } else if (modifier === "DEFAULT" || modifier === "-DEFAULT") {
                 let ruleSet = plugin;
                 let [rules, options] = parseRules(ruleSet, context.postCssNodeCache);
                 for (let rule of rules){
@@ -381,95 +639,211 @@ function* resolveMatches(candidate, context) {
                 }
             }
             if (matchesPerPlugin.length > 0) {
-                var ref;
-                typesByMatches.set(matchesPerPlugin, (ref = sort.options) === null || ref === void 0 ? void 0 : ref.type);
+                var _sort_options;
+                var _sort_options_types, _sort_options1;
+                let matchingTypes = Array.from((0, _pluginUtils.getMatchingTypes)((_sort_options_types = (_sort_options = sort.options) === null || _sort_options === void 0 ? void 0 : _sort_options.types) !== null && _sort_options_types !== void 0 ? _sort_options_types : [], modifier, (_sort_options1 = sort.options) !== null && _sort_options1 !== void 0 ? _sort_options1 : {}, context.tailwindConfig)).map(([_, type])=>type);
+                if (matchingTypes.length > 0) {
+                    typesByMatches.set(matchesPerPlugin, matchingTypes);
+                }
                 matches.push(matchesPerPlugin);
             }
         }
-        // Only keep the result of the very first plugin if we are dealing with
-        // arbitrary values, to protect against ambiguity.
-        if (isArbitraryValue(modifier) && matches.length > 1) {
-            var ref1;
-            let typesPerPlugin = matches.map((match)=>new Set([
-                    ...(ref1 = typesByMatches.get(match)) !== null && ref1 !== void 0 ? ref1 : []
-                ])
-            );
-            // Remove duplicates, so that we can detect proper unique types for each plugin.
-            for (let pluginTypes of typesPerPlugin){
-                for (let type of pluginTypes){
-                    let removeFromOwnGroup = false;
-                    for (let otherGroup of typesPerPlugin){
-                        if (pluginTypes === otherGroup) continue;
-                        if (otherGroup.has(type)) {
-                            otherGroup.delete(type);
-                            removeFromOwnGroup = true;
-                        }
+        if (isArbitraryValue(modifier)) {
+            if (matches.length > 1) {
+                // Partition plugins in 2 categories so that we can start searching in the plugins that
+                // don't have `any` as a type first.
+                let [withAny, withoutAny] = matches.reduce((group, plugin)=>{
+                    let hasAnyType = plugin.some(([{ options  }])=>options.types.some(({ type  })=>type === "any"));
+                    if (hasAnyType) {
+                        group[0].push(plugin);
+                    } else {
+                        group[1].push(plugin);
                     }
-                    if (removeFromOwnGroup) pluginTypes.delete(type);
+                    return group;
+                }, [
+                    [],
+                    []
+                ]);
+                function findFallback(matches) {
+                    // If only a single plugin matches, let's take that one
+                    if (matches.length === 1) {
+                        return matches[0];
+                    }
+                    // Otherwise, find the plugin that creates a valid rule given the arbitrary value, and
+                    // also has the correct type which preferOnConflicts the plugin in case of clashes.
+                    return matches.find((rules)=>{
+                        let matchingTypes = typesByMatches.get(rules);
+                        return rules.some(([{ options  }, rule])=>{
+                            if (!isParsableNode(rule)) {
+                                return false;
+                            }
+                            return options.types.some(({ type , preferOnConflict  })=>matchingTypes.includes(type) && preferOnConflict);
+                        });
+                    });
                 }
-            }
-            let messages = [];
-            for (let [idx, group] of typesPerPlugin.entries()){
-                for (let type of group){
-                    let rules = matches[idx].map(([, rule])=>rule
-                    ).flat().map((rule)=>rule.toString().split('\n').slice(1, -1) // Remove selector and closing '}'
-                        .map((line)=>line.trim()
-                        ).map((x)=>`      ${x}`
-                        ) // Re-indent
-                        .join('\n')
-                    ).join('\n\n');
-                    messages.push(`  Use \`${candidate.replace('[', `[${type}:`)}\` for \`${rules.trim()}\``);
-                    break;
+                var _findFallback;
+                // Try to find a fallback plugin, because we already know that multiple plugins matched for
+                // the given arbitrary value.
+                let fallback = (_findFallback = findFallback(withoutAny)) !== null && _findFallback !== void 0 ? _findFallback : findFallback(withAny);
+                if (fallback) {
+                    matches = [
+                        fallback
+                    ];
+                } else {
+                    var _typesByMatches_get;
+                    let typesPerPlugin = matches.map((match)=>new Set([
+                            ...(_typesByMatches_get = typesByMatches.get(match)) !== null && _typesByMatches_get !== void 0 ? _typesByMatches_get : []
+                        ]));
+                    // Remove duplicates, so that we can detect proper unique types for each plugin.
+                    for (let pluginTypes of typesPerPlugin){
+                        for (let type of pluginTypes){
+                            let removeFromOwnGroup = false;
+                            for (let otherGroup of typesPerPlugin){
+                                if (pluginTypes === otherGroup) continue;
+                                if (otherGroup.has(type)) {
+                                    otherGroup.delete(type);
+                                    removeFromOwnGroup = true;
+                                }
+                            }
+                            if (removeFromOwnGroup) pluginTypes.delete(type);
+                        }
+                    }
+                    let messages = [];
+                    for (let [idx, group] of typesPerPlugin.entries()){
+                        for (let type of group){
+                            let rules = matches[idx].map(([, rule])=>rule).flat().map((rule)=>rule.toString().split("\n").slice(1, -1) // Remove selector and closing '}'
+                                .map((line)=>line.trim()).map((x)=>`      ${x}`) // Re-indent
+                                .join("\n")).join("\n\n");
+                            messages.push(`  Use \`${candidate.replace("[", `[${type}:`)}\` for \`${rules.trim()}\``);
+                            break;
+                        }
+                    }
+                    _log.default.warn([
+                        `The class \`${candidate}\` is ambiguous and matches multiple utilities.`,
+                        ...messages,
+                        `If this is content and not a class, replace it with \`${candidate.replace("[", "&lsqb;").replace("]", "&rsqb;")}\` to silence this warning.`
+                    ]);
+                    continue;
                 }
             }
-            _log.default.warn([
-                `The class \`${candidate}\` is ambiguous and matches multiple utilities.`,
-                ...messages,
-                `If this is content and not a class, replace it with \`${candidate.replace('[', '&lsqb;').replace(']', '&rsqb;')}\` to silence this warning.`, 
-            ]);
-            continue;
+            matches = matches.map((list)=>list.filter((match)=>isParsableNode(match[1])));
         }
-        matches = applyPrefix(matches.flat(), context);
+        matches = matches.flat();
+        matches = Array.from(recordCandidates(matches, classCandidate));
+        matches = applyPrefix(matches, context);
         if (important) {
-            matches = applyImportant(matches, context);
+            matches = applyImportant(matches, classCandidate);
         }
         for (let variant of variants){
             matches = applyVariant(variant, matches, context);
         }
-        for (let match1 of matches){
+        for (let match of matches){
+            match[1].raws.tailwind = {
+                ...match[1].raws.tailwind,
+                candidate
+            };
             // Apply final format selector
-            if (match1[0].collectedFormats) {
-                let finalFormat = (0, _formatVariantSelector).formatVariantSelector('&', ...match1[0].collectedFormats);
-                let container = _postcss.default.root({
-                    nodes: [
-                        match1[1].clone()
-                    ]
-                });
-                container.walkRules((rule)=>{
-                    if (inKeyframes(rule)) return;
-                    rule.selector = (0, _formatVariantSelector).finalizeSelector(finalFormat, {
-                        selector: rule.selector,
-                        candidate,
-                        context
-                    });
-                });
-                match1[1] = container.nodes[0];
+            match = applyFinalFormat(match, {
+                context,
+                candidate,
+                original
+            });
+            // Skip rules with invalid selectors
+            // This will cause the candidate to be added to the "not class"
+            // cache skipping it entirely for future builds
+            if (match === null) {
+                continue;
             }
-            yield match1;
+            yield match;
         }
     }
 }
+function applyFinalFormat(match, { context , candidate , original  }) {
+    if (!match[0].collectedFormats) {
+        return match;
+    }
+    let isValid = true;
+    let finalFormat;
+    try {
+        finalFormat = (0, _formatVariantSelector.formatVariantSelector)(match[0].collectedFormats, {
+            context,
+            candidate
+        });
+    } catch  {
+        // The format selector we produced is invalid
+        // This could be because:
+        // - A bug exists
+        // - A plugin introduced an invalid variant selector (ex: `addVariant('foo', '&;foo')`)
+        // - The user used an invalid arbitrary variant (ex: `[&;foo]:underline`)
+        // Either way the build will fail because of this
+        // We would rather that the build pass "silently" given that this could
+        // happen because of picking up invalid things when scanning content
+        // So we'll throw out the candidate instead
+        return null;
+    }
+    let container = _postcss.default.root({
+        nodes: [
+            match[1].clone()
+        ]
+    });
+    container.walkRules((rule)=>{
+        if (inKeyframes(rule)) {
+            return;
+        }
+        try {
+            rule.selector = (0, _formatVariantSelector.finalizeSelector)(rule.selector, finalFormat, {
+                candidate: original,
+                context
+            });
+        } catch  {
+            // If this selector is invalid we also want to skip it
+            // But it's likely that being invalid here means there's a bug in a plugin rather than too loosely matching content
+            isValid = false;
+            return false;
+        }
+    });
+    if (!isValid) {
+        return null;
+    }
+    match[1] = container.nodes[0];
+    return match;
+}
 function inKeyframes(rule) {
-    return rule.parent && rule.parent.type === 'atrule' && rule.parent.name === 'keyframes';
+    return rule.parent && rule.parent.type === "atrule" && rule.parent.name === "keyframes";
+}
+function getImportantStrategy(important) {
+    if (important === true) {
+        return (rule)=>{
+            if (inKeyframes(rule)) {
+                return;
+            }
+            rule.walkDecls((d)=>{
+                if (d.parent.type === "rule" && !inKeyframes(d.parent)) {
+                    d.important = true;
+                }
+            });
+        };
+    }
+    if (typeof important === "string") {
+        return (rule)=>{
+            if (inKeyframes(rule)) {
+                return;
+            }
+            rule.selectors = rule.selectors.map((selector)=>{
+                return (0, _applyImportantSelector.applyImportantSelector)(selector, important);
+            });
+        };
+    }
 }
 function generateRules(candidates, context) {
     let allRules = [];
+    let strategy = getImportantStrategy(context.tailwindConfig.important);
     for (let candidate of candidates){
         if (context.notClassCache.has(candidate)) {
             continue;
         }
-        if (context.classCache.has(candidate)) {
-            allRules.push(context.classCache.get(candidate));
+        if (context.candidateRuleCache.has(candidate)) {
+            allRules = allRules.concat(Array.from(context.candidateRuleCache.get(candidate)));
             continue;
         }
         let matches = Array.from(resolveMatches(candidate, context));
@@ -478,52 +852,31 @@ function generateRules(candidates, context) {
             continue;
         }
         context.classCache.set(candidate, matches);
-        allRules.push(matches);
-    }
-    // Strategy based on `tailwindConfig.important`
-    let strategy = ((important)=>{
-        if (important === true) {
-            return (rule)=>{
-                rule.walkDecls((d)=>{
-                    if (d.parent.type === 'rule' && !inKeyframes(d.parent)) {
-                        d.important = true;
-                    }
-                });
-            };
-        }
-        if (typeof important === 'string') {
-            return (rule)=>{
-                rule.selectors = rule.selectors.map((selector)=>{
-                    return `${important} ${selector}`;
-                });
-            };
-        }
-    })(context.tailwindConfig.important);
-    return allRules.flat(1).map(([{ sort , layer , options  }, rule])=>{
-        if (options.respectImportant) {
-            if (strategy) {
+        var _context_candidateRuleCache_get;
+        let rules = (_context_candidateRuleCache_get = context.candidateRuleCache.get(candidate)) !== null && _context_candidateRuleCache_get !== void 0 ? _context_candidateRuleCache_get : new Set();
+        context.candidateRuleCache.set(candidate, rules);
+        for (const match of matches){
+            let [{ sort , options  }, rule] = match;
+            if (options.respectImportant && strategy) {
                 let container = _postcss.default.root({
                     nodes: [
                         rule.clone()
                     ]
                 });
-                container.walkRules((r)=>{
-                    if (inKeyframes(r)) {
-                        return;
-                    }
-                    strategy(r);
-                });
+                container.walkRules(strategy);
                 rule = container.nodes[0];
             }
+            let newEntry = [
+                sort,
+                rule
+            ];
+            rules.add(newEntry);
+            context.ruleCache.add(newEntry);
+            allRules.push(newEntry);
         }
-        return [
-            sort | context.layerOrder[layer],
-            rule
-        ];
-    });
+    }
+    return allRules;
 }
 function isArbitraryValue(input) {
-    return input.startsWith('[') && input.endsWith(']');
+    return input.startsWith("[") && input.endsWith("]");
 }
-exports.resolveMatches = resolveMatches;
-exports.generateRules = generateRules;