@unocss/preset-mini 0.22.1 → 0.22.5

package/dist/chunks/default2.mjs

@@ -1,5 +1,5 @@
 import { h as handler, c as colorResolver, d as directionMap, p as parseColor, a as cornerMap, i as insetMap, b as directionSize, e as positionMap, x as xyzMap } from './utilities.mjs';
-import { toArray, CONTROL_SHORTCUT_NO_MERGE } from '@unocss/core';
+import { CONTROL_SHORTCUT_NO_MERGE, toArray } from '@unocss/core';
 
 const verticalAlignAlias = {
   mid: "middle",
@@ -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.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.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.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" }],
@@ -208,6 +208,117 @@ const flex = [
   ["flex-nowrap", { "flex-wrap": "nowrap" }]
 ];
 
+const varEmpty = "var(--un-empty,/*!*/ /*!*/)";
+const displays = [
+  ["inline", { display: "inline" }],
+  ["block", { display: "block" }],
+  ["inline-block", { display: "inline-block" }],
+  ["contents", { display: "contents" }],
+  ["flow-root", { display: "flow-root" }],
+  ["list-item", { display: "list-item" }],
+  ["hidden", { display: "none" }]
+];
+const appearances = [
+  ["visible", { visibility: "visible" }],
+  ["invisible", { visibility: "hidden" }],
+  ["backface-visible", { "backface-visibility": "visible" }],
+  ["backface-hidden", { "backface-visibility": "hidden" }]
+];
+const cursors = [
+  [/^cursor-(.+)$/, ([, c]) => ({ cursor: handler.bracket.cssvar(c) || c })]
+];
+const pointerEvents = [
+  ["pointer-events-auto", { "pointer-events": "auto" }],
+  ["pointer-events-none", { "pointer-events": "none" }]
+];
+const resizes = [
+  ["resize-x", { resize: "horizontal" }],
+  ["resize-y", { resize: "vertical" }],
+  ["resize", { resize: "both" }],
+  ["resize-none", { resize: "none" }]
+];
+const userSelects = [
+  ["select-auto", { "user-select": "auto" }],
+  ["select-all", { "user-select": "all" }],
+  ["select-text", { "user-select": "text" }],
+  ["select-none", { "user-select": "none" }]
+];
+const whitespaces = [
+  [/^(?:whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap)$/, ([, v]) => ({ "white-space": v })]
+];
+const contents = [
+  ["content-empty", { content: '""' }],
+  ["content-none", { content: '""' }]
+];
+const breaks = [
+  ["break-normal", { "overflow-wrap": "normal", "word-break": "normal" }],
+  ["break-words", { "overflow-wrap": "break-word" }],
+  ["break-all", { "word-break": "break-all" }]
+];
+const textOverflows = [
+  ["truncate", { "overflow": "hidden", "text-overflow": "ellipsis", "white-space": "nowrap" }],
+  ["text-ellipsis", { "text-overflow": "ellipsis" }],
+  ["text-clip", { "text-overflow": "clip" }]
+];
+const textTransforms = [
+  ["case-upper", { "text-transform": "uppercase" }],
+  ["case-lower", { "text-transform": "lowercase" }],
+  ["case-capital", { "text-transform": "capitalize" }],
+  ["case-normal", { "text-transform": "none" }]
+];
+const fontStyles = [
+  ["italic", { "font-style": "italic" }],
+  ["not-italic", { "font-style": "normal" }]
+];
+const fontSmoothings = [
+  ["antialiased", {
+    "-webkit-font-smoothing": "antialiased",
+    "-moz-osx-font-smoothing": "grayscale",
+    "font-smoothing": "grayscale"
+  }],
+  ["subpixel-antialiased", {
+    "-webkit-font-smoothing": "auto",
+    "-moz-osx-font-smoothing": "auto",
+    "font-smoothing": "auto"
+  }]
+];
+
+const shadowBase = {
+  [CONTROL_SHORTCUT_NO_MERGE]: "",
+  "--un-ring-offset-shadow": "0 0 #0000",
+  "--un-ring-shadow": "0 0 #0000",
+  "--un-shadow-inset": varEmpty,
+  "--un-shadow": "0 0 #0000"
+};
+const colorableShadows = (shadows, colorVar) => {
+  const colored = [];
+  shadows = toArray(shadows);
+  for (let i = 0; i < shadows.length; i++) {
+    const [size, color] = shadows[i].split(/\s(\S+)$/);
+    if (color.split("(").length !== color.split(")").length)
+      return shadows;
+    colored.push(`${size} var(${colorVar}, ${color})`);
+  }
+  return colored;
+};
+const boxShadows = [
+  [/^shadow(?:-(.+))?$/, ([, d], { theme }) => {
+    const v = theme.boxShadow?.[d || "DEFAULT"];
+    if (v) {
+      return [
+        shadowBase,
+        {
+          "--un-shadow": colorableShadows(v, "--un-shadow-color").join(","),
+          "box-shadow": "var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)"
+        }
+      ];
+    }
+  }],
+  [/^shadow-(.+)$/, colorResolver("--un-shadow-color", "shadow")],
+  [/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": handler.bracket.percent(opacity) })],
+  ["shadow-inset", { "--un-shadow-inset": "inset" }]
+];
+
 const weightMap = {
   thin: "100",
   extralight: "200",
@@ -230,17 +341,17 @@ const fonts = [
         "line-height": height
       };
     }
-    return { "font-size": handler.bracket.auto.rem(s) };
+    return { "font-size": handler.bracket.rem(s) };
   }],
