tailwindcss 3.1.7 → 3.2.0

package/lib/lib/setupContextUtils.js

@@ -20,7 +20,6 @@ const _url = /*#__PURE__*/ _interopRequireDefault(require("url"));
 const _postcss = /*#__PURE__*/ _interopRequireDefault(require("postcss"));
 const _dlv = /*#__PURE__*/ _interopRequireDefault(require("dlv"));
 const _postcssSelectorParser = /*#__PURE__*/ _interopRequireDefault(require("postcss-selector-parser"));
-const _featureFlagsJs = require("../featureFlags.js");
 const _transformThemeValue = /*#__PURE__*/ _interopRequireDefault(require("../util/transformThemeValue"));
 const _parseObjectStyles = /*#__PURE__*/ _interopRequireDefault(require("../util/parseObjectStyles"));
 const _prefixSelector = /*#__PURE__*/ _interopRequireDefault(require("../util/prefixSelector"));
@@ -28,7 +27,6 @@ const _isPlainObject = /*#__PURE__*/ _interopRequireDefault(require("../util/isP
 const _escapeClassName = /*#__PURE__*/ _interopRequireDefault(require("../util/escapeClassName"));
 const _nameClass = /*#__PURE__*/ _interopRequireWildcard(require("../util/nameClass"));
 const _pluginUtils = require("../util/pluginUtils");
-const _bigSign = /*#__PURE__*/ _interopRequireDefault(require("../util/bigSign"));
 const _corePlugins = require("../corePlugins");
 const _sharedState = /*#__PURE__*/ _interopRequireWildcard(require("./sharedState"));
 const _toPath = require("../util/toPath");
@@ -37,6 +35,9 @@ const _negateValue = /*#__PURE__*/ _interopRequireDefault(require("../util/negat
 const _isValidArbitraryValue = /*#__PURE__*/ _interopRequireDefault(require("../util/isValidArbitraryValue"));
 const _generateRules = require("./generateRules");
 const _cacheInvalidationJs = require("./cacheInvalidation.js");
+const _offsetsJs = require("./offsets.js");
+const _featureFlagsJs = require("../featureFlags.js");
+const _formatVariantSelector = require("../util/formatVariantSelector");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -81,11 +82,36 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-let MATCH_VARIANT = Symbol();
+const VARIANT_TYPES = {
+    AddVariant: Symbol.for("ADD_VARIANT"),
+    MatchVariant: Symbol.for("MATCH_VARIANT")
+};
+const VARIANT_INFO = {
+    Base: 1 << 0,
+    Dynamic: 1 << 1
+};
 function prefix(context, selector) {
     let prefix = context.tailwindConfig.prefix;
     return typeof prefix === "function" ? prefix(selector) : prefix + selector;
 }
+function normalizeOptionTypes({ type ="any" , ...options }) {
+    let types = [].concat(type);
+    return {
+        ...options,
+        types: types.map((type)=>{
+            if (Array.isArray(type)) {
+                return {
+                    type: type[0],
+                    ...type[1]
+                };
+            }
+            return {
+                type,
+                preferOnConflict: false
+            };
+        })
+    };
+}
 function parseVariantFormatString(input) {
     if (input.includes("{")) {
         if (!isBalanced(input)) throw new Error(`Your { and } are unbalanced.`);
@@ -232,7 +258,13 @@ function parseVariant(variant) {
         }
     };
 }
-function buildPluginApi(tailwindConfig, context, { variantList , variantMap , offsets , classList  }) {
+/**
+ *
+ * @param {any} tailwindConfig
+ * @param {any} context
+ * @param {object} param2
+ * @param {Offsets} param2.offsets
+ */ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , offsets , classList  }) {
     function getConfigValue(path, defaultValue) {
         return path ? (0, _dlv.default)(tailwindConfig, path, defaultValue) : tailwindConfig;
     }
@@ -262,6 +294,7 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                 opacityValue
             })
     });
