tailwindcss 0.0.0-insiders.4c34b2e → 0.0.0-insiders.4c6fbd7

package/lib/cli/build/plugin.js

@@ -61,7 +61,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -96,14 +98,11 @@ async function lightningcss(result, { map = true, minify = true } = {}) {
             sourceMap: result.map === undefined ? map : !!result.map,
             inputSourceMap: result.map ? result.map.toString() : undefined,
             targets: _lightningcss.default.browserslistToTargets((0, _browserslist.default)(browsersListConfig)),
-            drafts: {
-                nesting: true
-            },
             include: _lightningcss.Features.Nesting,
             exclude: _lightningcss.Features.LogicalProperties
         });
         return Object.assign(result, {
-            css: transformed.code.toString('utf8'),
+            css: transformed.code.toString(),
             map: result.map ? Object.assign(result.map, {
                 toString () {
                     var _transformed_map;
@@ -180,7 +179,6 @@ let state = {
         };
     },
     loadConfig (configPath, content) {
-        var _content;
         if (this.watcher && configPath) {
             this.refreshConfigDependencies();
         }
@@ -197,7 +195,7 @@ let state = {
         };
         this.configBag.config = (0, _validateConfig.validateConfig)((0, _resolveConfig.default)(this.configBag.config));
         // Override content files if `--content` has been passed explicitly
-        if (((_content = content) === null || _content === void 0 ? void 0 : _content.length) > 0) {
+        if ((content === null || content === void 0 ? void 0 : content.length) > 0) {
             this.configBag.config.content.files = content;
         }
         return this.configBag.config;
@@ -239,14 +237,14 @@ let state = {
         return content;
     },
     getContext ({ createContext, cliConfigPath, root, result, content }) {
-        if (this.context) {
-            this.context.changedContent = this.changedContent.splice(0);
-            return this.context;
-        }
         _sharedState.env.DEBUG && console.time('Searching for config');
         var _findAtConfigPath1;
         let configPath = (_findAtConfigPath1 = (0, _findAtConfigPath.findAtConfigPath)(root, result)) !== null && _findAtConfigPath1 !== void 0 ? _findAtConfigPath1 : cliConfigPath;
         _sharedState.env.DEBUG && console.timeEnd('Searching for config');
+        if (this.context) {
+            this.context.changedContent = this.changedContent.splice(0);
+            return this.context;
+        }
         _sharedState.env.DEBUG && console.time('Loading config');
         let config = this.loadConfig(configPath, content);
         _sharedState.env.DEBUG && console.timeEnd('Loading config');

package/lib/cli/build/utils.js

@@ -10,20 +10,20 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    indentRecursive: function() {
-        return indentRecursive;
+    drainStdin: function() {
+        return drainStdin;
     },
     formatNodes: function() {
         return formatNodes;
     },
-    readFileWithRetries: function() {
-        return readFileWithRetries;
-    },
-    drainStdin: function() {
-        return drainStdin;
+    indentRecursive: function() {
+        return indentRecursive;
     },
     outputFile: function() {
         return outputFile;
+    },
+    readFileWithRetries: function() {
+        return readFileWithRetries;
     }
 });
 const _fs = /*#__PURE__*/ _interop_require_default(require("fs"));

package/lib/cli/build/watching.js

@@ -126,7 +126,7 @@ function createWatcher(args, { state, rebuild }) {
     // This is very likely a chokidar bug but it's one we need to work around
     // We treat this as a change event and rebuild the CSS
     watcher.on('raw', (evt, filePath, meta)=>{
-        if (evt !== 'rename') {
+        if (evt !== 'rename' || filePath === null) {
             return;
         }
         let watchedPath = meta.watchedPath;

package/lib/cli/index.js

@@ -151,8 +151,8 @@ let args = (()=>{
             ...flags,
             ...sharedFlags
         }).filter(([_key, value])=>{
-            var _value_type, _value;
-            return !((_value = value) === null || _value === void 0 ? void 0 : (_value_type = _value.type) === null || _value_type === void 0 ? void 0 : _value_type.manualParsing);
+            var _value_type;
+            return !(value === null || value === void 0 ? void 0 : (_value_type = value.type) === null || _value_type === void 0 ? void 0 : _value_type.manualParsing);
         }).map(([key, value])=>[
                 key,
                 typeof value === 'object' ? value.type : value

package/lib/corePluginList.js

@@ -32,6 +32,7 @@ const _default = [
     "lineClamp",
     "display",
     "aspectRatio",
+    "size",
     "height",
     "maxHeight",
     "minHeight",
@@ -184,5 +185,6 @@ const _default = [
     "transitionDuration",
     "transitionTimingFunction",
     "willChange",
-    "content"
+    "content",
+    "forcedColorAdjust"
 ];

package/lib/corePlugins.js

@@ -9,11 +9,11 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    variantPlugins: function() {
-        return variantPlugins;
-    },
     corePlugins: function() {
         return corePlugins;
+    },
+    variantPlugins: function() {
+        return variantPlugins;
     }
 });
 const _fs = /*#__PURE__*/ _interop_require_default(require("fs"));
@@ -61,7 +61,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -80,6 +82,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 let variantPlugins = {
+    childVariant: ({ addVariant })=>{
+        addVariant('*', '& > *');
+    },
     pseudoElementVariants: ({ addVariant })=>{
         addVariant('first-letter', '&::first-letter');
         addVariant('first-line', '&::first-line');
@@ -263,15 +268,15 @@ let variantPlugins = {
         }
     },
     directionVariants: ({ addVariant })=>{
-        addVariant('ltr', ':is([dir="ltr"] &)');
-        addVariant('rtl', ':is([dir="rtl"] &)');
+        addVariant('ltr', '&:where([dir="ltr"], [dir="ltr"] *)');
+        addVariant('rtl', '&:where([dir="rtl"], [dir="rtl"] *)');
     },
     reducedMotionVariants: ({ addVariant })=>{
         addVariant('motion-safe', '@media (prefers-reduced-motion: no-preference)');
         addVariant('motion-reduce', '@media (prefers-reduced-motion: reduce)');
     },
     darkVariants: ({ config, addVariant })=>{
-        let [mode, className = '.dark'] = [].concat(config('darkMode', 'media'));
+        let [mode, selector = '.dark'] = [].concat(config('darkMode', 'media'));
         if (mode === false) {
             mode = 'media';
             _log.default.warn('darkmode-false', [
@@ -280,10 +285,48 @@ let variantPlugins = {
                 'https://tailwindcss.com/docs/upgrade-guide#remove-dark-mode-configuration'
             ]);
         }
-        if (mode === 'class') {
-            addVariant('dark', `:is(${className} &)`);
+        if (mode === 'variant') {
+            let formats;
+            if (Array.isArray(selector)) {
+                formats = selector;
+            } else if (typeof selector === 'function') {
+                formats = selector;
+            } else if (typeof selector === 'string') {
+                formats = [
+                    selector
+                ];
+            }
+            // TODO: We could also add these warnings if the user passes a function that returns string | string[]
+            // But this is an advanced enough use case that it's probably not necessary
+            if (Array.isArray(formats)) {
+                for (let format of formats){
+                    if (format === '.dark') {
+                        mode = false;
+                        _log.default.warn('darkmode-variant-without-selector', [
+                            'When using `variant` for `darkMode`, you must provide a selector.',
+                            'Example: `darkMode: ["variant", ".your-selector &"]`'
+                        ]);
+                    } else if (!format.includes('&')) {
+                        mode = false;
+                        _log.default.warn('darkmode-variant-without-ampersand', [
+                            'When using `variant` for `darkMode`, your selector must contain `&`.',
+                            'Example `darkMode: ["variant", ".your-selector &"]`'
+                        ]);
+                    }
+                }
+            }
+            selector = formats;
+        }
+        if (mode === 'selector') {
+            // New preferred behavior
+            addVariant('dark', `&:where(${selector}, ${selector} *)`);
         } else if (mode === 'media') {
             addVariant('dark', '@media (prefers-color-scheme: dark)');
+        } else if (mode === 'variant') {
+            addVariant('dark', selector);
+        } else if (mode === 'class') {
+            // Old behavior
+            addVariant('dark', `:is(${selector} &)`);
         }
     },
     printVariant: ({ addVariant })=>{
@@ -401,7 +444,7 @@ let variantPlugins = {
         matchVariant('supports', (value = '')=>{
             let check = (0, _dataTypes.normalize)(value);
             let isRaw = /^\w*\s*\(/.test(check);
-            // Chrome has a bug where `(condtion1)or(condition2)` is not valid
+            // Chrome has a bug where `(condition1)or(condition2)` is not valid
             // But `(condition1) or (condition2)` is supported.
             check = isRaw ? check.replace(/\b(and|or|not)\b/g, ' $1 ') : check;
             if (isRaw) {
@@ -464,6 +507,9 @@ let variantPlugins = {
     prefersContrastVariants: ({ addVariant })=>{
         addVariant('contrast-more', '@media (prefers-contrast: more)');
         addVariant('contrast-less', '@media (prefers-contrast: less)');
+    },
+    forcedColorsVariants: ({ addVariant })=>{
+        addVariant('forced-colors', '@media (forced-colors: active)');
     }
 };
 let cssTransformValue = [
@@ -779,6 +825,12 @@ let corePlugins = {
     ]),
     float: ({ addUtilities })=>{
         addUtilities({
+            '.float-start': {
+                float: 'inline-start'
+            },
+            '.float-end': {
+                float: 'inline-end'
+            },
             '.float-right': {
                 float: 'right'
             },
@@ -792,6 +844,12 @@ let corePlugins = {
     },
     clear: ({ addUtilities })=>{
         addUtilities({
+            '.clear-start': {
+                clear: 'inline-start'
+            },
+            '.clear-end': {
+                clear: 'inline-end'
+            },
             '.clear-left': {
                 clear: 'left'
             },
@@ -975,6 +1033,15 @@ let corePlugins = {
             ]
         ]
     ]),
+    size: (0, _createUtilityPlugin.default)('size', [
+        [
+            'size',
+            [
+                'width',
+                'height'
+            ]
+        ]
+    ]),
     height: (0, _createUtilityPlugin.default)('height', [
         [
             'h',
@@ -1618,6 +1685,9 @@ let corePlugins = {
         addUtilities({
             '.appearance-none': {
                 appearance: 'none'
+            },
+            '.appearance-auto': {
+                appearance: 'auto'
             }
         });
     },
@@ -2312,6 +2382,9 @@ let corePlugins = {
             },
             '.text-balance': {
                 'text-wrap': 'balance'
+            },
+            '.text-pretty': {
+                'text-wrap': 'pretty'
             }
         });
     },
@@ -4191,5 +4264,15 @@ let corePlugins = {
                 ]
             ]
         ]
-    ])
+    ]),
+    forcedColorAdjust: ({ addUtilities })=>{
+        addUtilities({
+            '.forced-color-adjust-auto': {
+                'forced-color-adjust': 'auto'
+            },
+            '.forced-color-adjust-none': {
+                'forced-color-adjust': 'none'
+            }
+        });
+    }
 };

package/lib/css/preflight.css

@@ -24,9 +24,11 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS.
 */
 
-html {
+html,
+:host {
   line-height: 1.5; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
   -moz-tab-size: 4; /* 3 */
@@ -34,6 +36,7 @@ html {
   font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */
   font-feature-settings: theme('fontFamily.sans[1].fontFeatureSettings', normal); /* 5 */
   font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings', normal); /* 6 */
+  -webkit-tap-highlight-color: transparent; /* 7 */
 }
 
 /*
@@ -99,8 +102,10 @@ strong {
 }
 
 /*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
 */
 
 code,
@@ -108,7 +113,9 @@ kbd,
 samp,
 pre {
   font-family: theme('fontFamily.mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); /* 1 */
-  font-size: 1em; /* 2 */
+  font-feature-settings: theme('fontFamily.mono[1].fontFeatureSettings', normal); /* 2 */
+  font-variation-settings: theme('fontFamily.mono[1].fontVariationSettings', normal); /* 3 */
+  font-size: 1em; /* 4 */
 }
 
 /*
@@ -188,9 +195,9 @@ select {
 */
 
 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
   -webkit-appearance: button; /* 1 */
   background-color: transparent; /* 2 */
   background-image: none; /* 2 */

package/lib/featureFlags.js

@@ -9,6 +9,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    default: function() {
+        return _default;
+    },
     featureFlags: function() {
         return featureFlags;
     },
@@ -17,9 +20,6 @@ _export(exports, {
     },
     issueFlagNotices: function() {
         return issueFlagNotices;
-    },
-    default: function() {
-        return _default;
     }
 });
 const _picocolors = /*#__PURE__*/ _interop_require_default(require("picocolors"));
@@ -51,24 +51,23 @@ let featureFlags = {
 };
 function flagEnabled(config, flag) {
     if (featureFlags.future.includes(flag)) {
-        var _config_future, _config;
+        var _config_future;
         var _config_future_flag, _ref;
-        return config.future === 'all' || ((_ref = (_config_future_flag = (_config = config) === null || _config === void 0 ? void 0 : (_config_future = _config.future) === null || _config_future === void 0 ? void 0 : _config_future[flag]) !== null && _config_future_flag !== void 0 ? _config_future_flag : defaults[flag]) !== null && _ref !== void 0 ? _ref : false);
+        return config.future === 'all' || ((_ref = (_config_future_flag = config === null || config === void 0 ? void 0 : (_config_future = config.future) === null || _config_future === void 0 ? void 0 : _config_future[flag]) !== null && _config_future_flag !== void 0 ? _config_future_flag : defaults[flag]) !== null && _ref !== void 0 ? _ref : false);
     }
     if (featureFlags.experimental.includes(flag)) {
-        var _config_experimental, _config1;
+        var _config_experimental;
         var _config_experimental_flag, _ref1;
-        return config.experimental === 'all' || ((_ref1 = (_config_experimental_flag = (_config1 = config) === null || _config1 === void 0 ? void 0 : (_config_experimental = _config1.experimental) === null || _config_experimental === void 0 ? void 0 : _config_experimental[flag]) !== null && _config_experimental_flag !== void 0 ? _config_experimental_flag : defaults[flag]) !== null && _ref1 !== void 0 ? _ref1 : false);
+        return config.experimental === 'all' || ((_ref1 = (_config_experimental_flag = config === null || config === void 0 ? void 0 : (_config_experimental = config.experimental) === null || _config_experimental === void 0 ? void 0 : _config_experimental[flag]) !== null && _config_experimental_flag !== void 0 ? _config_experimental_flag : defaults[flag]) !== null && _ref1 !== void 0 ? _ref1 : false);
     }
     return false;
 }
 function experimentalFlagsEnabled(config) {
-    var _config;
     if (config.experimental === 'all') {
         return featureFlags.experimental;
     }
     var _config_experimental;
-    return Object.keys((_config_experimental = (_config = config) === null || _config === void 0 ? void 0 : _config.experimental) !== null && _config_experimental !== void 0 ? _config_experimental : {}).filter((flag)=>featureFlags.experimental.includes(flag) && config.experimental[flag]);
+    return Object.keys((_config_experimental = config === null || config === void 0 ? void 0 : config.experimental) !== null && _config_experimental !== void 0 ? _config_experimental : {}).filter((flag)=>featureFlags.experimental.includes(flag) && config.experimental[flag]);
 }
 function issueFlagNotices(config) {
     if (process.env.JEST_WORKER_ID !== undefined) {

package/lib/lib/cacheInvalidation.js

@@ -36,7 +36,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {

package/lib/lib/collapseAdjacentRules.js

@@ -31,10 +31,12 @@ function collapseAdjacentRules() {
                 return;
             }
             let properties = comparisonMap[node.type];
-            var _node_property, _currentRule_property;
             if (node.type === 'atrule' && node.name === 'font-face') {
                 currentRule = node;
-            } else if (properties.every((property)=>((_node_property = node[property]) !== null && _node_property !== void 0 ? _node_property : '').replace(/\s+/g, ' ') === ((_currentRule_property = currentRule[property]) !== null && _currentRule_property !== void 0 ? _currentRule_property : '').replace(/\s+/g, ' '))) {
+            } else if (properties.every((property)=>{
+                var _node_property, _currentRule_property;
+                return ((_node_property = node[property]) !== null && _node_property !== void 0 ? _node_property : '').replace(/\s+/g, ' ') === ((_currentRule_property = currentRule[property]) !== null && _currentRule_property !== void 0 ? _currentRule_property : '').replace(/\s+/g, ' ');
+            })) {
                 // An AtRule may not have children (for example if we encounter duplicate @import url(…) rules)
                 if (node.nodes) {
                     currentRule.append(node.nodes);

package/lib/lib/content.js

@@ -21,7 +21,6 @@ const _fs = /*#__PURE__*/ _interop_require_default(require("fs"));
 const _path = /*#__PURE__*/ _interop_require_default(require("path"));
 const _isglob = /*#__PURE__*/ _interop_require_default(require("is-glob"));
 const _fastglob = /*#__PURE__*/ _interop_require_default(require("fast-glob"));
-const _normalizepath = /*#__PURE__*/ _interop_require_default(require("normalize-path"));
 const _parseGlob = require("../util/parseGlob");
 const _sharedState = require("./sharedState");
 const _oxide = require("@tailwindcss/oxide");
@@ -30,6 +29,37 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
+/*!
+ * Modified version of normalize-path, original license below
+ *
+ * normalize-path <https://github.com/jonschlinkert/normalize-path>
+ *
+ * Copyright (c) 2014-2018, Jon Schlinkert.
+ * Released under the MIT License.
+ */ function normalizePath(path) {
+    if (typeof path !== 'string') {
+        throw new TypeError('expected path to be a string');
+    }
+    if (path === '\\' || path === '/') return '/';
+    var len = path.length;
+    if (len <= 1) return path;
+    // ensure that win32 namespaces has two leading slashes, so that the path is
+    // handled properly by the win32 version of path.parse() after being normalized
+    // https://msdn.microsoft.com/library/windows/desktop/aa365247(v=vs.85).aspx#namespaces
+    var prefix = '';
+    if (len > 4 && path[3] === '\\') {
+        var ch = path[2];
+        if ((ch === '?' || ch === '.') && path.slice(0, 2) === '\\\\') {
+            path = path.slice(2);
+            prefix = '//';
+        }
+    }
+    // Modified part: instead of purely splitting on `\\` and `/`, we split on
+    // `/` and `\\` that is _not_ followed by any of the following characters: ()[]
+    // This is to ensure that we keep the escaping of brackets and parentheses
+    let segs = path.split(/[/\\]+(?![\(\)\[\]])/);
+    return prefix + segs.join('/');
+}
 /** @typedef {import('../../types/config.js').RawFile} RawFile */ /** @typedef {import('../../types/config.js').FilePath} FilePath */ /*
  * @param {import('tailwindcss').Config} tailwindConfig
  * @param {{skip:string[]}} options
@@ -59,7 +89,7 @@ function parseCandidateFiles(context, tailwindConfig) {
     });
     // Normalize the file globs
     files = files.filter((filePath)=>typeof filePath === 'string');
-    files = files.map(_normalizepath.default);
+    files = files.map(normalizePath);
     // Split into included and excluded globs
     let tasks = _fastglob.default.generateTasks(files);
     /** @type {ContentPath[]} */ let included = [];
@@ -86,6 +116,9 @@ function parseCandidateFiles(context, tailwindConfig) {
  * @param {boolean} ignore
  * @returns {ContentPath}
  */ function parseFilePath(filePath, ignore) {
+    // Escape special characters in the file path such as: ()[]
+    // But only if the special character isn't already escaped
+    filePath = filePath.replace(RegExp("(?<!\\\\)([\\[\\]\\(\\)])", "g"), '\\$1');
     let contentPath = {
         original: filePath,
         base: filePath,
@@ -107,7 +140,7 @@ function parseCandidateFiles(context, tailwindConfig) {
     // Afaik, this technically shouldn't be needed but there's probably
     // some internal, direct path matching with a normalized path in
     // a package which can't handle mixed directory separators
-    let base = (0, _normalizepath.default)(contentPath.base);
+    let base = normalizePath(contentPath.base);
     // If the user's file path contains any special characters (like parens) for instance fast-glob
     // is like "OOOH SHINY" and treats them as such. So we have to escape the base path to fix this
     base = _fastglob.default.escapePath(base);

package/lib/lib/defaultExtractor.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "defaultExtractor", {
         return defaultExtractor;
     }
 });
-const _featureFlags = require("../featureFlags");
 const _regex = /*#__PURE__*/ _interop_require_wildcard(require("./regex"));
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -31,7 +30,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -57,17 +58,15 @@ function defaultExtractor(context) {
         /** @type {(string|string)[]} */ let results = [];
         for (let pattern of patterns){
             var _content_match;
-            results = [
-                ...results,
-                ...(_content_match = content.match(pattern)) !== null && _content_match !== void 0 ? _content_match : []
-            ];
+            for (let result of (_content_match = content.match(pattern)) !== null && _content_match !== void 0 ? _content_match : []){
+                results.push(clipAtBalancedParens(result));
+            }
         }
-        return results.filter((v)=>v !== undefined).map(clipAtBalancedParens);
+        return results;
     };
 }
 function* buildRegExps(context) {
     let separator = context.tailwindConfig.separator;
-    let variantGroupingEnabled = (0, _featureFlags.flagEnabled)(context.tailwindConfig, 'variantGrouping');
     let prefix = context.tailwindConfig.prefix !== '' ? _regex.optional(_regex.pattern([
         /-?/,
         _regex.escape(context.tailwindConfig.prefix)
@@ -79,16 +78,25 @@ function* buildRegExps(context) {
         // This is a targeted fix to continue to allow theme()
         // with square brackets to work in arbitrary properties
         // while fixing a problem with the regex matching too much
-        /\[[^\s:'"`]+:[^\s]+?\[[^\s]+\][^\s]+?\]/,
+        /\[[^\s:'"`\]]+:[^\s]+?\[[^\s]+\][^\s]+?\]/,
         // Utilities
         _regex.pattern([
             // Utility Name / Group Name
-            /-?(?:\w+)/,
+            _regex.any([
+                /-?(?:\w+)/,
+                // This is here to make sure @container supports everything that other utilities do
+                /@(?:\w+)/
+            ]),
             // Normal/Arbitrary values
             _regex.optional(_regex.any([
                 _regex.pattern([
                     // Arbitrary values
-                    /-(?:\w+-)*\[[^\s:]+\]/,
+                    _regex.any([
+                        /-(?:\w+-)*\['[^\s]+'\]/,
+                        /-(?:\w+-)*\["[^\s]+"\]/,
+                        /-(?:\w+-)*\[`[^\s]+`\]/,
+                        /-(?:\w+-)*\[(?:[^\s\[\]]+\[[^\s\[\]]+\])*[^\s:\[\]]+\]/
+                    ]),
                     // Not immediately followed by an `{[(`
                     /(?![{([]])/,
                     // optionally followed by an opacity modifier
@@ -96,7 +104,12 @@ function* buildRegExps(context) {
                 ]),
                 _regex.pattern([
                     // Arbitrary values
-                    /-(?:\w+-)*\[[^\s]+\]/,
+                    _regex.any([
+                        /-(?:\w+-)*\['[^\s]+'\]/,
+                        /-(?:\w+-)*\["[^\s]+"\]/,
+                        /-(?:\w+-)*\[`[^\s]+`\]/,
+                        /-(?:\w+-)*\[(?:[^\s\[\]]+\[[^\s\[\]]+\])*[^\s\[\]]+\]/
+                    ]),
                     // Not immediately followed by an `{[(`
                     /(?![{([]])/,
                     // optionally followed by an opacity modifier
@@ -115,6 +128,11 @@ function* buildRegExps(context) {
                 /@\[[^\s"'`]+\](\/[^\s"'`]+)?/,
                 separator
             ]),
+            // With variant modifier (e.g.: group-[..]/modifier)
+            _regex.pattern([
+                /([^\s"'`\[\\]+-)?\[[^\s"'`]+\]\/\w+/,
+                separator
+            ]),
             _regex.pattern([
                 /([^\s"'`\[\\]+-)?\[[^\s"'`]+\]/,
                 separator
@@ -126,6 +144,11 @@ function* buildRegExps(context) {
         ]),
         // With quotes allowed
         _regex.any([
+            // With variant modifier (e.g.: group-[..]/modifier)
+            _regex.pattern([
+                /([^\s"'`\[\\]+-)?\[[^\s`]+\]\/\w+/,
+                separator
+            ]),
             _regex.pattern([
                 /([^\s"'`\[\\]+-)?\[[^\s`]+\]/,
                 separator
@@ -145,20 +168,7 @@ function* buildRegExps(context) {
             // Important (optional)
             /!?/,
             prefix,
-            variantGroupingEnabled ? _regex.any([
-                // Or any of those things but grouped separated by commas
-                _regex.pattern([
-                    /\(/,
-                    utility,
-                    _regex.zeroOrMore([
-                        /,/,
-                        utility
-                    ]),
-                    /\)/
-                ]),
-                // Arbitrary properties, constrained utilities, arbitrary values, etc…
-                utility
-            ]) : utility
+            utility
         ]);
     }
     // 5. Inner matches