@unocss/preset-mini 0.22.2 → 0.22.3

package/dist/chunks/default2.cjs

@@ -19,9 +19,9 @@ const textAligns = [
 ];
 
 const outline = [
-  [/^outline-(?:width-|size-)?(.+)$/, ([, d]) => ({ "outline-width": utilities.handler.bracket.fraction.auto.rem(d) })],
+  [/^outline-(?:width-|size-)?(.+)$/, ([, d]) => ({ "outline-width": utilities.handler.bracket.cssvar.auto.fraction.rem(d) })],
   [/^outline-(?:color-)?(.+)$/, utilities.colorResolver("outline-color", "outline-color")],
-  [/^outline-offset-(.+)$/, ([, d]) => ({ "outline-offset": utilities.handler.bracket.fraction.auto.rem(d) })],
+  [/^outline-offset-(.+)$/, ([, d]) => ({ "outline-offset": utilities.handler.bracket.cssvar.auto.fraction.rem(d) })],
   ["outline", { "outline-style": "solid" }],
   [/^outline-(auto|dashed|dotted|double|hidden|solid|groove|ridge|inset|outset|inherit|initial|revert|unset)$/, ([, c]) => ({ "outline-style": c })],
   ["outline-none", { "outline": "2px solid transparent", "outline-offset": "2px" }]
@@ -120,7 +120,7 @@ function handlerBorder(m) {
   }
 }
 function handlerBorderSize([, a = "", b = "1"]) {
-  const v = utilities.handler.bracket.px(b);
+  const v = utilities.handler.bracket.cssvar.px(b);
   if (a in utilities.directionMap && v != null)
     return utilities.directionMap[a].map((i) => [`border${i}-width`, v]);
 }
@@ -135,7 +135,7 @@ function handlerBorderOpacity([, a = "", opacity]) {
     return utilities.directionMap[a].map((i) => [`--un-border${i}-opacity`, v]);
 }
 function handlerRounded([, a = "", s = "DEFAULT"], { theme }) {
-  const v = theme.borderRadius?.[s] || utilities.handler.auto.rem.fraction.bracket.cssvar(s);
+  const v = theme.borderRadius?.[s] || utilities.handler.bracket.cssvar.auto.fraction.rem(s);
   if (a in utilities.cornerMap && v != null)
     return utilities.cornerMap[a].map((i) => [`border${i}-radius`, v]);
 }
@@ -145,7 +145,7 @@ const opacity = [
 ];
 const textColors = [
   [/^(?:text|color|c)-(.+)$/, utilities.colorResolver("color", "text")],
-  [/^(?:text|color|c)-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-text-opacity": utilities.handler.bracket.percent.cssvar(opacity2) })]
+  [/^(?:text|color|c)-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-text-opacity": utilities.handler.bracket.percent(opacity2) })]
 ];
 const bgColors = [
   [/^bg-(.+)$/, utilities.colorResolver("background-color", "bg")],
@@ -173,9 +173,9 @@ const transitions = [
       };
     }
   }],
-  [/^(?:transition-)?delay-(.+)(?:s|ms)?$/, ([, d]) => ({ "transition-delay": utilities.handler.bracket.time(d) })],
-  [/^(?:transition-)?duration-(.+)(?:s|ms)?$/, ([, d]) => ({ "transition-duration": utilities.handler.bracket.time(d) })],
-  [/^ease-(.+)$/, ([, d]) => ({ "transition-timing-function": utilities.handler.bracket(d) })],
+  [/^(?:transition-)?duration-(.+)$/, ([, d]) => ({ "transition-duration": utilities.handler.bracket.cssvar.time(d) })],
+  [/^(?:transition-)?delay-(.+)$/, ([, d]) => ({ "transition-delay": utilities.handler.bracket.cssvar.time(d) })],
+  [/^ease-(.+)$/, ([, d]) => ({ "transition-timing-function": utilities.handler.bracket.cssvar(d) })],
   ["ease", { "transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)" }],
   ["ease-linear", { "transition-timing-function": "linear" }],
   ["ease-in", { "transition-timing-function": "cubic-bezier(0.4, 0, 1, 1)" }],
@@ -200,7 +200,7 @@ const flex = [
   [/^(?:flex-)?shrink-0$/, () => ({ "flex-shrink": 0 })],
   [/^(?:flex-)?grow$/, () => ({ "flex-grow": 1 })],
   [/^(?:flex-)?grow-0$/, () => ({ "flex-grow": 0 })],
-  [/^(?:flex-)?basis-(.+)$/, ([, d]) => ({ "flex-basis": utilities.handler.bracket.fraction.auto.rem(d) })],
+  [/^(?:flex-)?basis-(.+)$/, ([, d]) => ({ "flex-basis": utilities.handler.bracket.cssvar.auto.fraction.rem(d) })],
   ["flex-row", { "flex-direction": "row" }],
   ["flex-row-reverse", { "flex-direction": "row-reverse" }],
   ["flex-col", { "flex-direction": "column" }],
@@ -227,7 +227,7 @@ const appearances = [
   ["backface-hidden", { "backface-visibility": "hidden" }]
 ];
 const cursors = [
-  [/^cursor-(.+)$/, ([, c]) => ({ cursor: c })]
+  [/^cursor-(.+)$/, ([, c]) => ({ cursor: utilities.handler.bracket.cssvar(c) || c })]
 ];
 const pointerEvents = [
   ["pointer-events-auto", { "pointer-events": "auto" }],
@@ -317,7 +317,7 @@ const boxShadows = [
     }
   }],
   [/^shadow-(.+)$/, utilities.colorResolver("--un-shadow-color", "shadow")],
-  [/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": utilities.handler.bracket.percent.cssvar(opacity) })],
+  [/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": utilities.handler.bracket.percent(opacity) })],
   ["shadow-inset", { "--un-shadow-inset": "inset" }]
 ];
 
@@ -345,15 +345,15 @@ const fonts = [
     }
     return { "font-size": utilities.handler.bracket.auto.rem(s) };
   }],
