tailwindcss 0.0.0-insiders.fe08e91 → 0.0.0-oxide.956419c

package/lib/lib/setupContextUtils.js

@@ -2,110 +2,120 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.getFileModifiedMap = getFileModifiedMap;
-exports.createContext = createContext;
-exports.getContext = getContext;
-var _fs = _interopRequireDefault(require("fs"));
-var _url = _interopRequireDefault(require("url"));
-var _postcss = _interopRequireDefault(require("postcss"));
-var _dlv = _interopRequireDefault(require("dlv"));
-var _postcssSelectorParser = _interopRequireDefault(require("postcss-selector-parser"));
-var _transformThemeValue = _interopRequireDefault(require("../util/transformThemeValue"));
-var _parseObjectStyles = _interopRequireDefault(require("../util/parseObjectStyles"));
-var _prefixSelector = _interopRequireDefault(require("../util/prefixSelector"));
-var _isPlainObject = _interopRequireDefault(require("../util/isPlainObject"));
-var _escapeClassName = _interopRequireDefault(require("../util/escapeClassName"));
-var _nameClass = _interopRequireWildcard(require("../util/nameClass"));
-var _pluginUtils = require("../util/pluginUtils");
-var _bigSign = _interopRequireDefault(require("../util/bigSign"));
-var _corePlugins = require("../corePlugins");
-var sharedState = _interopRequireWildcard(require("./sharedState"));
-var _toPath = require("../util/toPath");
-var _log = _interopRequireDefault(require("../util/log"));
-var _negateValue = _interopRequireDefault(require("../util/negateValue"));
-var _isValidArbitraryValue = _interopRequireDefault(require("../util/isValidArbitraryValue"));
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    isValidVariantFormatString: ()=>isValidVariantFormatString,
+    parseVariant: ()=>parseVariant,
+    getFileModifiedMap: ()=>getFileModifiedMap,
+    createContext: ()=>createContext,
+    getContext: ()=>getContext
+});
+const _fs = /*#__PURE__*/ _interopRequireDefault(require("fs"));
+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 _transformThemeValue = /*#__PURE__*/ _interopRequireDefault(require("../util/transformThemeValue"));
+const _parseObjectStyles = /*#__PURE__*/ _interopRequireDefault(require("../util/parseObjectStyles"));
+const _prefixSelector = /*#__PURE__*/ _interopRequireDefault(require("../util/prefixSelector"));
+const _isPlainObject = /*#__PURE__*/ _interopRequireDefault(require("../util/isPlainObject"));
+const _escapeClassName = /*#__PURE__*/ _interopRequireDefault(require("../util/escapeClassName"));
+const _nameClass = /*#__PURE__*/ _interopRequireWildcard(require("../util/nameClass"));
+const _pluginUtils = require("../util/pluginUtils");
+const _corePlugins = require("../corePlugins");
+const _sharedState = /*#__PURE__*/ _interopRequireWildcard(require("./sharedState"));
+const _toPath = require("../util/toPath");
+const _log = /*#__PURE__*/ _interopRequireDefault(require("../util/log"));
+const _negateValue = /*#__PURE__*/ _interopRequireDefault(require("../util/negateValue"));
+const _isSyntacticallyValidPropertyValue = /*#__PURE__*/ _interopRequireDefault(require("../util/isSyntacticallyValidPropertyValue"));
+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
     };
 }
-function _interopRequireWildcard(obj) {
-    if (obj && obj.__esModule) {
+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 _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
         return obj;
-    } else {
-        var newObj = {
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
         };
-        if (obj != null) {
-            for(var key in obj){
-                if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {
-                    };
-                    if (desc.get || desc.set) {
-                        Object.defineProperty(newObj, key, desc);
-                    } else {
-                        newObj[key] = obj[key];
-                    }
-                }
-            }
-        }
-        newObj.default = obj;
-        return newObj;
     }
