tailwindcss 3.4.0 → 3.4.2

package/CHANGELOG.md

@@ -7,6 +7,43 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- Nothing yet!
+
+## [3.4.2] - 2024-03-27
+
+### Fixed
+
+- Ensure max specificity of `0,0,1` for button and input Preflight rules ([#12735](https://github.com/tailwindlabs/tailwindcss/pull/12735))
+- Improve glob handling for folders with `(`, `)`, `[` or `]` in the file path ([#12715](https://github.com/tailwindlabs/tailwindcss/pull/12715))
+- Split `:has` rules when using `experimental.optimizeUniversalDefaults` ([#12736](https://github.com/tailwindlabs/tailwindcss/pull/12736))
+- Sort arbitrary properties alphabetically across multiple class lists ([#12911](https://github.com/tailwindlabs/tailwindcss/pull/12911))
+- Add `mix-blend-plus-darker` utility ([#12923](https://github.com/tailwindlabs/tailwindcss/pull/12923))
+- Ensure dashes are allowed in variant modifiers ([#13303](https://github.com/tailwindlabs/tailwindcss/pull/13303))
+- Fix crash showing completions in Intellisense when using a custom separator ([#13306](https://github.com/tailwindlabs/tailwindcss/pull/13306))
+- Transpile `import.meta.url` in config files ([#13322](https://github.com/tailwindlabs/tailwindcss/pull/13322))
+- Reset letter spacing for form elements ([#13150](https://github.com/tailwindlabs/tailwindcss/pull/13150))
+- Fix missing `xx-large` and remove double `x-large` absolute size ([#13324](https://github.com/tailwindlabs/tailwindcss/pull/13324))
+- Don't error when encountering nested CSS unless trying to `@apply` a class that uses nesting ([#13325](https://github.com/tailwindlabs/tailwindcss/pull/13325))
+- Ensure that arbitrary properties respect `important` configuration ([#13353](https://github.com/tailwindlabs/tailwindcss/pull/13353))
+- Change dark mode selector so `@apply` works correctly with pseudo elements ([#13379](https://github.com/tailwindlabs/tailwindcss/pull/13379))
+
+## [3.4.1] - 2024-01-05
+
+### Fixed
+
+- Don't remove keyframe stops when using important utilities ([#12639](https://github.com/tailwindlabs/tailwindcss/pull/12639))
+- Don't add spaces to gradients and grid track names when followed by `calc()` ([#12704](https://github.com/tailwindlabs/tailwindcss/pull/12704))
+- Restore old behavior for `class` dark mode strategy ([#12717](https://github.com/tailwindlabs/tailwindcss/pull/12717))
+- Improve glob handling for folders with `(`, `)`, `[` or `]` in the file path ([#12715](https://github.com/tailwindlabs/tailwindcss/pull/12715))
+
+### Added
+
+- Add new `selector` and `variant` strategies for dark mode ([#12717](https://github.com/tailwindlabs/tailwindcss/pull/12717))
+
+### Changed
+
+- Support `rtl` and `ltr` variants on same element as `dir` attribute ([#12717](https://github.com/tailwindlabs/tailwindcss/pull/12717))
+
 ## [3.4.0] - 2023-12-19
 
 ### Added
@@ -2333,7 +2370,9 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.0...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.2...HEAD
+[3.4.2]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.1...v3.4.2
+[3.4.1]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.0...v3.4.1
 [3.4.0]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.7...v3.4.0
 [3.3.7]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.6...v3.3.7
 [3.3.6]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.5...v3.3.6

package/README.md

@@ -12,15 +12,14 @@
   A utility-first CSS framework for rapidly building custom user interfaces.
 </p>
 
-
 <p align="center">
-    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci-stable.yml?branch=master" alt="Build Status"></a>
+    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci.yml?branch=master" alt="Build Status"></a>
     <a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>
     <a href="https://github.com/tailwindcss/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
     <a href="https://github.com/tailwindcss/tailwindcss/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>
 </p>
 
-------
+---
 
 ## Documentation
 

package/lib/cli/build/plugin.js

@@ -167,17 +167,10 @@ let state = {
         // TODO: When we make the postcss plugin async-capable this can become async
         let files = _fastglob.default.sync(this.contentPatterns.all);
         for (let file of files){
-            if (false) {
-                content.push({
-                    file,
-                    extension: _path.default.extname(file).slice(1)
-                });
-            } else {
-                content.push({
-                    content: _fs.default.readFileSync(_path.default.resolve(file), "utf8"),
-                    extension: _path.default.extname(file).slice(1)
-                });
-            }
+            content.push({
+                content: _fs.default.readFileSync(_path.default.resolve(file), "utf8"),
+                extension: _path.default.extname(file).slice(1)
+            });
         }
         // Resolve raw content in the tailwind config
         let rawContent = this.config.content.files.filter((file)=>{

package/lib/cli.js

@@ -1,7 +1,3 @@
 #!/usr/bin/env node
 "use strict";
-if (false) {
-    module.exports = require("./oxide/cli");
-} else {
-    module.exports = require("./cli/index");
-}
+module.exports = require("./cli/index");

package/lib/corePluginList.js

@@ -185,6 +185,7 @@ const _default = [
     "transitionDuration",
     "transitionTimingFunction",
     "willChange",
+    "contain",
     "content",
     "forcedColorAdjust"
 ];

package/lib/corePlugins.js

@@ -267,15 +267,15 @@ let variantPlugins = {
         }
     },
     directionVariants: ({ addVariant  })=>{
-        addVariant("ltr", ':is(:where([dir="ltr"]) &)');
-        addVariant("rtl", ':is(:where([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", [
@@ -284,10 +284,48 @@ let variantPlugins = {
                 "https://tailwindcss.com/docs/upgrade-guide#remove-dark-mode-configuration"
             ]);
         }
-        if (mode === "class") {
-            addVariant("dark", `:is(:where(${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  })=>{
@@ -1984,15 +2022,6 @@ let corePlugins = {
         matchUtilities({
             "space-x": (value)=>{
                 value = value === "0" ? "0px" : value;
-                if (false) {
-                    return {
-                        "& > :not([hidden]) ~ :not([hidden])": {
-                            "--tw-space-x-reverse": "0",
-                            "margin-inline-end": `calc(${value} * var(--tw-space-x-reverse))`,
-                            "margin-inline-start": `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`
-                        }
-                    };
-                }
                 return {
                     "& > :not([hidden]) ~ :not([hidden])": {
                         "--tw-space-x-reverse": "0",
@@ -2028,16 +2057,6 @@ let corePlugins = {
         matchUtilities({
             "divide-x": (value)=>{
                 value = value === "0" ? "0px" : value;
-                if (false) {
-                    return {
-                        "& > :not([hidden]) ~ :not([hidden])": {
-                            "@defaults border-width": {},
-                            "--tw-divide-x-reverse": "0",
-                            "border-inline-end-width": `calc(${value} * var(--tw-divide-x-reverse))`,
-                            "border-inline-start-width": `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`
-                        }
-                    };
-                }
                 return {
                     "& > :not([hidden]) ~ :not([hidden])": {
                         "@defaults border-width": {},
@@ -3654,6 +3673,9 @@ let corePlugins = {
             ".mix-blend-luminosity": {
                 "mix-blend-mode": "luminosity"
             },
+            ".mix-blend-plus-darker": {
+                "mix-blend-mode": "plus-darker"
+            },
             ".mix-blend-plus-lighter": {
                 "mix-blend-mode": "plus-lighter"
             }
@@ -3667,7 +3689,7 @@ let corePlugins = {
             `var(--tw-shadow)`
         ].join(", ");
         return function({ matchUtilities , addDefaults , theme  }) {
-            addDefaults(" box-shadow", {
+            addDefaults("box-shadow", {
                 "--tw-ring-offset-shadow": "0 0 #0000",
                 "--tw-ring-shadow": "0 0 #0000",
                 "--tw-shadow": "0 0 #0000",
@@ -4219,6 +4241,51 @@ let corePlugins = {
             ]
         ]
     ]),
+    contain: ({ addDefaults , addUtilities  })=>{
+        let cssContainValue = "var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style)";
+        addDefaults("contain", {
+            "--tw-contain-size": " ",
+            "--tw-contain-layout": " ",
+            "--tw-contain-paint": " ",
+            "--tw-contain-style": " "
+        });
+        addUtilities({
+            ".contain-none": {
+                contain: "none"
+            },
+            ".contain-content": {
+                contain: "content"
+            },
+            ".contain-strict": {
+                contain: "strict"
+            },
+            ".contain-size": {
+                "@defaults contain": {},
+                "--tw-contain-size": "size",
+                contain: cssContainValue
+            },
+            ".contain-inline-size": {
+                "@defaults contain": {},
+                "--tw-contain-size": "inline-size",
+                contain: cssContainValue
+            },
+            ".contain-layout": {
+                "@defaults contain": {},
+                "--tw-contain-layout": "layout",
+                contain: cssContainValue
+            },
+            ".contain-paint": {
+                "@defaults contain": {},
+                "--tw-contain-paint": "paint",
+                contain: cssContainValue
+            },
+            ".contain-style": {
+                "@defaults contain": {},
+                "--tw-contain-style": "style",
+                contain: cssContainValue
+            }
+        });
+    },
     content: (0, _createUtilityPlugin.default)("content", [
         [
             "content",

package/lib/css/preflight.css

@@ -175,6 +175,7 @@ textarea {
   font-size: 100%; /* 1 */
   font-weight: inherit; /* 1 */
   line-height: inherit; /* 1 */
+  letter-spacing: inherit; /* 1 */
   color: inherit; /* 1 */
   margin: 0; /* 2 */
   padding: 0; /* 3 */
@@ -195,9 +196,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

@@ -29,12 +29,8 @@ function _interop_require_default(obj) {
 let defaults = {
     optimizeUniversalDefaults: false,
     generalizedModifiers: true,
-    get disableColorOpacityUtilitiesByDefault () {
-        return false;
-    },
-    get relativeContentPathsByDefault () {
-        return false;
-    }
+    disableColorOpacityUtilitiesByDefault: false,
+    relativeContentPathsByDefault: false
 };
 let featureFlags = {
     future: [

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");
 function _interop_require_default(obj) {
@@ -29,11 +28,42 @@ 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("/");
+}
 function parseCandidateFiles(context, tailwindConfig) {
     let files = tailwindConfig.content.files;
     // 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 = [];
@@ -60,6 +90,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(/(?<!\\)([\[\]\(\)])/g, "\\$1");
     let contentPath = {
         original: filePath,
         base: filePath,
@@ -81,7 +114,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

@@ -128,7 +128,7 @@ function* buildRegExps(context) {
             ]),
             // With variant modifier (e.g.: group-[..]/modifier)
             _regex.pattern([
-                /([^\s"'`\[\\]+-)?\[[^\s"'`]+\]\/\w+/,
+                /([^\s"'`\[\\]+-)?\[[^\s"'`]+\]\/[\w_-]+/,
                 separator
             ]),
             _regex.pattern([
@@ -144,7 +144,7 @@ function* buildRegExps(context) {
         _regex.any([
             // With variant modifier (e.g.: group-[..]/modifier)
             _regex.pattern([
-                /([^\s"'`\[\\]+-)?\[[^\s`]+\]\/\w+/,
+                /([^\s"'`\[\\]+-)?\[[^\s`]+\]\/[\w_-]+/,
                 separator
             ]),
             _regex.pattern([

package/lib/lib/expandApplyAtRules.js

@@ -380,6 +380,19 @@ function processApply(root, context, localCache) {
                 throw apply.error(`The \`${applyCandidate}\` class does not exist. If \`${applyCandidate}\` is a custom class, make sure it is defined within a \`@layer\` directive.`);
             }
             let rules = applyClassCache.get(applyCandidate);
+            // Verify that we can apply the class
+            for (let [, rule] of rules){
+                if (rule.type === "atrule") {
+                    continue;
+                }
+                rule.walkRules(()=>{
+                    throw apply.error([
+                        `The \`${applyCandidate}\` class cannot be used with \`@apply\` because \`@apply\` does not currently support nested CSS.`,
+                        "Rewrite the selector without nesting or configure the `tailwindcss/nesting` plugin:",
+                        "https://tailwindcss.com/docs/using-with-preprocessors#nesting"
+                    ].join("\n"));
+                });
+            }
             candidates.push([
                 applyCandidate,
                 important,

package/lib/lib/expandTailwindAtRules.js

@@ -154,37 +154,25 @@ function expandTailwindAtRules(context) {
         ]);
         let seen = new Set();
         env.DEBUG && console.time("Reading changed files");
-        if (false) {
-            // TODO: Pass through or implement `extractor`
-            for (let candidate of require("@tailwindcss/oxide").parseCandidateStringsFromFiles(context.changedContent)){
-                candidates.add(candidate);
-            }
-        // for (let { file, content, extension } of context.changedContent) {
-        //   let transformer = getTransformer(context.tailwindConfig, extension)
-        //   let extractor = getExtractor(context, extension)
-        //   getClassCandidatesOxide(file, transformer(content), extractor, candidates, seen)
-        // }
-        } else {
-            /** @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);
-                }));
-            }
+        /** @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");
         // ---
@@ -192,7 +180,7 @@ function expandTailwindAtRules(context) {
         let classCacheCount = context.classCache.size;
         env.DEBUG && console.time("Generate rules");
         env.DEBUG && console.time("Sorting candidates");
-        let sortedCandidates = false ? candidates : new Set([
+        let sortedCandidates = new Set([
             ...candidates
         ].sort((a, z)=>{
             if (a === z) return 0;

package/lib/lib/generateRules.js

@@ -162,6 +162,9 @@ function applyImportant(matches, classCandidate) {
         return matches;
     }
     let result = [];
+    function isInKeyframes(rule) {
+        return rule.parent && rule.parent.type === "atrule" && rule.parent.name === "keyframes";
+    }
     for (let [meta, rule] of matches){
         let container = _postcss.default.root({
             nodes: [
@@ -169,6 +172,11 @@ function applyImportant(matches, classCandidate) {
             ]
         });
         container.walkRules((r)=>{
+            // Declarations inside keyframes cannot be marked as important
+            // They will be ignored by the browser
+            if (isInKeyframes(r)) {
+                return;
+            }
             let ast = (0, _postcssselectorparser.default)().astSync(r.selector);
             // Remove extraneous selectors that do not include the base candidate
             ast.each((sel)=>(0, _formatVariantSelector.eliminateIrrelevantSelectors)(sel, classCandidate));
@@ -506,12 +514,15 @@ function extractArbitraryProperty(classCandidate, context) {
     if (!isParsableCssValue(property, normalized)) {
         return null;
     }
-    let sort = context.offsets.arbitraryProperty();
+    let sort = context.offsets.arbitraryProperty(classCandidate);
     return [
         [
             {
                 sort,
-                layer: "utilities"
+                layer: "utilities",
+                options: {
+                    respectImportant: true
+                }
             },
             ()=>({
                     [(0, _nameClass.asClass)(classCandidate)]: {

package/lib/lib/load-config.js

@@ -31,6 +31,10 @@ function lazyJiti() {
     return jiti !== null && jiti !== void 0 ? jiti : jiti = (0, _jiti.default)(__filename, {
         interopDefault: true,
         transform: (opts)=>{
+            // Sucrase can't transform import.meta so we have to use Babel
+            if (opts.source.includes("import.meta")) {
+                return require("jiti/dist/babel.js")(opts);
+            }
             return (0, _sucrase.transform)(opts.source, {
                 transforms: [
                     "typescript",

package/lib/lib/offsets.js

@@ -66,15 +66,19 @@ class Offsets {
             variants: 0n,
             parallelIndex: 0n,
             index: this.offsets[layer]++,
+            propertyOffset: 0n,
+            property: "",
             options: []
         };
     }
     /**
+   * @param {string} name
    * @returns {RuleOffset}
-   */ arbitraryProperty() {
+   */ arbitraryProperty(name) {
         return {
             ...this.create("utilities"),
-            arbitrary: 1n
+            arbitrary: 1n,
+            property: name
         };
     }
     /**
@@ -214,6 +218,10 @@ class Offsets {
         if (a.arbitrary !== b.arbitrary) {
             return a.arbitrary - b.arbitrary;
         }
+        // Always sort arbitrary properties alphabetically
+        if (a.propertyOffset !== b.propertyOffset) {
+            return a.propertyOffset - b.propertyOffset;
+        }
         // Sort utilities, components, etc… in the order they were registered
         return a.index - b.index;
     }
@@ -267,8 +275,49 @@ class Offsets {
    * @template T
    * @param {[RuleOffset, T][]} list
    * @returns {[RuleOffset, T][]}
+   */ sortArbitraryProperties(list) {
+        // Collect all known arbitrary properties
+        let known = new Set();
+        for (let [offset] of list){
+            if (offset.arbitrary === 1n) {
+                known.add(offset.property);
+            }
+        }
+        // No arbitrary properties? Nothing to do.
+        if (known.size === 0) {
+            return list;
+        }
+        // Sort the properties alphabetically
+        let properties = Array.from(known).sort();
+        // Create a map from the property name to its offset
+        let offsets = new Map();
+        let offset = 1n;
+        for (let property of properties){
+            offsets.set(property, offset++);
+        }
+        // Apply the sorted offsets to the list
+        return list.map((item)=>{
+            let [offset, rule] = item;
+            var _offsets_get;
+            offset = {
+                ...offset,
+                propertyOffset: (_offsets_get = offsets.get(offset.property)) !== null && _offsets_get !== void 0 ? _offsets_get : 0n
+            };
+            return [
+                offset,
+                rule
+            ];
+        });
+    }
+    /**
+   * @template T
+   * @param {[RuleOffset, T][]} list
+   * @returns {[RuleOffset, T][]}
    */ sort(list) {
+        // Sort arbitrary variants so they're in alphabetical order
         list = this.remapArbitraryVariantOffsets(list);
+        // Sort arbitrary properties so they're in alphabetical order
+        list = this.sortArbitraryProperties(list);
         return list.sort(([a], [b])=>(0, _bigSign.default)(this.compare(a, b)));
     }
 }

package/lib/lib/resolveDefaultsAtRules.js

@@ -111,7 +111,9 @@ function resolveDefaultsAtRules({ tailwindConfig  }) {
                         // we consider them separately because merging the declarations into
                         // a single rule will cause browsers that do not understand the
                         // vendor prefix to throw out the whole rule
-                        let selectorGroupName = selector.includes(":-") || selector.includes("::-") ? selector : "__DEFAULT__";
+                        // Additionally if a selector contains `:has` we also consider
+                        // it separately because FF only recently gained support for it
+                        let selectorGroupName = selector.includes(":-") || selector.includes("::-") || selector.includes(":has") ? selector : "__DEFAULT__";
                         var _selectorGroups_get;
                         let selectors = (_selectorGroups_get = selectorGroups.get(selectorGroupName)) !== null && _selectorGroups_get !== void 0 ? _selectorGroups_get : new Set();
                         selectorGroups.set(selectorGroupName, selectors);