+    let variantIdentifier = 0;
     let api = {
         postcss: _postcss.default,
         prefix: applyConfiguredPrefix,
@@ -284,7 +317,7 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
         addBase (base) {
             for (let [identifier, rule] of withIdentifiers(base)){
                 let prefixedIdentifier = prefixIdentifier(identifier, {});
-                let offset = offsets.base++;
+                let offset = offsets.create("base");
                 if (!context.candidateRuleMap.has(prefixedIdentifier)) {
                     context.candidateRuleMap.set(prefixedIdentifier, []);
                 }
@@ -311,7 +344,7 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                 }
                 context.candidateRuleMap.get(prefixedIdentifier).push([
                     {
-                        sort: offsets.base++,
+                        sort: offsets.create("defaults"),
                         layer: "defaults"
                     },
                     rule
@@ -333,7 +366,7 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                 }
                 context.candidateRuleMap.get(prefixedIdentifier).push([
                     {
-                        sort: offsets.components++,
+                        sort: offsets.create("components"),
                         layer: "components",
                         options
                     },
@@ -356,7 +389,7 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                 }
                 context.candidateRuleMap.get(prefixedIdentifier).push([
                     {
-                        sort: offsets.utilities++,
+                        sort: offsets.create("utilities"),
                         layer: "utilities",
                         options
                     },
@@ -367,13 +400,14 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
         matchUtilities: function(utilities, options) {
             let defaultOptions = {
                 respectPrefix: true,
-                respectImportant: true
+                respectImportant: true,
+                modifiers: false
             };
-            options = {
+            options = normalizeOptionTypes({
                 ...defaultOptions,
                 ...options
-            };
-            let offset = offsets.utilities++;
+            });
+            let offset = offsets.create("utilities");
             for(let identifier in utilities){
                 let prefixedIdentifier = prefixIdentifier(identifier, options);
                 let rule = utilities[identifier];
@@ -382,19 +416,35 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                     options
                 ]);
                 function wrapped(modifier, { isOnlyPlugin  }) {
-                    let { type ="any"  } = options;
-                    type = [].concat(type);
-                    let [value, coercedType] = (0, _pluginUtils.coerceValue)(type, modifier, options, tailwindConfig);
+                    let [value, coercedType, utilityModifier] = (0, _pluginUtils.coerceValue)(options.types, modifier, options, tailwindConfig);
                     if (value === undefined) {
                         return [];
                     }
-                    if (!type.includes(coercedType) && !isOnlyPlugin) {
-                        return [];
+                    if (!options.types.some(({ type  })=>type === coercedType)) {
+                        if (isOnlyPlugin) {
+                            _log.default.warn([
+                                `Unnecessary typehint \`${coercedType}\` in \`${identifier}-${modifier}\`.`,
+                                `You can safely update it to \`${identifier}-${modifier.replace(coercedType + ":", "")}\`.`
+                            ]);
+                        } else {
+                            return [];
+                        }
                     }
                     if (!(0, _isValidArbitraryValue.default)(value)) {
                         return [];
                     }
-                    let ruleSets = [].concat(rule(value)).filter(Boolean).map((declaration)=>({
+                    let extras = {
+                        get modifier () {
+                            if (!options.modifiers) {
+                                _log.default.warn(`modifier-used-without-options-for-${identifier}`, [
+                                    "Your plugin must set `modifiers: true` in its options to support modifiers."
+                                ]);
+                            }
+                            return utilityModifier;
+                        }
+                    };
+                    let modifiersEnabled = (0, _featureFlagsJs.flagEnabled)(tailwindConfig, "generalizedModifiers");
+                    let ruleSets = [].concat(modifiersEnabled ? rule(value, extras) : rule(value)).filter(Boolean).map((declaration)=>({
                             [(0, _nameClass.default)(identifier, modifier)]: declaration
                         }));
                     return ruleSets;
@@ -416,13 +466,14 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
         matchComponents: function(components, options) {
             let defaultOptions = {
                 respectPrefix: true,
-                respectImportant: false
+                respectImportant: false,
+                modifiers: false
             };
-            options = {
+            options = normalizeOptionTypes({
                 ...defaultOptions,
                 ...options
-            };
-            let offset = offsets.components++;
+            });
+            let offset = offsets.create("components");
             for(let identifier in components){
                 let prefixedIdentifier = prefixIdentifier(identifier, options);
                 let rule = components[identifier];
@@ -431,17 +482,15 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                     options
                 ]);
                 function wrapped(modifier, { isOnlyPlugin  }) {
-                    let { type ="any"  } = options;
-                    type = [].concat(type);
-                    let [value, coercedType] = (0, _pluginUtils.coerceValue)(type, modifier, options, tailwindConfig);
+                    let [value, coercedType, utilityModifier] = (0, _pluginUtils.coerceValue)(options.types, modifier, options, tailwindConfig);
                     if (value === undefined) {
                         return [];
                     }
-                    if (!type.includes(coercedType)) {
+                    if (!options.types.some(({ type  })=>type === coercedType)) {
                         if (isOnlyPlugin) {
                             _log.default.warn([
                                 `Unnecessary typehint \`${coercedType}\` in \`${identifier}-${modifier}\`.`,
-                                `You can safely update it to \`${identifier}-${modifier.replace(coercedType + ":", "")}\`.`, 
+                                `You can safely update it to \`${identifier}-${modifier.replace(coercedType + ":", "")}\`.`
                             ]);
                         } else {
                             return [];
@@ -450,7 +499,18 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                     if (!(0, _isValidArbitraryValue.default)(value)) {
                         return [];
                     }
-                    let ruleSets = [].concat(rule(value)).filter(Boolean).map((declaration)=>({
+                    let extras = {
+                        get modifier () {
+                            if (!options.modifiers) {
+                                _log.default.warn(`modifier-used-without-options-for-${identifier}`, [
+                                    "Your plugin must set `modifiers: true` in its options to support modifiers."
+                                ]);
+                            }
+                            return utilityModifier;
+                        }
+                    };
+                    let modifiersEnabled = (0, _featureFlagsJs.flagEnabled)(tailwindConfig, "generalizedModifiers");
+                    let ruleSets = [].concat(modifiersEnabled ? rule(value, extras) : rule(value)).filter(Boolean).map((declaration)=>({
                             [(0, _nameClass.default)(identifier, modifier)]: declaration
                         }));
                     return ruleSets;
@@ -479,7 +539,7 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                             modifySelectors,
                             container,
                             separator
-                        }, variantFunction[MATCH_VARIANT] && {
+                        }, options.type === VARIANT_TYPES.MatchVariant && {
                             args,
                             wrap,
                             format
@@ -502,21 +562,51 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
             });
             insertInto(variantList, variantName, options);
             variantMap.set(variantName, variantFunctions);
+            context.variantOptions.set(variantName, options);
+        },
+        matchVariant (variant, variantFn, options) {
+            var ref;
+            // A unique identifier that "groups" these variants together.
+            // This is for internal use only which is why it is not present in the types
+            let id = (ref = options === null || options === void 0 ? void 0 : options.id) !== null && ref !== void 0 ? ref : ++variantIdentifier;
+            let isSpecial = variant === "@";
+            let modifiersEnabled = (0, _featureFlagsJs.flagEnabled)(tailwindConfig, "generalizedModifiers");
+            var ref1;
+            for (let [key, value] of Object.entries((ref1 = options === null || options === void 0 ? void 0 : options.values) !== null && ref1 !== void 0 ? ref1 : {})){
+                if (key === "DEFAULT") continue;
+                api.addVariant(isSpecial ? `${variant}${key}` : `${variant}-${key}`, ({ args , container  })=>variantFn(value, modifiersEnabled ? {
+                        modifier: args.modifier,
+                        container
+                    } : {
+                        container
+                    }), {
+                    ...options,
+                    value,
+                    id,
+                    type: VARIANT_TYPES.MatchVariant,
+                    variantInfo: VARIANT_INFO.Base
+                });
+            }
+            var ref2;
+            let hasDefault = "DEFAULT" in ((ref2 = options === null || options === void 0 ? void 0 : options.values) !== null && ref2 !== void 0 ? ref2 : {});
+            api.addVariant(variant, ({ args , container  })=>{
+                if (args.value === _sharedState.NONE && !hasDefault) {
+                    return null;
+                }
+                return variantFn(args.value === _sharedState.NONE ? options.values.DEFAULT : args.value, modifiersEnabled ? {
+                    modifier: args.modifier,
+                    container
+                } : {
+                    container
+                });
+            }, {
+                ...options,
+                id,
+                type: VARIANT_TYPES.MatchVariant,
+                variantInfo: VARIANT_INFO.Dynamic
+            });
         }
     };
-    if ((0, _featureFlagsJs.flagEnabled)(tailwindConfig, "matchVariant")) {
-        api.matchVariant = function(variants, options) {
-            for(let variant in variants){
-                var ref;
-                for (let [k, v] of Object.entries((ref = options === null || options === void 0 ? void 0 : options.values) !== null && ref !== void 0 ? ref : {})){
-                    api.addVariant(`${variant}-${k}`, variants[variant](v));
-                }
-                api.addVariant(variant, Object.assign(({ args  })=>variants[variant](args), {
-                    [MATCH_VARIANT]: true
-                }), options);
-            }
-        };
-    }
     return api;
 }
 let fileModifiedMapCache = new WeakMap();
@@ -627,16 +717,19 @@ function resolvePlugins(context, root) {
     // were historically sorted before screen/stackable variants.
     let beforeVariants = [
         _corePlugins.variantPlugins["pseudoElementVariants"],
-        _corePlugins.variantPlugins["pseudoClassVariants"], 
+        _corePlugins.variantPlugins["pseudoClassVariants"],
+        _corePlugins.variantPlugins["ariaVariants"],
+        _corePlugins.variantPlugins["dataVariants"]
     ];
     let afterVariants = [
+        _corePlugins.variantPlugins["supportsVariants"],
         _corePlugins.variantPlugins["directionVariants"],
         _corePlugins.variantPlugins["reducedMotionVariants"],
         _corePlugins.variantPlugins["prefersContrastVariants"],
         _corePlugins.variantPlugins["darkVariants"],
         _corePlugins.variantPlugins["printVariant"],
         _corePlugins.variantPlugins["screenVariants"],
-        _corePlugins.variantPlugins["orientationVariants"], 
+        _corePlugins.variantPlugins["orientationVariants"]
     ];
     return [
         ...corePluginList,
@@ -649,13 +742,9 @@ function resolvePlugins(context, root) {
 function registerPlugins(plugins, context) {
     let variantList = [];
     let variantMap = new Map();
-    let offsets = {
-        defaults: 0n,
-        base: 0n,
-        components: 0n,
-        utilities: 0n,
-        user: 0n
-    };
+    context.variantMap = variantMap;
+    let offsets = new _offsetsJs.Offsets();
+    context.offsets = offsets;
     let classList = new Set();
     let pluginApi = buildPluginApi(context.tailwindConfig, context, {
         variantList,
@@ -672,43 +761,12 @@ function registerPlugins(plugins, context) {
             plugin === null || plugin === void 0 ? void 0 : plugin(pluginApi);
         }
     }
-    let highestOffset = ((args)=>args.reduce((m, e)=>e > m ? e : m))([
-        offsets.base,
-        offsets.defaults,
-        offsets.components,
-        offsets.utilities,
-        offsets.user, 
-    ]);
-    let reservedBits = BigInt(highestOffset.toString(2).length);
-    // A number one less than the top range of the highest offset area
-    // so arbitrary properties are always sorted at the end.
-    context.arbitraryPropertiesSort = (1n << reservedBits << 0n) - 1n;
-    context.layerOrder = {
-        defaults: 1n << reservedBits << 0n,
-        base: 1n << reservedBits << 1n,
-        components: 1n << reservedBits << 2n,
-        utilities: 1n << reservedBits << 3n,
-        user: 1n << reservedBits << 4n
-    };
-    reservedBits += 5n;
-    let offset = 0;
-    context.variantOrder = new Map(variantList.map((variant, i)=>{
-        let variantFunctions = variantMap.get(variant).length;
-        let bits = 1n << BigInt(i + offset) << reservedBits;
-        offset += variantFunctions - 1;
-        return [
-            variant,
-            bits
-        ];
-    }).sort(([, a], [, z])=>(0, _bigSign.default)(a - z)));
-    context.minimumScreen = [
-        ...context.variantOrder.values()
-    ].shift();
+    // Make sure to record bit masks for every variant
+    offsets.recordVariants(variantList, (variant)=>variantMap.get(variant).length);
     // Build variantMap
     for (let [variantName, variantFunctions] of variantMap.entries()){
-        let sort = context.variantOrder.get(variantName);
         context.variantMap.set(variantName, variantFunctions.map((variantFunction, idx)=>[
-                sort << BigInt(idx),
+                offsets.forVariant(variantName, idx),
                 variantFunction
             ]));
     }
@@ -728,7 +786,7 @@ function registerPlugins(plugins, context) {
                 _log.default.warn("root-regex", [
                     "Regular expressions in `safelist` work differently in Tailwind CSS v3.0.",
                     "Update your `safelist` configuration to eliminate this warning.",
-                    "https://tailwindcss.com/docs/content-configuration#safelisting-classes", 
+                    "https://tailwindcss.com/docs/content-configuration#safelisting-classes"
                 ]);
                 continue;
             }
@@ -756,13 +814,13 @@ function registerPlugins(plugins, context) {
                         // So we add the negative after the prefix
                         classes = [
                             ...classes,
-                            ...classes.map((cls)=>cls.slice(0, prefixLength) + "-" + cls.slice(prefixLength)), 
+                            ...classes.map((cls)=>cls.slice(0, prefixLength) + "-" + cls.slice(prefixLength))
                         ];
                     }
-                    if ([].concat(options === null || options === void 0 ? void 0 : options.type).includes("color")) {
+                    if (options.types.some(({ type  })=>type === "color")) {
                         classes = [
                             ...classes,
-                            ...classes.flatMap((cls)=>Object.keys(context.tailwindConfig.theme.opacity).map((opacity)=>`${cls}/${opacity}`)), 
+                            ...classes.flatMap((cls)=>Object.keys(context.tailwindConfig.theme.opacity).map((opacity)=>`${cls}/${opacity}`))
                         ];
                     }
                     return classes;
@@ -797,33 +855,45 @@ function registerPlugins(plugins, context) {
                 _log.default.warn([
                     `The safelist pattern \`${regex}\` doesn't match any Tailwind CSS classes.`,
                     "Fix this pattern or remove it from your `safelist` configuration.",
-                    "https://tailwindcss.com/docs/content-configuration#safelisting-classes", 
+                    "https://tailwindcss.com/docs/content-configuration#safelisting-classes"
                 ]);
             }
         }
     }
+    var _darkMode, ref;
+    let darkClassName = (ref = [].concat((_darkMode = context.tailwindConfig.darkMode) !== null && _darkMode !== void 0 ? _darkMode : "media")[1]) !== null && ref !== void 0 ? ref : "dark";
     // 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([
+    // host utilities work properly. (Thanks Biology)
+    let parasiteUtilities = [
+        prefix(context, darkClassName),
         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);
+        // Non-util classes won't be generated, so we default them to null
+        let sortedClassNames = new Map(classes.map((className)=>[
+                className,
+                null
+            ]));
+        // Sort all classes in order
+        // Non-tailwind classes won't be generated and will be left as `null`
+        let rules = (0, _generateRules.generateRules)(new Set(classes), context);
+        rules = context.offsets.sort(rules);
+        let idx = BigInt(parasiteUtilities.length);
+        for (const [, rule] of rules){
+            sortedClassNames.set(rule.raws.tailwind.candidate, idx++);
         }
         return classes.map((className)=>{
             var ref;
             let order = (ref = sortedClassNames.get(className)) !== null && ref !== void 0 ? ref : null;
-            if (order === null && parasiteUtilities.has(className)) {
+            let parasiteIndex = parasiteUtilities.indexOf(className);
+            if (order === null && parasiteIndex !== -1) {
                 // 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;
+                order = BigInt(parasiteIndex);
             }
             return [
                 className,
@@ -841,6 +911,10 @@ function registerPlugins(plugins, context) {
                 let negativeClasses = [];
                 var ref;
                 for (let [key, value] of Object.entries((ref = options === null || options === void 0 ? void 0 : options.values) !== null && ref !== void 0 ? ref : {})){
+                    // Ignore undefined and null values
+                    if (value == null) {
+                        continue;
+                    }
                     output.push((0, _nameClass.formatClass)(utilName, key));
                     if ((options === null || options === void 0 ? void 0 : options.supportsNegativeValues) && (0, _negateValue.default)(value)) {
                         negativeClasses.push((0, _nameClass.formatClass)(utilName, `-${key}`));
@@ -853,11 +927,170 @@ function registerPlugins(plugins, context) {
         }
         return output;
     };
+    // Generate a list of available variants with meta information of the type of variant.
+    context.getVariants = function getVariants() {
+        let result = [];
+        for (let [name, options] of context.variantOptions.entries()){
+            if (options.variantInfo === VARIANT_INFO.Base) continue;
+            var _values;
+            result.push({
+                name,
+                isArbitrary: options.type === Symbol.for("MATCH_VARIANT"),
+                values: Object.keys((_values = options.values) !== null && _values !== void 0 ? _values : {}),
+                hasDash: name !== "@",
+                selectors ({ modifier , value  } = {}) {
+                    let candidate = "__TAILWIND_PLACEHOLDER__";
+                    let rule = _postcss.default.rule({
+                        selector: `.${candidate}`
+                    });
+                    let container = _postcss.default.root({
+                        nodes: [
+                            rule.clone()
+                        ]
+                    });
+                    let before = container.toString();
+                    var ref;
+                    let fns = ((ref = context.variantMap.get(name)) !== null && ref !== void 0 ? ref : []).flatMap(([_, fn])=>fn);
+                    let formatStrings = [];
+                    for (let fn of fns){
+                        var ref1;
+                        let localFormatStrings = [];
+                        var ref2;
+                        let api = {
+                            args: {
+                                modifier,
+                                value: (ref2 = (ref1 = options.values) === null || ref1 === void 0 ? void 0 : ref1[value]) !== null && ref2 !== void 0 ? ref2 : value
+                            },
+                            separator: context.tailwindConfig.separator,
+                            modifySelectors (modifierFunction) {
+                                // Run the modifierFunction over each rule
+                                container.each((rule)=>{
+                                    if (rule.type !== "rule") {
+                                        return;
+                                    }
+                                    rule.selectors = rule.selectors.map((selector)=>{
+                                        return modifierFunction({
+                                            get className () {
+                                                return (0, _generateRules.getClassNameFromSelector)(selector);
+                                            },
+                                            selector
+                                        });
+                                    });
+                                });
+                                return container;
+                            },
+                            format (str) {
+                                localFormatStrings.push(str);
+                            },
+                            wrap (wrapper) {
+                                localFormatStrings.push(`@${wrapper.name} ${wrapper.params} { & }`);
+                            },
+                            container
+                        };
+                        let ruleWithVariant = fn(api);
+                        if (localFormatStrings.length > 0) {
+                            formatStrings.push(localFormatStrings);
+                        }
+                        if (Array.isArray(ruleWithVariant)) {
+                            for (let variantFunction of ruleWithVariant){
+                                localFormatStrings = [];
+                                variantFunction(api);
+                                formatStrings.push(localFormatStrings);
+                            }
+                        }
+                    }
+                    // Reverse engineer the result of the `container`
+                    let manualFormatStrings = [];
+                    let after = container.toString();
+                    if (before !== after) {
+                        // Figure out all selectors
+                        container.walkRules((rule)=>{
+                            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)=>{
+                                selectors.walkClasses((classNode)=>{
+                                    classNode.value = `${name}${context.tailwindConfig.separator}${classNode.value}`;
+                                });
+                            }).processSync(modified);
+                            // Now that we know the original selector, the new selector, and
+                            // the rebuild part in between, we can replace the part that plugin
+                            // authors need to rebuild with `&`, and eventually store it in the
+                            // collectedFormats. Similar to what `format('...')` would do.
+                            //
+                            // E.g.:
+                            //                   variant: foo
+                            //                  selector: .markdown > p
+                            //      modified (by plugin): .foo .foo\\:markdown > p
+                            //    rebuiltBase (internal): .foo\\:markdown > p
+                            //                    format: .foo &
+                            manualFormatStrings.push(modified.replace(rebuiltBase, "&").replace(candidate, "&"));
+                        });
+                        // Figure out all atrules
+                        container.walkAtRules((atrule)=>{
+                            manualFormatStrings.push(`@${atrule.name} (${atrule.params}) { & }`);
+                        });
+                    }
+                    var _values;
+                    let result = formatStrings.map((formatString)=>(0, _formatVariantSelector.finalizeSelector)((0, _formatVariantSelector.formatVariantSelector)("&", ...formatString), {
+                            selector: `.${candidate}`,
+                            candidate,
+                            context,
+                            isArbitraryVariant: !(value in ((_values = options.values) !== null && _values !== void 0 ? _values : {}))
+                        }).replace(`.${candidate}`, "&").replace("{ & }", "").trim());
+                    if (manualFormatStrings.length > 0) {
+                        result.push((0, _formatVariantSelector.formatVariantSelector)("&", ...manualFormatStrings));
+                    }
+                    return result;
+                }
+            });
+        }
+        return result;
+    };
+}
+/**
+ * Mark as class as retroactively invalid
+ *
+ *
+ * @param {string} candidate
+ */ function markInvalidUtilityCandidate(context, candidate) {
+    if (!context.classCache.has(candidate)) {
+        return;
+    }
+    // Mark this as not being a real utility
+    context.notClassCache.add(candidate);
+    // Remove it from any candidate-specific caches
+    context.classCache.delete(candidate);
+    context.applyClassCache.delete(candidate);
+    context.candidateRuleMap.delete(candidate);
+    context.candidateRuleCache.delete(candidate);
+    // Ensure the stylesheet gets rebuilt
+    context.stylesheetCache = null;
+}
+/**
+ * Mark as class as retroactively invalid
+ *
+ * @param {import('postcss').Node} node
+ */ function markInvalidUtilityNode(context, node) {
+    let candidate = node.raws.tailwind.candidate;
+    if (!candidate) {
+        return;
+    }
+    for (const entry of context.ruleCache){
+        if (entry[1].raws.tailwind.candidate === candidate) {
+            context.ruleCache.delete(entry);
+        // context.postCssNodeCache.delete(node)
+        }
+    }
+    markInvalidUtilityCandidate(context, candidate);
 }
 function createContext(tailwindConfig, changedContent = [], root = _postcss.default.root()) {
     let context = {
         disposables: [],
         ruleCache: new Set(),
+        candidateRuleCache: new Map(),
         classCache: new Map(),
         applyClassCache: new Map(),
         notClassCache: new Set(),
@@ -866,7 +1099,10 @@ function createContext(tailwindConfig, changedContent = [], root = _postcss.defa
         tailwindConfig,
         changedContent: changedContent,
         variantMap: new Map(),
-        stylesheetCache: null
+        stylesheetCache: null,
+        variantOptions: new Map(),
+        markInvalidUtilityCandidate: (candidate)=>markInvalidUtilityCandidate(context, candidate),
+        markInvalidUtilityNode: (node)=>markInvalidUtilityNode(context, node)
     };
     let resolvedPlugins = resolvePlugins(context, root);
     registerPlugins(resolvedPlugins, context);
@@ -926,6 +1162,9 @@ function getContext(root, result, tailwindConfig, userConfigPath, tailwindConfig
     }
     _sharedState.env.DEBUG && console.log("Setting up new context...");
     let context2 = createContext(tailwindConfig, [], root);
+    Object.assign(context2, {
+        userConfigPath
+    });
     trackModified([
         ...contextDependencies
     ], getFileModifiedMap(context2));