tailwindcss 3.0.23 → 3.1.1

package/lib/lib/setupContextUtils.js

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+exports.isValidVariantFormatString = isValidVariantFormatString;
+exports.parseVariant = parseVariant;
 exports.getFileModifiedMap = getFileModifiedMap;
 exports.createContext = createContext;
 exports.getContext = getContext;
@@ -10,6 +12,7 @@ var _url = _interopRequireDefault(require("url"));
 var _postcss = _interopRequireDefault(require("postcss"));
 var _dlv = _interopRequireDefault(require("dlv"));
 var _postcssSelectorParser = _interopRequireDefault(require("postcss-selector-parser"));
+var _featureFlagsJs = require("../featureFlags.js");
 var _transformThemeValue = _interopRequireDefault(require("../util/transformThemeValue"));
 var _parseObjectStyles = _interopRequireDefault(require("../util/parseObjectStyles"));
 var _prefixSelector = _interopRequireDefault(require("../util/prefixSelector"));
@@ -25,41 +28,60 @@ var _log = _interopRequireDefault(require("../util/log"));
 var _negateValue = _interopRequireDefault(require("../util/negateValue"));
 var _isValidArbitraryValue = _interopRequireDefault(require("../util/isValidArbitraryValue"));
 var _generateRules = require("./generateRules");
+var _cacheInvalidationJs = require("./cacheInvalidation.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
+function _getRequireWildcardCache() {
+    if (typeof WeakMap !== "function") return null;
+    var cache = new WeakMap();
+    _getRequireWildcardCache = function() {
+        return cache;
+    };
+    return cache;
+}
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
-    } else {
-        var newObj = {};
-        if (obj != null) {
-            for(var key in obj){
-                if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
-                    if (desc.get || desc.set) {
-                        Object.defineProperty(newObj, key, desc);
-                    } else {
-                        newObj[key] = obj[key];
-                    }
-                }
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache();
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
             }
         }
-        newObj.default = obj;
-        return newObj;
     }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
 }
+let MATCH_VARIANT = Symbol();
 function prefix(context, selector) {
     let prefix1 = context.tailwindConfig.prefix;
-    return typeof prefix1 === 'function' ? prefix1(selector) : prefix1 + selector;
+    return typeof prefix1 === "function" ? prefix1(selector) : prefix1 + selector;
 }
 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()
@@ -68,9 +90,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
                 ;
@@ -104,9 +126,12 @@ function parseStyles(styles) {
         return isNode ? style : (0, _parseObjectStyles).default(style);
     });
 }
-function getClasses(selector) {
+function getClasses(selector, mutate) {
     let parser = (0, _postcssSelectorParser).default((selectors)=>{
         let allClasses = [];
+        if (mutate) {
+            mutate(selectors);
+        }
         selectors.walkClasses((classNode)=>{
             allClasses.push(classNode.value);
         });
@@ -119,9 +144,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;
@@ -130,10 +166,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);
             }
         });
@@ -168,6 +203,27 @@ function withIdentifiers(styles) {
         });
     });
 }
+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);
+        }
+    };
+}
 function buildPluginApi(tailwindConfig, context, { variantList , variantMap , offsets , classList  }) {
     function getConfigValue(path, defaultValue) {
         return path ? (0, _dlv).default(tailwindConfig, path, defaultValue) : tailwindConfig;
@@ -184,60 +240,32 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
         }
         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 = {}) {
+        const [pathRoot, ...subPaths] = (0, _toPath).toPath(path);
+        const value = getConfigValue([
+            "theme",
+            pathRoot,
+            ...subPaths
+        ], defaultValue);
+        return (0, _transformThemeValue).default(pathRoot)(value, opts);
+    }
+    const theme = Object.assign((path, defaultValue = undefined)=>resolveThemeValue(path, defaultValue), {
+        withAlpha: (path, opacityValue)=>resolveThemeValue(path, undefined, {
+                opacityValue
+            })
+    });
+    let api1 = {
         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,
         corePlugins: (path)=>{
             if (Array.isArray(tailwindConfig.corePlugins)) {
                 return tailwindConfig.corePlugins.includes(path);
             }
             return getConfigValue([
-                'corePlugins',
+                "corePlugins",
                 path
             ], true);
         },
@@ -245,21 +273,6 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
             // Preserved for backwards compatibility but not used in v3.0+
             return [];
         },