-  [/^text-size-(.+)$/, ([, s]) => ({ "font-size": handler.bracket.auto.rem(s) })],
+  [/^text-size-(.+)$/, ([, s]) => ({ "font-size": handler.bracket.cssvar.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) })]
+  [/^(?:leading|lh)-(.+)$/, ([, s], { theme }) => ({ "line-height": theme.lineHeight?.[s] || handler.bracket.cssvar.rem(s) })],
+  [/^tracking-(.+)$/, ([, s], { theme }) => ({ "letter-spacing": theme.letterSpacing?.[s] || handler.bracket.cssvar.rem(s) })],
+  [/^word-spacing-(.+)$/, ([, s], { theme }) => ({ "word-spacing": theme.wordSpacing?.[s] || handler.bracket.cssvar.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,
@@ -251,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.fraction.rem(s) })]
 ];
 const textStrokes = [
   [/^text-stroke(?:-(.+))?$/, ([, s], { theme }) => ({ "-webkit-text-stroke-width": theme.textStrokeWidth?.[s || "DEFAULT"] || handler.bracket.cssvar.px(s) })],
@@ -262,25 +373,14 @@ const textShadows = [
   [/^text-shadow(?:-(.+))?$/, ([, s], { theme }) => {
     const v = theme.textShadow?.[s || "DEFAULT"];
     if (v != null) {
-      const shadow = toArray(v);
-      const colored = shadow.map((s2) => s2.replace(/\s\S+$/, " var(--un-text-shadow-color)"));
       return {
-        "--un-text-shadow": shadow.join(","),
-        "--un-text-shadow-colored": colored.join(","),
+        "--un-text-shadow": colorableShadows(v, "--un-text-shadow-color").join(","),
         "text-shadow": "var(--un-text-shadow)"
       };
     }
     return { "text-shadow": handler.bracket.cssvar(s) };
   }],
-  [/^text-shadow-color-(.+)$/, (m, ctx) => {
-    const color = colorResolver("--un-text-shadow-color", "text-shadow")(m, ctx);
-    if (color) {
-      return {
-        ...color,
-        "--un-text-shadow": "var(--un-text-shadow-colored)"
-      };
-    }
-  }],
+  [/^text-shadow-color-(.+)$/, colorResolver("--un-text-shadow-color", "text-shadow")],
   [/^text-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-text-shadow-opacity": handler.bracket.percent(opacity) })]
 ];
 
@@ -290,7 +390,7 @@ const directions = {
   "y": "row-"
 };
 const handleGap = ([, d = "", s]) => {
-  const v = handler.bracket.auto.rem(s);
+  const v = handler.bracket.cssvar.rem(s);
   if (v != null) {
     return {
       [`grid-${directions[d]}gap`]: v,
@@ -316,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" };
@@ -329,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" }],
@@ -374,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" }]
@@ -417,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);
@@ -427,6 +528,7 @@ function handleInsetValues([, d, v]) {
 const insets = [
   [/^(?:position-|pos-)?inset-(.+)$/, ([, v]) => ({ inset: handleInsetValue(v) })],
   [/^(?:position-|pos-)?inset-([xy])-(.+)$/, handleInsetValues],
+  [/^(?:position-|pos-)?inset-([rltbse])-(.+)$/, handleInsetValues],
   [/^(?:position-|pos-)?inset-(block|inline)-(.+)$/, handleInsetValues],
   [/^(?:position-|pos-)?inset-([bi][se])-(.+)$/, handleInsetValues],
   [/^(?:position-|pos-)?(top|left|right|bottom)-(.+)$/, ([, d, v]) => ({ [d]: handleInsetValue(v) })]
@@ -441,132 +543,21 @@ 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" }],
   ["box-content", { "box-sizing": "content-box" }]
 ];
 
-const varEmpty = "var(--un-empty,/*!*/ /*!*/)";
-const displays = [
-  ["inline", { display: "inline" }],
-  ["block", { display: "block" }],
-  ["inline-block", { display: "inline-block" }],
-  ["contents", { display: "contents" }],
-  ["flow-root", { display: "flow-root" }],
-  ["list-item", { display: "list-item" }],
-  ["hidden", { display: "none" }]
-];
-const appearances = [
-  ["visible", { visibility: "visible" }],
-  ["invisible", { visibility: "hidden" }],
-  ["backface-visible", { "backface-visibility": "visible" }],
-  ["backface-hidden", { "backface-visibility": "hidden" }]
-];
-const cursors = [
-  [/^cursor-(.+)$/, ([, c]) => ({ cursor: c })]
-];
-const pointerEvents = [
-  ["pointer-events-auto", { "pointer-events": "auto" }],
-  ["pointer-events-none", { "pointer-events": "none" }]
-];
-const resizes = [
-  ["resize-x", { resize: "horizontal" }],
-  ["resize-y", { resize: "vertical" }],
-  ["resize", { resize: "both" }],
-  ["resize-none", { resize: "none" }]
-];
-const userSelects = [
-  ["select-auto", { "user-select": "auto" }],
-  ["select-all", { "user-select": "all" }],
-  ["select-text", { "user-select": "text" }],
-  ["select-none", { "user-select": "none" }]
-];
-const whitespaces = [
-  [/^(?:whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap)$/, ([, v]) => ({ "white-space": v })]
-];
-const contents = [
-  ["content-empty", { content: '""' }],
-  ["content-none", { content: '""' }]
-];
-const breaks = [
-  ["break-normal", { "overflow-wrap": "normal", "word-break": "normal" }],
-  ["break-words", { "overflow-wrap": "break-word" }],
-  ["break-all", { "word-break": "break-all" }]
-];
-const textOverflows = [
-  ["truncate", { "overflow": "hidden", "text-overflow": "ellipsis", "white-space": "nowrap" }],
-  ["text-ellipsis", { "text-overflow": "ellipsis" }],
-  ["text-clip", { "text-overflow": "clip" }]
-];
-const textTransforms = [
-  ["case-upper", { "text-transform": "uppercase" }],
-  ["case-lower", { "text-transform": "lowercase" }],
-  ["case-capital", { "text-transform": "capitalize" }],
-  ["case-normal", { "text-transform": "none" }]
-];
-const fontStyles = [
-  ["italic", { "font-style": "italic" }],
-  ["not-italic", { "font-style": "normal" }]
-];
-const fontSmoothings = [
-  ["antialiased", {
-    "-webkit-font-smoothing": "antialiased",
-    "-moz-osx-font-smoothing": "grayscale",
-    "font-smoothing": "grayscale"
-  }],
-  ["subpixel-antialiased", {
-    "-webkit-font-smoothing": "auto",
-    "-moz-osx-font-smoothing": "auto",
-    "font-smoothing": "auto"
-  }]
-];
-
-const shadowBase = {
-  [CONTROL_SHORTCUT_NO_MERGE]: "",
-  "--un-ring-offset-shadow": "0 0 #0000",
-  "--un-ring-shadow": "0 0 #0000",
-  "--un-shadow-inset": varEmpty,
-  "--un-shadow": "0 0 #0000",
-  "--un-shadow-colored": "0 0 #0000"
-};
-const boxShadows = [
-  [/^shadow(?:-(.+))?$/, ([, d], { theme }) => {
-    const v = theme.boxShadow?.[d || "DEFAULT"];
-    if (v) {
-      const shadow = toArray(v);
-      const colored = shadow.map((s) => s.replace(/\s\S+$/, " var(--un-shadow-color)"));
-      return [
-        shadowBase,
-        {
-          "--un-shadow": shadow.join(","),
-          "--un-shadow-colored": colored.join(","),
-          "box-shadow": "var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)"
-        }
-      ];
-    }
-  }],
-  [/^shadow-(.+)$/, (m, ctx) => {
-    const color = colorResolver("--un-shadow-color", "shadow")(m, ctx);
-    if (color) {
-      return {
-        ...color,
-        "--un-shadow": "var(--un-shadow-colored)"
-      };
-    }
-  }],
-  [/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": handler.bracket.percent.cssvar(opacity) })],
-  ["shadow-inset", { "--un-shadow-inset": "inset" }]
-];
-
 const ringBase = {
+  ...shadowBase,
   "--un-ring-inset": varEmpty,
   "--un-ring-offset-width": "0px",
   "--un-ring-offset-color": "#fff",
-  "--un-ring-color": "rgba(147,197,253,0.5)",
-  ...shadowBase
+  "--un-ring-width": "0px",
+  "--un-ring-color": "rgba(147,197,253,0.5)"
 };
 const rings = [
   [/^ring(?:-(.+))?$/, ([, d]) => {
@@ -575,15 +566,17 @@ const rings = [
       return [
         ringBase,
         {
+          "--un-ring-width": value,
           "--un-ring-offset-shadow": "var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color)",
-          "--un-ring-shadow": `var(--un-ring-inset) 0 0 0 calc(${value} + var(--un-ring-offset-width)) var(--un-ring-color)`,
+          "--un-ring-shadow": "var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color)",
           "box-shadow": "var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow, 0 0 #0000)"
         }
       ];
     }
   }],
+  [/^ring-(?:width-|size-)(.+)$/, ([, d]) => ({ "--un-ring-width": handler.bracket.cssvar.px(d) })],
   ["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")],
@@ -611,7 +604,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) })],
@@ -637,14 +630,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")]
 ];
 
@@ -695,9 +688,9 @@ const transformBase = {
   [CONTROL_SHORTCUT_NO_MERGE]: ""
 };
 const transforms = [
-  [/^origin-([-\w]{3,})$/, ([, s]) => ({ "transform-origin": positionMap[s] })],
-  [/^perspect-(.+)$/, ([, s]) => {
-    const v = handler.px.numberWithUnit(s);
+  [/^(?:transform-)?origin-(.+)$/, ([, s]) => ({ "transform-origin": positionMap[s] ?? handler.bracket.cssvar(s) })],
+  [/^(?:transform-)?perspect(?:ive)?-(.+)$/, ([, s]) => {
+    const v = handler.bracket.cssvar.px.numberWithUnit(s);
     if (v != null) {
       return {
         "-webkit-perspective": v,
@@ -705,8 +698,8 @@ const transforms = [
       };
     }
   }],
-  [/^perspect-origin-(.+)$/, ([, s]) => {
-    const v = handler.bracket(s) ?? (s.length >= 3 ? positionMap[s] : void 0);
+  [/^(?:transform-)?perspect(?:ive)?-origin-(.+)$/, ([, s]) => {
+    const v = handler.bracket.cssvar(s) ?? (s.length >= 3 ? positionMap[s] : void 0);
     if (v != null) {
       return {
         "-webkit-perspective-origin": v,
@@ -714,16 +707,15 @@ const transforms = [
       };
     }
   }],
-  [/^translate-()(.+)$/, handleTranslate],
-  [/^translate-([xyz])-(.+)$/, handleTranslate],
-  [/^rotate-()(.+)$/, handleRotate],
-  [/^rotate(-[xyz])-(.+)$/, handleRotate],
-  [/^skew-()(.+)$/, handleSkew],
-  [/^skew-([xy])-(.+)$/, handleSkew],
-  [/^scale-()(.+)$/, handleScale],
-  [/^scale-([xyz])-(.+)$/, handleScale],
-  ["preserve-3d", { "transform-style": "preserve-3d" }],
-  ["preserve-flat", { "transform-style": "flat" }],
+  [/^(?:transform-)?translate-()(.+)$/, handleTranslate],
+  [/^(?:transform-)?translate-([xyz])-(.+)$/, handleTranslate],
+  [/^(?:transform-)?rotate-()(.+)$/, handleRotate],
+  [/^(?:transform-)?rotate-([xyz])-(.+)$/, handleRotate],
+  [/^(?:transform-)?skew-([xy])-(.+)$/, handleSkew],
+  [/^(?:transform-)?scale-()(.+)$/, handleScale],
+  [/^(?:transform-)?scale-([xyz])-(.+)$/, handleScale],
+  [/^(?:transform-)?preserve-3d$/, () => ({ "transform-style": "preserve-3d" })],
+  [/^(?:transform-)?preserve-flat$/, () => ({ "transform-style": "flat" })],
   [/^transform$/, () => [
     transformBase,
     { transform: "var(--un-transform)" }
@@ -733,7 +725,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,
@@ -745,7 +737,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,
@@ -756,20 +748,34 @@ function handleScale([, d, b]) {
     ];
   }
 }
-function handleRotate([, d, b]) {
-  const v = handler.bracket.degree(b);
+function handleRotate([, d = "", b]) {
+  const v = handler.bracket.cssvar.degree(b);
   if (v != null) {
-    return [
-      transformBase,
-      {
-        [`--un-rotate${d || ""}`]: v,
-        transform: "var(--un-transform)"
-      }
-    ];
+    if (d) {
+      return [
+        transformBase,
+        {
+          "--un-rotate": 0,
+          [`--un-rotate-${d}`]: v,
+          "transform": "var(--un-transform)"
+        }
+      ];
+    } else {
+      return [
+        transformBase,
+        {
+          "--un-rotate-x": 0,
+          "--un-rotate-y": 0,
+          "--un-rotate-z": 0,
+          "--un-rotate": v,
+          "transform": "var(--un-transform)"
+        }
+      ];
+    }
   }
 }
 function handleSkew([, d, b]) {
-  const v = handler.bracket.degree(b);
+  const v = handler.bracket.cssvar.degree(b);
   if (v != null) {
     return [
       transformBase,
@@ -782,38 +788,30 @@ 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",
-  "items": "align-items",
-  "self": "align-self",
-  "object": "object-fit"
+  backface: "backface-visibility",
+  break: "word-break",
+  case: "text-transform",
+  content: "align-content",
+  flex: "flex",
+  fw: "font-weight",
+  items: "align-items",
+  justify: "justify-content",
+  select: "user-select",
+  self: "align-self",
+  vertical: "vertical-align",
+  visible: "visibility",
+  whitespace: "white-space",
+  ws: "white-space"
 };
 const cssVariables = [
-  [/^(.+)-\$(.+)$/, ([, name, varname]) => {
+  [/^(.+?)-\$(.+)$/, ([, name, varname]) => {
     const prop = variablesAbbrMap[name];
     if (prop)
       return { [prop]: `var(--${varname})` };
   }]
 ];
 const cssProperty = [
-  [/^\[(.+):(.+)\]$/, ([, prop, value]) => ({ [prop]: handler.bracket(`[${value}]`) })]
+  [/^\[([^:]+):(.+)\]$/, ([, prop, value]) => ({ [prop]: handler.bracket(`[${value}]`) })]
 ];
 
 const questionMark = [
@@ -833,7 +831,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);
@@ -845,7 +843,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|decoration)-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" }]
@@ -855,9 +853,9 @@ const svgUtilities = [
   [/^fill-(.+)$/, colorResolver("fill", "fill")],
   [/^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-(?:width-|size-)?(.+)$/, ([, s]) => ({ "stroke-width": handler.bracket.cssvar.fraction.px.number(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" }],
@@ -928,4 +926,4 @@ const rules = [
   questionMark
 ].flat(1);
 
-export { cssVariables as $, boxShadows as A, sizes as B, aspectRatio as C, paddings as D, margins as E, varEmpty as F, displays as G, appearances as H, cursors as I, pointerEvents as J, resizes as K, userSelects as L, whitespaces as M, contents as N, breaks as O, textOverflows as P, textTransforms as Q, fontStyles as R, fontSmoothings as S, svgUtilities as T, transforms as U, transitions as V, fonts as W, tabSizes as X, textIndents as Y, textStrokes as Z, textShadows as _, appearance as a, cssProperty as a0, textDecorations as a1, borders as b, opacity as c, textColors as d, bgColors as e, flex as f, gaps as g, grids as h, overflows as i, justifies as j, orders as k, alignments as l, placements as m, insets as n, outline as o, positions as p, floats as q, rules as r, boxSizing as s, textAligns as t, questionMark as u, verticalAligns as v, willChange as w, rings as x, shadowBase as y, zIndexes as z };
+export { textShadows as $, colorableShadows as A, boxShadows as B, sizes as C, aspectRatio as D, paddings as E, margins as F, varEmpty as G, displays as H, appearances as I, cursors as J, pointerEvents as K, resizes as L, userSelects as M, whitespaces as N, contents as O, breaks as P, textOverflows as Q, textTransforms as R, fontStyles as S, fontSmoothings as T, svgUtilities as U, transforms as V, transitions as W, fonts as X, tabSizes as Y, textIndents as Z, textStrokes as _, appearance as a, cssVariables as a0, cssProperty as a1, textDecorations as a2, borders as b, opacity as c, textColors as d, bgColors as e, flex as f, gaps as g, grids as h, overflows as i, justifies as j, orders as k, alignments as l, placements as m, insets as n, outline as o, positions as p, floats as q, rules as r, boxSizing as s, textAligns as t, questionMark as u, verticalAligns as v, willChange as w, rings as x, shadowBase as y, zIndexes as z };