-  [/^text-size-(.+)$/, ([, s]) => ({ "font-size": utilities.handler.bracket.auto.rem(s) })],
+  [/^text-size-(.+)$/, ([, s]) => ({ "font-size": utilities.handler.bracket.cssvar.auto.rem(s) })],
   [/^(?:font|fw)-?([^-]+)$/, ([, s]) => ({ "font-weight": weightMap[s] || utilities.handler.number(s) })],
   [/^(?:leading|lh)-([^-]+)$/, ([, s], { theme }) => ({ "line-height": theme.lineHeight?.[s] || utilities.handler.bracket.auto.rem(s) })],
   [/^tracking-([^-]+)$/, ([, s], { theme }) => ({ "letter-spacing": theme.letterSpacing?.[s] || utilities.handler.bracket.auto.rem(s) })],
   [/^word-spacing-([^-]+)$/, ([, s], { theme }) => ({ "word-spacing": theme.wordSpacing?.[s] || utilities.handler.bracket.auto.rem(s) })]
 ];
 const tabSizes = [
-  [/^tab(?:-([^-]+))?$/, ([, s]) => {
-    const v = utilities.handler.bracket.global.number(s || "4");
+  [/^tab(?:-(.+))?$/, ([, s]) => {
+    const v = utilities.handler.bracket.cssvar.global.number(s || "4");
     if (v != null) {
       return {
         "-moz-tab-size": v,
@@ -364,7 +364,7 @@ const tabSizes = [
   }]
 ];
 const textIndents = [
-  [/^indent(?:-(.+))?$/, ([, s], { theme }) => ({ "text-indent": theme.textIndent?.[s || "DEFAULT"] || utilities.handler.bracket.cssvar.fraction.auto.rem(s) })]
+  [/^indent(?:-(.+))?$/, ([, s], { theme }) => ({ "text-indent": theme.textIndent?.[s || "DEFAULT"] || utilities.handler.bracket.cssvar.auto.fraction.rem(s) })]
 ];
 const textStrokes = [
   [/^text-stroke(?:-(.+))?$/, ([, s], { theme }) => ({ "-webkit-text-stroke-width": theme.textStrokeWidth?.[s || "DEFAULT"] || utilities.handler.bracket.cssvar.px(s) })],
@@ -392,7 +392,7 @@ const directions = {
   "y": "row-"
 };
 const handleGap = ([, d = "", s]) => {
-  const v = utilities.handler.bracket.auto.rem(s);
+  const v = utilities.handler.bracket.cssvar.auto.rem(s);
   if (v != null) {
     return {
       [`grid-${directions[d]}gap`]: v,
@@ -418,12 +418,12 @@ const autoDirection = (selector, theme) => {
     case "fr":
       return "minmax(0,1fr)";
   }
-  return utilities.handler.bracket.auto.rem(selector);
+  return utilities.handler.bracket.cssvar.auto.rem(selector);
 };
 const grids = [
   ["grid", { display: "grid" }],
   ["inline-grid", { display: "inline-grid" }],
-  [/^(?:grid-)?(row|col)-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}`]: utilities.handler.bracket.auto(v) })],
+  [/^(?:grid-)?(row|col)-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}`]: utilities.handler.bracket.cssvar.auto(v) })],
   [/^(?:grid-)?(row|col)-span-(.+)$/, ([, c, s]) => {
     if (s === "full")
       return { [`grid-${rowCol(c)}`]: "1/-1" };
@@ -431,11 +431,12 @@ const grids = [
     if (v != null)
       return { [`grid-${rowCol(c)}`]: `span ${v}/span ${v}` };
   }],
-  [/^(?:grid-)?(row|col)-start-([\w.-]+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-start`]: v })],
-  [/^(?:grid-)?(row|col)-end-([\w.-]+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-end`]: v })],
-  [/^(?:grid-)?auto-(rows|cols)-([\w.-]+)$/, ([, c, v], { theme }) => ({ [`grid-auto-${rowCol(c)}`]: autoDirection(v, theme) })],
+  [/^(?:grid-)?(row|col)-start-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-start`]: utilities.handler.bracket.cssvar(v) ?? v })],
+  [/^(?:grid-)?(row|col)-end-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-end`]: utilities.handler.bracket.cssvar(v) ?? v })],
+  [/^(?:grid-)?auto-(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({ [`grid-auto-${rowCol(c)}`]: autoDirection(v, theme) })],
+  [/^(?:grid-auto-flow|auto-flow|grid-flow)-(.+)$/, ([, v]) => ({ "grid-auto-flow": utilities.handler.bracket.cssvar(v) })],
   [/^(?:grid-auto-flow|auto-flow|grid-flow)-((?:row|col)(?:-dense)?)$/, ([, v]) => ({ "grid-auto-flow": rowCol(v).replace("-", " ") })],
-  [/^grid-(rows|cols)-(\[.+\])$/, ([, c, v]) => ({ [`grid-template-${rowCol(c)}`]: utilities.handler.bracket(v) })],
+  [/^grid-(rows|cols)-(.+)$/, ([, c, v]) => ({ [`grid-template-${rowCol(c)}`]: utilities.handler.bracket.cssvar(v) })],
   [/^grid-(rows|cols)-minmax-([\w.-]+)$/, ([, c, d]) => ({ [`grid-template-${rowCol(c)}`]: `repeat(auto-fill,minmax(${d},1fr))` })],
   [/^grid-(rows|cols)-(\d+)$/, ([, c, d]) => ({ [`grid-template-${rowCol(c)}`]: `repeat(${d},minmax(0,1fr))` })],
   ["grid-rows-none", { "grid-template-rows": "none" }],
@@ -476,7 +477,7 @@ const justifies = [
   ["justify-self-stretch", { "justify-self": "stretch" }]
 ];
 const orders = [
-  [/^order-(.+)$/, ([, v]) => ({ order: utilities.handler.bracket.number(v) })],
+  [/^order-(.+)$/, ([, v]) => ({ order: utilities.handler.bracket.cssvar.number(v) })],
   ["order-first", { order: "-9999" }],
   ["order-last", { order: "9999" }],
   ["order-none", { order: "0" }]
@@ -519,7 +520,7 @@ const placements = [
   ["place-self-stretch", { "place-self": "stretch" }]
 ];
 function handleInsetValue(v) {
-  return utilities.handler.bracket.fraction.cssvar.auto.rem(v);
+  return utilities.handler.bracket.cssvar.auto.fraction.rem(v);
 }
 function handleInsetValues([, d, v]) {
   const r = handleInsetValue(v);
@@ -544,8 +545,8 @@ const floats = [
   ["clear-none", { clear: "none" }]
 ];
 const zIndexes = [
-  ["z-auto", { "z-index": "auto" }],
-  [/^z-([^-]+)$/, ([, v]) => ({ "z-index": utilities.handler.number(v) })]
+  [/^z-(.+)$/, ([, v]) => ({ "z-index": utilities.handler.bracket.cssvar.number(v) })],
+  ["z-auto", { "z-index": "auto" }]
 ];
 const boxSizing = [
   ["box-border", { "box-sizing": "border-box" }],
@@ -574,7 +575,7 @@ const rings = [
     }
   }],
   ["ring-offset", { "--un-ring-offset-width": "1px" }],
-  [/^ring-offset-(.+)$/, ([, d]) => ({ "--un-ring-offset-width": utilities.handler.px(d || "1") })],
+  [/^ring-offset-(?:width-|size-)?(.+)$/, ([, d]) => ({ "--un-ring-offset-width": utilities.handler.bracket.cssvar.px(d) })],
   [/^ring-(.+)$/, utilities.colorResolver("--un-ring-color", "ring")],
   [/^ring-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-ring-opacity": utilities.handler.bracket.percent(opacity) })],
   [/^ring-offset-(.+)$/, utilities.colorResolver("--un-ring-offset-color", "ring-offset")],
@@ -602,7 +603,7 @@ function getSizeValue(minmax, hw, theme, prop) {
     case "min":
       return `${prop}-content`;
   }
-  return utilities.handler.bracket.cssvar.fraction.auto.rem(prop);
+  return utilities.handler.bracket.cssvar.auto.fraction.rem(prop);
 }
 const sizes = [
   [/^(min-|max-)?([wh])-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, theme, s) })],
@@ -628,14 +629,14 @@ const paddings = [
   [/^pa?()-?(-?.+)$/, utilities.directionSize("padding")],
   [/^p-?([xy])-?(-?.+)$/, utilities.directionSize("padding")],
   [/^p-?([rltbse])-?(-?.+)$/, utilities.directionSize("padding")],
-  [/^p-(inline|block)-(-?.+)$/, utilities.directionSize("padding")],
+  [/^p-(block|inline)-(-?.+)$/, utilities.directionSize("padding")],
   [/^p-?([bi][se])-?(-?.+)$/, utilities.directionSize("padding")]
 ];
 const margins = [
   [/^ma?()-?(-?.+)$/, utilities.directionSize("margin")],
   [/^m-?([xy])-?(-?.+)$/, utilities.directionSize("margin")],
   [/^m-?([rltbse])-?(-?.+)$/, utilities.directionSize("margin")],
-  [/^m-(inline|block)-(-?.+)$/, utilities.directionSize("margin")],
+  [/^m-(block|inline)-(-?.+)$/, utilities.directionSize("margin")],
   [/^m-?([bi][se])-?(-?.+)$/, utilities.directionSize("margin")]
 ];
 
@@ -686,9 +687,9 @@ const transformBase = {
   [core.CONTROL_SHORTCUT_NO_MERGE]: ""
 };
 const transforms = [
-  [/^origin-([-\w]{3,})$/, ([, s]) => ({ "transform-origin": utilities.positionMap[s] })],
+  [/^origin-(.+)$/, ([, s]) => ({ "transform-origin": utilities.positionMap[s] ?? utilities.handler.bracket.cssvar(s) })],
   [/^perspect-(.+)$/, ([, s]) => {
-    const v = utilities.handler.px.numberWithUnit(s);
+    const v = utilities.handler.bracket.cssvar.px.numberWithUnit(s);
     if (v != null) {
       return {
         "-webkit-perspective": v,
@@ -697,7 +698,7 @@ const transforms = [
     }
   }],
   [/^perspect-origin-(.+)$/, ([, s]) => {
-    const v = utilities.handler.bracket(s) ?? (s.length >= 3 ? utilities.positionMap[s] : void 0);
+    const v = utilities.handler.bracket.cssvar(s) ?? (s.length >= 3 ? utilities.positionMap[s] : void 0);
     if (v != null) {
       return {
         "-webkit-perspective-origin": v,
@@ -709,7 +710,6 @@ const transforms = [
   [/^translate-([xyz])-(.+)$/, handleTranslate],
   [/^rotate-()(.+)$/, handleRotate],
   [/^rotate(-[xyz])-(.+)$/, handleRotate],
-  [/^skew-()(.+)$/, handleSkew],
   [/^skew-([xy])-(.+)$/, handleSkew],
   [/^scale-()(.+)$/, handleScale],
   [/^scale-([xyz])-(.+)$/, handleScale],
@@ -724,7 +724,7 @@ const transforms = [
   ["transform-none", { transform: "none" }]
 ];
 function handleTranslate([, d, b]) {
-  const v = utilities.handler.bracket.fraction.auto.rem(b);
+  const v = utilities.handler.bracket.cssvar.fraction.rem(b);
   if (v != null) {
     return [
       transformBase,
@@ -736,7 +736,7 @@ function handleTranslate([, d, b]) {
   }
 }
 function handleScale([, d, b]) {
-  const v = utilities.handler.bracket.fraction.percent(b);
+  const v = utilities.handler.bracket.cssvar.fraction.percent(b);
   if (v != null) {
     return [
       transformBase,
@@ -748,7 +748,7 @@ function handleScale([, d, b]) {
   }
 }
 function handleRotate([, d, b]) {
-  const v = utilities.handler.bracket.degree(b);
+  const v = utilities.handler.bracket.cssvar.degree(b);
   if (v != null) {
     return [
       transformBase,
@@ -760,7 +760,7 @@ function handleRotate([, d, b]) {
   }
 }
 function handleSkew([, d, b]) {
-  const v = utilities.handler.bracket.degree(b);
+  const v = utilities.handler.bracket.cssvar.degree(b);
   if (v != null) {
     return [
       transformBase,
@@ -773,38 +773,34 @@ function handleSkew([, d, b]) {
 }
 
 const variablesAbbrMap = {
-  "visible": "visibility",
-  "select": "user-select",
-  "vertical": "vertical-align",
   "backface": "backface-visibility",
-  "whitespace": "white-space",
   "break": "word-break",
   "case": "text-transform",
-  "origin": "transform-origin",
-  "bg-opacity": "background-opacity",
-  "tab": "tab-size",
-  "underline": "text-decoration-thickness",
-  "underline-offset": "text-underline-offset",
-  "grid-cols": "grid-template-columns",
-  "grid-rows": "grid-template-rows",
-  "auto-flow": "grid-auto-flow",
-  "row-start": "grid-row-start",
-  "row-end": "grid-row-end",
-  "justify": "justify-content",
   "content": "align-content",
+  "flex": "flex",
+  "fw": "font-weight",
   "items": "align-items",
+  "justify": "justify-content",
+  "leading": "line-height",
+  "lh": "line-height",
+  "select": "user-select",
   "self": "align-self",
-  "object": "object-fit"
+  "tracking": "letter-spacing",
+  "vertical": "vertical-align",
+  "visible": "visibility",
+  "whitespace": "white-space",
+  "word-spacing": "word-spacing",
+  "ws": "white-space"
 };
 const cssVariables = [
-  [/^(.+)-\$(.+)$/, ([, name, varname]) => {
-    const prop = variablesAbbrMap[name];
+  [/^([^$]+)(?<=-)\$(.+)$/, ([, name, varname]) => {
+    const prop = variablesAbbrMap[name.slice(0, -1)];
     if (prop)
       return { [prop]: `var(--${varname})` };
   }]
 ];
 const cssProperty = [
-  [/^\[(.+):(.+)\]$/, ([, prop, value]) => ({ [prop]: utilities.handler.bracket(`[${value}]`) })]
+  [/^\[([^:]+):(.+)\]$/, ([, prop, value]) => ({ [prop]: utilities.handler.bracket(`[${value}]`) })]
 ];
 
 const questionMark = [
@@ -824,7 +820,7 @@ const textDecorations = [
   ["line-through", { "text-decoration-line": "line-through" }],
   ["decoration-underline", { "text-decoration-line": "underline" }],
   ["decoration-line-through", { "text-decoration-line": "line-through" }],
-  [/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s]) => ({ "text-decoration-thickness": utilities.handler.bracket.px(s) })],
+  [/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s]) => ({ "text-decoration-thickness": utilities.handler.bracket.cssvar.px(s) })],
   [/^(?:underline|decoration)-(auto|from-font)$/, ([, s]) => ({ "text-decoration-thickness": s })],
   [/^(?:underline|decoration)-(.+)$/, (match, ctx) => {
     const result = utilities.colorResolver("text-decoration-color", "line")(match, ctx);
@@ -836,7 +832,7 @@ const textDecorations = [
     }
   }],
   [/^(?:underline|decoration)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-line-opacity": utilities.handler.bracket.percent(opacity) })],
-  [/^underline-offset-(.+)$/, ([, s]) => ({ "text-underline-offset": utilities.handler.auto.bracket.px(s) })],
+  [/^underline-offset-(.+)$/, ([, s]) => ({ "text-underline-offset": utilities.handler.auto.bracket.cssvar.px(s) })],
   [/^(?:underline|decoration)-(solid|double|dotted|dashed|wavy|inherit|initial|revert|unset)$/, ([, d]) => ({ "text-decoration-style": d })],
   ["no-underline", { "text-decoration": "none" }],
   ["decoration-none", { "text-decoration": "none" }]
@@ -847,8 +843,8 @@ const svgUtilities = [
   [/^fill-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-fill-opacity": utilities.handler.bracket.percent(opacity) })],
   ["fill-none", { fill: "none" }],
   [/^stroke-(?:width-|size-)?(.+)$/, ([, s]) => ({ "stroke-width": utilities.handler.bracket.fraction.px.number(s) })],
-  [/^stroke-dash-(.+)$/, ([, s]) => ({ "stroke-dasharray": utilities.handler.bracket.number(s) })],
-  [/^stroke-offset-(.+)$/, ([, s]) => ({ "stroke-dashoffset": utilities.handler.bracket.px.numberWithUnit(s) })],
+  [/^stroke-dash-(.+)$/, ([, s]) => ({ "stroke-dasharray": utilities.handler.bracket.cssvar.number(s) })],
+  [/^stroke-offset-(.+)$/, ([, s]) => ({ "stroke-dashoffset": utilities.handler.bracket.cssvar.px.numberWithUnit(s) })],
   [/^stroke-(.+)$/, utilities.colorResolver("stroke", "stroke")],
   [/^stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-stroke-opacity": utilities.handler.bracket.percent(opacity) })],
   ["stroke-cap-square", { "stroke-linecap": "square" }],

package/dist/chunks/default2.mjs

@@ -17,9 +17,9 @@ const textAligns = [
 ];
 
 const outline = [
-  [/^outline-(?:width-|size-)?(.+)$/, ([, d]) => ({ "outline-width": handler.bracket.fraction.auto.rem(d) })],
+  [/^outline-(?:width-|size-)?(.+)$/, ([, d]) => ({ "outline-width": handler.bracket.cssvar.auto.fraction.rem(d) })],
   [/^outline-(?:color-)?(.+)$/, colorResolver("outline-color", "outline-color")],
-  [/^outline-offset-(.+)$/, ([, d]) => ({ "outline-offset": handler.bracket.fraction.auto.rem(d) })],
+  [/^outline-offset-(.+)$/, ([, d]) => ({ "outline-offset": handler.bracket.cssvar.auto.fraction.rem(d) })],
   ["outline", { "outline-style": "solid" }],
   [/^outline-(auto|dashed|dotted|double|hidden|solid|groove|ridge|inset|outset|inherit|initial|revert|unset)$/, ([, c]) => ({ "outline-style": c })],
   ["outline-none", { "outline": "2px solid transparent", "outline-offset": "2px" }]
@@ -118,7 +118,7 @@ function handlerBorder(m) {
   }
 }
 function handlerBorderSize([, a = "", b = "1"]) {
-  const v = handler.bracket.px(b);
+  const v = handler.bracket.cssvar.px(b);
   if (a in directionMap && v != null)
     return directionMap[a].map((i) => [`border${i}-width`, v]);
 }
@@ -133,7 +133,7 @@ function handlerBorderOpacity([, a = "", opacity]) {
     return directionMap[a].map((i) => [`--un-border${i}-opacity`, v]);
 }
 function handlerRounded([, a = "", s = "DEFAULT"], { theme }) {
-  const v = theme.borderRadius?.[s] || handler.auto.rem.fraction.bracket.cssvar(s);
+  const v = theme.borderRadius?.[s] || handler.bracket.cssvar.auto.fraction.rem(s);
   if (a in cornerMap && v != null)
     return cornerMap[a].map((i) => [`border${i}-radius`, v]);
 }
@@ -143,7 +143,7 @@ const opacity = [
 ];
 const textColors = [
   [/^(?:text|color|c)-(.+)$/, colorResolver("color", "text")],
-  [/^(?:text|color|c)-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-text-opacity": handler.bracket.percent.cssvar(opacity2) })]
+  [/^(?:text|color|c)-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-text-opacity": handler.bracket.percent(opacity2) })]
 ];
 const bgColors = [
   [/^bg-(.+)$/, colorResolver("background-color", "bg")],
@@ -171,9 +171,9 @@ const transitions = [
       };
     }
   }],
-  [/^(?:transition-)?delay-(.+)(?:s|ms)?$/, ([, d]) => ({ "transition-delay": handler.bracket.time(d) })],
-  [/^(?:transition-)?duration-(.+)(?:s|ms)?$/, ([, d]) => ({ "transition-duration": handler.bracket.time(d) })],
-  [/^ease-(.+)$/, ([, d]) => ({ "transition-timing-function": handler.bracket(d) })],
+  [/^(?:transition-)?duration-(.+)$/, ([, d]) => ({ "transition-duration": handler.bracket.cssvar.time(d) })],
+  [/^(?:transition-)?delay-(.+)$/, ([, d]) => ({ "transition-delay": handler.bracket.cssvar.time(d) })],
+  [/^ease-(.+)$/, ([, d]) => ({ "transition-timing-function": handler.bracket.cssvar(d) })],
   ["ease", { "transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)" }],
   ["ease-linear", { "transition-timing-function": "linear" }],
   ["ease-in", { "transition-timing-function": "cubic-bezier(0.4, 0, 1, 1)" }],
@@ -198,7 +198,7 @@ const flex = [
   [/^(?:flex-)?shrink-0$/, () => ({ "flex-shrink": 0 })],
   [/^(?:flex-)?grow$/, () => ({ "flex-grow": 1 })],
   [/^(?:flex-)?grow-0$/, () => ({ "flex-grow": 0 })],
-  [/^(?:flex-)?basis-(.+)$/, ([, d]) => ({ "flex-basis": handler.bracket.fraction.auto.rem(d) })],
+  [/^(?:flex-)?basis-(.+)$/, ([, d]) => ({ "flex-basis": handler.bracket.cssvar.auto.fraction.rem(d) })],
   ["flex-row", { "flex-direction": "row" }],
   ["flex-row-reverse", { "flex-direction": "row-reverse" }],
   ["flex-col", { "flex-direction": "column" }],
@@ -225,7 +225,7 @@ const appearances = [
   ["backface-hidden", { "backface-visibility": "hidden" }]
 ];
 const cursors = [
-  [/^cursor-(.+)$/, ([, c]) => ({ cursor: c })]
+  [/^cursor-(.+)$/, ([, c]) => ({ cursor: handler.bracket.cssvar(c) || c })]
 ];
 const pointerEvents = [
   ["pointer-events-auto", { "pointer-events": "auto" }],
@@ -315,7 +315,7 @@ const boxShadows = [
     }
   }],
   [/^shadow-(.+)$/, colorResolver("--un-shadow-color", "shadow")],
-  [/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": handler.bracket.percent.cssvar(opacity) })],
+  [/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": handler.bracket.percent(opacity) })],
   ["shadow-inset", { "--un-shadow-inset": "inset" }]
 ];
 
@@ -343,15 +343,15 @@ const fonts = [
     }
     return { "font-size": handler.bracket.auto.rem(s) };
   }],
-  [/^text-size-(.+)$/, ([, s]) => ({ "font-size": handler.bracket.auto.rem(s) })],
+  [/^text-size-(.+)$/, ([, s]) => ({ "font-size": handler.bracket.cssvar.auto.rem(s) })],
   [/^(?:font|fw)-?([^-]+)$/, ([, s]) => ({ "font-weight": weightMap[s] || handler.number(s) })],
   [/^(?:leading|lh)-([^-]+)$/, ([, s], { theme }) => ({ "line-height": theme.lineHeight?.[s] || handler.bracket.auto.rem(s) })],
   [/^tracking-([^-]+)$/, ([, s], { theme }) => ({ "letter-spacing": theme.letterSpacing?.[s] || handler.bracket.auto.rem(s) })],
   [/^word-spacing-([^-]+)$/, ([, s], { theme }) => ({ "word-spacing": theme.wordSpacing?.[s] || handler.bracket.auto.rem(s) })]
 ];
 const tabSizes = [
-  [/^tab(?:-([^-]+))?$/, ([, s]) => {
-    const v = handler.bracket.global.number(s || "4");
+  [/^tab(?:-(.+))?$/, ([, s]) => {
+    const v = handler.bracket.cssvar.global.number(s || "4");
     if (v != null) {
       return {
         "-moz-tab-size": v,
@@ -362,7 +362,7 @@ const tabSizes = [
   }]
 ];
 const textIndents = [
-  [/^indent(?:-(.+))?$/, ([, s], { theme }) => ({ "text-indent": theme.textIndent?.[s || "DEFAULT"] || handler.bracket.cssvar.fraction.auto.rem(s) })]
+  [/^indent(?:-(.+))?$/, ([, s], { theme }) => ({ "text-indent": theme.textIndent?.[s || "DEFAULT"] || handler.bracket.cssvar.auto.fraction.rem(s) })]
 ];
 const textStrokes = [
   [/^text-stroke(?:-(.+))?$/, ([, s], { theme }) => ({ "-webkit-text-stroke-width": theme.textStrokeWidth?.[s || "DEFAULT"] || handler.bracket.cssvar.px(s) })],
@@ -390,7 +390,7 @@ const directions = {
   "y": "row-"
 };
 const handleGap = ([, d = "", s]) => {
-  const v = handler.bracket.auto.rem(s);
+  const v = handler.bracket.cssvar.auto.rem(s);
   if (v != null) {
     return {
       [`grid-${directions[d]}gap`]: v,
@@ -416,12 +416,12 @@ const autoDirection = (selector, theme) => {
     case "fr":
       return "minmax(0,1fr)";
   }
-  return handler.bracket.auto.rem(selector);
+  return handler.bracket.cssvar.auto.rem(selector);
 };
 const grids = [
   ["grid", { display: "grid" }],
   ["inline-grid", { display: "inline-grid" }],
-  [/^(?:grid-)?(row|col)-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}`]: handler.bracket.auto(v) })],
+  [/^(?:grid-)?(row|col)-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}`]: handler.bracket.cssvar.auto(v) })],
   [/^(?:grid-)?(row|col)-span-(.+)$/, ([, c, s]) => {
     if (s === "full")
       return { [`grid-${rowCol(c)}`]: "1/-1" };
@@ -429,11 +429,12 @@ const grids = [
     if (v != null)
       return { [`grid-${rowCol(c)}`]: `span ${v}/span ${v}` };
   }],
-  [/^(?:grid-)?(row|col)-start-([\w.-]+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-start`]: v })],
-  [/^(?:grid-)?(row|col)-end-([\w.-]+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-end`]: v })],
-  [/^(?:grid-)?auto-(rows|cols)-([\w.-]+)$/, ([, c, v], { theme }) => ({ [`grid-auto-${rowCol(c)}`]: autoDirection(v, theme) })],
+  [/^(?:grid-)?(row|col)-start-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-start`]: handler.bracket.cssvar(v) ?? v })],
+  [/^(?:grid-)?(row|col)-end-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-end`]: handler.bracket.cssvar(v) ?? v })],
+  [/^(?:grid-)?auto-(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({ [`grid-auto-${rowCol(c)}`]: autoDirection(v, theme) })],
+  [/^(?:grid-auto-flow|auto-flow|grid-flow)-(.+)$/, ([, v]) => ({ "grid-auto-flow": handler.bracket.cssvar(v) })],
   [/^(?:grid-auto-flow|auto-flow|grid-flow)-((?:row|col)(?:-dense)?)$/, ([, v]) => ({ "grid-auto-flow": rowCol(v).replace("-", " ") })],
-  [/^grid-(rows|cols)-(\[.+\])$/, ([, c, v]) => ({ [`grid-template-${rowCol(c)}`]: handler.bracket(v) })],
+  [/^grid-(rows|cols)-(.+)$/, ([, c, v]) => ({ [`grid-template-${rowCol(c)}`]: handler.bracket.cssvar(v) })],
   [/^grid-(rows|cols)-minmax-([\w.-]+)$/, ([, c, d]) => ({ [`grid-template-${rowCol(c)}`]: `repeat(auto-fill,minmax(${d},1fr))` })],
   [/^grid-(rows|cols)-(\d+)$/, ([, c, d]) => ({ [`grid-template-${rowCol(c)}`]: `repeat(${d},minmax(0,1fr))` })],
   ["grid-rows-none", { "grid-template-rows": "none" }],
@@ -474,7 +475,7 @@ const justifies = [
   ["justify-self-stretch", { "justify-self": "stretch" }]
 ];
 const orders = [
-  [/^order-(.+)$/, ([, v]) => ({ order: handler.bracket.number(v) })],
+  [/^order-(.+)$/, ([, v]) => ({ order: handler.bracket.cssvar.number(v) })],
   ["order-first", { order: "-9999" }],
   ["order-last", { order: "9999" }],
   ["order-none", { order: "0" }]
@@ -517,7 +518,7 @@ const placements = [
   ["place-self-stretch", { "place-self": "stretch" }]
 ];
 function handleInsetValue(v) {
-  return handler.bracket.fraction.cssvar.auto.rem(v);
+  return handler.bracket.cssvar.auto.fraction.rem(v);
 }
 function handleInsetValues([, d, v]) {
   const r = handleInsetValue(v);
@@ -542,8 +543,8 @@ const floats = [
   ["clear-none", { clear: "none" }]
 ];
 const zIndexes = [
-  ["z-auto", { "z-index": "auto" }],
-  [/^z-([^-]+)$/, ([, v]) => ({ "z-index": handler.number(v) })]
+  [/^z-(.+)$/, ([, v]) => ({ "z-index": handler.bracket.cssvar.number(v) })],
+  ["z-auto", { "z-index": "auto" }]
 ];
 const boxSizing = [
   ["box-border", { "box-sizing": "border-box" }],
@@ -572,7 +573,7 @@ const rings = [
     }
   }],
   ["ring-offset", { "--un-ring-offset-width": "1px" }],
-  [/^ring-offset-(.+)$/, ([, d]) => ({ "--un-ring-offset-width": handler.px(d || "1") })],
+  [/^ring-offset-(?:width-|size-)?(.+)$/, ([, d]) => ({ "--un-ring-offset-width": handler.bracket.cssvar.px(d) })],
   [/^ring-(.+)$/, colorResolver("--un-ring-color", "ring")],
   [/^ring-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-ring-opacity": handler.bracket.percent(opacity) })],
   [/^ring-offset-(.+)$/, colorResolver("--un-ring-offset-color", "ring-offset")],
@@ -600,7 +601,7 @@ function getSizeValue(minmax, hw, theme, prop) {
     case "min":
       return `${prop}-content`;
   }
-  return handler.bracket.cssvar.fraction.auto.rem(prop);
+  return handler.bracket.cssvar.auto.fraction.rem(prop);
 }
 const sizes = [
   [/^(min-|max-)?([wh])-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, theme, s) })],
@@ -626,14 +627,14 @@ const paddings = [
   [/^pa?()-?(-?.+)$/, directionSize("padding")],
   [/^p-?([xy])-?(-?.+)$/, directionSize("padding")],
   [/^p-?([rltbse])-?(-?.+)$/, directionSize("padding")],
-  [/^p-(inline|block)-(-?.+)$/, directionSize("padding")],
+  [/^p-(block|inline)-(-?.+)$/, directionSize("padding")],
   [/^p-?([bi][se])-?(-?.+)$/, directionSize("padding")]
 ];
 const margins = [
   [/^ma?()-?(-?.+)$/, directionSize("margin")],
   [/^m-?([xy])-?(-?.+)$/, directionSize("margin")],
   [/^m-?([rltbse])-?(-?.+)$/, directionSize("margin")],
-  [/^m-(inline|block)-(-?.+)$/, directionSize("margin")],
+  [/^m-(block|inline)-(-?.+)$/, directionSize("margin")],
   [/^m-?([bi][se])-?(-?.+)$/, directionSize("margin")]
 ];
 
@@ -684,9 +685,9 @@ const transformBase = {
   [CONTROL_SHORTCUT_NO_MERGE]: ""
 };
 const transforms = [
-  [/^origin-([-\w]{3,})$/, ([, s]) => ({ "transform-origin": positionMap[s] })],
+  [/^origin-(.+)$/, ([, s]) => ({ "transform-origin": positionMap[s] ?? handler.bracket.cssvar(s) })],
   [/^perspect-(.+)$/, ([, s]) => {
-    const v = handler.px.numberWithUnit(s);
+    const v = handler.bracket.cssvar.px.numberWithUnit(s);
     if (v != null) {
       return {
         "-webkit-perspective": v,
@@ -695,7 +696,7 @@ const transforms = [
     }
   }],
   [/^perspect-origin-(.+)$/, ([, s]) => {
-    const v = handler.bracket(s) ?? (s.length >= 3 ? positionMap[s] : void 0);
+    const v = handler.bracket.cssvar(s) ?? (s.length >= 3 ? positionMap[s] : void 0);
     if (v != null) {
       return {
         "-webkit-perspective-origin": v,
@@ -707,7 +708,6 @@ const transforms = [
   [/^translate-([xyz])-(.+)$/, handleTranslate],
   [/^rotate-()(.+)$/, handleRotate],
   [/^rotate(-[xyz])-(.+)$/, handleRotate],
-  [/^skew-()(.+)$/, handleSkew],
   [/^skew-([xy])-(.+)$/, handleSkew],
   [/^scale-()(.+)$/, handleScale],
   [/^scale-([xyz])-(.+)$/, handleScale],
@@ -722,7 +722,7 @@ const transforms = [
   ["transform-none", { transform: "none" }]
 ];
 function handleTranslate([, d, b]) {
-  const v = handler.bracket.fraction.auto.rem(b);
+  const v = handler.bracket.cssvar.fraction.rem(b);
   if (v != null) {
     return [
       transformBase,
@@ -734,7 +734,7 @@ function handleTranslate([, d, b]) {
   }
 }
 function handleScale([, d, b]) {
-  const v = handler.bracket.fraction.percent(b);
+  const v = handler.bracket.cssvar.fraction.percent(b);
   if (v != null) {
     return [
       transformBase,
@@ -746,7 +746,7 @@ function handleScale([, d, b]) {
   }
 }
 function handleRotate([, d, b]) {
-  const v = handler.bracket.degree(b);
+  const v = handler.bracket.cssvar.degree(b);
   if (v != null) {
     return [
       transformBase,
@@ -758,7 +758,7 @@ function handleRotate([, d, b]) {
   }
 }
 function handleSkew([, d, b]) {
-  const v = handler.bracket.degree(b);
+  const v = handler.bracket.cssvar.degree(b);
   if (v != null) {
     return [
       transformBase,
@@ -771,38 +771,34 @@ function handleSkew([, d, b]) {
 }
 
 const variablesAbbrMap = {
-  "visible": "visibility",
-  "select": "user-select",
-  "vertical": "vertical-align",
   "backface": "backface-visibility",
-  "whitespace": "white-space",
   "break": "word-break",
   "case": "text-transform",
-  "origin": "transform-origin",
-  "bg-opacity": "background-opacity",
-  "tab": "tab-size",
-  "underline": "text-decoration-thickness",
-  "underline-offset": "text-underline-offset",
-  "grid-cols": "grid-template-columns",
-  "grid-rows": "grid-template-rows",
-  "auto-flow": "grid-auto-flow",
-  "row-start": "grid-row-start",
-  "row-end": "grid-row-end",
-  "justify": "justify-content",
   "content": "align-content",
+  "flex": "flex",
+  "fw": "font-weight",
   "items": "align-items",
+  "justify": "justify-content",
+  "leading": "line-height",
+  "lh": "line-height",
+  "select": "user-select",
   "self": "align-self",
-  "object": "object-fit"
+  "tracking": "letter-spacing",
+  "vertical": "vertical-align",
+  "visible": "visibility",
+  "whitespace": "white-space",
+  "word-spacing": "word-spacing",
+  "ws": "white-space"
 };
 const cssVariables = [
-  [/^(.+)-\$(.+)$/, ([, name, varname]) => {
-    const prop = variablesAbbrMap[name];
+  [/^([^$]+)(?<=-)\$(.+)$/, ([, name, varname]) => {
+    const prop = variablesAbbrMap[name.slice(0, -1)];
     if (prop)
       return { [prop]: `var(--${varname})` };
   }]
 ];
 const cssProperty = [
-  [/^\[(.+):(.+)\]$/, ([, prop, value]) => ({ [prop]: handler.bracket(`[${value}]`) })]
+  [/^\[([^:]+):(.+)\]$/, ([, prop, value]) => ({ [prop]: handler.bracket(`[${value}]`) })]
 ];
 
 const questionMark = [
@@ -822,7 +818,7 @@ const textDecorations = [
   ["line-through", { "text-decoration-line": "line-through" }],
   ["decoration-underline", { "text-decoration-line": "underline" }],
   ["decoration-line-through", { "text-decoration-line": "line-through" }],
-  [/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s]) => ({ "text-decoration-thickness": handler.bracket.px(s) })],
+  [/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s]) => ({ "text-decoration-thickness": handler.bracket.cssvar.px(s) })],
   [/^(?:underline|decoration)-(auto|from-font)$/, ([, s]) => ({ "text-decoration-thickness": s })],
   [/^(?:underline|decoration)-(.+)$/, (match, ctx) => {
     const result = colorResolver("text-decoration-color", "line")(match, ctx);
@@ -834,7 +830,7 @@ const textDecorations = [
     }
   }],
   [/^(?:underline|decoration)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-line-opacity": handler.bracket.percent(opacity) })],
-  [/^underline-offset-(.+)$/, ([, s]) => ({ "text-underline-offset": handler.auto.bracket.px(s) })],
+  [/^underline-offset-(.+)$/, ([, s]) => ({ "text-underline-offset": handler.auto.bracket.cssvar.px(s) })],
   [/^(?:underline|decoration)-(solid|double|dotted|dashed|wavy|inherit|initial|revert|unset)$/, ([, d]) => ({ "text-decoration-style": d })],
   ["no-underline", { "text-decoration": "none" }],
   ["decoration-none", { "text-decoration": "none" }]
@@ -845,8 +841,8 @@ const svgUtilities = [
   [/^fill-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-fill-opacity": handler.bracket.percent(opacity) })],
   ["fill-none", { fill: "none" }],
   [/^stroke-(?:width-|size-)?(.+)$/, ([, s]) => ({ "stroke-width": handler.bracket.fraction.px.number(s) })],
-  [/^stroke-dash-(.+)$/, ([, s]) => ({ "stroke-dasharray": handler.bracket.number(s) })],
-  [/^stroke-offset-(.+)$/, ([, s]) => ({ "stroke-dashoffset": handler.bracket.px.numberWithUnit(s) })],
+  [/^stroke-dash-(.+)$/, ([, s]) => ({ "stroke-dasharray": handler.bracket.cssvar.number(s) })],
+  [/^stroke-offset-(.+)$/, ([, s]) => ({ "stroke-dashoffset": handler.bracket.cssvar.px.numberWithUnit(s) })],
   [/^stroke-(.+)$/, colorResolver("stroke", "stroke")],
   [/^stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-stroke-opacity": handler.bracket.percent(opacity) })],
   ["stroke-cap-square", { "stroke-linecap": "square" }],

package/dist/chunks/default3.cjs

@@ -46,6 +46,16 @@ const variantCombinators = [
   variants$1.variantMatcher("svg", (input) => `${input} svg *`)
 ];
 
+const variantMotions = [
+  variants$1.variantParentMatcher("motion-reduce", "@media (prefers-reduced-motion: reduce)"),
+  variants$1.variantParentMatcher("motion-safe", "@media (prefers-reduced-motion: no-preference)")
+];
+const variantOrientations = [
+  variants$1.variantParentMatcher("landscape", "@media (orientation: landscape)"),
+  variants$1.variantParentMatcher("portrait", "@media (orientation: portrait)")
+];
+const variantPrint = variants$1.variantParentMatcher("print", "@media print");
+
 const variantColorsMediaOrClass = (options = {}) => {
   if (options?.dark === "class") {
     return [
@@ -98,19 +108,6 @@ const variantNegative = {
   }
 };
 
-const variantMotions = [
-  variants$1.variantParentMatcher("motion-reduce", "@media (prefers-reduced-motion: reduce)"),
-  variants$1.variantParentMatcher("motion-safe", "@media (prefers-reduced-motion: no-preference)")
-];
-
-const variantOrientations = [
-  variants$1.variantParentMatcher("landscape", "@media (orientation: landscape)"),
-  variants$1.variantParentMatcher("portrait", "@media (orientation: portrait)")
-];
-
-const variantPrint = variants$1.variantParentMatcher("print", "@media print");
-
-const CONTROL_BYPASS_PSEUDO_CLASS = "$$no-pseudo";
 const PseudoClasses = Object.fromEntries([
   "any-link",
   "link",
@@ -173,9 +170,6 @@ const PartClassesRE = /(part-\[(.+)]:)(.+)/;
 const PseudoElementsRE = new RegExp(`^(${PseudoElementsStr})[:-]`);
 const PseudoClassesRE = new RegExp(`^(${PseudoClassesStr})[:-]`);
 const PseudoClassFunctionsRE = new RegExp(`^(${PseudoClassFunctionsStr})-(${PseudoClassesStr})[:-]`);
-function shouldAdd(entires) {
-  return !entires.find((i) => i[0] === CONTROL_BYPASS_PSEUDO_CLASS) || void 0;
-}
 const taggedPseudoClassMatcher = (tag, parent, combinator) => {
   const re = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))[:-]`);
   const rawRe = new RegExp(`^${core.escapeRegExp(parent)}:`);
@@ -187,9 +181,7 @@ const taggedPseudoClassMatcher = (tag, parent, combinator) => {
         pseudo = `:${match[2]}(${pseudo})`;
       return {
         matcher: input.slice(match[1].length + tag.length + 2),
-        selector: (s, body) => {
-          return shouldAdd(body) && rawRe.test(s) ? s.replace(rawRe, `${parent}${pseudo}:`) : `${parent}${pseudo}${combinator}${s}`;
-        }
+        selector: (s) => rawRe.test(s) ? s.replace(rawRe, `${parent}${pseudo}:`) : `${parent}${pseudo}${combinator}${s}`
       };
     }
   };
@@ -211,7 +203,7 @@ const variantPseudoClasses = {
       const pseudo = PseudoClasses[match[1]] || `:${match[1]}`;
       return {
         matcher: input.slice(match[1].length + 1),
-        selector: (s, body) => shouldAdd(body) && `${s}${pseudo}`
+        selector: (s) => `${s}${pseudo}`
       };
     }
   },
@@ -225,7 +217,7 @@ const variantPseudoClassFunctions = {
       const pseudo = PseudoClasses[match[2]] || `:${match[2]}`;
       return {
         matcher: input.slice(match[1].length + match[2].length + 2),
-        selector: (s, body) => shouldAdd(body) && `${s}:${fn}(${pseudo})`
+        selector: (s) => `${s}:${fn}(${pseudo})`
       };
     }
   },
@@ -251,9 +243,7 @@ const partClasses = {
       const part = `part(${match[2]})`;
       return {
         matcher: input.slice(match[1].length),
-        selector: (s, body) => {
-          return shouldAdd(body) && `${s}::${part}`;
-        }
+        selector: (s) => `${s}::${part}`
       };
     }
   },
@@ -277,7 +267,6 @@ const variants = (options) => [
   ...variantLanguageDirections
 ];
 
-exports.CONTROL_BYPASS_PSEUDO_CLASS = CONTROL_BYPASS_PSEUDO_CLASS;
 exports.partClasses = partClasses;
 exports.variantBreakpoints = variantBreakpoints;
 exports.variantColorsMediaOrClass = variantColorsMediaOrClass;

package/dist/chunks/default3.mjs

@@ -44,6 +44,16 @@ const variantCombinators = [
   variantMatcher("svg", (input) => `${input} svg *`)
 ];
 
+const variantMotions = [
+  variantParentMatcher("motion-reduce", "@media (prefers-reduced-motion: reduce)"),
+  variantParentMatcher("motion-safe", "@media (prefers-reduced-motion: no-preference)")
+];
+const variantOrientations = [
+  variantParentMatcher("landscape", "@media (orientation: landscape)"),
+  variantParentMatcher("portrait", "@media (orientation: portrait)")
+];
+const variantPrint = variantParentMatcher("print", "@media print");
+
 const variantColorsMediaOrClass = (options = {}) => {
   if (options?.dark === "class") {
     return [
@@ -96,19 +106,6 @@ const variantNegative = {
   }
 };
 
-const variantMotions = [
-  variantParentMatcher("motion-reduce", "@media (prefers-reduced-motion: reduce)"),
-  variantParentMatcher("motion-safe", "@media (prefers-reduced-motion: no-preference)")
-];
-
-const variantOrientations = [
-  variantParentMatcher("landscape", "@media (orientation: landscape)"),
-  variantParentMatcher("portrait", "@media (orientation: portrait)")
-];
-
-const variantPrint = variantParentMatcher("print", "@media print");
-
-const CONTROL_BYPASS_PSEUDO_CLASS = "$$no-pseudo";
 const PseudoClasses = Object.fromEntries([
   "any-link",
   "link",
@@ -171,9 +168,6 @@ const PartClassesRE = /(part-\[(.+)]:)(.+)/;
 const PseudoElementsRE = new RegExp(`^(${PseudoElementsStr})[:-]`);
 const PseudoClassesRE = new RegExp(`^(${PseudoClassesStr})[:-]`);
 const PseudoClassFunctionsRE = new RegExp(`^(${PseudoClassFunctionsStr})-(${PseudoClassesStr})[:-]`);
-function shouldAdd(entires) {
-  return !entires.find((i) => i[0] === CONTROL_BYPASS_PSEUDO_CLASS) || void 0;
-}
 const taggedPseudoClassMatcher = (tag, parent, combinator) => {
   const re = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))[:-]`);
   const rawRe = new RegExp(`^${escapeRegExp(parent)}:`);
@@ -185,9 +179,7 @@ const taggedPseudoClassMatcher = (tag, parent, combinator) => {
         pseudo = `:${match[2]}(${pseudo})`;
       return {
         matcher: input.slice(match[1].length + tag.length + 2),
-        selector: (s, body) => {
-          return shouldAdd(body) && rawRe.test(s) ? s.replace(rawRe, `${parent}${pseudo}:`) : `${parent}${pseudo}${combinator}${s}`;
-        }
+        selector: (s) => rawRe.test(s) ? s.replace(rawRe, `${parent}${pseudo}:`) : `${parent}${pseudo}${combinator}${s}`
       };
     }
   };
@@ -209,7 +201,7 @@ const variantPseudoClasses = {
       const pseudo = PseudoClasses[match[1]] || `:${match[1]}`;
       return {
         matcher: input.slice(match[1].length + 1),
-        selector: (s, body) => shouldAdd(body) && `${s}${pseudo}`
+        selector: (s) => `${s}${pseudo}`
       };
     }
   },
@@ -223,7 +215,7 @@ const variantPseudoClassFunctions = {
       const pseudo = PseudoClasses[match[2]] || `:${match[2]}`;
       return {
         matcher: input.slice(match[1].length + match[2].length + 2),
-        selector: (s, body) => shouldAdd(body) && `${s}:${fn}(${pseudo})`
+        selector: (s) => `${s}:${fn}(${pseudo})`
       };
     }
   },
@@ -249,9 +241,7 @@ const partClasses = {
       const part = `part(${match[2]})`;
       return {
         matcher: input.slice(match[1].length),
-        selector: (s, body) => {
-          return shouldAdd(body) && `${s}::${part}`;
-        }
+        selector: (s) => `${s}::${part}`
       };
     }
   },
@@ -275,4 +265,4 @@ const variants = (options) => [
   ...variantLanguageDirections
 ];
 
-export { CONTROL_BYPASS_PSEUDO_CLASS as C, variantBreakpoints as a, variantCombinators as b, variantColorsMediaOrClass as c, variantLanguageDirections as d, variantImportant as e, variantNegative as f, variantMotions as g, variantOrientations as h, variantPrint as i, variantPseudoElements as j, variantPseudoClasses as k, variantPseudoClassFunctions as l, variantTaggedPseudoClasses as m, partClasses as p, variants as v };
+export { variantBreakpoints as a, variantCombinators as b, variantMotions as c, variantOrientations as d, variantPrint as e, variantColorsMediaOrClass as f, variantLanguageDirections as g, variantImportant as h, variantNegative as i, variantPseudoElements as j, variantPseudoClasses as k, variantPseudoClassFunctions as l, variantTaggedPseudoClasses as m, partClasses as p, variants as v };

package/dist/chunks/utilities.cjs

@@ -206,7 +206,7 @@ function fraction(str) {
 }
 function bracket(str) {
   if (str && str[0] === "[" && str[str.length - 1] === "]") {
-    return str.slice(1, -1).replace(/_/g, " ").replace(/calc\((.*)/g, (v) => {
+    return str.slice(1, -1).replace(/(url\(.*?\))/g, (v) => v.replace(/_/g, "\\_")).replace(/(?<!\\)_/g, " ").replace(/calc\((.*)/g, (v) => {
       return v.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, "$1 $2 ");
     });
   }
@@ -225,7 +225,7 @@ function time(str) {
     return unit ? `${round(num)}${unit}` : `${round(num)}ms`;
 }
 function degree(str) {
-  const match = str.match(/^(-?[0-9.]+)(deg)?$/i);
+  const match = str.match(/^(-?[0-9.]+)(deg|rad|grad|turn)?$/i);
   if (!match)
     return;
   const [, n, unit] = match;
@@ -265,11 +265,8 @@ const valueHandlers = {
 const handler = core.createValueHandler(valueHandlers);
 const h = handler;
 
-function capitalize(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
 const directionSize = (propertyPrefix) => ([_, direction, size]) => {
-  const v = handler.bracket.auto.rem.fraction.cssvar(size);
+  const v = handler.bracket.cssvar.auto.fraction.rem(size);
   if (v !== void 0)
     return directionMap[direction].map((i) => [`${propertyPrefix}${i}`, v]);
 };
@@ -353,7 +350,6 @@ const colorResolver = (property, varName) => ([, body], { theme }) => {
   }
 };
 
-exports.capitalize = capitalize;
 exports.colorResolver = colorResolver;
 exports.cornerMap = cornerMap;
 exports.directionMap = directionMap;

package/dist/chunks/utilities.mjs

@@ -204,7 +204,7 @@ function fraction(str) {
 }
 function bracket(str) {
   if (str && str[0] === "[" && str[str.length - 1] === "]") {
-    return str.slice(1, -1).replace(/_/g, " ").replace(/calc\((.*)/g, (v) => {
+    return str.slice(1, -1).replace(/(url\(.*?\))/g, (v) => v.replace(/_/g, "\\_")).replace(/(?<!\\)_/g, " ").replace(/calc\((.*)/g, (v) => {
       return v.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, "$1 $2 ");
     });
   }
@@ -223,7 +223,7 @@ function time(str) {
     return unit ? `${round(num)}${unit}` : `${round(num)}ms`;
 }
 function degree(str) {
-  const match = str.match(/^(-?[0-9.]+)(deg)?$/i);
+  const match = str.match(/^(-?[0-9.]+)(deg|rad|grad|turn)?$/i);
   if (!match)
     return;
   const [, n, unit] = match;
@@ -263,11 +263,8 @@ const valueHandlers = {
 const handler = createValueHandler(valueHandlers);
 const h = handler;
 
-function capitalize(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
 const directionSize = (propertyPrefix) => ([_, direction, size]) => {
-  const v = handler.bracket.auto.rem.fraction.cssvar(size);
+  const v = handler.bracket.cssvar.auto.fraction.rem(size);
   if (v !== void 0)
     return directionMap[direction].map((i) => [`${propertyPrefix}${i}`, v]);
 };
@@ -351,4 +348,4 @@ const colorResolver = (property, varName) => ([, body], { theme }) => {
   }
 };
 
-export { cornerMap as a, directionSize as b, colorResolver as c, directionMap as d, positionMap as e, h as f, capitalize as g, handler as h, insetMap as i, parseColor as p, valueHandlers as v, xyzMap as x };
+export { cornerMap as a, directionSize as b, colorResolver as c, directionMap as d, positionMap as e, h as f, handler as h, insetMap as i, parseColor as p, valueHandlers as v, xyzMap as x };

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import { T as Theme } from './types-c14b808b';
 export { T as Theme, a as ThemeAnimation } from './types-c14b808b';
 export { t as theme } from './default-17948303';
 export { c as colors } from './colors-338f482c';
-export { p as parseColor } from './utilities-13c33ba5';
+export { p as parseColor } from './utilities-29b01158';
 
 interface PresetMiniOptions extends PresetOptions {
     /**

package/dist/{utilities-13c33ba5.d.ts → utilities-29b01158.d.ts}

@@ -1,7 +1,6 @@
 import { DynamicMatcher, ParsedColorValue } from '@unocss/core';
 import { T as Theme } from './types-c14b808b';
 
-declare function capitalize<T extends string>(str: T): Capitalize<T>;
 /**
  * Provide {@link DynamicMatcher} function returning spacing definition. See spacing rules.
  *
@@ -53,4 +52,4 @@ declare const parseColor: (body: string, theme: Theme) => ParsedColorValue | und
  */
 declare const colorResolver: (property: string, varName: string) => DynamicMatcher;
 
-export { colorResolver as a, capitalize as c, directionSize as d, parseColor as p };
+export { colorResolver as c, directionSize as d, parseColor as p };

package/dist/utils.cjs

@@ -8,7 +8,6 @@ require('@unocss/core');
 
 
 
-exports.capitalize = utilities.capitalize;
 exports.colorResolver = utilities.colorResolver;
 exports.cornerMap = utilities.cornerMap;
 exports.directionMap = utilities.directionMap;

package/dist/utils.d.ts

@@ -1,6 +1,6 @@
 import * as _unocss_core from '@unocss/core';
 import { VariantHandler } from '@unocss/core';
-export { c as capitalize, a as colorResolver, d as directionSize, p as parseColor } from './utilities-13c33ba5';
+export { c as colorResolver, d as directionSize, p as parseColor } from './utilities-29b01158';
 import './types-c14b808b';
 
 declare const directionMap: Record<string, string[]>;

package/dist/utils.mjs

@@ -1,3 +1,3 @@
-export { g as capitalize, c as colorResolver, a as cornerMap, d as directionMap, b as directionSize, f as h, h as handler, i as insetMap, p as parseColor, e as positionMap, v as valueHandlers, x as xyzMap } from './chunks/utilities.mjs';
+export { c as colorResolver, a as cornerMap, d as directionMap, b as directionSize, f as h, h as handler, i as insetMap, p as parseColor, e as positionMap, v as valueHandlers, x as xyzMap } from './chunks/utilities.mjs';
 export { v as variantMatcher, a as variantParentMatcher } from './chunks/variants.mjs';
 import '@unocss/core';

package/dist/variants.cjs

@@ -8,7 +8,6 @@ require('@unocss/core');
 
 
 
-exports.CONTROL_BYPASS_PSEUDO_CLASS = _default.CONTROL_BYPASS_PSEUDO_CLASS;
 exports.partClasses = _default.partClasses;
 exports.variantBreakpoints = _default.variantBreakpoints;
 exports.variantColorsMediaOrClass = _default.variantColorsMediaOrClass;

package/dist/variants.d.ts

@@ -1,35 +1,31 @@
-import * as _unocss_core from '@unocss/core';
 import { Variant, VariantFunction, VariantObject } from '@unocss/core';
 import { T as Theme } from './types-c14b808b';
 import { PresetMiniOptions } from './index';
 import './default-17948303';
 import './colors-338f482c';
-import './utilities-13c33ba5';
+import './utilities-29b01158';
 
 declare const variantBreakpoints: Variant<Theme>;
 
 declare const variantCombinators: Variant[];
 
-declare const variantColorsMediaOrClass: (options?: PresetMiniOptions) => VariantFunction[];
+declare const variantMotions: VariantFunction[];
+declare const variantOrientations: VariantFunction[];
+declare const variantPrint: VariantFunction;
 
-declare const variantLanguageDirections: Variant[];
+declare const variantColorsMediaOrClass: (options?: PresetMiniOptions) => VariantFunction[];
 
 declare const variants: (options: PresetMiniOptions) => Variant<Theme>[];
 
+declare const variantLanguageDirections: Variant[];
+
 declare const variantImportant: Variant;
 declare const variantNegative: Variant;
 
-declare const variantMotions: Variant[];
-
-declare const variantOrientations: Variant[];
-
-declare const variantPrint: (input: string) => _unocss_core.VariantHandler | undefined;
-
-declare const CONTROL_BYPASS_PSEUDO_CLASS = "$$no-pseudo";
 declare const variantPseudoElements: VariantFunction;
 declare const variantPseudoClasses: VariantObject;
 declare const variantPseudoClassFunctions: VariantObject;
 declare const variantTaggedPseudoClasses: (options?: PresetMiniOptions) => VariantObject[];
 declare const partClasses: VariantObject;
 
-export { CONTROL_BYPASS_PSEUDO_CLASS, partClasses, variantBreakpoints, variantColorsMediaOrClass, variantCombinators, variantImportant, variantLanguageDirections, variantMotions, variantNegative, variantOrientations, variantPrint, variantPseudoClassFunctions, variantPseudoClasses, variantPseudoElements, variantTaggedPseudoClasses, variants };
+export { partClasses, variantBreakpoints, variantColorsMediaOrClass, variantCombinators, variantImportant, variantLanguageDirections, variantMotions, variantNegative, variantOrientations, variantPrint, variantPseudoClassFunctions, variantPseudoClasses, variantPseudoElements, variantTaggedPseudoClasses, variants };

package/dist/variants.mjs

@@ -1,3 +1,3 @@
-export { C as CONTROL_BYPASS_PSEUDO_CLASS, p as partClasses, a as variantBreakpoints, c as variantColorsMediaOrClass, b as variantCombinators, e as variantImportant, d as variantLanguageDirections, g as variantMotions, f as variantNegative, h as variantOrientations, i as variantPrint, l as variantPseudoClassFunctions, k as variantPseudoClasses, j as variantPseudoElements, m as variantTaggedPseudoClasses, v as variants } from './chunks/default3.mjs';
+export { p as partClasses, a as variantBreakpoints, f as variantColorsMediaOrClass, b as variantCombinators, h as variantImportant, g as variantLanguageDirections, c as variantMotions, i as variantNegative, d as variantOrientations, e as variantPrint, l as variantPseudoClassFunctions, k as variantPseudoClasses, j as variantPseudoElements, m as variantTaggedPseudoClasses, v as variants } from './chunks/default3.mjs';
 import './chunks/variants.mjs';
 import '@unocss/core';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-mini",
-  "version": "0.22.2",
+  "version": "0.22.3",
   "description": "The minimal preset for UnoCSS",
   "keywords": [
     "unocss",
@@ -61,7 +61,7 @@
     "*.css"
   ],
   "dependencies": {
-    "@unocss/core": "0.22.2"
+    "@unocss/core": "0.22.3"
   },
   "scripts": {
     "build": "unbuild",