tailwindcss 0.0.0-insiders.bd970d0 → 0.0.0-insiders.bda8421

package/lib/lib/setupContextUtils.js

@@ -49,6 +49,7 @@ const _isSyntacticallyValidPropertyValue = /*#__PURE__*/ _interop_require_defaul
 const _generateRules = require("./generateRules");
 const _cacheInvalidation = require("./cacheInvalidation.js");
 const _offsets = require("./offsets.js");
+const _featureFlags = require("../featureFlags.js");
 const _formatVariantSelector = require("../util/formatVariantSelector");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -96,8 +97,8 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const INTERNAL_FEATURES = Symbol();
 const VARIANT_TYPES = {
-    AddVariant: Symbol.for('ADD_VARIANT'),
-    MatchVariant: Symbol.for('MATCH_VARIANT')
+    AddVariant: Symbol.for("ADD_VARIANT"),
+    MatchVariant: Symbol.for("MATCH_VARIANT")
 };
 const VARIANT_INFO = {
     Base: 1 << 0,
@@ -105,9 +106,9 @@ const VARIANT_INFO = {
 };
 function prefix(context, selector) {
     let prefix = context.tailwindConfig.prefix;
-    return typeof prefix === 'function' ? prefix(selector) : prefix + selector;
+    return typeof prefix === "function" ? prefix(selector) : prefix + selector;
 }
-function normalizeOptionTypes({ type = 'any', ...options }) {
+function normalizeOptionTypes({ type ="any" , ...options }) {
     let types = [].concat(type);
     return {
         ...options,
@@ -132,25 +133,25 @@ function parseVariantFormatString(input) {
     // Because the selector could look like this
     // @media { &[data-name="foo bar"] }
     // This is why we do not skip whitespace
-    let current = '';
+    let current = "";
     let depth = 0;
     for(let idx = 0; idx < input.length; idx++){
         let char = input[idx];
-        if (char === '\\') {
+        if (char === "\\") {
             // Escaped characters are not special
-            current += '\\' + input[++idx];
-        } else if (char === '{') {
+            current += "\\" + input[++idx];
+        } else if (char === "{") {
             // Nested rule: start
             ++depth;
             parts.push(current.trim());
-            current = '';
-        } else if (char === '}') {
+            current = "";
+        } else if (char === "}") {
             // Nested rule: end
             if (--depth < 0) {
                 throw new Error(`Your { and } are unbalanced.`);
             }
             parts.push(current.trim());
-            current = '';
+            current = "";
         } else {
             // Normal character
             current += char;
@@ -159,10 +160,10 @@ function parseVariantFormatString(input) {
     if (current.length > 0) {
         parts.push(current.trim());
     }
-    parts = parts.filter((part)=>part !== '');
+    parts = parts.filter((part)=>part !== "");
     return parts;
 }
-function insertInto(list, value, { before = [] } = {}) {
+function insertInto(list, value, { before =[]  } = {}) {
     before = [].concat(before);
     if (before.length <= 0) {
         list.push(value);
@@ -200,39 +201,41 @@ function getClasses(selector, mutate) {
     });
     return parser.transformSync(selector);
 }
+/**
+ * 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.
+ *
+ * @param {selectorParser.Root} selectors
+ */ function ignoreNot(selectors) {
+    selectors.walkPseudos((pseudo)=>{
+        if (pseudo.value === ":not") {
+            pseudo.remove();
+        }
+    });
+}
 function extractCandidates(node, state = {
     containsNonOnDemandable: false
 }, depth = 0) {
     let classes = [];
-    // Handle normal rules
-    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();
-                }
-            });
+    let selectors = [];
+    if (node.type === "rule") {
+        // Handle normal rules
+        selectors.push(...node.selectors);
+    } else if (node.type === "atrule") {
+        // Handle at-rules (which contains nested rules)
+        node.walkRules((rule)=>selectors.push(...rule.selectors));
+    }
+    for (let selector of selectors){
+        let classCandidates = getClasses(selector, ignoreNot);
+        // At least one of the selectors contains non-"on-demandable" candidates.
+        if (classCandidates.length === 0) {
+            state.containsNonOnDemandable = true;
         }
-        for (let selector of node.selectors){
-            let classCandidates = getClasses(selector, ignoreNot);
-            // At least one of the selectors contains non-"on-demandable" candidates.
-            if (classCandidates.length === 0) {
-                state.containsNonOnDemandable = true;
-            }
-            for (let classCandidate of classCandidates){
-                classes.push(classCandidate);
-            }
+        for (let classCandidate of classCandidates){
+            classes.push(classCandidate);
         }
-    } else if (node.type === 'atrule') {
-        node.walkRules((rule)=>{
-            for (let classCandidate of rule.selectors.flatMap((selector)=>getClasses(selector))){
-                classes.push(classCandidate);
-            }
-        });
     }
     if (depth === 0) {
         return [
@@ -265,21 +268,20 @@ function withIdentifiers(styles) {
     });
 }
 function isValidVariantFormatString(format) {
-    return format.startsWith('@') || format.includes('&');
+    return format.startsWith("@") || format.includes("&");
 }
 function parseVariant(variant) {
-    variant = variant.replace(/\n+/g, '').replace(/\s{1,}/g, ' ').trim();
+    variant = variant.replace(/\n+/g, "").replace(/\s{1,}/g, " ").trim();
     let fns = parseVariantFormatString(variant).map((str)=>{
-        if (!str.startsWith('@')) {
-            return ({ format })=>format(str);
+        if (!str.startsWith("@")) {
+            return ({ format  })=>format(str);
         }
         let [, name, params] = /@(\S*)( .+|[({].*)?/g.exec(str);
         var _params_trim;
-        return ({ wrap })=>{
-            var _params;
+        return ({ wrap  })=>{
             return wrap(_postcss.default.atRule({
                 name,
-                params: (_params_trim = (_params = params) === null || _params === void 0 ? void 0 : _params.trim()) !== null && _params_trim !== void 0 ? _params_trim : ''
+                params: (_params_trim = params === null || params === void 0 ? void 0 : params.trim()) !== null && _params_trim !== void 0 ? _params_trim : ""
             }));
         };
     }).reverse();
@@ -295,7 +297,7 @@ function parseVariant(variant) {
  * @param {any} context
  * @param {object} param2
  * @param {Offsets} param2.offsets
- */ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offsets, classList }) {
+ */ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , offsets , classList  }) {
     function getConfigValue(path, defaultValue) {
         return path ? (0, _dlv.default)(tailwindConfig, path, defaultValue) : tailwindConfig;
     }
@@ -314,7 +316,7 @@ function parseVariant(variant) {
     function resolveThemeValue(path, defaultValue, opts = {}) {
         let parts = (0, _toPath.toPath)(path);
         let value = getConfigValue([
-            'theme',
+            "theme",
             ...parts
         ], defaultValue);
         return (0, _transformThemeValue.default)(parts[0])(value, opts);
@@ -331,7 +333,7 @@ function parseVariant(variant) {
                 return tailwindConfig.corePlugins.includes(path);
             }
             return getConfigValue([
-                'corePlugins',
+                "corePlugins",
                 path
             ], true);
         },
@@ -342,14 +344,14 @@ function parseVariant(variant) {
         addBase (base) {
             for (let [identifier, rule] of withIdentifiers(base)){
                 let prefixedIdentifier = prefixIdentifier(identifier, {});
-                let offset = offsets.create('base');
+                let offset = offsets.create("base");
                 if (!context.candidateRuleMap.has(prefixedIdentifier)) {
                     context.candidateRuleMap.set(prefixedIdentifier, []);
                 }
                 context.candidateRuleMap.get(prefixedIdentifier).push([
                     {
                         sort: offset,
-                        layer: 'base'
+                        layer: "base"
                     },
                     rule
                 ]);
@@ -369,8 +371,8 @@ function parseVariant(variant) {
                 }
                 context.candidateRuleMap.get(prefixedIdentifier).push([
                     {
-                        sort: offsets.create('defaults'),
-                        layer: 'defaults'
+                        sort: offsets.create("defaults"),
+                        layer: "defaults"
                     },
                     rule
                 ]);
@@ -391,8 +393,8 @@ function parseVariant(variant) {
                 }
                 context.candidateRuleMap.get(prefixedIdentifier).push([
                     {
-                        sort: offsets.create('components'),
-                        layer: 'components',
+                        sort: offsets.create("components"),
+                        layer: "components",
                         options
                     },
                     rule
@@ -414,8 +416,8 @@ function parseVariant(variant) {
                 }
                 context.candidateRuleMap.get(prefixedIdentifier).push([
                     {
-                        sort: offsets.create('utilities'),
-                        layer: 'utilities',
+                        sort: offsets.create("utilities"),
+                        layer: "utilities",
                         options
                     },
                     rule
@@ -432,7 +434,7 @@ function parseVariant(variant) {
                 ...defaultOptions,
                 ...options
             });
-            let offset = offsets.create('utilities');
+            let offset = offsets.create("utilities");
             for(let identifier in utilities){
                 let prefixedIdentifier = prefixIdentifier(identifier, options);
                 let rule = utilities[identifier];
@@ -440,16 +442,16 @@ function parseVariant(variant) {
                     prefixedIdentifier,
                     options
                 ]);
-                function wrapped(modifier, { isOnlyPlugin }) {
+                function wrapped(modifier, { isOnlyPlugin  }) {
                     let [value, coercedType, utilityModifier] = (0, _pluginUtils.coerceValue)(options.types, modifier, options, tailwindConfig);
                     if (value === undefined) {
                         return [];
                     }
-                    if (!options.types.some(({ type })=>type === 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 [];
@@ -462,13 +464,14 @@ function parseVariant(variant) {
                         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.'
+                                    "Your plugin must set `modifiers: true` in its options to support modifiers."
                                 ]);
                             }
                             return utilityModifier;
                         }
                     };
-                    let ruleSets = [].concat(rule(value, extras)).filter(Boolean).map((declaration)=>({
+                    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
                         }));
                     return ruleSets;
@@ -476,7 +479,7 @@ function parseVariant(variant) {
                 let withOffsets = [
                     {
                         sort: offset,
-                        layer: 'utilities',
+                        layer: "utilities",
                         options
                     },
                     wrapped
@@ -497,7 +500,7 @@ function parseVariant(variant) {
                 ...defaultOptions,
                 ...options
             });
-            let offset = offsets.create('components');
+            let offset = offsets.create("components");
             for(let identifier in components){
                 let prefixedIdentifier = prefixIdentifier(identifier, options);
                 let rule = components[identifier];
@@ -505,16 +508,16 @@ function parseVariant(variant) {
                     prefixedIdentifier,
                     options
                 ]);
-                function wrapped(modifier, { isOnlyPlugin }) {
+                function wrapped(modifier, { isOnlyPlugin  }) {
                     let [value, coercedType, utilityModifier] = (0, _pluginUtils.coerceValue)(options.types, modifier, options, tailwindConfig);
                     if (value === undefined) {
                         return [];
                     }
-                    if (!options.types.some(({ type })=>type === 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 [];
@@ -527,13 +530,14 @@ function parseVariant(variant) {
                         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.'
+                                    "Your plugin must set `modifiers: true` in its options to support modifiers."
                                 ]);
                             }
                             return utilityModifier;
                         }
                     };
-                    let ruleSets = [].concat(rule(value, extras)).filter(Boolean).map((declaration)=>({
+                    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
                         }));
                     return ruleSets;
@@ -541,7 +545,7 @@ function parseVariant(variant) {
                 let withOffsets = [
                     {
                         sort: offset,
-                        layer: 'components',
+                        layer: "components",
                         options
                     },
                     wrapped
@@ -554,10 +558,10 @@ function parseVariant(variant) {
         },
         addVariant (variantName, variantFunctions, options = {}) {
             variantFunctions = [].concat(variantFunctions).map((variantFunction)=>{
-                if (typeof variantFunction !== 'string') {
+                if (typeof variantFunction !== "string") {
                     // Safelist public API functions
                     return (api = {})=>{
-                        let { args, modifySelectors, container, separator, wrap, format } = api;
+                        let { args , modifySelectors , container , separator , wrap , format  } = api;
                         let result = variantFunction(Object.assign({
                             modifySelectors,
                             container,
@@ -567,15 +571,15 @@ function parseVariant(variant) {
                             wrap,
                             format
                         }));
-                        if (typeof result === 'string' && !isValidVariantFormatString(result)) {
+                        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));
+                            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);
+                        return result && typeof result === "string" && parseVariant(result)(api);
                     };
                 }
                 if (!isValidVariantFormatString(variantFunction)) {
@@ -588,19 +592,20 @@ function parseVariant(variant) {
             context.variantOptions.set(variantName, options);
         },
         matchVariant (variant, variantFn, options) {
-            var _options, _options1, _options2;
             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 = (_options_id = (_options = options) === null || _options === void 0 ? void 0 : _options.id) !== null && _options_id !== void 0 ? _options_id : ++variantIdentifier;
-            let isSpecial = variant === '@';
+            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, _featureFlags.flagEnabled)(tailwindConfig, "generalizedModifiers");
             var _options_values;
-            for (let [key, value] of Object.entries((_options_values = (_options1 = options) === null || _options1 === void 0 ? void 0 : _options1.values) !== null && _options_values !== void 0 ? _options_values : {})){
-                if (key === 'DEFAULT') continue;
-                api.addVariant(isSpecial ? `${variant}${key}` : `${variant}-${key}`, ({ args, container })=>{
-                    var _args;
-                    return variantFn(value, {
-                        modifier: (_args = args) === null || _args === void 0 ? void 0 : _args.modifier,
+            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 ? {
+                        modifier: args === null || args === void 0 ? void 0 : args.modifier,
+                        container
+                    } : {
                         container
                     });
                 }, {
@@ -612,16 +617,17 @@ function parseVariant(variant) {
                 });
             }
             var _options_values1;
-            let hasDefault = 'DEFAULT' in ((_options_values1 = (_options2 = options) === null || _options2 === void 0 ? void 0 : _options2.values) !== null && _options_values1 !== void 0 ? _options_values1 : {});
-            api.addVariant(variant, ({ args, container })=>{
-                var _args, _args1, // (JetBrains) plugins.
-                _args2, _args3;
-                if (((_args = args) === null || _args === void 0 ? void 0 : _args.value) === _sharedState.NONE && !hasDefault) {
+            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 _args_value;
-                return variantFn(((_args1 = args) === null || _args1 === void 0 ? void 0 : _args1.value) === _sharedState.NONE ? options.values.DEFAULT : (_args_value = (_args2 = args) === null || _args2 === void 0 ? void 0 : _args2.value) !== null && _args_value !== void 0 ? _args_value : typeof args === 'string' ? args : '', {
-                    modifier: (_args3 = args) === null || _args3 === void 0 ? void 0 : _args3.modifier,
+                var // (JetBrains) plugins.
+                _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
+                } : {
                     container
                 });
             }, {
@@ -648,8 +654,8 @@ function trackModified(files, fileModifiedMap) {
         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 pathname = parsed.hash ? parsed.href.replace(parsed.hash, "") : parsed.href;
+        pathname = parsed.search ? pathname.replace(parsed.search, "") : pathname;
         let newModified = (_fs_statSync = _fs.default.statSync(decodeURIComponent(pathname), {
             throwIfNoEntry: false
         })) === null || _fs_statSync === void 0 ? void 0 : _fs_statSync.mtimeMs;
@@ -669,8 +675,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);
@@ -681,29 +687,29 @@ 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 }) {
+                layerPlugins.push(function({ addBase  }) {
                     addBase(node, {
                         respectPrefix: false
                     });
                 });
             }
             layerRule.remove();
-        } else if (layerRule.params === 'components') {
+        } else if (layerRule.params === "components") {
             for (let node of layerRule.nodes){
-                layerPlugins.push(function({ addComponents }) {
+                layerPlugins.push(function({ addComponents  }) {
                     addComponents(node, {
                         respectPrefix: false,
                         preserveSource: true
@@ -711,9 +717,9 @@ 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 }) {
+                layerPlugins.push(function({ addUtilities  }) {
                     addUtilities(node, {
                         respectPrefix: false,
                         preserveSource: true
@@ -726,7 +732,10 @@ function collectLayerPlugins(root) {
     return layerPlugins;
 }
 function resolvePlugins(context, root) {
-    let corePluginList = Object.entries(_corePlugins.corePlugins).map(([name, plugin])=>{
+    let corePluginList = Object.entries({
+        ..._corePlugins.variantPlugins,
+        ..._corePlugins.corePlugins
+    }).map(([name, plugin])=>{
         if (!context.tailwindConfig.corePlugins.includes(name)) {
             return null;
         }
@@ -736,28 +745,46 @@ 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['hasVariants'],
-        _corePlugins.variantPlugins['ariaVariants'],
-        _corePlugins.variantPlugins['dataVariants']
+        _corePlugins.variantPlugins["childVariant"],
+        _corePlugins.variantPlugins["pseudoElementVariants"],
+        _corePlugins.variantPlugins["pseudoClassVariants"],
+        _corePlugins.variantPlugins["hasVariants"],
+        _corePlugins.variantPlugins["ariaVariants"],
+        _corePlugins.variantPlugins["dataVariants"]
     ];
     let afterVariants = [
-        _corePlugins.variantPlugins['supportsVariants'],
-        _corePlugins.variantPlugins['directionVariants'],
-        _corePlugins.variantPlugins['reducedMotionVariants'],
-        _corePlugins.variantPlugins['prefersContrastVariants'],
-        _corePlugins.variantPlugins['darkVariants'],
-        _corePlugins.variantPlugins['printVariant'],
-        _corePlugins.variantPlugins['screenVariants'],
-        _corePlugins.variantPlugins['orientationVariants']
+        _corePlugins.variantPlugins["supportsVariants"],
+        _corePlugins.variantPlugins["reducedMotionVariants"],
+        _corePlugins.variantPlugins["prefersContrastVariants"],
+        _corePlugins.variantPlugins["screenVariants"],
+        _corePlugins.variantPlugins["orientationVariants"],
+        _corePlugins.variantPlugins["directionVariants"],
+        _corePlugins.variantPlugins["darkVariants"],
+        _corePlugins.variantPlugins["forcedColorsVariants"],
+        _corePlugins.variantPlugins["printVariant"]
     ];
+    // This is a compatibility fix for the pre 3.4 dark mode behavior
+    // `class` retains the old behavior, but `selector` keeps the new behavior
+    let isLegacyDarkMode = context.tailwindConfig.darkMode === "class" || Array.isArray(context.tailwindConfig.darkMode) && context.tailwindConfig.darkMode[0] === "class";
+    if (isLegacyDarkMode) {
+        afterVariants = [
+            _corePlugins.variantPlugins["supportsVariants"],
+            _corePlugins.variantPlugins["reducedMotionVariants"],
+            _corePlugins.variantPlugins["prefersContrastVariants"],
+            _corePlugins.variantPlugins["darkVariants"],
+            _corePlugins.variantPlugins["screenVariants"],
+            _corePlugins.variantPlugins["orientationVariants"],
+            _corePlugins.variantPlugins["directionVariants"],
+            _corePlugins.variantPlugins["forcedColorsVariants"],
+            _corePlugins.variantPlugins["printVariant"]
+        ];
+    }
     return [
         ...corePluginList,
         ...beforeVariants,
@@ -785,8 +812,7 @@ function registerPlugins(plugins, context) {
                 pluginItem(pluginApi);
             }
         } else {
-            var _plugin;
-            (_plugin = plugin) === null || _plugin === void 0 ? void 0 : _plugin(pluginApi);
+            plugin === null || plugin === void 0 ? void 0 : plugin(pluginApi);
         }
     }
     // Make sure to record bit masks for every variant
@@ -803,18 +829,18 @@ function registerPlugins(plugins, context) {
     if (safelist.length > 0) {
         let checks = [];
         for (let value of safelist){
-            if (typeof value === 'string') {
+            if (typeof value === "string") {
                 context.changedContent.push({
                     content: value,
-                    extension: 'html'
+                    extension: "html"
                 });
                 continue;
             }
             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'
+                _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;
             }
@@ -823,20 +849,19 @@ function registerPlugins(plugins, context) {
         if (checks.length > 0) {
             let patternMatchingCount = new Map();
             let prefixLength = context.tailwindConfig.prefix.length;
-            let checkImportantUtils = checks.some((check)=>check.pattern.source.includes('!'));
+            let checkImportantUtils = checks.some((check)=>check.pattern.source.includes("!"));
             for (let util of classList){
                 let utils = Array.isArray(util) ? (()=>{
-                    var _options, _options1, _options2;
                     let [utilName, options] = util;
                     var _options_values;
-                    let values = Object.keys((_options_values = (_options = options) === null || _options === void 0 ? void 0 : _options.values) !== null && _options_values !== void 0 ? _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 ((_options1 = options) === null || _options1 === void 0 ? void 0 : _options1.supportsNegativeValues) {
+                    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`
@@ -844,19 +869,19 @@ function registerPlugins(plugins, context) {
                         // So we add the negative after the prefix
                         classes = [
                             ...classes,
-                            ...classes.map((cls)=>cls.slice(0, prefixLength) + '-' + cls.slice(prefixLength))
+                            ...classes.map((cls)=>cls.slice(0, prefixLength) + "-" + cls.slice(prefixLength))
                         ];
                     }
-                    if (options.types.some(({ type })=>type === 'color')) {
+                    if (options.types.some(({ type  })=>type === "color")) {
                         classes = [
                             ...classes,
                             ...classes.flatMap((cls)=>Object.keys(context.tailwindConfig.theme.opacity).map((opacity)=>`${cls}/${opacity}`))
                         ];
                     }
-                    if (checkImportantUtils && ((_options2 = options) === null || _options2 === void 0 ? void 0 : _options2.respectImportant)) {
+                    if (checkImportantUtils && (options === null || options === void 0 ? void 0 : options.respectImportant)) {
                         classes = [
                             ...classes,
-                            ...classes.map((cls)=>'!' + cls)
+                            ...classes.map((cls)=>"!" + cls)
                         ];
                     }
                     return classes;
@@ -864,7 +889,7 @@ function registerPlugins(plugins, context) {
                     util
                 ];
                 for (let util of utils){
-                    for (let { pattern, variants = [] } of checks){
+                    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.
                         pattern.lastIndex = 0;
@@ -875,12 +900,12 @@ function registerPlugins(plugins, context) {
                         patternMatchingCount.set(pattern, patternMatchingCount.get(pattern) + 1);
                         context.changedContent.push({
                             content: util,
-                            extension: 'html'
+                            extension: "html"
                         });
                         for (let variant of variants){
                             context.changedContent.push({
                                 content: variant + context.tailwindConfig.separator + util,
-                                extension: 'html'
+                                extension: "html"
                             });
                         }
                     }
@@ -890,22 +915,22 @@ 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"
                 ]);
             }
         }
     }
     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';
+    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
     // host utilities work properly. (Thanks Biology)
     let parasiteUtilities = [
         prefix(context, darkClassName),
-        prefix(context, 'group'),
-        prefix(context, 'peer')
+        prefix(context, "group"),
+        prefix(context, "peer")
     ];
     context.getClassOrder = function getClassOrder(classes) {
         // Sort classes so they're ordered in a deterministic manner
@@ -923,7 +948,7 @@ function registerPlugins(plugins, context) {
             ]));
         // 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(sorted), context);
+        let rules = (0, _generateRules.generateRules)(new Set(sorted), context, true);
         rules = context.offsets.sort(rules);
         let idx = BigInt(parasiteUtilities.length);
         for (const [, rule] of rules){
@@ -955,12 +980,12 @@ function registerPlugins(plugins, context) {
         let output = [];
         for (let util of classList){
             if (Array.isArray(util)) {
-                var _utilOptions, _utilOptions_types, _utilOptions1, _utilOptions2;
+                var _utilOptions_types;
                 let [utilName, utilOptions] = util;
                 let negativeClasses = [];
                 var _utilOptions_modifiers;
-                let modifiers = Object.keys((_utilOptions_modifiers = (_utilOptions = utilOptions) === null || _utilOptions === void 0 ? void 0 : _utilOptions.modifiers) !== null && _utilOptions_modifiers !== void 0 ? _utilOptions_modifiers : {});
-                if ((_utilOptions1 = utilOptions) === null || _utilOptions1 === void 0 ? void 0 : (_utilOptions_types = _utilOptions1.types) === null || _utilOptions_types === void 0 ? void 0 : _utilOptions_types.some(({ type })=>type === 'color')) {
+                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 : {}));
                 }
@@ -969,8 +994,7 @@ function registerPlugins(plugins, context) {
                 };
                 let includeMetadata = options.includeMetadata && modifiers.length > 0;
                 var _utilOptions_values;
-                for (let [key, value] of Object.entries((_utilOptions_values = (_utilOptions2 = utilOptions) === null || _utilOptions2 === void 0 ? void 0 : _utilOptions2.values) !== null && _utilOptions_values !== void 0 ? _utilOptions_values : {})){
-                    var _utilOptions3;
+                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;
@@ -980,7 +1004,7 @@ function registerPlugins(plugins, context) {
                         cls,
                         metadata
                     ] : cls);
-                    if (((_utilOptions3 = utilOptions) === null || _utilOptions3 === void 0 ? void 0 : _utilOptions3.supportsNegativeValues) && (0, _negateValue.default)(value)) {
+                    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,
@@ -997,17 +1021,21 @@ function registerPlugins(plugins, context) {
     };
     // Generate a list of available variants with meta information of the type of variant.
     context.getVariants = function getVariants() {
+        // We use a unique, random ID for candidate names to avoid conflicts
+        // We can't use characters like `_`, `:`, `@` or `.` because they might
+        // be used as a separator
+        let id = Math.random().toString(36).substring(7).toUpperCase();
         let result = [];
         for (let [name, options] of context.variantOptions.entries()){
             if (options.variantInfo === VARIANT_INFO.Base) continue;
             var _options_values;
             result.push({
                 name,
-                isArbitrary: options.type === Symbol.for('MATCH_VARIANT'),
+                isArbitrary: options.type === Symbol.for("MATCH_VARIANT"),
                 values: Object.keys((_options_values = options.values) !== null && _options_values !== void 0 ? _options_values : {}),
-                hasDash: name !== '@',
-                selectors ({ modifier, value } = {}) {
-                    let candidate = '__TAILWIND_PLACEHOLDER__';
+                hasDash: name !== "@",
+                selectors ({ modifier , value  } = {}) {
+                    let candidate = `TAILWINDPLACEHOLDER${id}`;
                     let rule = _postcss.default.rule({
                         selector: `.${candidate}`
                     });
@@ -1033,7 +1061,7 @@ function registerPlugins(plugins, context) {
                             modifySelectors (modifierFunction) {
                                 // Run the modifierFunction over each rule
                                 container.each((rule)=>{
-                                    if (rule.type !== 'rule') {
+                                    if (rule.type !== "rule") {
                                         return;
                                     }
                                     rule.selectors = rule.selectors.map((selector)=>{
@@ -1094,7 +1122,7 @@ function registerPlugins(plugins, context) {
                             //      modified (by plugin): .foo .foo\\:markdown > p
                             //    rebuiltBase (internal): .foo\\:markdown > p
                             //                    format: .foo &
-                            manualFormatStrings.push(modified.replace(rebuiltBase, '&').replace(candidate, '&'));
+                            manualFormatStrings.push(modified.replace(rebuiltBase, "&").replace(candidate, "&"));
                         });
                         // Figure out all atrules
                         container.walkAtRules((atrule)=>{
@@ -1122,9 +1150,9 @@ function registerPlugins(plugins, context) {
                         candidate,
                         context
                     };
-                    let result = formatStrings.map((formats)=>(0, _formatVariantSelector.finalizeSelector)(`.${candidate}`, (0, _formatVariantSelector.formatVariantSelector)(formats, opts), opts).replace(`.${candidate}`, '&').replace('{ & }', '').trim());
+                    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, opts).toString().replace(`.${candidate}`, '&'));
+                        result.push((0, _formatVariantSelector.formatVariantSelector)(manualFormatStrings, opts).toString().replace(`.${candidate}`, "&"));
                     }
                     return result;
                 }
@@ -1199,7 +1227,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);
@@ -1246,7 +1274,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);
     Object.assign(context, {
         userConfigPath