-        addUserCss (userCss) {
-            for (let [identifier, rule] of withIdentifiers(userCss)){
-                let offset = offsets.user++;
-                if (!context.candidateRuleMap.has(identifier)) {
-                    context.candidateRuleMap.set(identifier, []);
-                }
-                context.candidateRuleMap.get(identifier).push([
-                    {
-                        sort: offset,
-                        layer: 'user'
-                    },
-                    rule
-                ]);
-            }
-        },
         addBase (base) {
             for (let [identifier, rule] of withIdentifiers(base)){
                 let prefixedIdentifier = prefixIdentifier(identifier, {});
@@ -270,7 +283,7 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                 context.candidateRuleMap.get(prefixedIdentifier).push([
                     {
                         sort: offset,
-                        layer: 'base'
+                        layer: "base"
                     },
                     rule
                 ]);
@@ -291,7 +304,7 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                 context.candidateRuleMap.get(prefixedIdentifier).push([
                     {
                         sort: offsets.base++,
-                        layer: 'defaults'
+                        layer: "defaults"
                     },
                     rule
                 ]);
@@ -312,7 +325,7 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                 context.candidateRuleMap.get(prefixedIdentifier).push([
                     {
                         sort: offsets.components++,
-                        layer: 'components',
+                        layer: "components",
                         options
                     },
                     rule
@@ -334,7 +347,7 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                 context.candidateRuleMap.get(prefixedIdentifier).push([
                     {
                         sort: offsets.utilities++,
-                        layer: 'utilities',
+                        layer: "utilities",
                         options
                     },
                     rule
@@ -359,7 +372,7 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                     options
                 ]);
                 function wrapped(modifier, { isOnlyPlugin  }) {
-                    let { type ='any'  } = options;
+                    let { type ="any"  } = options;
                     type = [].concat(type);
                     let [value, coercedType] = (0, _pluginUtils).coerceValue(type, modifier, options, tailwindConfig);
                     if (value === undefined) {
@@ -373,14 +386,13 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                     }
                     let ruleSets = [].concat(rule(value)).filter(Boolean).map((declaration)=>({
                             [(0, _nameClass).default(identifier, modifier)]: declaration
-                        })
-                    );
+                        }));
                     return ruleSets;
                 }
                 let withOffsets = [
                     {
                         sort: offset,
-                        layer: 'utilities',
+                        layer: "utilities",
                         options
                     },
                     wrapped
@@ -409,7 +421,7 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                     options
                 ]);
                 function wrapped(modifier, { isOnlyPlugin  }) {
-                    let { type ='any'  } = options;
+                    let { type ="any"  } = options;
                     type = [].concat(type);
                     let [value, coercedType] = (0, _pluginUtils).coerceValue(type, modifier, options, tailwindConfig);
                     if (value === undefined) {
@@ -419,7 +431,7 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                         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 [];
@@ -430,14 +442,13 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                     }
                     let ruleSets = [].concat(rule(value)).filter(Boolean).map((declaration)=>({
                             [(0, _nameClass).default(identifier, modifier)]: declaration
-                        })
-                    );
+                        }));
                     return ruleSets;
                 }
                 let withOffsets = [
                     {
                         sort: offset,
-                        layer: 'components',
+                        layer: "components",
                         options
                     },
                     wrapped
@@ -447,8 +458,55 @@ 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
+                        }, variantFunction[MATCH_VARIANT] && {
+                            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.map((variant)=>parseVariant(variant));
+                        }
+                        // result may be undefined with legacy variants that use APIs like `modifySelectors`
+                        return result && 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);
         }
     };
+    if ((0, _featureFlagsJs).flagEnabled(tailwindConfig, "matchVariant")) {
+        api1.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 : {})){
+                    api1.addVariant(`${variant}-${k}`, variants[variant](v));
+                }
+                api1.addVariant(variant, Object.assign(({ args  })=>variants[variant](args), {
+                    [MATCH_VARIANT]: true
+                }), options);
+            }
+        };
+    }
+    return api1;
 }
 let fileModifiedMapCache = new WeakMap();
 function getFileModifiedMap(context) {
@@ -463,8 +521,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;
@@ -481,8 +539,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);
@@ -493,18 +551,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, {
@@ -513,7 +571,7 @@ function collectLayerPlugins(root) {
                 });
             }
             layerRule.remove();