-}
-function partitionRules(root) {
-    if (!root.walkAtRules) return [
-        root
-    ];
-    let applyParents = new Set();
-    let rules = [];
-    root.walkAtRules('apply', (rule)=>{
-        applyParents.add(rule.parent);
-    });
-    if (applyParents.size === 0) {
-        rules.push(root);
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
     }
-    for (let rule1 of applyParents){
-        let nodeGroups = [];
-        let lastGroup = [];
-        for (let node of rule1.nodes){
-            if (node.type === 'atrule' && node.name === 'apply') {
-                if (lastGroup.length > 0) {
-                    nodeGroups.push(lastGroup);
-                    lastGroup = [];
-                }
-                nodeGroups.push([
-                    node
-                ]);
+    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 {
-                lastGroup.push(node);
+                newObj[key] = obj[key];
             }
         }
-        if (lastGroup.length > 0) {
-            nodeGroups.push(lastGroup);
-        }
-        if (nodeGroups.length === 1) {
-            rules.push(rule1);
-            continue;
-        }
-        for (let group of [
-            ...nodeGroups
-        ].reverse()){
-            let clone = rule1.clone({
-                nodes: []
-            });
-            clone.append(group);
-            rules.unshift(clone);
-            rule1.after(clone);
-        }
-        rule1.remove();
     }
-    return rules;
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+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 (input.includes("{")) {
         if (!isBalanced(input)) throw new Error(`Your { and } are unbalanced.`);
-        return input.split(/{(.*)}/gim).flatMap((line)=>parseVariantFormatString(line)
-        ).filter(Boolean);
+        return input.split(/{(.*)}/gim).flatMap((line)=>parseVariantFormatString(line)).filter(Boolean);
     }
     return [
         input.trim()
@@ -114,9 +124,9 @@ function parseVariantFormatString(input) {
 function isBalanced(input) {
     let count = 0;
     for (let char of input){
-        if (char === '{') {
+        if (char === "{") {
             count++;
-        } else if (char === '}') {
+        } else if (char === "}") {
             if (--count < 0) {
                 return false // unbalanced
                 ;
@@ -125,8 +135,7 @@ function isBalanced(input) {
     }
     return count === 0;
 }
-function insertInto(list, value, { before =[]  } = {
-}) {
+function insertInto(list, value, { before =[]  } = {}) {
     before = [].concat(before);
     if (before.length <= 0) {
         list.push(value);
@@ -147,13 +156,16 @@ function parseStyles(styles) {
         ]);
     }
     return styles.flatMap((style)=>{
-        let isNode = !Array.isArray(style) && !(0, _isPlainObject).default(style);
-        return isNode ? style : (0, _parseObjectStyles).default(style);
+        let isNode = !Array.isArray(style) && !(0, _isPlainObject.default)(style);
+        return isNode ? style : (0, _parseObjectStyles.default)(style);
     });
 }
-function getClasses(selector) {
-    let parser = (0, _postcssSelectorParser).default((selectors)=>{
+function getClasses(selector, mutate) {
+    let parser = (0, _postcssSelectorParser.default)((selectors)=>{
         let allClasses = [];
+        if (mutate) {
+            mutate(selectors);
+        }
         selectors.walkClasses((classNode)=>{
             allClasses.push(classNode.value);
         });
@@ -166,9 +178,20 @@ function extractCandidates(node, state = {
 }, depth = 0) {
     let classes = [];
     // Handle normal rules
-    if (node.type === 'rule') {
+    if (node.type === "rule") {
+        // Ignore everything inside a :not(...). This allows you to write code like
+        // `div:not(.foo)`. If `.foo` is never found in your code, then we used to
+        // not generated it. But now we will ignore everything inside a `:not`, so
+        // that it still gets generated.
+        function ignoreNot(selectors) {
+            selectors.walkPseudos((pseudo)=>{
+                if (pseudo.value === ":not") {
+                    pseudo.remove();
+                }
+            });
+        }
         for (let selector of node.selectors){
-            let classCandidates = getClasses(selector);
+            let classCandidates = getClasses(selector, ignoreNot);
             // At least one of the selectors contains non-"on-demandable" candidates.
             if (classCandidates.length === 0) {
                 state.containsNonOnDemandable = true;
@@ -177,10 +200,9 @@ function extractCandidates(node, state = {
                 classes.push(classCandidate);
             }
         }
-    } else if (node.type === 'atrule') {
+    } else if (node.type === "atrule") {
         node.walkRules((rule)=>{
-            for (let classCandidate of rule.selectors.flatMap((selector)=>getClasses(selector, state, depth + 1)
-            )){
+            for (let classCandidate of rule.selectors.flatMap((selector)=>getClasses(selector))){
                 classes.push(classCandidate);
             }
         });
@@ -199,7 +221,7 @@ function withIdentifiers(styles) {
         let [containsNonOnDemandableSelectors, candidates] = extractCandidates(node);
         // If this isn't "on-demandable", assign it a universal candidate to always include it.
         if (containsNonOnDemandableSelectors) {
-            candidates.unshift('*');
+            candidates.unshift(_sharedState.NOT_ON_DEMAND);
         }
         // However, it could be that it also contains "on-demandable" candidates.
         // E.g.: `span, .foo {}`, in that case it should still be possible to use
@@ -215,77 +237,70 @@ function withIdentifiers(styles) {
         });
     });
 }
-function buildPluginApi(tailwindConfig, context, { variantList , variantMap , offsets , classList  }) {
+function isValidVariantFormatString(format) {
+    return format.startsWith("@") || format.includes("&");
+}
+function parseVariant(variant) {
+    variant = variant.replace(/\n+/g, "").replace(/\s{1,}/g, " ").trim();
+    let fns = parseVariantFormatString(variant).map((str)=>{
+        if (!str.startsWith("@")) {
+            return ({ format  })=>format(str);
+        }
+        let [, name, params] = /@(.*?)( .+|[({].*)/g.exec(str);
+        return ({ wrap  })=>wrap(_postcss.default.atRule({
+                name,
+                params: params.trim()
+            }));
+    }).reverse();
+    return (api)=>{
+        for (let fn of fns){
+            fn(api);
+        }
+    };
+}
+/**
+ *
+ * @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;
+        return path ? (0, _dlv.default)(tailwindConfig, path, defaultValue) : tailwindConfig;
     }
     function applyConfiguredPrefix(selector) {
-        return (0, _prefixSelector).default(tailwindConfig.prefix, selector);
+        return (0, _prefixSelector.default)(tailwindConfig.prefix, selector);
     }
     function prefixIdentifier(identifier, options) {
-        if (identifier === '*') {
-            return '*';
+        if (identifier === _sharedState.NOT_ON_DEMAND) {
+            return _sharedState.NOT_ON_DEMAND;
         }
         if (!options.respectPrefix) {
             return identifier;
         }
         return context.tailwindConfig.prefix + identifier;
     }
-    return {
-        addVariant (variantName, variantFunctions, options = {
-        }) {
-            variantFunctions = [].concat(variantFunctions).map((variantFunction)=>{
-                if (typeof variantFunction !== 'string') {
-                    // Safelist public API functions
-                    return ({ modifySelectors , container , separator  })=>{
-                        return variantFunction({
-                            modifySelectors,
-                            container,
-                            separator
-                        });
-                    };
-                }
-                variantFunction = variantFunction.replace(/\n+/g, '').replace(/\s{1,}/g, ' ').trim();
-                let fns = parseVariantFormatString(variantFunction).map((str)=>{
-                    if (!str.startsWith('@')) {
-                        return ({ format  })=>format(str)
-                        ;
-                    }
-                    let [, name, params] = /@(.*?) (.*)/g.exec(str);
-                    return ({ wrap  })=>wrap(_postcss.default.atRule({
-                            name,
-                            params
-                        }))
-                    ;
-                }).reverse();
-                return (api)=>{
-                    for (let fn of fns){
-                        fn(api);
-                    }
-                };
-            });
-            insertInto(variantList, variantName, options);
-            variantMap.set(variantName, variantFunctions);
-        },
+    function resolveThemeValue(path, defaultValue, opts = {}) {
+        let parts = (0, _toPath.toPath)(path);
+        let value = getConfigValue([
+            "theme",
+            ...parts
+        ], defaultValue);
+        return (0, _transformThemeValue.default)(parts[0])(value, opts);
+    }
+    let variantIdentifier = 0;
+    let api = {
         postcss: _postcss.default,
         prefix: applyConfiguredPrefix,
         e: _escapeClassName.default,
         config: getConfigValue,
-        theme (path, defaultValue) {
-            const [pathRoot, ...subPaths] = (0, _toPath).toPath(path);
-            const value = getConfigValue([
-                'theme',
-                pathRoot,
-                ...subPaths
-            ], defaultValue);
-            return (0, _transformThemeValue).default(pathRoot)(value);
-        },
+        theme: resolveThemeValue,
         corePlugins: (path)=>{
             if (Array.isArray(tailwindConfig.corePlugins)) {
                 return tailwindConfig.corePlugins.includes(path);
             }
             return getConfigValue([
-                'corePlugins',
+                "corePlugins",
                 path
             ], true);
         },
@@ -293,38 +308,20 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
             // Preserved for backwards compatibility but not used in v3.0+
             return [];
         },
-        addUserCss (userCss) {
-            for (let [identifier, rule2] of withIdentifiers(userCss)){
-                let offset = offsets.user++;
-                if (!context.candidateRuleMap.has(identifier)) {
-                    context.candidateRuleMap.set(identifier, []);
-                }
-                context.candidateRuleMap.get(identifier).push(...partitionRules(rule2).map((rule)=>[
-                        {
-                            sort: offset,
-                            layer: 'user'
-                        },
-                        rule
-                    ]
-                ));
-            }
-        },
         addBase (base) {
-            for (let [identifier, rule3] of withIdentifiers(base)){
-                let prefixedIdentifier = prefixIdentifier(identifier, {
-                });
-                let offset = offsets.base++;
+            for (let [identifier, rule] of withIdentifiers(base)){
+                let prefixedIdentifier = prefixIdentifier(identifier, {});
+                let offset = offsets.create("base");
                 if (!context.candidateRuleMap.has(prefixedIdentifier)) {
                     context.candidateRuleMap.set(prefixedIdentifier, []);
                 }
-                context.candidateRuleMap.get(prefixedIdentifier).push(...partitionRules(rule3).map((rule)=>[
-                        {
-                            sort: offset,
-                            layer: 'base'
-                        },
-                        rule
-                    ]
-                ));
+                context.candidateRuleMap.get(prefixedIdentifier).push([
+                    {
+                        sort: offset,
+                        layer: "base"
+                    },
+                    rule
+                ]);
             }
         },
         /**
@@ -334,82 +331,77 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
             const groups = {
                 [`@defaults ${group}`]: declarations
             };
-            for (let [identifier, rule4] of withIdentifiers(groups)){
-                let prefixedIdentifier = prefixIdentifier(identifier, {
-                });
+            for (let [identifier, rule] of withIdentifiers(groups)){
+                let prefixedIdentifier = prefixIdentifier(identifier, {});
                 if (!context.candidateRuleMap.has(prefixedIdentifier)) {
                     context.candidateRuleMap.set(prefixedIdentifier, []);
                 }
-                context.candidateRuleMap.get(prefixedIdentifier).push(...partitionRules(rule4).map((rule)=>[
-                        {
-                            sort: offsets.base++,
-                            layer: 'defaults'
-                        },
-                        rule, 
-                    ]
-                ));
+                context.candidateRuleMap.get(prefixedIdentifier).push([
+                    {
+                        sort: offsets.create("defaults"),
+                        layer: "defaults"
+                    },
+                    rule
+                ]);
             }
         },
         addComponents (components, options) {
             let defaultOptions = {
+                preserveSource: false,
                 respectPrefix: true,
                 respectImportant: false
             };
-            options = Object.assign({
-            }, defaultOptions, Array.isArray(options) ? {
-            } : options);
-            for (let [identifier, rule5] of withIdentifiers(components)){
+            options = Object.assign({}, defaultOptions, Array.isArray(options) ? {} : options);
+            for (let [identifier, rule] of withIdentifiers(components)){
                 let prefixedIdentifier = prefixIdentifier(identifier, options);
                 classList.add(prefixedIdentifier);
                 if (!context.candidateRuleMap.has(prefixedIdentifier)) {
                     context.candidateRuleMap.set(prefixedIdentifier, []);
                 }
-                context.candidateRuleMap.get(prefixedIdentifier).push(...partitionRules(rule5).map((rule)=>[
-                        {
-                            sort: offsets.components++,
-                            layer: 'components',
-                            options
-                        },
-                        rule, 
-                    ]
-                ));
+                context.candidateRuleMap.get(prefixedIdentifier).push([
+                    {
+                        sort: offsets.create("components"),
+                        layer: "components",
+                        options
+                    },
+                    rule
+                ]);
             }
         },
         addUtilities (utilities, options) {
             let defaultOptions = {
+                preserveSource: false,
                 respectPrefix: true,
                 respectImportant: true
             };
-            options = Object.assign({
-            }, defaultOptions, Array.isArray(options) ? {
-            } : options);
-            for (let [identifier, rule6] of withIdentifiers(utilities)){
+            options = Object.assign({}, defaultOptions, Array.isArray(options) ? {} : options);
+            for (let [identifier, rule] of withIdentifiers(utilities)){
                 let prefixedIdentifier = prefixIdentifier(identifier, options);
                 classList.add(prefixedIdentifier);
                 if (!context.candidateRuleMap.has(prefixedIdentifier)) {
                     context.candidateRuleMap.set(prefixedIdentifier, []);
                 }
-                context.candidateRuleMap.get(prefixedIdentifier).push(...partitionRules(rule6).map((rule)=>[
-                        {
-                            sort: offsets.utilities++,
-                            layer: 'utilities',
-                            options
-                        },
-                        rule, 
-                    ]
-                ));
+                context.candidateRuleMap.get(prefixedIdentifier).push([
+                    {
+                        sort: offsets.create("utilities"),
+                        layer: "utilities",
+                        options
+                    },
+                    rule
+                ]);
             }
         },
         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];
@@ -418,28 +410,43 @@ 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)) {
+                    if (!(0, _isSyntacticallyValidPropertyValue.default)(value)) {
                         return [];
                     }
-                    let ruleSets = [].concat(rule(value)).filter(Boolean).map((declaration)=>({
-                            [(0, _nameClass).default(identifier, modifier)]: 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;
                 }
                 let withOffsets = [
                     {
                         sort: offset,
-                        layer: 'utilities',
+                        layer: "utilities",
                         options
                     },
                     wrapped
@@ -453,13 +460,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];
@@ -468,35 +476,43 @@ 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 [];
                         }
                     }
-                    if (!(0, _isValidArbitraryValue).default(value)) {
+                    if (!(0, _isSyntacticallyValidPropertyValue.default)(value)) {
                         return [];
                     }
-                    let ruleSets = [].concat(rule(value)).filter(Boolean).map((declaration)=>({
-                            [(0, _nameClass).default(identifier, modifier)]: 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;
                 }
                 let withOffsets = [
                     {
                         sort: offset,
-                        layer: 'components',
+                        layer: "components",
                         options
                     },
                     wrapped
@@ -506,8 +522,90 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                 }
                 context.candidateRuleMap.get(prefixedIdentifier).push(withOffsets);
             }
+        },
+        addVariant (variantName, variantFunctions, options = {}) {
+            variantFunctions = [].concat(variantFunctions).map((variantFunction)=>{
+                if (typeof variantFunction !== "string") {
+                    // Safelist public API functions
+                    return (api = {})=>{
+                        let { args , modifySelectors , container , separator , wrap , format  } = api;
+                        let result = variantFunction(Object.assign({
+                            modifySelectors,
+                            container,
+                            separator
+                        }, options.type === VARIANT_TYPES.MatchVariant && {
+                            args,
+                            wrap,
+                            format
+                        }));
+                        if (typeof result === "string" && !isValidVariantFormatString(result)) {
+                            throw new Error(`Your custom variant \`${variantName}\` has an invalid format string. Make sure it's an at-rule or contains a \`&\` placeholder.`);
+                        }
+                        if (Array.isArray(result)) {
+                            return result.filter((variant)=>typeof variant === "string").map((variant)=>parseVariant(variant));
+                        }
+                        // result may be undefined with legacy variants that use APIs like `modifySelectors`
+                        // result may also be a postcss node if someone was returning the result from `modifySelectors`
+                        return result && typeof result === "string" && parseVariant(result)(api);
+                    };
+                }
+                if (!isValidVariantFormatString(variantFunction)) {
+                    throw new Error(`Your custom variant \`${variantName}\` has an invalid format string. Make sure it's an at-rule or contains a \`&\` placeholder.`);
+                }
+                return parseVariant(variantFunction);
+            });
+            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  })=>{
+                    return variantFn(value, modifiersEnabled ? {
+                        modifier: args === null || args === void 0 ? void 0 : 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 === null || args === void 0 ? void 0 : args.value) === _sharedState.NONE && !hasDefault) {
+                    return null;
+                }
+                var // (JetBrains) plugins.
+                ref;
+                return variantFn((args === null || args === void 0 ? void 0 : args.value) === _sharedState.NONE ? options.values.DEFAULT : (ref = args === null || args === void 0 ? void 0 : args.value) !== null && ref !== void 0 ? ref : typeof args === "string" ? args : "", modifiersEnabled ? {
+                    modifier: args === null || args === void 0 ? void 0 : args.modifier,
+                    container
+                } : {
+                    container
+                });
+            }, {
+                ...options,
+                id,
+                type: VARIANT_TYPES.MatchVariant,
+                variantInfo: VARIANT_INFO.Dynamic
+            });
         }
     };
+    return api;
 }
 let fileModifiedMapCache = new WeakMap();
 function getFileModifiedMap(context) {
@@ -522,8 +620,8 @@ function trackModified(files, fileModifiedMap) {
         var ref;
         if (!file) continue;
         let parsed = _url.default.parse(file);
-        let pathname = parsed.hash ? parsed.href.replace(parsed.hash, '') : parsed.href;
-        pathname = parsed.search ? pathname.replace(parsed.search, '') : pathname;
+        let pathname = parsed.hash ? parsed.href.replace(parsed.hash, "") : parsed.href;
+        pathname = parsed.search ? pathname.replace(parsed.search, "") : pathname;
         let newModified = (ref = _fs.default.statSync(decodeURIComponent(pathname), {
             throwIfNoEntry: false
         })) === null || ref === void 0 ? void 0 : ref.mtimeMs;
@@ -540,8 +638,8 @@ function trackModified(files, fileModifiedMap) {
 function extractVariantAtRules(node) {
     node.walkAtRules((atRule)=>{
         if ([
-            'responsive',
-            'variants'
+            "responsive",
+            "variants"
         ].includes(atRule.name)) {
             extractVariantAtRules(atRule);
             atRule.before(atRule.nodes);
@@ -552,18 +650,18 @@ function extractVariantAtRules(node) {
 function collectLayerPlugins(root) {
     let layerPlugins = [];
     root.each((node)=>{
-        if (node.type === 'atrule' && [
-            'responsive',
-            'variants'
+        if (node.type === "atrule" && [
+            "responsive",
+            "variants"
         ].includes(node.name)) {
-            node.name = 'layer';
-            node.params = 'utilities';
+            node.name = "layer";
+            node.params = "utilities";
         }
     });
     // Walk @layer rules and treat them like plugins
-    root.walkAtRules('layer', (layerRule)=>{
+    root.walkAtRules("layer", (layerRule)=>{
         extractVariantAtRules(layerRule);
-        if (layerRule.params === 'base') {
+        if (layerRule.params === "base") {
             for (let node of layerRule.nodes){
                 layerPlugins.push(function({ addBase  }) {
                     addBase(node, {
@@ -572,36 +670,28 @@ function collectLayerPlugins(root) {
                 });
             }
             layerRule.remove();
-        } else if (layerRule.params === 'components') {
-            for (let node of layerRule.nodes){
+        } else if (layerRule.params === "components") {
+            for (let node1 of layerRule.nodes){
                 layerPlugins.push(function({ addComponents  }) {
-                    addComponents(node, {
-                        respectPrefix: false
+                    addComponents(node1, {
+                        respectPrefix: false,
+                        preserveSource: true
                     });
                 });
             }
             layerRule.remove();
-        } else if (layerRule.params === 'utilities') {
-            for (let node of layerRule.nodes){
+        } else if (layerRule.params === "utilities") {
+            for (let node2 of layerRule.nodes){
                 layerPlugins.push(function({ addUtilities  }) {
-                    addUtilities(node, {
-                        respectPrefix: false
+                    addUtilities(node2, {
+                        respectPrefix: false,
+                        preserveSource: true
                     });
                 });
             }
             layerRule.remove();
         }
     });
-    root.walkRules((rule)=>{
-        // At this point it is safe to include all the left-over css from the
-        // user's css file. This is because the `@tailwind` and `@layer` directives
-        // will already be handled and will be removed from the css tree.
-        layerPlugins.push(function({ addUserCss  }) {
-            addUserCss(rule, {
-                respectPrefix: false
-            });
-        });
-    });
     return layerPlugins;
 }
 function resolvePlugins(context, root) {
@@ -618,22 +708,26 @@ function resolvePlugins(context, root) {
         if (plugin.__isOptionsFunction) {
             plugin = plugin();
         }
-        return typeof plugin === 'function' ? plugin : plugin.handler;
+        return typeof plugin === "function" ? plugin : plugin.handler;
     });
     let layerPlugins = collectLayerPlugins(root);
     // TODO: This is a workaround for backwards compatibility, since custom variants
     // were historically sorted before screen/stackable variants.
     let beforeVariants = [
-        _corePlugins.variantPlugins['pseudoElementVariants'],
-        _corePlugins.variantPlugins['pseudoClassVariants'], 
+        _corePlugins.variantPlugins["pseudoElementVariants"],
+        _corePlugins.variantPlugins["pseudoClassVariants"],
+        _corePlugins.variantPlugins["ariaVariants"],
+        _corePlugins.variantPlugins["dataVariants"]
     ];
     let afterVariants = [
-        _corePlugins.variantPlugins['directionVariants'],
-        _corePlugins.variantPlugins['reducedMotionVariants'],
-        _corePlugins.variantPlugins['darkVariants'],
-        _corePlugins.variantPlugins['printVariant'],
-        _corePlugins.variantPlugins['screenVariants'],
-        _corePlugins.variantPlugins['orientationVariants'], 
+        _corePlugins.variantPlugins["supportsVariants"],
+        _corePlugins.variantPlugins["directionVariants"],
+        _corePlugins.variantPlugins["reducedMotionVariants"],
+        _corePlugins.variantPlugins["prefersContrastVariants"],
+        _corePlugins.variantPlugins["darkVariants"],
+        _corePlugins.variantPlugins["printVariant"],
+        _corePlugins.variantPlugins["screenVariants"],
+        _corePlugins.variantPlugins["orientationVariants"]
     ];
     return [
         ...corePluginList,
@@ -646,13 +740,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,
@@ -669,85 +759,73 @@ 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, variantFunctions1] of variantMap.entries()){
-        let sort = context.variantOrder.get(variantName);
-        context.variantMap.set(variantName, variantFunctions1.map((variantFunction, idx)=>[
-                sort << BigInt(idx),
+    for (let [variantName, variantFunctions] of variantMap.entries()){
+        context.variantMap.set(variantName, variantFunctions.map((variantFunction, idx)=>[
+                offsets.forVariant(variantName, idx),
                 variantFunction
-            ]
-        ));
+            ]));
     }
     var _safelist;
     let safelist = ((_safelist = context.tailwindConfig.safelist) !== null && _safelist !== void 0 ? _safelist : []).filter(Boolean);
     if (safelist.length > 0) {
         let checks = [];
-        for (let value1 of safelist){
-            if (typeof value1 === 'string') {
+        for (let value of safelist){
+            if (typeof value === "string") {
                 context.changedContent.push({
-                    content: value1,
-                    extension: 'html'
+                    content: value,
+                    extension: "html"
                 });
                 continue;
             }
-            if (value1 instanceof RegExp) {
-                _log.default.warn('root-regex', [
-                    'Regular expressions in `safelist` work differently in Tailwind CSS v3.0.',
-                    'Update your `safelist` configuration to eliminate this warning.'
+            if (value instanceof RegExp) {
+                _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"
                 ]);
                 continue;
             }
-            checks.push(value1);
+            checks.push(value);
         }
         if (checks.length > 0) {
             let patternMatchingCount = new Map();
+            let prefixLength = context.tailwindConfig.prefix.length;
+            let checkImportantUtils = checks.some((check)=>check.pattern.source.includes("!"));
             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))
+                        ];
+                    }
+                    if (options.types.some(({ type  })=>type === "color")) {
                         classes = [
                             ...classes,
-                            ...classes.map((cls)=>'-' + cls
-                            )
+                            ...classes.flatMap((cls)=>Object.keys(context.tailwindConfig.theme.opacity).map((opacity)=>`${cls}/${opacity}`))
+                        ];
+                    }
+                    if (checkImportantUtils && (options === null || options === void 0 ? void 0 : options.respectImportant)) {
+                        classes = [
+                            ...classes,
+                            ...classes.map((cls)=>"!" + cls)
                         ];
                     }
                     return classes;
@@ -766,12 +844,12 @@ function registerPlugins(plugins, context) {
                         patternMatchingCount.set(pattern, patternMatchingCount.get(pattern) + 1);
                         context.changedContent.push({
                             content: util1,
-                            extension: 'html'
+                            extension: "html"
                         });
                         for (let variant of variants){
                             context.changedContent.push({
                                 content: variant + context.tailwindConfig.separator + util1,
-                                extension: 'html'
+                                extension: "html"
                             });
                         }
                     }
@@ -781,25 +859,70 @@ function registerPlugins(plugins, context) {
                 if (count !== 0) continue;
                 _log.default.warn([
                     `The safelist pattern \`${regex}\` doesn't match any Tailwind CSS classes.`,
-                    'Fix this pattern or remove it from your `safelist` configuration.', 
+                    "Fix this pattern or remove it from your `safelist` configuration.",
+                    "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 utilities work properly. (Thanks Biology)
+    let parasiteUtilities = [
+        prefix(context, darkClassName),
+        prefix(context, "group"),
+        prefix(context, "peer")
+    ];
+    context.getClassOrder = function getClassOrder(classes) {
+        // 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;
+            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 = BigInt(parasiteIndex);
+            }
+            return [
+                className,
+                order
+            ];
+        });
+    };
     // Generate a list of strings for autocompletion purposes, e.g.
     // ['uppercase', 'lowercase', ...]
-    context.getClassList = function() {
+    context.getClassList = function getClassList() {
         let output = [];
         for (let util of classList){
             if (Array.isArray(util)) {
                 let [utilName, options] = util;
                 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 : {
-                })){
-                    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}`));
+                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}`));
                     }
                 }
                 output.push(...negativeClasses);
@@ -809,32 +932,196 @@ 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()) {
+    var _blocklist;
     let context = {
         disposables: [],
         ruleCache: new Set(),
+        candidateRuleCache: new Map(),
         classCache: new Map(),
         applyClassCache: new Map(),
-        notClassCache: new Set(),
+        // Seed the not class cache with the blocklist (which is only strings)
+        notClassCache: new Set((_blocklist = tailwindConfig.blocklist) !== null && _blocklist !== void 0 ? _blocklist : []),
         postCssNodeCache: new Map(),
         candidateRuleMap: new Map(),
         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);
     return context;
 }
-let contextMap = sharedState.contextMap;
-let configContextMap = sharedState.configContextMap;
-let contextSourcesMap = sharedState.contextSourcesMap;
+let contextMap = _sharedState.contextMap;
+let configContextMap = _sharedState.configContextMap;
+let contextSourcesMap = _sharedState.contextSourcesMap;
 function getContext(root, result, tailwindConfig, userConfigPath, tailwindConfigHash, contextDependencies) {
     let sourcePath = result.opts.from;
     let isConfigFile = userConfigPath !== null;
-    sharedState.env.DEBUG && console.log('Source path:', sourcePath);
+    _sharedState.env.DEBUG && console.log("Source path:", sourcePath);
     let existingContext;
     if (isConfigFile && contextMap.has(sourcePath)) {
         existingContext = contextMap.get(sourcePath);
@@ -844,13 +1131,14 @@ function getContext(root, result, tailwindConfig, userConfigPath, tailwindConfig
         contextMap.set(sourcePath, context);
         existingContext = context;
     }
+    let cssDidChange = (0, _cacheInvalidationJs.hasContentChanged)(sourcePath, root);
     // If there's already a context in the cache and we don't need to
     // reset the context, return the cached context.
     if (existingContext) {
         let contextDependenciesChanged = trackModified([
             ...contextDependencies
         ], getFileModifiedMap(existingContext));
-        if (!contextDependenciesChanged) {
+        if (!contextDependenciesChanged && !cssDidChange) {
             return [
                 existingContext,
                 false
@@ -868,9 +1156,9 @@ function getContext(root, result, tailwindConfig, userConfigPath, tailwindConfig
             contextSourcesMap.get(oldContext).delete(sourcePath);
             if (contextSourcesMap.get(oldContext).size === 0) {
                 contextSourcesMap.delete(oldContext);
-                for (let [tailwindConfigHash, context] of configContextMap){
-                    if (context === oldContext) {
-                        configContextMap.delete(tailwindConfigHash);
+                for (let [tailwindConfigHash1, context1] of configContextMap){
+                    if (context1 === oldContext) {
+                        configContextMap.delete(tailwindConfigHash1);
                     }
                 }
                 for (let disposable of oldContext.disposables.splice(0)){
@@ -879,21 +1167,24 @@ function getContext(root, result, tailwindConfig, userConfigPath, tailwindConfig
             }
         }
     }
-    sharedState.env.DEBUG && console.log('Setting up new context...');
-    let context = createContext(tailwindConfig, [], root);
+    _sharedState.env.DEBUG && console.log("Setting up new context...");
+    let context2 = createContext(tailwindConfig, [], root);
+    Object.assign(context2, {
+        userConfigPath
+    });
     trackModified([
         ...contextDependencies
-    ], getFileModifiedMap(context));
+    ], getFileModifiedMap(context2));
     // ---
     // Update all context tracking state
-    configContextMap.set(tailwindConfigHash, context);
-    contextMap.set(sourcePath, context);
-    if (!contextSourcesMap.has(context)) {
-        contextSourcesMap.set(context, new Set());
+    configContextMap.set(tailwindConfigHash, context2);
+    contextMap.set(sourcePath, context2);
+    if (!contextSourcesMap.has(context2)) {
+        contextSourcesMap.set(context2, new Set());
     }
-    contextSourcesMap.get(context).add(sourcePath);
+    contextSourcesMap.get(context2).add(sourcePath);
     return [
-        context,
+        context2,
         true
     ];
 }