tailwindcss 3.3.2 → 3.3.4

package/CHANGELOG.md

@@ -9,6 +9,53 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [3.3.4] - 2023-10-24
+
+### Fixed
+
+- Improve normalisation of `calc()`-like functions ([#11686](https://github.com/tailwindlabs/tailwindcss/pull/11686))
+- Skip `calc()` normalisation in nested `theme()` calls ([#11705](https://github.com/tailwindlabs/tailwindcss/pull/11705))
+- Fix incorrectly generated CSS when using square brackets inside arbitrary properties ([#11709](https://github.com/tailwindlabs/tailwindcss/pull/11709))
+- Make `content` optional for presets in TypeScript types ([#11730](https://github.com/tailwindlabs/tailwindcss/pull/11730))
+- Handle variable colors that have variable fallback values ([#12049](https://github.com/tailwindlabs/tailwindcss/pull/12049))
+- Batch reading content files to prevent `too many open files` error ([#12079](https://github.com/tailwindlabs/tailwindcss/pull/12079))
+- Skip over classes inside `:not(…)` when nested in an at-rule ([#12105](https://github.com/tailwindlabs/tailwindcss/pull/12105))
+- Update types to work with `Node16` module resolution ([#12097](https://github.com/tailwindlabs/tailwindcss/pull/12097))
+- Don’t crash when important and parent selectors are equal in `@apply` ([#12112](https://github.com/tailwindlabs/tailwindcss/pull/12112))
+- Eliminate irrelevant rules when applying variants ([#12113](https://github.com/tailwindlabs/tailwindcss/pull/12113))
+- Improve RegEx parser, reduce possibilities as the key for arbitrary properties ([#12121](https://github.com/tailwindlabs/tailwindcss/pull/12121))
+- Fix sorting of utilities that share multiple candidates ([#12173](https://github.com/tailwindlabs/tailwindcss/pull/12173))
+- Ensure variants with arbitrary values and a modifier are correctly matched in the RegEx based parser ([#12179](https://github.com/tailwindlabs/tailwindcss/pull/12179))
+- Fix crash when watching renamed files on FreeBSD ([#12193](https://github.com/tailwindlabs/tailwindcss/pull/12193))
+- Allow plugins from a parent document to be used in an iframe ([#12208](https://github.com/tailwindlabs/tailwindcss/pull/12208))
+- Add types for `tailwindcss/nesting` ([#12269](https://github.com/tailwindlabs/tailwindcss/pull/12269))
+- Bump `jiti`, `fast-glob`, and `browserlist` dependencies ([#11550](https://github.com/tailwindlabs/tailwindcss/pull/11550))
+- Improve automatic `var` injection for properties that accept a `<dashed-ident>` ([#12236](https://github.com/tailwindlabs/tailwindcss/pull/12236))
+
+## [3.3.3] - 2023-07-13
+
+### Fixed
+
+- Fix issue where some pseudo-element variants generated the wrong selector ([#10943](https://github.com/tailwindlabs/tailwindcss/pull/10943), [#10962](https://github.com/tailwindlabs/tailwindcss/pull/10962), [#11111](https://github.com/tailwindlabs/tailwindcss/pull/11111))
+- Make font settings propagate into buttons, inputs, etc. ([#10940](https://github.com/tailwindlabs/tailwindcss/pull/10940))
+- Fix parsing of `theme()` inside `calc()` when there are no spaces around operators ([#11157](https://github.com/tailwindlabs/tailwindcss/pull/11157))
+- Ensure `repeating-conic-gradient` is detected as an image ([#11180](https://github.com/tailwindlabs/tailwindcss/pull/11180))
+- Move unknown pseudo-elements outside of `:is` by default ([#11345](https://github.com/tailwindlabs/tailwindcss/pull/11345))
+- Escape animation names when prefixes contain special characters ([#11470](https://github.com/tailwindlabs/tailwindcss/pull/11470))
+- Don't prefix arbitrary classes in `group` and `peer` variants ([#11454](https://github.com/tailwindlabs/tailwindcss/pull/11454))
+- Sort classes using position of first matching rule ([#11504](https://github.com/tailwindlabs/tailwindcss/pull/11504))
+- Allow variant to be an at-rule without a prelude ([#11589](https://github.com/tailwindlabs/tailwindcss/pull/11589))
+- Make PostCSS plugin async to improve performance ([#11548](https://github.com/tailwindlabs/tailwindcss/pull/11548))
+- Don’t error when a config file is missing ([f97759f](https://github.com/tailwindlabs/tailwindcss/commit/f97759f808d15ace66647b1405744fcf95a392e5))
+
+### Added
+
+- Add `aria-busy` utility ([#10966](https://github.com/tailwindlabs/tailwindcss/pull/10966))
+
+### Changed
+
+- Reset padding for `<dialog>` elements in preflight ([#11069](https://github.com/tailwindlabs/tailwindcss/pull/11069))
+
 ## [3.3.2] - 2023-04-25
 
 ### Fixed
@@ -2236,7 +2283,9 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.2...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.4...HEAD
+[3.3.4]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.3...v3.3.4
+[3.3.3]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.2...v3.3.3
 [3.3.2]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.1...v3.3.2
 [3.3.1]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.0...v3.3.1
 [3.3.0]: https://github.com/tailwindlabs/tailwindcss/compare/v3.2.7...v3.3.0

package/lib/cli/build/plugin.js

@@ -245,9 +245,9 @@ async function createProcessor(args, cliConfigPath) {
     let tailwindPlugin = ()=>{
         return {
             postcssPlugin: "tailwindcss",
-            Once (root, { result  }) {
+            async Once (root, { result  }) {
                 _sharedState.env.DEBUG && console.time("Compiling CSS");
-                (0, _processTailwindFeatures.default)(({ createContext  })=>{
+                await (0, _processTailwindFeatures.default)(({ createContext  })=>{
                     console.error();
                     console.error("Rebuilding...");
                     return ()=>{

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/corePlugins.js

@@ -35,6 +35,7 @@ const _parseBoxShadowValue = require("./util/parseBoxShadowValue");
 const _removeAlphaVariables = require("./util/removeAlphaVariables");
 const _featureFlags = require("./featureFlags");
 const _dataTypes = require("./util/dataTypes");
+const _setupContextUtils = require("./lib/setupContextUtils");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -135,7 +136,7 @@ let variantPlugins = {
             return "&::after";
         });
     },
-    pseudoClassVariants: ({ addVariant , matchVariant , config  })=>{
+    pseudoClassVariants: ({ addVariant , matchVariant , config , prefix  })=>{
         let pseudoVariants = [
             // Positional
             [
@@ -216,17 +217,17 @@ let variantPlugins = {
         }
         let variants = {
             group: (_, { modifier  })=>modifier ? [
-                    `:merge(.group\\/${(0, _escapeClassName.default)(modifier)})`,
+                    `:merge(${prefix(".group")}\\/${(0, _escapeClassName.default)(modifier)})`,
                     " &"
                 ] : [
-                    `:merge(.group)`,
+                    `:merge(${prefix(".group")})`,
                     " &"
                 ],
             peer: (_, { modifier  })=>modifier ? [
-                    `:merge(.peer\\/${(0, _escapeClassName.default)(modifier)})`,
+                    `:merge(${prefix(".peer")}\\/${(0, _escapeClassName.default)(modifier)})`,
                     " ~ &"
                 ] : [
-                    `:merge(.peer)`,
+                    `:merge(${prefix(".peer")})`,
                     " ~ &"
                 ]
         };
@@ -255,7 +256,10 @@ let variantPlugins = {
                 // result.replace(/&(\S+)?/g, (_, pseudo = '') => a + pseudo + b)
                 return result.slice(0, start) + a + result.slice(start + 1, end) + b + result.slice(end);
             }, {
-                values: Object.fromEntries(pseudoVariants)
+                values: Object.fromEntries(pseudoVariants),
+                [_setupContextUtils.INTERNAL_FEATURES]: {
+                    respectPrefix: false
+                }
             });
         }
     },
@@ -1283,7 +1287,7 @@ let corePlugins = {
         });
     },
     animation: ({ matchUtilities , theme , config  })=>{
-        let prefixName = (name)=>`${config("prefix")}${(0, _escapeClassName.default)(name)}`;
+        let prefixName = (name)=>(0, _escapeClassName.default)(config("prefix") + name);
         var _theme;
         let keyframes = Object.fromEntries(Object.entries((_theme = theme("keyframes")) !== null && _theme !== void 0 ? _theme : {}).map(([key, value])=>{
             return [

package/lib/css/preflight.css

@@ -163,6 +163,8 @@ optgroup,
 select,
 textarea {
   font-family: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
   font-size: 100%; /* 1 */
   font-weight: inherit; /* 1 */
   line-height: inherit; /* 1 */
@@ -300,6 +302,13 @@ menu {
   padding: 0;
 }
 
+/*
+Reset default styling for dialogs.
+*/
+dialog {
+  padding: 0;
+}
+
 /*
 Prevent resizing textareas horizontally by default.
 */

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;
@@ -57,17 +56,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,7 +76,7 @@ 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
@@ -115,6 +112,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 +128,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 +152,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

package/lib/lib/evaluateTailwindFunctions.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "default", {
 const _dlv = /*#__PURE__*/ _interop_require_default(require("dlv"));
 const _didyoumean = /*#__PURE__*/ _interop_require_default(require("didyoumean"));
 const _transformThemeValue = /*#__PURE__*/ _interop_require_default(require("../util/transformThemeValue"));
-const _postcssvalueparser = /*#__PURE__*/ _interop_require_default(require("postcss-value-parser"));
+const _index = /*#__PURE__*/ _interop_require_default(require("../value-parser/index"));
 const _normalizeScreens = require("../util/normalizeScreens");
 const _buildMediaQuery = /*#__PURE__*/ _interop_require_default(require("../util/buildMediaQuery"));
 const _toPath = require("../util/toPath");
@@ -121,7 +121,7 @@ function extractArgs(node, vNodes, functions) {
         if (vNode.type === "div" && vNode.value === ",") {
             args.push("");
         } else {
-            args[args.length - 1] += _postcssvalueparser.default.stringify(vNode);
+            args[args.length - 1] += _index.default.stringify(vNode);
         }
     }
     return args;
@@ -135,7 +135,9 @@ function resolveVNode(node, vNode, functions) {
     return vNode;
 }
 function resolveFunctions(node, input, functions) {
-    return (0, _postcssvalueparser.default)(input).walk((vNode)=>{
+    let hasAnyFn = Object.keys(functions).some((fn)=>input.includes(`${fn}(`));
+    if (!hasAnyFn) return input;
+    return (0, _index.default)(input).walk((vNode)=>{
         resolveVNode(node, vNode, functions);
     }).toString();
 }

package/lib/lib/expandApplyAtRules.js

@@ -482,6 +482,12 @@ function processApply(root, context, localCache) {
                         // We do *not* want to do this for user CSS that happens to be structured the same
                         let isGenerated = parent.raws.tailwind !== undefined;
                         let parentSelector = isGenerated && importantSelector && parent.selector.indexOf(importantSelector) === 0 ? parent.selector.slice(importantSelector.length) : parent.selector;
+                        // If the selector becomes empty after replacing the important selector
+                        // This means that it's the same as the parent selector and we don't want to replace it
+                        // Otherwise we'll crash
+                        if (parentSelector === "") {
+                            parentSelector = parent.selector;
+                        }
                         rule.selector = replaceSelector(parentSelector, rule.selector, applyCandidate);
                         // And then re-add it if it was removed
                         if (importantSelector && parentSelector !== parent.selector) {

package/lib/lib/expandTailwindAtRules.js

@@ -124,7 +124,7 @@ function getClassCandidates(content, extractor, candidates, seen) {
     return returnValue;
 }
 function expandTailwindAtRules(context) {
-    return (root)=>{
+    return async (root)=>{
         let layerNodes = {
             base: null,
             components: null,
@@ -165,11 +165,25 @@ function expandTailwindAtRules(context) {
         //   getClassCandidatesOxide(file, transformer(content), extractor, candidates, seen)
         // }
         } else {
-            for (let { file , content , extension  } of context.changedContent){
-                let transformer = getTransformer(context.tailwindConfig, extension);
-                let extractor = getExtractor(context, extension);
-                content = file ? _fs.default.readFileSync(file, "utf8") : content;
-                getClassCandidates(transformer(content), extractor, candidates, seen);
+            /** @type {[item: {file?: string, content?: string}, meta: {transformer: any, extractor: any}][]} */ let regexParserContent = [];
+            for (let item of context.changedContent){
+                let transformer = getTransformer(context.tailwindConfig, item.extension);
+                let extractor = getExtractor(context, item.extension);
+                regexParserContent.push([
+                    item,
+                    {
+                        transformer,
+                        extractor
+                    }
+                ]);
+            }
+            const BATCH_SIZE = 500;
+            for(let i = 0; i < regexParserContent.length; i += BATCH_SIZE){
+                let batch = regexParserContent.slice(i, i + BATCH_SIZE);
+                await Promise.all(batch.map(async ([{ file , content  }, { transformer , extractor  }])=>{
+                    content = file ? await _fs.default.promises.readFile(file, "utf8") : content;
+                    getClassCandidates(transformer(content), extractor, candidates, seen);
+                }));
             }
         }
         env.DEBUG && console.timeEnd("Reading changed files");

package/lib/lib/generateRules.js

@@ -231,12 +231,12 @@ function applyVariant(variant, matches, context) {
         //   group[:hover]    (`-` is missing)
         let match = /(.)(-?)\[(.*)\]/g.exec(variant);
         if (match) {
-            let [, char, seperator, value] = match;
+            let [, char, separator, value] = match;
             // @-[200px] case
-            if (char === "@" && seperator === "-") return [];
+            if (char === "@" && separator === "-") return [];
             // group[:hover] case
-            if (char !== "@" && seperator === "") return [];
-            variant = variant.replace(`${seperator}[${value}]`, "");
+            if (char !== "@" && separator === "") return [];
+            variant = variant.replace(`${separator}[${value}]`, "");
             args.value = value;
         }
     }
@@ -259,9 +259,17 @@ function applyVariant(variant, matches, context) {
         context.variantMap.set(variant, records);
     }
     if (context.variantMap.has(variant)) {
+        var _context_variantOptions_get;
         let isArbitraryVariant = isArbitraryValue(variant);
+        var _context_variantOptions_get_INTERNAL_FEATURES;
+        let internalFeatures = (_context_variantOptions_get_INTERNAL_FEATURES = (_context_variantOptions_get = context.variantOptions.get(variant)) === null || _context_variantOptions_get === void 0 ? void 0 : _context_variantOptions_get[_setupContextUtils.INTERNAL_FEATURES]) !== null && _context_variantOptions_get_INTERNAL_FEATURES !== void 0 ? _context_variantOptions_get_INTERNAL_FEATURES : {};
         let variantFunctionTuples = context.variantMap.get(variant).slice();
         let result = [];
+        let respectPrefix = (()=>{
+            if (isArbitraryVariant) return false;
+            if (internalFeatures.respectPrefix === false) return false;
+            return true;
+        })();
         for (let [meta, rule] of matches){
             // Don't generate variants for user css
             if (meta.layer === "user") {
@@ -318,7 +326,7 @@ function applyVariant(variant, matches, context) {
                     format (selectorFormat) {
                         collectedFormats.push({
                             format: selectorFormat,
-                            isArbitraryVariant
+                            respectPrefix
                         });
                     },
                     args
@@ -344,7 +352,7 @@ function applyVariant(variant, matches, context) {
                 if (typeof ruleWithVariant === "string") {
                     collectedFormats.push({
                         format: ruleWithVariant,
-                        isArbitraryVariant
+                        respectPrefix
                     });
                 }
                 if (ruleWithVariant === null) {
@@ -383,7 +391,7 @@ function applyVariant(variant, matches, context) {
                         //                    format: .foo &
                         collectedFormats.push({
                             format: modified.replace(rebuiltBase, "&"),
-                            isArbitraryVariant
+                            respectPrefix
                         });
                         rule.selector = before;
                     });
@@ -492,7 +500,9 @@ function extractArbitraryProperty(classCandidate, context) {
     if (!(0, _isSyntacticallyValidPropertyValue.default)(value)) {
         return null;
     }
-    let normalized = (0, _dataTypes.normalize)(value);
+    let normalized = (0, _dataTypes.normalize)(value, {
+        property
+    });
     if (!isParsableCssValue(property, normalized)) {
         return null;
     }
@@ -570,7 +580,7 @@ function* recordCandidates(matches, classCandidate) {
         yield match;
     }
 }
-function* resolveMatches(candidate, context, original = candidate) {
+function* resolveMatches(candidate, context) {
     let separator = context.tailwindConfig.separator;
     let [classCandidate, ...variants] = splitWithSeparator(candidate, separator).reverse();
     let important = false;
@@ -578,14 +588,6 @@ function* resolveMatches(candidate, context, original = candidate) {
         important = true;
         classCandidate = classCandidate.slice(1);
     }
-    if ((0, _featureFlags.flagEnabled)(context.tailwindConfig, "variantGrouping")) {
-        if (classCandidate.startsWith("(") && classCandidate.endsWith(")")) {
-            let base = variants.slice().reverse().join(separator);
-            for (let part of (0, _splitAtTopLevelOnly.splitAtTopLevelOnly)(classCandidate.slice(1, -1), ",")){
-                yield* resolveMatches(base + separator + part, context, original);
-            }
-        }
-    }
     // TODO: Reintroduce this in ways that doesn't break on false positives
     // function sortAgainst(toSort, against) {
     //   return toSort.slice().sort((a, z) => {
@@ -745,8 +747,7 @@ function* resolveMatches(candidate, context, original = candidate) {
             // Apply final format selector
             match = applyFinalFormat(match, {
                 context,
-                candidate,
-                original
+                candidate
             });
             // Skip rules with invalid selectors
             // This will cause the candidate to be added to the "not class"
@@ -758,7 +759,7 @@ function* resolveMatches(candidate, context, original = candidate) {
         }
     }
 }
-function applyFinalFormat(match, { context , candidate , original  }) {
+function applyFinalFormat(match, { context , candidate  }) {
     if (!match[0].collectedFormats) {
         return match;
     }
@@ -791,10 +792,17 @@ function applyFinalFormat(match, { context , candidate , original  }) {
             return;
         }
         try {
-            rule.selector = (0, _formatVariantSelector.finalizeSelector)(rule.selector, finalFormat, {
-                candidate: original,
+            let selector = (0, _formatVariantSelector.finalizeSelector)(rule.selector, finalFormat, {
+                candidate,
                 context
             });
+            // Finalize Selector determined that this candidate is irrelevant
+            // TODO: This elimination should happen earlier so this never happens
+            if (selector === null) {
+                rule.remove();
+                return;
+            }
+            rule.selector = selector;
         } catch  {
             // If this selector is invalid we also want to skip it
             // But it's likely that being invalid here means there's a bug in a plugin rather than too loosely matching content
@@ -835,7 +843,7 @@ function getImportantStrategy(important) {
         };
     }
 }
-function generateRules(candidates, context) {
+function generateRules(candidates, context, isSorting = false) {
     let allRules = [];
     let strategy = getImportantStrategy(context.tailwindConfig.important);
     for (let candidate of candidates){
@@ -866,9 +874,11 @@ function generateRules(candidates, context) {
                 container.walkRules(strategy);
                 rule = container.nodes[0];
             }
+            // Note: We have to clone rules during sorting
+            // so we eliminate some shared mutable state
             let newEntry = [
                 sort,
-                rule
+                isSorting ? rule.clone() : rule
             ];
             rules.add(newEntry);
             context.ruleCache.add(newEntry);

package/lib/lib/setupContextUtils.js

@@ -9,6 +9,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    INTERNAL_FEATURES: function() {
+        return INTERNAL_FEATURES;
+    },
     isValidVariantFormatString: function() {
         return isValidVariantFormatString;
     },
@@ -92,6 +95,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
+const INTERNAL_FEATURES = Symbol();
 const VARIANT_TYPES = {
     AddVariant: Symbol.for("ADD_VARIANT"),
     MatchVariant: Symbol.for("MATCH_VARIANT")
@@ -197,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
+    let selectors = [];
     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();
-                }
-            });
+        // 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 [
@@ -270,11 +276,14 @@ function parseVariant(variant) {
         if (!str.startsWith("@")) {
             return ({ format  })=>format(str);
         }
-        let [, name, params] = /@(.*?)( .+|[({].*)/g.exec(str);
-        return ({ wrap  })=>wrap(_postcss.default.atRule({
+        let [, name, params] = /@(\S*)( .+|[({].*)?/g.exec(str);
+        var _params_trim;
+        return ({ wrap  })=>{
+            return wrap(_postcss.default.atRule({
                 name,
-                params: params.trim()
+                params: (_params_trim = params === null || params === void 0 ? void 0 : params.trim()) !== null && _params_trim !== void 0 ? _params_trim : ""
             }));
+        };
     }).reverse();
     return (api)=>{
         for (let fn of fns){
@@ -920,11 +929,15 @@ 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){
-            sortedClassNames.set(rule.raws.tailwind.candidate, idx++);
+            let candidate = rule.raws.tailwind.candidate;
+            var _sortedClassNames_get;
+            // When multiple rules match a candidate
+            // always take the position of the first one
+            sortedClassNames.set(candidate, (_sortedClassNames_get = sortedClassNames.get(candidate)) !== null && _sortedClassNames_get !== void 0 ? _sortedClassNames_get : idx++);
         }
         return classes.map((className)=>{
             var _sortedClassNames_get;
@@ -1095,13 +1108,20 @@ function registerPlugins(plugins, context) {
                     }
                     var _options_values1;
                     let isArbitraryVariant = !(value in ((_options_values1 = options.values) !== null && _options_values1 !== void 0 ? _options_values1 : {}));
+                    var _options_INTERNAL_FEATURES;
+                    let internalFeatures = (_options_INTERNAL_FEATURES = options[INTERNAL_FEATURES]) !== null && _options_INTERNAL_FEATURES !== void 0 ? _options_INTERNAL_FEATURES : {};
+                    let respectPrefix = (()=>{
+                        if (isArbitraryVariant) return false;
+                        if (internalFeatures.respectPrefix === false) return false;
+                        return true;
+                    })();
                     formatStrings = formatStrings.map((format)=>format.map((str)=>({
                                 format: str,
-                                isArbitraryVariant
+                                respectPrefix
                             })));
                     manualFormatStrings = manualFormatStrings.map((format)=>({
                             format,
-                            isArbitraryVariant
+                            respectPrefix
                         }));
                     let opts = {
                         candidate,

package/lib/lib/setupTrackingContext.js

@@ -83,8 +83,9 @@ function getTailwindConfig(configOrPath) {
             newDeps
         ];
     }
+    var _configOrPath_config, _ref;
     // It's a plain object, not a path
-    let newConfig = (0, _resolveconfig.default)(configOrPath.config === undefined ? configOrPath : configOrPath.config);
+    let newConfig = (0, _resolveconfig.default)((_ref = (_configOrPath_config = configOrPath === null || configOrPath === void 0 ? void 0 : configOrPath.config) !== null && _configOrPath_config !== void 0 ? _configOrPath_config : configOrPath) !== null && _ref !== void 0 ? _ref : {});
     newConfig = (0, _validateConfig.validateConfig)(newConfig);
     return [
         newConfig,