-        } else if (layerRule.params === 'components') {
+        } else if (layerRule.params === "components") {
             for (let node of layerRule.nodes){
                 layerPlugins.push(function({ addComponents  }) {
                     addComponents(node, {
@@ -522,7 +580,7 @@ function collectLayerPlugins(root) {
                 });
             }
             layerRule.remove();
-        } else if (layerRule.params === 'utilities') {
+        } else if (layerRule.params === "utilities") {
             for (let node of layerRule.nodes){
                 layerPlugins.push(function({ addUtilities  }) {
                     addUtilities(node, {
@@ -533,16 +591,6 @@ function collectLayerPlugins(root) {
             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) {
@@ -559,22 +607,23 @@ 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"], 
     ];
     let afterVariants = [
-        _corePlugins.variantPlugins['directionVariants'],
-        _corePlugins.variantPlugins['reducedMotionVariants'],
-        _corePlugins.variantPlugins['darkVariants'],
-        _corePlugins.variantPlugins['printVariant'],
-        _corePlugins.variantPlugins['screenVariants'],
-        _corePlugins.variantPlugins['orientationVariants'], 
+        _corePlugins.variantPlugins["directionVariants"],
+        _corePlugins.variantPlugins["reducedMotionVariants"],
+        _corePlugins.variantPlugins["prefersContrastVariants"],
+        _corePlugins.variantPlugins["darkVariants"],
+        _corePlugins.variantPlugins["printVariant"],
+        _corePlugins.variantPlugins["screenVariants"],
+        _corePlugins.variantPlugins["orientationVariants"], 
     ];
     return [
         ...corePluginList,
@@ -610,9 +659,7 @@ function registerPlugins(plugins, context) {
             plugin === null || plugin === void 0 ? void 0 : plugin(pluginApi);
         }
     }
-    let highestOffset = ((args)=>args.reduce((m, e)=>e > m ? e : m
-        )
-    )([
+    let highestOffset = ((args)=>args.reduce((m, e)=>e > m ? e : m))([
         offsets.base,
         offsets.defaults,
         offsets.components,
@@ -640,8 +687,7 @@ function registerPlugins(plugins, context) {
             variant,
             bits
         ];
-    }).sort(([, a], [, z])=>(0, _bigSign).default(a - z)
-    ));
+    }).sort(([, a], [, z])=>(0, _bigSign).default(a - z)));
     context.minimumScreen = [
         ...context.variantOrder.values()
     ].shift();
@@ -651,26 +697,25 @@ function registerPlugins(plugins, context) {
         context.variantMap.set(variantName, variantFunctions1.map((variantFunction, idx)=>[
                 sort << BigInt(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') {
+            if (typeof value1 === "string") {
                 context.changedContent.push({
                     content: value1,
-                    extension: 'html'
+                    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.',
-                    'https://tailwindcss.com/docs/content-configuration#safelisting-classes', 
+                _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;
             }
@@ -684,15 +729,13 @@ function registerPlugins(plugins, context) {
                     let [utilName, options] = util;
                     var ref;
                     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)
-                    );
+                    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
-                            )
+                            ...classes.map((cls)=>"-" + cls)
                         ];
                         // This is the negated version *after* the prefix
                         // e.g. `tw--inset-1`
@@ -700,8 +743,7 @@ 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)), 
                         ];
                     }
                     return classes;
@@ -720,12 +762,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"
                             });
                         }
                     }
@@ -735,8 +777,8 @@ 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.',
-                    'https://tailwindcss.com/docs/content-configuration#safelisting-classes', 
+                    "Fix this pattern or remove it from your `safelist` configuration.",
+                    "https://tailwindcss.com/docs/content-configuration#safelisting-classes", 
                 ]);
             }
         }
@@ -746,8 +788,8 @@ function registerPlugins(plugins, context) {
     // sorting could be weird since you still require them in order to make the
     // host utitlies work properly. (Thanks Biology)
     let parasiteUtilities = new Set([
-        prefix(context, 'group'),
-        prefix(context, 'peer')
+        prefix(context, "group"),
+        prefix(context, "peer")
     ]);
     context.getClassOrder = function getClassOrder(classes) {
         let sortedClassNames = new Map();
@@ -817,7 +859,7 @@ 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);
@@ -827,13 +869,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
@@ -862,7 +905,7 @@ function getContext(root, result, tailwindConfig, userConfigPath, tailwindConfig
             }
         }
     }
-    sharedState.env.DEBUG && console.log('Setting up new context...');
+    sharedState.env.DEBUG && console.log("Setting up new context...");
     let context = createContext(tailwindConfig, [], root);
     trackModified([
         ...contextDependencies