tailwindcss 0.0.0-insiders.ea10bb9 → 0.0.0-insiders.ea4e1cd

package/lib/lib/setupContextUtils.js

@@ -9,36 +9,46 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    isValidVariantFormatString: ()=>isValidVariantFormatString,
-    parseVariant: ()=>parseVariant,
-    getFileModifiedMap: ()=>getFileModifiedMap,
-    createContext: ()=>createContext,
-    getContext: ()=>getContext
+    isValidVariantFormatString: function() {
+        return isValidVariantFormatString;
+    },
+    parseVariant: function() {
+        return parseVariant;
+    },
+    getFileModifiedMap: function() {
+        return getFileModifiedMap;
+    },
+    createContext: function() {
+        return createContext;
+    },
+    getContext: function() {
+        return 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 _fs = /*#__PURE__*/ _interop_require_default(require("fs"));
+const _url = /*#__PURE__*/ _interop_require_default(require("url"));
+const _postcss = /*#__PURE__*/ _interop_require_default(require("postcss"));
+const _dlv = /*#__PURE__*/ _interop_require_default(require("dlv"));
+const _postcssselectorparser = /*#__PURE__*/ _interop_require_default(require("postcss-selector-parser"));
+const _transformThemeValue = /*#__PURE__*/ _interop_require_default(require("../util/transformThemeValue"));
+const _parseObjectStyles = /*#__PURE__*/ _interop_require_default(require("../util/parseObjectStyles"));
+const _prefixSelector = /*#__PURE__*/ _interop_require_default(require("../util/prefixSelector"));
+const _isPlainObject = /*#__PURE__*/ _interop_require_default(require("../util/isPlainObject"));
+const _escapeClassName = /*#__PURE__*/ _interop_require_default(require("../util/escapeClassName"));
+const _nameClass = /*#__PURE__*/ _interop_require_wildcard(require("../util/nameClass"));
 const _pluginUtils = require("../util/pluginUtils");
 const _corePlugins = require("../corePlugins");
-const _sharedState = /*#__PURE__*/ _interopRequireWildcard(require("./sharedState"));
+const _sharedState = /*#__PURE__*/ _interop_require_wildcard(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 _log = /*#__PURE__*/ _interop_require_default(require("../util/log"));
+const _negateValue = /*#__PURE__*/ _interop_require_default(require("../util/negateValue"));
+const _isSyntacticallyValidPropertyValue = /*#__PURE__*/ _interop_require_default(require("../util/isSyntacticallyValidPropertyValue"));
 const _generateRules = require("./generateRules");
-const _cacheInvalidationJs = require("./cacheInvalidation.js");
-const _offsetsJs = require("./offsets.js");
-const _featureFlagsJs = require("../featureFlags.js");
+const _cacheInvalidation = require("./cacheInvalidation.js");
+const _offsets = require("./offsets.js");
+const _featureFlags = require("../featureFlags.js");
 const _formatVariantSelector = require("../util/formatVariantSelector");
-function _interopRequireDefault(obj) {
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
@@ -51,7 +61,7 @@ function _getRequireWildcardCache(nodeInterop) {
         return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
     })(nodeInterop);
 }
-function _interopRequireWildcard(obj, nodeInterop) {
+function _interop_require_wildcard(obj, nodeInterop) {
     if (!nodeInterop && obj && obj.__esModule) {
         return obj;
     }
@@ -113,27 +123,41 @@ function normalizeOptionTypes({ type ="any" , ...options }) {
     };
 }
 function parseVariantFormatString(input) {
-    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.trim()
-    ];
-}
-function isBalanced(input) {
-    let count = 0;
-    for (let char of input){
-        if (char === "{") {
-            count++;
+    /** @type {string[]} */ let parts = [];
+    // When parsing whitespace around special characters are insignificant
+    // However, _inside_ of a variant they could be
+    // Because the selector could look like this
+    // @media { &[data-name="foo bar"] }
+    // This is why we do not skip whitespace
+    let current = "";
+    let depth = 0;
+    for(let idx = 0; idx < input.length; idx++){
+        let char = input[idx];
+        if (char === "\\") {
+            // Escaped characters are not special
+            current += "\\" + input[++idx];
+        } else if (char === "{") {
+            // Nested rule: start
+            ++depth;
+            parts.push(current.trim());
+            current = "";
         } else if (char === "}") {
-            if (--count < 0) {
-                return false // unbalanced
-                ;
+            // Nested rule: end
+            if (--depth < 0) {
+                throw new Error(`Your { and } are unbalanced.`);
             }
+            parts.push(current.trim());
+            current = "";
+        } else {
+            // Normal character
+            current += char;
         }
     }
-    return count === 0;
+    if (current.length > 0) {
+        parts.push(current.trim());
+    }
+    parts = parts.filter((part)=>part !== "");
+    return parts;
 }
 function insertInto(list, value, { before =[]  } = {}) {
     before = [].concat(before);
@@ -161,7 +185,7 @@ function parseStyles(styles) {
     });
 }
 function getClasses(selector, mutate) {
-    let parser = (0, _postcssSelectorParser.default)((selectors)=>{
+    let parser = (0, _postcssselectorparser.default)((selectors)=>{
         let allClasses = [];
         if (mutate) {
             mutate(selectors);
@@ -281,26 +305,20 @@ function parseVariant(variant) {
         return context.tailwindConfig.prefix + identifier;
     }
     function resolveThemeValue(path, defaultValue, opts = {}) {
-        const [pathRoot, ...subPaths] = (0, _toPath.toPath)(path);
-        const value = getConfigValue([
+        let parts = (0, _toPath.toPath)(path);
+        let value = getConfigValue([
             "theme",
-            pathRoot,
-            ...subPaths
+            ...parts
         ], defaultValue);
-        return (0, _transformThemeValue.default)(pathRoot)(value, opts);
+        return (0, _transformThemeValue.default)(parts[0])(value, opts);
     }
-    const theme = Object.assign((path, defaultValue = undefined)=>resolveThemeValue(path, defaultValue), {
-        withAlpha: (path, opacityValue)=>resolveThemeValue(path, undefined, {
-                opacityValue
-            })
-    });
     let variantIdentifier = 0;
     let api = {
         postcss: _postcss.default,
         prefix: applyConfiguredPrefix,
         e: _escapeClassName.default,
         config: getConfigValue,
-        theme,
+        theme: resolveThemeValue,
         corePlugins: (path)=>{
             if (Array.isArray(tailwindConfig.corePlugins)) {
                 return tailwindConfig.corePlugins.includes(path);
@@ -443,7 +461,7 @@ function parseVariant(variant) {
                             return utilityModifier;
                         }
                     };
-                    let modifiersEnabled = (0, _featureFlagsJs.flagEnabled)(tailwindConfig, "generalizedModifiers");
+                    let modifiersEnabled = (0, _featureFlags.flagEnabled)(tailwindConfig, "generalizedModifiers");
                     let ruleSets = [].concat(modifiersEnabled ? rule(value, extras) : rule(value)).filter(Boolean).map((declaration)=>({
                             [(0, _nameClass.default)(identifier, modifier)]: declaration
                         }));
@@ -509,7 +527,7 @@ function parseVariant(variant) {
                             return utilityModifier;
                         }
                     };
-                    let modifiersEnabled = (0, _featureFlagsJs.flagEnabled)(tailwindConfig, "generalizedModifiers");
+                    let modifiersEnabled = (0, _featureFlags.flagEnabled)(tailwindConfig, "generalizedModifiers");
                     let ruleSets = [].concat(modifiersEnabled ? rule(value, extras) : rule(value)).filter(Boolean).map((declaration)=>({
                             [(0, _nameClass.default)(identifier, modifier)]: declaration
                         }));
@@ -565,14 +583,14 @@ function parseVariant(variant) {
             context.variantOptions.set(variantName, options);
         },
         matchVariant (variant, variantFn, options) {
-            var ref;
+            var _options_id;
             // 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 id = (_options_id = options === null || options === void 0 ? void 0 : options.id) !== null && _options_id !== void 0 ? _options_id : ++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 : {})){
+            let modifiersEnabled = (0, _featureFlags.flagEnabled)(tailwindConfig, "generalizedModifiers");
+            var _options_values;
+            for (let [key, value] of Object.entries((_options_values = options === null || options === void 0 ? void 0 : options.values) !== null && _options_values !== void 0 ? _options_values : {})){
                 if (key === "DEFAULT") continue;
                 api.addVariant(isSpecial ? `${variant}${key}` : `${variant}-${key}`, ({ args , container  })=>{
                     return variantFn(value, modifiersEnabled ? {
@@ -589,15 +607,15 @@ function parseVariant(variant) {
                     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 : {});
+            var _options_values1;
+            let hasDefault = "DEFAULT" in ((_options_values1 = options === null || options === void 0 ? void 0 : options.values) !== null && _options_values1 !== void 0 ? _options_values1 : {});
             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 ? {
+                _args_value;
+                return variantFn((args === null || args === void 0 ? void 0 : args.value) === _sharedState.NONE ? options.values.DEFAULT : (_args_value = args === null || args === void 0 ? void 0 : args.value) !== null && _args_value !== void 0 ? _args_value : typeof args === "string" ? args : "", modifiersEnabled ? {
                     modifier: args === null || args === void 0 ? void 0 : args.modifier,
                     container
                 } : {
@@ -622,24 +640,28 @@ function getFileModifiedMap(context) {
 }
 function trackModified(files, fileModifiedMap) {
     let changed = false;
+    let mtimesToCommit = new Map();
     for (let file of files){
-        var ref;
+        var _fs_statSync;
         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 newModified = (ref = _fs.default.statSync(decodeURIComponent(pathname), {
+        let newModified = (_fs_statSync = _fs.default.statSync(decodeURIComponent(pathname), {
             throwIfNoEntry: false
-        })) === null || ref === void 0 ? void 0 : ref.mtimeMs;
+        })) === null || _fs_statSync === void 0 ? void 0 : _fs_statSync.mtimeMs;
         if (!newModified) {
             continue;
         }
         if (!fileModifiedMap.has(file) || newModified > fileModifiedMap.get(file)) {
             changed = true;
         }
-        fileModifiedMap.set(file, newModified);
+        mtimesToCommit.set(file, newModified);
     }
-    return changed;
+    return [
+        changed,
+        mtimesToCommit
+    ];
 }
 function extractVariantAtRules(node) {
     node.walkAtRules((atRule)=>{
@@ -677,9 +699,9 @@ function collectLayerPlugins(root) {
             }
             layerRule.remove();
         } else if (layerRule.params === "components") {
-            for (let node1 of layerRule.nodes){
+            for (let node of layerRule.nodes){
                 layerPlugins.push(function({ addComponents  }) {
-                    addComponents(node1, {
+                    addComponents(node, {
                         respectPrefix: false,
                         preserveSource: true
                     });
@@ -687,9 +709,9 @@ function collectLayerPlugins(root) {
             }
             layerRule.remove();
         } else if (layerRule.params === "utilities") {
-            for (let node2 of layerRule.nodes){
+            for (let node of layerRule.nodes){
                 layerPlugins.push(function({ addUtilities  }) {
-                    addUtilities(node2, {
+                    addUtilities(node, {
                         respectPrefix: false,
                         preserveSource: true
                     });
@@ -747,7 +769,7 @@ function registerPlugins(plugins, context) {
     let variantList = [];
     let variantMap = new Map();
     context.variantMap = variantMap;
-    let offsets = new _offsetsJs.Offsets();
+    let offsets = new _offsets.Offsets();
     context.offsets = offsets;
     let classList = new Set();
     let pluginApi = buildPluginApi(context.tailwindConfig, context, {
@@ -774,8 +796,8 @@ function registerPlugins(plugins, context) {
                 variantFunction
             ]));
     }
-    var _safelist;
-    let safelist = ((_safelist = context.tailwindConfig.safelist) !== null && _safelist !== void 0 ? _safelist : []).filter(Boolean);
+    var _context_tailwindConfig_safelist;
+    let safelist = ((_context_tailwindConfig_safelist = context.tailwindConfig.safelist) !== null && _context_tailwindConfig_safelist !== void 0 ? _context_tailwindConfig_safelist : []).filter(Boolean);
     if (safelist.length > 0) {
         let checks = [];
         for (let value of safelist){
@@ -803,8 +825,8 @@ function registerPlugins(plugins, context) {
             for (let util of classList){
                 let utils = Array.isArray(util) ? (()=>{
                     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 : {});
+                    var _options_values;
+                    let values = Object.keys((_options_values = options === null || options === void 0 ? void 0 : options.values) !== null && _options_values !== void 0 ? _options_values : {});
                     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
@@ -838,7 +860,7 @@ function registerPlugins(plugins, context) {
                 })() : [
                     util
                 ];
-                for (let util1 of utils){
+                for (let util of utils){
                     for (let { pattern , variants =[]  } of checks){
                         // RegExp with the /g flag are stateful, so let's reset the last
                         // index pointer to reset the state.
@@ -846,15 +868,15 @@ function registerPlugins(plugins, context) {
                         if (!patternMatchingCount.has(pattern)) {
                             patternMatchingCount.set(pattern, 0);
                         }
-                        if (!pattern.test(util1)) continue;
+                        if (!pattern.test(util)) continue;
                         patternMatchingCount.set(pattern, patternMatchingCount.get(pattern) + 1);
                         context.changedContent.push({
-                            content: util1,
+                            content: util,
                             extension: "html"
                         });
                         for (let variant of variants){
                             context.changedContent.push({
-                                content: variant + context.tailwindConfig.separator + util1,
+                                content: variant + context.tailwindConfig.separator + util,
                                 extension: "html"
                             });
                         }
@@ -871,8 +893,8 @@ function registerPlugins(plugins, context) {
             }
         }
     }
-    var _darkMode, ref;
-    let darkClassName = (ref = [].concat((_darkMode = context.tailwindConfig.darkMode) !== null && _darkMode !== void 0 ? _darkMode : "media")[1]) !== null && ref !== void 0 ? ref : "dark";
+    var _context_tailwindConfig_darkMode, _concat_;
+    let darkClassName = (_concat_ = [].concat((_context_tailwindConfig_darkMode = context.tailwindConfig.darkMode) !== null && _context_tailwindConfig_darkMode !== void 0 ? _context_tailwindConfig_darkMode : "media")[1]) !== null && _concat_ !== void 0 ? _concat_ : "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
@@ -883,22 +905,30 @@ function registerPlugins(plugins, context) {
         prefix(context, "peer")
     ];
     context.getClassOrder = function getClassOrder(classes) {
+        // Sort classes so they're ordered in a deterministic manner
+        let sorted = [
+            ...classes
+        ].sort((a, z)=>{
+            if (a === z) return 0;
+            if (a < z) return -1;
+            return 1;
+        });
         // Non-util classes won't be generated, so we default them to null
-        let sortedClassNames = new Map(classes.map((className)=>[
+        let sortedClassNames = new Map(sorted.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);
+        let rules = (0, _generateRules.generateRules)(new Set(sorted), 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;
+            var _sortedClassNames_get;
+            let order = (_sortedClassNames_get = sortedClassNames.get(className)) !== null && _sortedClassNames_get !== void 0 ? _sortedClassNames_get : null;
             let parasiteIndex = parasiteUtilities.indexOf(className);
             if (order === null && parasiteIndex !== -1) {
                 // This will make sure that it is at the very beginning of the
@@ -914,21 +944,40 @@ function registerPlugins(plugins, context) {
     };
     // Generate a list of strings for autocompletion purposes, e.g.
     // ['uppercase', 'lowercase', ...]
-    context.getClassList = function getClassList() {
+    context.getClassList = function getClassList(options = {}) {
         let output = [];
         for (let util of classList){
             if (Array.isArray(util)) {
-                let [utilName, options] = util;
+                var _utilOptions_types;
+                let [utilName, utilOptions] = 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 : {})){
+                var _utilOptions_modifiers;
+                let modifiers = Object.keys((_utilOptions_modifiers = utilOptions === null || utilOptions === void 0 ? void 0 : utilOptions.modifiers) !== null && _utilOptions_modifiers !== void 0 ? _utilOptions_modifiers : {});
+                if (utilOptions === null || utilOptions === void 0 ? void 0 : (_utilOptions_types = utilOptions.types) === null || _utilOptions_types === void 0 ? void 0 : _utilOptions_types.some(({ type  })=>type === "color")) {
+                    var _context_tailwindConfig_theme_opacity;
+                    modifiers.push(...Object.keys((_context_tailwindConfig_theme_opacity = context.tailwindConfig.theme.opacity) !== null && _context_tailwindConfig_theme_opacity !== void 0 ? _context_tailwindConfig_theme_opacity : {}));
+                }
+                let metadata = {
+                    modifiers
+                };
+                let includeMetadata = options.includeMetadata && modifiers.length > 0;
+                var _utilOptions_values;
+                for (let [key, value] of Object.entries((_utilOptions_values = utilOptions === null || utilOptions === void 0 ? void 0 : utilOptions.values) !== null && _utilOptions_values !== void 0 ? _utilOptions_values : {})){
                     // 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}`));
+                    let cls = (0, _nameClass.formatClass)(utilName, key);
+                    output.push(includeMetadata ? [
+                        cls,
+                        metadata
+                    ] : cls);
+                    if ((utilOptions === null || utilOptions === void 0 ? void 0 : utilOptions.supportsNegativeValues) && (0, _negateValue.default)(value)) {
+                        let cls = (0, _nameClass.formatClass)(utilName, `-${key}`);
+                        negativeClasses.push(includeMetadata ? [
+                            cls,
+                            metadata
+                        ] : cls);
                     }
                 }
                 output.push(...negativeClasses);
@@ -943,11 +992,11 @@ function registerPlugins(plugins, context) {
         let result = [];
         for (let [name, options] of context.variantOptions.entries()){
             if (options.variantInfo === VARIANT_INFO.Base) continue;
-            var _values;
+            var _options_values;
             result.push({
                 name,
                 isArbitrary: options.type === Symbol.for("MATCH_VARIANT"),
-                values: Object.keys((_values = options.values) !== null && _values !== void 0 ? _values : {}),
+                values: Object.keys((_options_values = options.values) !== null && _options_values !== void 0 ? _options_values : {}),
                 hasDash: name !== "@",
                 selectors ({ modifier , value  } = {}) {
                     let candidate = "__TAILWIND_PLACEHOLDER__";
@@ -960,17 +1009,17 @@ function registerPlugins(plugins, context) {
                         ]
                     });
                     let before = container.toString();
-                    var ref;
-                    let fns = ((ref = context.variantMap.get(name)) !== null && ref !== void 0 ? ref : []).flatMap(([_, fn])=>fn);
+                    var _context_variantMap_get;
+                    let fns = ((_context_variantMap_get = context.variantMap.get(name)) !== null && _context_variantMap_get !== void 0 ? _context_variantMap_get : []).flatMap(([_, fn])=>fn);
                     let formatStrings = [];
                     for (let fn of fns){
-                        var ref1;
+                        var _options_values;
                         let localFormatStrings = [];
-                        var ref2;
+                        var _options_values_value;
                         let api = {
                             args: {
                                 modifier,
-                                value: (ref2 = (ref1 = options.values) === null || ref1 === void 0 ? void 0 : ref1[value]) !== null && ref2 !== void 0 ? ref2 : value
+                                value: (_options_values_value = (_options_values = options.values) === null || _options_values === void 0 ? void 0 : _options_values[value]) !== null && _options_values_value !== void 0 ? _options_values_value : value
                             },
                             separator: context.tailwindConfig.separator,
                             modifySelectors (modifierFunction) {
@@ -1021,7 +1070,7 @@ function registerPlugins(plugins, context) {
                             // as well. E.g.: `${variant}${separator}${className}`.
                             // However, plugin authors probably also prepend or append certain
                             // classes, pseudos, ids, ...
-                            let rebuiltBase = (0, _postcssSelectorParser.default)((selectors)=>{
+                            let rebuiltBase = (0, _postcssselectorparser.default)((selectors)=>{
                                 selectors.walkClasses((classNode)=>{
                                     classNode.value = `${name}${context.tailwindConfig.separator}${classNode.value}`;
                                 });
@@ -1044,15 +1093,23 @@ function registerPlugins(plugins, context) {
                             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());
+                    var _options_values1;
+                    let isArbitraryVariant = !(value in ((_options_values1 = options.values) !== null && _options_values1 !== void 0 ? _options_values1 : {}));
+                    formatStrings = formatStrings.map((format)=>format.map((str)=>({
+                                format: str,
+                                isArbitraryVariant
+                            })));
+                    manualFormatStrings = manualFormatStrings.map((format)=>({
+                            format,
+                            isArbitraryVariant
+                        }));
+                    let opts = {
+                        candidate,
+                        context
+                    };
+                    let result = formatStrings.map((formats)=>(0, _formatVariantSelector.finalizeSelector)(`.${candidate}`, (0, _formatVariantSelector.formatVariantSelector)(formats, opts), opts).replace(`.${candidate}`, "&").replace("{ & }", "").trim());
                     if (manualFormatStrings.length > 0) {
-                        result.push((0, _formatVariantSelector.formatVariantSelector)("&", ...manualFormatStrings));
+                        result.push((0, _formatVariantSelector.formatVariantSelector)(manualFormatStrings, opts).toString().replace(`.${candidate}`, "&"));
                     }
                     return result;
                 }
@@ -1098,7 +1155,7 @@ function registerPlugins(plugins, context) {
     markInvalidUtilityCandidate(context, candidate);
 }
 function createContext(tailwindConfig, changedContent = [], root = _postcss.default.root()) {
-    var _blocklist;
+    var _tailwindConfig_blocklist;
     let context = {
         disposables: [],
         ruleCache: new Set(),
@@ -1106,7 +1163,7 @@ function createContext(tailwindConfig, changedContent = [], root = _postcss.defa
         classCache: new Map(),
         applyClassCache: new Map(),
         // Seed the not class cache with the blocklist (which is only strings)
-        notClassCache: new Set((_blocklist = tailwindConfig.blocklist) !== null && _blocklist !== void 0 ? _blocklist : []),
+        notClassCache: new Set((_tailwindConfig_blocklist = tailwindConfig.blocklist) !== null && _tailwindConfig_blocklist !== void 0 ? _tailwindConfig_blocklist : []),
         postCssNodeCache: new Map(),
         candidateRuleMap: new Map(),
         tailwindConfig,
@@ -1137,17 +1194,18 @@ function getContext(root, result, tailwindConfig, userConfigPath, tailwindConfig
         contextMap.set(sourcePath, context);
         existingContext = context;
     }
-    let cssDidChange = (0, _cacheInvalidationJs.hasContentChanged)(sourcePath, root);
+    let cssDidChange = (0, _cacheInvalidation.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([
+        let [contextDependenciesChanged, mtimesToCommit] = trackModified([
             ...contextDependencies
         ], getFileModifiedMap(existingContext));
         if (!contextDependenciesChanged && !cssDidChange) {
             return [
                 existingContext,
-                false
+                false,
+                mtimesToCommit
             ];
         }
     }
@@ -1162,9 +1220,9 @@ function getContext(root, result, tailwindConfig, userConfigPath, tailwindConfig
             contextSourcesMap.get(oldContext).delete(sourcePath);
             if (contextSourcesMap.get(oldContext).size === 0) {
                 contextSourcesMap.delete(oldContext);
-                for (let [tailwindConfigHash1, context1] of configContextMap){
-                    if (context1 === oldContext) {
-                        configContextMap.delete(tailwindConfigHash1);
+                for (let [tailwindConfigHash, context] of configContextMap){
+                    if (context === oldContext) {
+                        configContextMap.delete(tailwindConfigHash);
                     }
                 }
                 for (let disposable of oldContext.disposables.splice(0)){
@@ -1174,23 +1232,24 @@ function getContext(root, result, tailwindConfig, userConfigPath, tailwindConfig
         }
     }
     _sharedState.env.DEBUG && console.log("Setting up new context...");
-    let context2 = createContext(tailwindConfig, [], root);
-    Object.assign(context2, {
+    let context = createContext(tailwindConfig, [], root);
+    Object.assign(context, {
         userConfigPath
     });
-    trackModified([
+    let [, mtimesToCommit] = trackModified([
         ...contextDependencies
-    ], getFileModifiedMap(context2));
+    ], getFileModifiedMap(context));
     // ---
     // Update all context tracking state
-    configContextMap.set(tailwindConfigHash, context2);
-    contextMap.set(sourcePath, context2);
-    if (!contextSourcesMap.has(context2)) {
-        contextSourcesMap.set(context2, new Set());
+    configContextMap.set(tailwindConfigHash, context);
+    contextMap.set(sourcePath, context);
+    if (!contextSourcesMap.has(context)) {
+        contextSourcesMap.set(context, new Set());
     }
-    contextSourcesMap.get(context2).add(sourcePath);
+    contextSourcesMap.get(context).add(sourcePath);
     return [
-        context2,
-        true
+        context,
+        true,
+        mtimesToCommit
     ];
 }