tailwindcss 0.0.0-insiders.f667746 → 0.0.0-insiders.f69a46b

package/lib/corePlugins.js

@@ -82,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');
@@ -265,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', [
@@ -282,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 })=>{

package/lib/css/preflight.css

@@ -195,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/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

@@ -82,7 +82,11 @@ function* buildRegExps(context) {
         // 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([

package/lib/lib/generateRules.js

@@ -163,6 +163,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: [
@@ -170,6 +173,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));
@@ -504,7 +512,7 @@ function extractArbitraryProperty(classCandidate, context) {
     if (!isParsableCssValue(property, normalized)) {
         return null;
     }
-    let sort = context.offsets.arbitraryProperty();
+    let sort = context.offsets.arbitraryProperty(classCandidate);
     return [
         [
             {

package/lib/lib/load-config.js

@@ -25,7 +25,7 @@ function _interop_require_default(obj) {
 }
 let jiti = null;
 function useCustomJiti(_jiti) {
-    jiti = _jiti;
+    jiti = _jiti();
 }
 function lazyJiti() {
     return jiti !== null && jiti !== void 0 ? jiti : jiti = (0, _jiti.default)(__filename, {

package/lib/lib/offsets.js

@@ -28,15 +28,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
         };
     }
     /**
@@ -176,6 +180,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;
     }
@@ -229,8 +237,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)));
     }
     constructor(){

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);

package/lib/lib/setupContextUtils.js

@@ -742,6 +742,7 @@ function resolvePlugins(context, root) {
     // TODO: This is a workaround for backwards compatibility, since custom variants
     // were historically sorted before screen/stackable variants.
     let beforeVariants = [
+        _corePlugins.variantPlugins['childVariant'],
         _corePlugins.variantPlugins['pseudoElementVariants'],
         _corePlugins.variantPlugins['pseudoClassVariants'],
         _corePlugins.variantPlugins['hasVariants'],
@@ -750,15 +751,31 @@ function resolvePlugins(context, root) {
     ];
     let afterVariants = [
         _corePlugins.variantPlugins['supportsVariants'],
-        _corePlugins.variantPlugins['directionVariants'],
         _corePlugins.variantPlugins['reducedMotionVariants'],
         _corePlugins.variantPlugins['prefersContrastVariants'],
-        _corePlugins.variantPlugins['forcedColorsVariants'],
-        _corePlugins.variantPlugins['darkVariants'],
-        _corePlugins.variantPlugins['printVariant'],
         _corePlugins.variantPlugins['screenVariants'],
-        _corePlugins.variantPlugins['orientationVariants']
+        _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,

package/lib/util/dataTypes.js

@@ -141,7 +141,13 @@ function normalize(value, context = null, isRoot = true) {
         'keyboard-inset-bottom',
         'keyboard-inset-left',
         'keyboard-inset-width',
-        'keyboard-inset-height'
+        'keyboard-inset-height',
+        'radial-gradient',
+        'linear-gradient',
+        'conic-gradient',
+        'repeating-radial-gradient',
+        'repeating-linear-gradient',
+        'repeating-conic-gradient'
     ];
     return value.replace(/(calc|min|max|clamp)\(.+\)/g, (match)=>{
         let result = '';
@@ -187,6 +193,10 @@ function normalize(value, context = null, isRoot = true) {
                 result += consumeUntil([
                     ')'
                 ]);
+            } else if (peek('[')) {
+                result += consumeUntil([
+                    ']'
+                ]);
             } else if ([
                 '+',
                 '-',

package/lib/util/pseudoElements.js

@@ -114,6 +114,9 @@ let elementProperties = {
         'terminal',
         'jumpable'
     ],
+    ':where': [],
+    ':is': [],
+    ':has': [],
     // The default value is used when the pseudo-element is not recognized
     // Because it's not recognized, we don't know if it's terminal or not
     // So we assume it can be moved AND can have user-action pseudo classes attached to it

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "0.0.0-insiders.f667746",
+  "version": "0.0.0-insiders.f69a46b",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -44,47 +44,47 @@
   ],
   "devDependencies": {
     "@swc/cli": "^0.1.63",
-    "@swc/core": "^1.3.95",
+    "@swc/core": "^1.3.101",
     "@swc/jest": "^0.2.29",
     "@swc/register": "^0.1.10",
     "concurrently": "^8.0.1",
-    "eslint": "^8.52.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^4.2.1",
     "jest": "^29.7.0",
     "jest-diff": "^29.7.0",
     "prettier": "^2.8.8",
     "rimraf": "^5.0.0",
     "source-map-js": "^1.0.2",
-    "turbo": "^1.10.16"
+    "turbo": "^1.12.3"
   },
   "dependencies": {
     "@alloc/quick-lru": "^5.2.0",
-    "@tailwindcss/oxide": "0.0.0-insiders.f667746",
+    "@tailwindcss/oxide": "0.0.0-insiders.f69a46b",
     "arg": "^5.0.2",
-    "browserslist": "^4.22.1",
-    "chokidar": "^3.5.3",
+    "browserslist": "^4.22.3",
+    "chokidar": "^3.6.0",
     "didyoumean": "^1.2.2",
     "dlv": "^1.1.3",
     "fast-glob": "^3.3.2",
     "glob-parent": "^6.0.2",
     "is-glob": "^4.0.3",
     "jiti": "^1.21.0",
-    "lightningcss": "^1.22.1",
+    "lightningcss": "^1.23.0",
     "lilconfig": "^3.0.0",
     "micromatch": "^4.0.5",
     "normalize-path": "^3.0.0",
     "object-hash": "^3.0.0",
     "picocolors": "^1.0.0",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.35",
     "postcss-import": "^15.1.0",
     "postcss-js": "^4.0.1",
     "postcss-load-config": "^4.0.2",
     "postcss-nested": "^6.0.1",
-    "postcss-selector-parser": "^6.0.12",
+    "postcss-selector-parser": "^6.0.15",
     "postcss-value-parser": "^4.2.0",
     "resolve": "^1.22.8",
-    "sucrase": "^3.34.0"
+    "sucrase": "^3.35.0"
   },
   "browserslist": [
     "defaults and supports css-variables and supports css-matches-pseudo",

package/src/corePlugins.js

@@ -24,6 +24,9 @@ import { normalize } from './util/dataTypes'
 import { INTERNAL_FEATURES } from './lib/setupContextUtils'
 
 export let variantPlugins = {
+  childVariant: ({ addVariant }) => {
+    addVariant('*', '& > *')
+  },
   pseudoElementVariants: ({ addVariant }) => {
     addVariant('first-letter', '&::first-letter')
     addVariant('first-line', '&::first-line')
@@ -203,8 +206,8 @@ export 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 }) => {
@@ -213,7 +216,7 @@ export let variantPlugins = {
   },
 
   darkVariants: ({ config, addVariant }) => {
-    let [mode, className = '.dark'] = [].concat(config('darkMode', 'media'))
+    let [mode, selector = '.dark'] = [].concat(config('darkMode', 'media'))
 
     if (mode === false) {
       mode = 'media'
@@ -224,10 +227,49 @@ export let variantPlugins = {
       ])
     }
 
-    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.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.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} &)`)
     }
   },
 

package/src/css/preflight.css

@@ -195,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/src/lib/content.js

@@ -4,11 +4,48 @@ import fs from 'fs'
 import path from 'path'
 import isGlob from 'is-glob'
 import fastGlob from 'fast-glob'
-import normalizePath from 'normalize-path'
 import { parseGlob } from '../util/parseGlob'
 import { env } from './sharedState'
 import { resolveContentPaths } from '@tailwindcss/oxide'
 
+/*!
+ * 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 */
 
@@ -105,6 +142,10 @@ export function parseCandidateFiles(context, tailwindConfig) {
  * @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,

package/src/lib/defaultExtractor.js

@@ -40,7 +40,12 @@ function* buildRegExps(context) {
     // 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(

package/src/lib/generateRules.js

@@ -118,10 +118,20 @@ function applyImportant(matches, classCandidate) {
 
   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.root({ nodes: [rule.clone()] })
 
     container.walkRules((r) => {
+      // Declarations inside keyframes cannot be marked as important
+      // They will be ignored by the browser
+      if (isInKeyframes(r)) {
+        return
+      }
+
       let ast = selectorParser().astSync(r.selector)
 
       // Remove extraneous selectors that do not include the base candidate
@@ -497,7 +507,7 @@ function extractArbitraryProperty(classCandidate, context) {
     return null
   }
 
-  let sort = context.offsets.arbitraryProperty()
+  let sort = context.offsets.arbitraryProperty(classCandidate)
 
   return [
     [

package/src/lib/load-config.ts

@@ -8,8 +8,8 @@ let jiti: ReturnType<typeof jitiFactory> | null = null
 // @internal
 // This WILL be removed in some future release
 // If you rely on this your stuff WILL break
-export function useCustomJiti(_jiti: ReturnType<typeof jitiFactory>) {
-  jiti = _jiti
+export function useCustomJiti(_jiti: () => ReturnType<typeof jitiFactory>) {
+  jiti = _jiti()
 }
 
 function lazyJiti() {

package/src/lib/offsets.js

@@ -24,6 +24,8 @@ import { remapBitfield } from './remap-bitfield.js'
  * @property {bigint} variants Dynamic size. 1 bit per registered variant. 0n means no variants
  * @property {bigint} parallelIndex Rule index for the parallel variant. 0 if not applicable.
  * @property {bigint} index Index of the rule / utility in its given *parent* layer. Monotonically increasing.
+ * @property {bigint} propertyOffset Offset for the arbitrary property. Only valid after sorting.
+ * @property {string} property Name/Value of the arbitrary property.
  * @property {VariantOption[]} options Some information on how we can sort arbitrary variants
  */
 
@@ -88,17 +90,21 @@ export 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,
+      property: name,
     }
   }
 
@@ -262,6 +268,11 @@ export class Offsets {
       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
   }
@@ -320,14 +331,62 @@ export 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
+
+      offset = {
+        ...offset,
+        propertyOffset: offsets.get(offset.property) ?? 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]) => bigSign(this.compare(a, b)))
   }
 }

package/src/lib/resolveDefaultsAtRules.js

@@ -104,8 +104,12 @@ export default 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
+            // 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 : '__DEFAULT__'
+              selector.includes(':-') || selector.includes('::-') || selector.includes(':has')
+                ? selector
+                : '__DEFAULT__'
 
             let selectors = selectorGroups.get(selectorGroupName) ?? new Set()
             selectorGroups.set(selectorGroupName, selectors)

package/src/lib/setupContextUtils.js

@@ -746,6 +746,7 @@ function resolvePlugins(context, root) {
   // TODO: This is a workaround for backwards compatibility, since custom variants
   // were historically sorted before screen/stackable variants.
   let beforeVariants = [
+    variantPlugins['childVariant'],
     variantPlugins['pseudoElementVariants'],
     variantPlugins['pseudoClassVariants'],
     variantPlugins['hasVariants'],
@@ -754,16 +755,37 @@ function resolvePlugins(context, root) {
   ]
   let afterVariants = [
     variantPlugins['supportsVariants'],
-    variantPlugins['directionVariants'],
     variantPlugins['reducedMotionVariants'],
     variantPlugins['prefersContrastVariants'],
-    variantPlugins['forcedColorsVariants'],
-    variantPlugins['darkVariants'],
-    variantPlugins['printVariant'],
     variantPlugins['screenVariants'],
     variantPlugins['orientationVariants'],
+    variantPlugins['directionVariants'],
+    variantPlugins['darkVariants'],
+    variantPlugins['forcedColorsVariants'],
+    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 = [
+      variantPlugins['supportsVariants'],
+      variantPlugins['reducedMotionVariants'],
+      variantPlugins['prefersContrastVariants'],
+      variantPlugins['darkVariants'],
+      variantPlugins['screenVariants'],
+      variantPlugins['orientationVariants'],
+      variantPlugins['directionVariants'],
+      variantPlugins['forcedColorsVariants'],
+      variantPlugins['printVariant'],
+    ]
+  }
+
   return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins]
 }
 

package/src/util/dataTypes.js

@@ -107,6 +107,13 @@ function normalizeMathOperatorSpacing(value) {
     'keyboard-inset-left',
     'keyboard-inset-width',
     'keyboard-inset-height',
+
+    'radial-gradient',
+    'linear-gradient',
+    'conic-gradient',
+    'repeating-radial-gradient',
+    'repeating-linear-gradient',
+    'repeating-conic-gradient',
   ]
 
   return value.replace(/(calc|min|max|clamp)\(.+\)/g, (match) => {
@@ -162,6 +169,11 @@ function normalizeMathOperatorSpacing(value) {
         result += consumeUntil([')'])
       }
 
+      // Don't break CSS grid track names
+      else if (peek('[')) {
+        result += consumeUntil([']'])
+      }
+
       // Handle operators
       else if (
         ['+', '-', '*', '/'].includes(char) &&

package/src/util/pseudoElements.js

@@ -60,6 +60,10 @@ let elementProperties = {
   ':first-letter': ['terminal', 'jumpable'],
   ':first-line': ['terminal', 'jumpable'],
 
+  ':where': [],
+  ':is': [],
+  ':has': [],
+
   // The default value is used when the pseudo-element is not recognized
   // Because it's not recognized, we don't know if it's terminal or not
   // So we assume it can be moved AND can have user-action pseudo classes attached to it

package/types/config.d.ts

@@ -75,6 +75,13 @@ type DarkModeConfig =
   | 'class'
   // Use the `class` strategy with a custom class instead of `.dark`.
   | ['class', string]
+  // Use the `selector` strategy — same as `class` but uses `:where()` for more predicable behavior
+  | 'selector'
+  // Use the `selector` strategy with a custom selector instead of `.dark`.
+  | ['selector', string]
+  // Use the `variant` strategy, which allows you to completely customize the selector
+  // It takes a string or an array of strings, which are passed directly to `addVariant()`
+  | ['variant', string | string[]]
 
 type Screen = { raw: string } | { min: string } | { max: string } | { min: string; max: string }
 type ScreensConfig = string[] | KeyValuePair<string, string | Screen | Screen[]>