@unocss/preset-mini 0.52.7 → 0.53.1

package/dist/index.cjs

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const extractorArbitraryVariants = require('@unocss/extractor-arbitrary-variants');
 const core = require('@unocss/core');
-require('./shared/preset-mini.c0eda31d.cjs');
-const _default$1 = require('./shared/preset-mini.b1ff13dc.cjs');
-const colors$1 = require('./shared/preset-mini.fcd935e5.cjs');
+require('./shared/preset-mini.daaac022.cjs');
+const _default$1 = require('./shared/preset-mini.89cf0040.cjs');
+const colors$1 = require('./shared/preset-mini.02aa6651.cjs');
 const colors = require('./shared/preset-mini.f3fc54d2.cjs');
-const _default = require('./shared/preset-mini.b00661a7.cjs');
-const _default$2 = require('./shared/preset-mini.3e77961f.cjs');
-require('./shared/preset-mini.dd2d059b.cjs');
+const _default = require('./shared/preset-mini.62c94926.cjs');
+const _default$2 = require('./shared/preset-mini.473275f7.cjs');
+require('./shared/preset-mini.c1922eb8.cjs');
 
 const preflights = [
   {

package/dist/index.mjs

@@ -1,13 +1,13 @@
 import { extractorArbitraryVariants } from '@unocss/extractor-arbitrary-variants';
 import { entriesToCss, toArray } from '@unocss/core';
-import './shared/preset-mini.f5158c55.mjs';
-import { r as rules } from './shared/preset-mini.3535c317.mjs';
-export { p as parseColor } from './shared/preset-mini.9dd74f3a.mjs';
+import './shared/preset-mini.a201ed79.mjs';
+import { r as rules } from './shared/preset-mini.629d3881.mjs';
+export { p as parseColor } from './shared/preset-mini.08cdeeea.mjs';
 export { c as colors } from './shared/preset-mini.1c66bf79.mjs';
-import { t as theme } from './shared/preset-mini.c8479548.mjs';
-export { t as theme } from './shared/preset-mini.c8479548.mjs';
-import { v as variants } from './shared/preset-mini.27c86dd4.mjs';
-import './shared/preset-mini.dfe8388f.mjs';
+import { t as theme } from './shared/preset-mini.c5ebe4cd.mjs';
+export { t as theme } from './shared/preset-mini.c5ebe4cd.mjs';
+import { v as variants } from './shared/preset-mini.19364a2e.mjs';
+import './shared/preset-mini.e2fa1eff.mjs';
 
 const preflights = [
   {

package/dist/rules.cjs

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const transform = require('./shared/preset-mini.c0eda31d.cjs');
-const _default = require('./shared/preset-mini.b1ff13dc.cjs');
-require('./shared/preset-mini.fcd935e5.cjs');
+const transform = require('./shared/preset-mini.daaac022.cjs');
+const _default = require('./shared/preset-mini.89cf0040.cjs');
+require('./shared/preset-mini.02aa6651.cjs');
 require('@unocss/core');
 
 

package/dist/rules.mjs

@@ -1,4 +1,4 @@
-export { I as alignments, F as appearance, w as appearances, b as bgColors, X as borderStyles, a as borders, r as boxShadows, V as boxShadowsBase, O as boxSizing, C as breaks, S as contains, c as contentVisibility, e as contents, v as cursors, d as displays, K as flexGridJustifiesAlignments, M as floats, q as fontSmoothings, p as fontStyles, f as fonts, Y as handlerBorderStyle, L as insets, H as justifies, o as opacity, G as orders, E as outline, D as overflows, J as placements, x as pointerEvents, u as positions, y as resizes, W as ringBase, s as rings, t as tabSizes, m as textAligns, n as textColors, i as textDecorations, g as textIndents, h as textOverflows, k as textShadows, j as textStrokes, l as textTransforms, T as textWraps, U as transformBase, Q as transforms, P as transitions, A as userSelects, Z as varEmpty, z as verticalAligns, B as whitespaces, R as willChange, N as zIndexes } from './shared/preset-mini.f5158c55.mjs';
-export { b as aspectRatio, c as containerParent, h as cssProperty, e as cssVariables, f as flex, g as gaps, a as grids, m as margins, p as paddings, q as questionMark, r as rules, s as sizes, d as svgUtilities } from './shared/preset-mini.3535c317.mjs';
-import './shared/preset-mini.9dd74f3a.mjs';
+export { I as alignments, F as appearance, w as appearances, b as bgColors, X as borderStyles, a as borders, r as boxShadows, V as boxShadowsBase, O as boxSizing, C as breaks, S as contains, c as contentVisibility, e as contents, v as cursors, d as displays, K as flexGridJustifiesAlignments, M as floats, q as fontSmoothings, p as fontStyles, f as fonts, Y as handlerBorderStyle, L as insets, H as justifies, o as opacity, G as orders, E as outline, D as overflows, J as placements, x as pointerEvents, u as positions, y as resizes, W as ringBase, s as rings, t as tabSizes, m as textAligns, n as textColors, i as textDecorations, g as textIndents, h as textOverflows, k as textShadows, j as textStrokes, l as textTransforms, T as textWraps, U as transformBase, Q as transforms, P as transitions, A as userSelects, Z as varEmpty, z as verticalAligns, B as whitespaces, R as willChange, N as zIndexes } from './shared/preset-mini.a201ed79.mjs';
+export { b as aspectRatio, c as containerParent, h as cssProperty, e as cssVariables, f as flex, g as gaps, a as grids, m as margins, p as paddings, q as questionMark, r as rules, s as sizes, d as svgUtilities } from './shared/preset-mini.629d3881.mjs';
+import './shared/preset-mini.08cdeeea.mjs';
 import '@unocss/core';

package/dist/shared/{preset-mini.fcd935e5.cjs → preset-mini.02aa6651.cjs}

@@ -173,7 +173,7 @@ function numberWithUnit(str) {
   if (!match)
     return;
   const [, n, unit] = match;
-  const num = parseFloat(n);
+  const num = Number.parseFloat(n);
   if (unit && !Number.isNaN(num))
     return `${round(num)}${unit}`;
 }
@@ -188,7 +188,7 @@ function rem(str) {
   if (!match)
     return;
   const [, n, unit] = match;
-  const num = parseFloat(n);
+  const num = Number.parseFloat(n);
   if (!Number.isNaN(num)) {
     if (num === 0)
       return "0";
@@ -202,7 +202,7 @@ function px(str) {
   if (!match)
     return;
   const [, n, unit] = match;
-  const num = parseFloat(n);
+  const num = Number.parseFloat(n);
   if (!Number.isNaN(num)) {
     if (num === 0)
       return "0";
@@ -212,7 +212,7 @@ function px(str) {
 function number(str) {
   if (!numberRE.test(str))
     return;
-  const num = parseFloat(str);
+  const num = Number.parseFloat(str);
   if (!Number.isNaN(num))
     return round(num);
 }
@@ -221,7 +221,7 @@ function percent(str) {
     str = str.slice(0, -1);
   if (!numberRE.test(str))
     return;
-  const num = parseFloat(str);
+  const num = Number.parseFloat(str);
   if (!Number.isNaN(num))
     return `${round(num / 100)}`;
 }
@@ -229,7 +229,7 @@ function fraction(str) {
   if (str === "full")
     return "100%";
   const [left, right] = str.split("/");
-  const num = parseFloat(left) / parseFloat(right);
+  const num = Number.parseFloat(left) / Number.parseFloat(right);
   if (!Number.isNaN(num)) {
     if (num === 0)
       return "0";
@@ -303,7 +303,7 @@ function time(str) {
   if (!match)
     return;
   const [, n, unit] = match;
-  const num = parseFloat(n);
+  const num = Number.parseFloat(n);
   if (!Number.isNaN(num)) {
     if (num === 0 && !unit)
       return "0s";
@@ -315,7 +315,7 @@ function degree(str) {
   if (!match)
     return;
   const [, n, unit] = match;
-  const num = parseFloat(n);
+  const num = Number.parseFloat(n);
   if (!Number.isNaN(num)) {
     if (num === 0)
       return "0";
@@ -362,7 +362,7 @@ const h = handler;
 const CONTROL_MINI_NO_NEGATIVE = "$$mini-no-negative";
 function directionSize(propertyPrefix) {
   return ([_, direction, size], { theme }) => {
-    const v = theme.spacing?.[size || "DEFAULT"] ?? handler.bracket.cssvar.global.auto.fraction.rem(size);
+    const v = theme.spacing?.[size || "DEFAULT"] ?? h.bracket.cssvar.global.auto.fraction.rem(size);
     if (v != null)
       return directionMap[direction].map((i) => [`${propertyPrefix}${i}`, v]);
   };
@@ -402,16 +402,16 @@ function parseColor$1(body, theme) {
   if (!name)
     return;
   let color;
-  const bracket = handler.bracketOfColor(main);
+  const bracket = h.bracketOfColor(main);
   const bracketOrMain = bracket || main;
-  if (handler.numberWithUnit(bracketOrMain))
+  if (h.numberWithUnit(bracketOrMain))
     return;
   if (bracketOrMain.match(/^#[\da-fA-F]+/g))
     color = bracketOrMain;
   else if (bracketOrMain.match(/^hex-[\da-fA-F]+/g))
     color = `#${bracketOrMain.slice(4)}`;
   else if (main.startsWith("$"))
-    color = handler.cssvar(main);
+    color = h.cssvar(main);
   color = color || bracket;
   if (!color) {
     const colorData = getThemeColor(theme, [main]);
@@ -447,7 +447,7 @@ function parseColor$1(body, theme) {
     no,
     color,
     cssColor: parseCssColor(color),
-    alpha: handler.bracket.cssvar.percent(opacity ?? "")
+    alpha: h.bracket.cssvar.percent(opacity ?? "")
   };
 }
 function colorResolver(property, varName, shouldPass) {

package/dist/shared/{preset-mini.9dd74f3a.mjs → preset-mini.08cdeeea.mjs}

@@ -171,7 +171,7 @@ function numberWithUnit(str) {
   if (!match)
     return;
   const [, n, unit] = match;
-  const num = parseFloat(n);
+  const num = Number.parseFloat(n);
   if (unit && !Number.isNaN(num))
     return `${round(num)}${unit}`;
 }
@@ -186,7 +186,7 @@ function rem(str) {
   if (!match)
     return;
   const [, n, unit] = match;
-  const num = parseFloat(n);
+  const num = Number.parseFloat(n);
   if (!Number.isNaN(num)) {
     if (num === 0)
       return "0";
@@ -200,7 +200,7 @@ function px(str) {
   if (!match)
     return;
   const [, n, unit] = match;
-  const num = parseFloat(n);
+  const num = Number.parseFloat(n);
   if (!Number.isNaN(num)) {
     if (num === 0)
       return "0";
@@ -210,7 +210,7 @@ function px(str) {
 function number(str) {
   if (!numberRE.test(str))
     return;
-  const num = parseFloat(str);
+  const num = Number.parseFloat(str);
   if (!Number.isNaN(num))
     return round(num);
 }
@@ -219,7 +219,7 @@ function percent(str) {
     str = str.slice(0, -1);
   if (!numberRE.test(str))
     return;
-  const num = parseFloat(str);
+  const num = Number.parseFloat(str);
   if (!Number.isNaN(num))
     return `${round(num / 100)}`;
 }
@@ -227,7 +227,7 @@ function fraction(str) {
   if (str === "full")
     return "100%";
   const [left, right] = str.split("/");
-  const num = parseFloat(left) / parseFloat(right);
+  const num = Number.parseFloat(left) / Number.parseFloat(right);
   if (!Number.isNaN(num)) {
     if (num === 0)
       return "0";
@@ -301,7 +301,7 @@ function time(str) {
   if (!match)
     return;
   const [, n, unit] = match;
-  const num = parseFloat(n);
+  const num = Number.parseFloat(n);
   if (!Number.isNaN(num)) {
     if (num === 0 && !unit)
       return "0s";
@@ -313,7 +313,7 @@ function degree(str) {
   if (!match)
     return;
   const [, n, unit] = match;
-  const num = parseFloat(n);
+  const num = Number.parseFloat(n);
   if (!Number.isNaN(num)) {
     if (num === 0)
       return "0";
@@ -360,7 +360,7 @@ const h = handler;
 const CONTROL_MINI_NO_NEGATIVE = "$$mini-no-negative";
 function directionSize(propertyPrefix) {
   return ([_, direction, size], { theme }) => {
-    const v = theme.spacing?.[size || "DEFAULT"] ?? handler.bracket.cssvar.global.auto.fraction.rem(size);
+    const v = theme.spacing?.[size || "DEFAULT"] ?? h.bracket.cssvar.global.auto.fraction.rem(size);
     if (v != null)
       return directionMap[direction].map((i) => [`${propertyPrefix}${i}`, v]);
   };
@@ -400,16 +400,16 @@ function parseColor$1(body, theme) {
   if (!name)
     return;
   let color;
-  const bracket = handler.bracketOfColor(main);
+  const bracket = h.bracketOfColor(main);
   const bracketOrMain = bracket || main;
-  if (handler.numberWithUnit(bracketOrMain))
+  if (h.numberWithUnit(bracketOrMain))
     return;
   if (bracketOrMain.match(/^#[\da-fA-F]+/g))
     color = bracketOrMain;
   else if (bracketOrMain.match(/^hex-[\da-fA-F]+/g))
     color = `#${bracketOrMain.slice(4)}`;
   else if (main.startsWith("$"))
-    color = handler.cssvar(main);
+    color = h.cssvar(main);
   color = color || bracket;
   if (!color) {
     const colorData = getThemeColor(theme, [main]);
@@ -445,7 +445,7 @@ function parseColor$1(body, theme) {
     no,
     color,
     cssColor: parseCssColor(color),
-    alpha: handler.bracket.cssvar.percent(opacity ?? "")
+    alpha: h.bracket.cssvar.percent(opacity ?? "")
   };
 }
 function colorResolver(property, varName, shouldPass) {
@@ -770,4 +770,4 @@ function parseCssSpaceColorValues(componentString) {
   };
 }
 
-export { CONTROL_MINI_NO_NEGATIVE as C, hasParseableColor as a, cornerMap as b, colorResolver as c, directionMap as d, colorToString as e, colorOpacityToString as f, globalKeywords as g, handler as h, colorableShadows as i, insetMap as j, positionMap as k, resolveBreakpoints as l, makeGlobalStaticRules as m, numberWithUnitRE as n, directionSize as o, parseColor$1 as p, getBracket as q, resolveVerticalBreakpoints as r, splitShorthand as s, getComponent as t, hex2rgba as u, parseCssColor as v, h as w, xyzMap as x, valueHandlers as y, getComponents as z };
+export { CONTROL_MINI_NO_NEGATIVE as C, hasParseableColor as a, cornerMap as b, colorResolver as c, directionMap as d, colorToString as e, colorOpacityToString as f, globalKeywords as g, h, colorableShadows as i, insetMap as j, positionMap as k, resolveBreakpoints as l, makeGlobalStaticRules as m, numberWithUnitRE as n, directionSize as o, parseColor$1 as p, getBracket as q, resolveVerticalBreakpoints as r, splitShorthand as s, getComponent as t, hex2rgba as u, parseCssColor as v, handler as w, xyzMap as x, valueHandlers as y, getComponents as z };

package/dist/shared/{preset-mini.27c86dd4.mjs → preset-mini.19364a2e.mjs}

@@ -1,6 +1,6 @@
-import { h as handler, l as resolveBreakpoints, q as getBracket, C as CONTROL_MINI_NO_NEGATIVE, t as getComponent } from './preset-mini.9dd74f3a.mjs';
+import { h, l as resolveBreakpoints, q as getBracket, C as CONTROL_MINI_NO_NEGATIVE, t as getComponent } from './preset-mini.08cdeeea.mjs';
 import { warnOnce, escapeRegExp, escapeSelector } from '@unocss/core';
-import { v as variantGetParameter, a as variantGetBracket, b as variantMatcher, c as variantParentMatcher } from './preset-mini.dfe8388f.mjs';
+import { v as variantGetParameter, a as variantGetBracket, b as variantMatcher, c as variantParentMatcher } from './preset-mini.e2fa1eff.mjs';
 
 const variantAria = {
   name: "aria",
@@ -8,7 +8,7 @@ const variantAria = {
     const variant = variantGetParameter("aria-", matcher, ctx.generator.config.separators);
     if (variant) {
       const [match, rest] = variant;
-      const aria = handler.bracket(match) ?? ctx.theme.aria?.[match] ?? "";
+      const aria = h.bracket(match) ?? ctx.theme.aria?.[match] ?? "";
       if (aria) {
         return {
           matcher: rest,
@@ -22,7 +22,7 @@ const variantAria = {
 function calcMaxWidthBySize(size) {
   const value = size.match(/^-?[0-9]+\.?[0-9]*/)?.[0] || "";
   const unit = size.slice(value.length);
-  const maxWidth = parseFloat(value) - 0.1;
+  const maxWidth = Number.parseFloat(value) - 0.1;
   return Number.isNaN(maxWidth) ? size : `${maxWidth}${unit}`;
 }
 function variantBreakpoints() {
@@ -99,7 +99,7 @@ function scopeMatcher(name, combinator) {
         if (!body)
           return;
       }
-      let bracketValue = handler.bracket(body[0]) ?? "";
+      let bracketValue = h.bracket(body[0]) ?? "";
       if (bracketValue === "")
         bracketValue = "*";
       return {
@@ -126,10 +126,10 @@ const variantContainerQuery = {
     const variant = variantGetParameter("@", matcher, ctx.generator.config.separators);
     if (variant) {
       const [match, rest, label] = variant;
-      const unbracket = handler.bracket(match);
+      const unbracket = h.bracket(match);
       let container;
       if (unbracket) {
-        const minWidth = handler.numberWithUnit(unbracket);
+        const minWidth = h.numberWithUnit(unbracket);
         if (minWidth)
           container = `(min-width: ${minWidth})`;
       } else {
@@ -170,7 +170,7 @@ const variantDataAttribute = {
     const variant = variantGetParameter("data-", matcher, ctx.generator.config.separators);
     if (variant) {
       const [match, rest] = variant;
-      const dataAttribute = handler.bracket(match) ?? ctx.theme.data?.[match] ?? "";
+      const dataAttribute = h.bracket(match) ?? ctx.theme.data?.[match] ?? "";
       if (dataAttribute) {
         return {
           matcher: rest,
@@ -192,7 +192,7 @@ const variantSelector = {
     const variant = variantGetBracket("selector-", matcher, ctx.generator.config.separators);
     if (variant) {
       const [match, rest] = variant;
-      const selector = handler.bracket(match);
+      const selector = h.bracket(match);
       if (selector) {
         return {
           matcher: rest,
@@ -208,7 +208,7 @@ const variantCssLayer = {
     const variant = variantGetParameter("layer-", matcher, ctx.generator.config.separators);
     if (variant) {
       const [match, rest] = variant;
-      const layer = handler.bracket(match) ?? match;
+      const layer = h.bracket(match) ?? match;
       if (layer) {
         return {
           matcher: rest,
@@ -227,7 +227,7 @@ const variantInternalLayer = {
     const variant = variantGetParameter("uno-layer-", matcher, ctx.generator.config.separators);
     if (variant) {
       const [match, rest] = variant;
-      const layer = handler.bracket(match) ?? match;
+      const layer = h.bracket(match) ?? match;
       if (layer) {
         return {
           matcher: rest,
@@ -243,7 +243,7 @@ const variantScope = {
     const variant = variantGetBracket("scope-", matcher, ctx.generator.config.separators);
     if (variant) {
       const [match, rest] = variant;
-      const scope = handler.bracket(match);
+      const scope = h.bracket(match);
       if (scope) {
         return {
           matcher: rest,
@@ -270,7 +270,7 @@ const variantVariables = {
     }
     if (newMatcher == null)
       return;
-    const variant = handler.bracket(match) ?? "";
+    const variant = h.bracket(match) ?? "";
     const useParent = variant.startsWith("@");
     if (!(useParent || variant.includes("&")))
       return;
@@ -374,7 +374,7 @@ const variantCustomMedia = {
     const variant = variantGetParameter("media-", matcher, ctx.generator.config.separators);
     if (variant) {
       const [match, rest] = variant;
-      let media = handler.bracket(match) ?? "";
+      let media = h.bracket(match) ?? "";
       if (media === "")
         media = ctx.theme.media?.[match] ?? "";
       if (media) {
@@ -397,7 +397,7 @@ const variantSupports = {
     const variant = variantGetParameter("supports-", matcher, ctx.generator.config.separators);
     if (variant) {
       const [match, rest] = variant;
-      let supports = handler.bracket(match) ?? "";
+      let supports = h.bracket(match) ?? "";
       if (supports === "")
         supports = ctx.theme.supports?.[match] ?? "";
       if (supports) {
@@ -422,26 +422,27 @@ const PseudoClasses = Object.fromEntries([
   "visited",
   "target",
   ["open", "[open]"],
-  "hover",
-  "active",
-  "focus-visible",
-  "focus-within",
-  "focus",
-  "autofill",
-  "enabled",
-  "disabled",
-  "read-only",
-  "read-write",
-  "placeholder-shown",
   "default",
   "checked",
   "indeterminate",
+  "placeholder-shown",
+  "autofill",
+  "optional",
+  "required",
   "valid",
   "invalid",
   "in-range",
   "out-of-range",
-  "required",
-  "optional",
+  "read-only",
+  "read-write",
+  "empty",
+  "focus-within",
+  "hover",
+  "focus",
+  "focus-visible",
+  "active",
+  "enabled",
+  "disabled",
   "root",
   "empty",
   ["even-of-type", ":nth-of-type(even)"],
@@ -462,43 +463,32 @@ const PseudoClasses = Object.fromEntries([
   ["marker", "::marker"],
   ["file", "::file-selector-button"]
 ].map((key) => Array.isArray(key) ? key : [key, `:${key}`]));
+const PseudoClassesKeys = Object.keys(PseudoClasses);
 const PseudoClassesColon = Object.fromEntries([
   ["backdrop", "::backdrop"]
 ].map((key) => Array.isArray(key) ? key : [key, `:${key}`]));
+const PseudoClassesColonKeys = Object.keys(PseudoClassesColon);
 const PseudoClassFunctions = [
   "not",
   "is",
   "where",
   "has"
 ];
-const PseudoClassesStr = Object.entries(PseudoClasses).filter(([, pseudo]) => !pseudo.startsWith("::")).map(([key]) => key).join("|");
-const PseudoClassesColonStr = Object.entries(PseudoClassesColon).filter(([, pseudo]) => !pseudo.startsWith("::")).map(([key]) => key).join("|");
+const PseudoClassesStr = Object.entries(PseudoClasses).filter(([, pseudo]) => !pseudo.startsWith("::")).map(([key]) => key).sort((a, b) => b.length - a.length).join("|");
+const PseudoClassesColonStr = Object.entries(PseudoClassesColon).filter(([, pseudo]) => !pseudo.startsWith("::")).map(([key]) => key).sort((a, b) => b.length - a.length).join("|");
 const PseudoClassFunctionsStr = PseudoClassFunctions.join("|");
-function pseudoModifier(pseudo) {
-  if (pseudo === "focus") {
-    return {
-      sort: 10,
-      noMerge: true
-    };
-  }
-  if (pseudo === "active") {
-    return {
-      sort: 20,
-      noMerge: true
-    };
-  }
-}
 function taggedPseudoClassMatcher(tag, parent, combinator) {
   const rawRE = new RegExp(`^(${escapeRegExp(parent)}:)(\\S+)${escapeRegExp(combinator)}\\1`);
   let splitRE;
   let pseudoRE;
   let pseudoColonRE;
+  let pseudoVarRE;
   const matchBracket = (input) => {
     const body = variantGetBracket(`${tag}-`, input, []);
     if (!body)
       return;
     const [match, rest] = body;
-    const bracketValue = handler.bracket(match);
+    const bracketValue = h.bracket(match);
     if (bracketValue == null)
       return;
     const label = rest.split(splitRE, 1)?.[0] ?? "";
@@ -525,6 +515,19 @@ function taggedPseudoClassMatcher(tag, parent, combinator) {
       pseudoKey
     ];
   };
+  const matchPseudoVar = (input) => {
+    const match = input.match(pseudoVarRE);
+    if (!match)
+      return;
+    const [original, fn, pseudoValue] = match;
+    const label = match[3] ?? "";
+    const pseudo = `:${fn}(${pseudoValue})`;
+    return [
+      label,
+      input.slice(original.length),
+      `${parent}${escapeSelector(label)}${pseudo}`
+    ];
+  };
   return {
     name: `pseudo:${tag}`,
     match(input, ctx) {
@@ -532,10 +535,11 @@ function taggedPseudoClassMatcher(tag, parent, combinator) {
         splitRE = new RegExp(`(?:${ctx.generator.config.separators.join("|")})`);
         pseudoRE = new RegExp(`^${tag}-(?:(?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))(?:(/\\w+))?(?:${ctx.generator.config.separators.join("|")})`);
         pseudoColonRE = new RegExp(`^${tag}-(?:(?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesColonStr}))(?:(/\\w+))?(?:${ctx.generator.config.separators.filter((x) => x !== "-").join("|")})`);
+        pseudoVarRE = new RegExp(`^${tag}-(?:(${PseudoClassFunctionsStr})-)?\\[(.+)\\](?:(/\\w+))?(?:${ctx.generator.config.separators.filter((x) => x !== "-").join("|")})`);
       }
       if (!input.startsWith(tag))
         return;
-      const result = matchBracket(input) || matchPseudo(input);
+      const result = matchBracket(input) || matchPseudo(input) || matchPseudoVar(input);
       if (!result)
         return;
       const [label, matcher, prefix, pseudoName = ""] = result;
@@ -546,7 +550,7 @@ function taggedPseudoClassMatcher(tag, parent, combinator) {
         handle: (input2, next) => next({
           ...input2,
           prefix: `${prefix}${combinator}${input2.prefix}`.replace(rawRE, "$1$2:"),
-          ...pseudoModifier(pseudoName)
+          sort: PseudoClassesKeys.indexOf(pseudoName) ?? PseudoClassesColonKeys.indexOf(pseudoName)
         })
       };
     },
@@ -563,8 +567,8 @@ const excludedPseudo = [
   "::-webkit-scrollbar-track-piece",
   "::file-selector-button"
 ];
-const PseudoClassesAndElementsStr = Object.entries(PseudoClasses).map(([key]) => key).join("|");
-const PseudoClassesAndElementsColonStr = Object.entries(PseudoClassesColon).map(([key]) => key).join("|");
+const PseudoClassesAndElementsStr = Object.entries(PseudoClasses).map(([key]) => key).sort((a, b) => b.length - a.length).join("|");
+const PseudoClassesAndElementsColonStr = Object.entries(PseudoClassesColon).map(([key]) => key).sort((a, b) => b.length - a.length).join("|");
 function variantPseudoClassesAndElements() {
   let PseudoClassesAndElementsRE;
   let PseudoClassesAndElementsColonRE;
@@ -578,6 +582,11 @@ function variantPseudoClassesAndElements() {
       const match = input.match(PseudoClassesAndElementsRE) || input.match(PseudoClassesAndElementsColonRE);
       if (match) {
         const pseudo = PseudoClasses[match[1]] || PseudoClassesColon[match[1]] || `:${match[1]}`;
+        let index = PseudoClassesKeys.indexOf(match[1]);
+        if (index === -1)
+          index = PseudoClassesColonKeys.indexOf(match[1]);
+        if (index === -1)
+          index = void 0;
         return {
           matcher: input.slice(match[0].length),
           handle: (input2, next) => {
@@ -589,7 +598,8 @@ function variantPseudoClassesAndElements() {
             return next({
               ...input2,
               ...selectors,
-              ...pseudoModifier(match[1])
+              sort: index,
+              noMerge: true
             });
           }
         };
@@ -602,16 +612,19 @@ function variantPseudoClassesAndElements() {
 function variantPseudoClassFunctions() {
   let PseudoClassFunctionsRE;
   let PseudoClassColonFunctionsRE;
+  let PseudoClassVarFunctionRE;
   return {
     match(input, ctx) {
       if (!(PseudoClassFunctionsRE && PseudoClassColonFunctionsRE)) {
         PseudoClassFunctionsRE = new RegExp(`^(${PseudoClassFunctionsStr})-(${PseudoClassesStr})(?:${ctx.generator.config.separators.join("|")})`);
         PseudoClassColonFunctionsRE = new RegExp(`^(${PseudoClassFunctionsStr})-(${PseudoClassesColonStr})(?:${ctx.generator.config.separators.filter((x) => x !== "-").join("|")})`);
+        PseudoClassVarFunctionRE = new RegExp(`^(${PseudoClassFunctionsStr})-(\\[.+\\])(?:${ctx.generator.config.separators.filter((x) => x !== "-").join("|")})`);
       }
-      const match = input.match(PseudoClassFunctionsRE) || input.match(PseudoClassColonFunctionsRE);
+      const match = input.match(PseudoClassFunctionsRE) || input.match(PseudoClassColonFunctionsRE) || input.match(PseudoClassVarFunctionRE);
       if (match) {
         const fn = match[1];
-        const pseudo = PseudoClasses[match[2]] || PseudoClassesColon[match[2]] || `:${match[2]}`;
+        const fnVal = getBracket(match[2], "[", "]");
+        const pseudo = fnVal ? h.bracket(match[2]) : PseudoClasses[match[2]] || PseudoClassesColon[match[2]] || `:${match[2]}`;
         return {
           matcher: input.slice(match[0].length),
           selector: (s) => `${s}:${fn}(${pseudo})`
@@ -632,7 +645,7 @@ function variantTaggedPseudoClasses(options = {}) {
   ];
 }
 const PartClassesRE = /(part-\[(.+)]:)(.+)/;
-const partClasses = {
+const variantPartClasses = {
   match(input) {
     const match = input.match(PartClassesRE);
     if (match) {
@@ -663,7 +676,7 @@ function variants(options) {
     variantPseudoClassesAndElements(),
     variantPseudoClassFunctions(),
     ...variantTaggedPseudoClasses(options),
-    partClasses,
+    variantPartClasses,
     ...variantColorsMediaOrClass(options),
     ...variantLanguageDirections,
     variantScope,
@@ -672,4 +685,4 @@ function variants(options) {
   ];
 }
 
-export { variantAria as a, variantBreakpoints as b, calcMaxWidthBySize as c, variantCombinators as d, variantContainerQuery as e, variantColorsMediaOrClass as f, variantDataAttribute as g, variantLanguageDirections as h, variantImportant as i, variantPrint as j, variantCustomMedia as k, variantSelector as l, variantCssLayer as m, variantInternalLayer as n, variantScope as o, variantVariables as p, variantNegative as q, variantPseudoClassesAndElements as r, variantPseudoClassFunctions as s, variantTaggedPseudoClasses as t, partClasses as u, variants as v, variantSupports as w };
+export { variantAria as a, variantBreakpoints as b, calcMaxWidthBySize as c, variantCombinators as d, variantContainerQuery as e, variantColorsMediaOrClass as f, variantDataAttribute as g, variantLanguageDirections as h, variantImportant as i, variantPrint as j, variantCustomMedia as k, variantSelector as l, variantCssLayer as m, variantInternalLayer as n, variantScope as o, variantVariables as p, variantNegative as q, variantPseudoClassesAndElements as r, variantPseudoClassFunctions as s, variantTaggedPseudoClasses as t, variantPartClasses as u, variants as v, variantSupports as w };