@unocss/preset-mini 0.19.0 → 0.20.4

package/dist/chunks/default2.mjs

@@ -1,5 +1,5 @@
-import { h as handler, c as colorResolver$1, d as directionMap, p as parseColor, a as cornerMap, b as capitalize, e as directionSize, x as xyzMap } from './utilities.mjs';
-import { toArray, cacheFunction } from '@unocss/core';
+import { h as handler, c as colorResolver, d as directionMap, p as parseColor, a as cornerMap, b as capitalize, e as directionSize, f as positionMap, x as xyzMap } from './utilities.mjs';
+import { toArray } from '@unocss/core';
 import { C as CONTROL_BYPASS_PSEUDO_CLASS } from './pseudo.mjs';
 
 const verticalAlignAlias = {
@@ -19,7 +19,7 @@ const textAligns = [
 
 const outline = [
   [/^outline-(?:width-|size-)?(.+)$/, ([, d]) => ({ "outline-width": handler.bracket.fraction.auto.rem(d) })],
-  [/^outline-(?:color-)?(.+)$/, colorResolver$1("outline-color", "outline-color")],
+  [/^outline-(?:color-)?(.+)$/, colorResolver("outline-color", "outline-color")],
   [/^outline-offset-(.+)$/, ([, d]) => ({ "outline-offset": handler.bracket.fraction.auto.rem(d) })],
   ["outline", { "outline-style": "solid" }],
   [/^outline-(auto|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit|initial|revert|unset)$/, ([, c]) => ({ "outline-style": c })],
@@ -36,63 +36,61 @@ const willChange = [
 ];
 
 const borders = [
-  [/^border$/, handlerBorder],
-  [/^(?:border|b)()-(.+)$/, handlerBorder],
-  [/^(?:border|b)-([^-]+)(?:-(.+))?$/, handlerBorder],
-  [/^(?:border|b)()-size-(.+)$/, handlerBorderSize],
-  [/^(?:border|b)-([^-]+)-size-(.+)$/, handlerBorderSize],
-  [/^(?:border|b)()-(.+)$/, handlerBorderColor],
-  [/^(?:border|b)-([^-]+)(?:-(.+))?$/, handlerBorderColor],
-  [/^(?:border|b)-op(?:acity)?-?(.+)$/, ([, opacity], { options: { variablePrefix: p } }) => ({ [`--${p}border-opacity`]: handler.bracket.percent(opacity) })],
-  [/^(?:border|b)-([^-]+)-op(?:acity)?-?(.+)$/, ([, a, opacity], { options: { variablePrefix: p } }) => {
-    const v = handler.bracket.percent(opacity);
-    const d = directionMap[a];
-    if (v !== void 0 && d)
-      return d.map((i) => [`--${p}border${i}-opacity`, v]);
-  }],
-  [/^(?:border-)?(?:rounded|rd)$/, handlerRounded],
-  [/^(?:border-)?(?:rounded|rd)(?:-(.+))?$/, handlerRounded],
-  [/^(?:border-)?(?:rounded|rd)(?:-([^-]+))?(?:-(.+))?$/, handlerRounded],
+  [/^(?:border|b)()(?:-(.+))?$/, handlerBorder],
+  [/^(?:border|b)-([xy])(?:-(.+))?$/, handlerBorder],
+  [/^(?:border|b)-([rltbse])(?:-(.+))?$/, handlerBorder],
+  [/^(?:border|b)-()size-(.+)$/, handlerBorderSize],
+  [/^(?:border|b)-([xy])-size-(.+)$/, handlerBorderSize],
+  [/^(?:border|b)-([rltbse])-size-(.+)$/, handlerBorderSize],
+  [/^(?:border|b)-()(?:color-)?(.+)$/, handlerBorderColor],
+  [/^(?:border|b)-([xy])-(?:color-)?(.+)$/, handlerBorderColor],
+  [/^(?:border|b)-([rltbse])-(?:color-)?(.+)$/, handlerBorderColor],
+  [/^(?:border|b)-()op(?:acity)?-?(.+)$/, handlerBorderOpacity],
+  [/^(?:border|b)-([xy])-op(?:acity)?-?(.+)$/, handlerBorderOpacity],
+  [/^(?:border|b)-([rltbse])-op(?:acity)?-?(.+)$/, handlerBorderOpacity],
+  [/^(?:border-)?(?:rounded|rd)()(?:-(.+))?$/, handlerRounded],
+  [/^(?:border-)?(?:rounded|rd)-([xy])(?:-(.+))?$/, handlerRounded],
+  [/^(?:border-)?(?:rounded|rd)-([rltb])(?:-(.+))?$/, handlerRounded],
+  [/^(?:border-)?(?:rounded|rd)-([rltb]{2})(?:-(.+))?$/, handlerRounded],
   ["border-solid", { "border-style": "solid" }],
   ["border-dashed", { "border-style": "dashed" }],
   ["border-dotted", { "border-style": "dotted" }],
   ["border-double", { "border-style": "double" }],
+  ["border-hidden", { "border-style": "hidden" }],
   ["border-none", { "border-style": "none" }]
 ];
 const borderHasColor = (color, { theme }) => {
   return color !== void 0 && !!parseColor(color, theme)?.color;
 };
-const borderColorResolver = (direction) => ([, body], { theme, options: { variablePrefix: p } }) => {
+const borderColorResolver = (direction) => ([, body], { theme }) => {
   const data = parseColor(body, theme);
   if (!data)
     return;
-  const { opacity, color, rgba } = data;
+  const { alpha, opacity, color, rgba } = data;
   if (!color)
     return;
-  const a = opacity ? opacity[0] === "[" ? handler.bracket.percent(opacity) : parseFloat(opacity) / 100 : rgba?.[3];
   if (rgba) {
-    if (a != null && !Number.isNaN(a)) {
-      rgba[3] = typeof a === "string" && !a.includes("%") ? parseFloat(a) : a;
+    if (alpha != null) {
       return {
         [`border${direction}-color`]: `rgba(${rgba.join(",")})`
       };
     } else {
       if (direction === "") {
         return {
-          [`--${p}border-opacity`]: 1,
-          [`border${direction}-color`]: `rgba(${rgba.slice(0, 3).join(",")},var(--${p}border${direction}-opacity))`
+          "--un-border-opacity": (opacity && handler.cssvar(opacity)) ?? 1,
+          [`border${direction}-color`]: `rgba(${rgba.join(",")},var(--un-border${direction}-opacity))`
         };
       } else {
         return {
-          [`--${p}border-opacity`]: 1,
-          [`--${p}border${direction}-opacity`]: `var(--${p}border-opacity)`,
-          [`border${direction}-color`]: `rgba(${rgba.slice(0, 3).join(",")},var(--${p}border${direction}-opacity))`
+          "--un-border-opacity": (opacity && handler.cssvar(opacity)) ?? 1,
+          [`--un-border${direction}-opacity`]: "var(--un-border-opacity)",
+          [`border${direction}-color`]: `rgba(${rgba.join(",")},var(--un-border${direction}-opacity))`
         };
       }
     }
   } else {
     return {
-      [`border${direction}-color`]: color.replace("%alpha", `${a || 1}`)
+      [`border${direction}-color`]: color.replace("%alpha", `${alpha || 1}`)
     };
   }
 };
@@ -105,42 +103,52 @@ function handlerBorder(m) {
     ];
   }
 }
-function handlerBorderSize([, a, b]) {
-  const [d, s = "1"] = directionMap[a] ? [a, b] : ["", a];
-  const v = handler.bracket.px(s);
-  if (v !== void 0)
-    return directionMap[d].map((i) => [`border${i}-width`, v]);
+function handlerBorderSize([, a = "", b = "1"]) {
+  const v = handler.bracket.px(b);
+  if (a in directionMap && v != null)
+    return directionMap[a].map((i) => [`border${i}-width`, v]);
 }
-function handlerBorderColor([, a, c], ctx) {
-  if (borderHasColor(c, ctx)) {
-    return Object.assign({}, ...directionMap[directionMap[a] ? a : ""].map((i) => borderColorResolver(i)(["", c], ctx)));
+function handlerBorderColor([, a = "", c], ctx) {
+  if (a in directionMap && borderHasColor(c, ctx)) {
+    return Object.assign({}, ...directionMap[a].map((i) => borderColorResolver(i)(["", c], ctx)));
   }
 }
-function handlerRounded([, a, b], { theme }) {
-  const [d, s = "DEFAULT"] = cornerMap[a] ? [a, b] : ["", a];
+function handlerBorderOpacity([, a = "", opacity]) {
+  const v = handler.bracket.percent(opacity);
+  if (a in directionMap && v != null)
+    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);
-  if (v !== void 0)
-    return cornerMap[d].map((i) => [`border${i}-radius`, v]);
+  if (a in cornerMap && v != null)
+    return cornerMap[a].map((i) => [`border${i}-radius`, v]);
 }
 
 const opacity = [
   [/^op(?:acity)?-?(.+)$/, ([, d]) => ({ opacity: handler.bracket.percent.cssvar(d) })]
 ];
 const textColors = [
-  [/^(?:text|color|c)-(.+)$/, colorResolver$1("color", "text")],
+  [/^(?:text|color|c)-(.+)$/, colorResolver("color", "text")],
   [/^(?:text|color|c)-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-text-opacity": handler.bracket.percent.cssvar(opacity2) })]
 ];
 const bgColors = [
-  [/^bg-(.+)$/, colorResolver$1("background-color", "bg")],
+  [/^bg-(.+)$/, colorResolver("background-color", "bg")],
   [/^bg-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-bg-opacity": handler.bracket.percent(opacity2) })]
 ];
 
+const transitionPropertyGroup = {
+  all: "all",
+  colors: ["color", "background-color", "border-color", "text-decoration-color", "fill", "stroke"].join(","),
+  opacity: "opacity",
+  shadow: "box-shadow",
+  transform: "transform"
+};
 const transitionProperty = (prop) => {
-  return handler.properties(prop) || (prop === "all" ? prop : void 0);
+  return handler.properties(prop) ?? transitionPropertyGroup[prop];
 };
 const transitions = [
-  [/^transition(?:-([a-z-]+(?:,[a-z-]+)*))?(?:-(\d+))?$/, ([, prop = "all", duration = "150"]) => {
-    const p = transitionProperty(prop);
+  [/^transition(?:-([a-z-]+(?:,[a-z-]+)*))?(?:-(\d+))?$/, ([, prop, duration = "150"]) => {
+    const p = prop != null ? transitionProperty(prop) : [transitionPropertyGroup.colors, "opacity", "box-shadow", "transform", "filter", "backdrop-filter"].join(",");
     if (p) {
       return {
         "transition-property": p,
@@ -149,14 +157,14 @@ const transitions = [
       };
     }
   }],
-  [/^duration-(\d+)$/, ([, duration = "150"]) => ({ "transition-duration": `${duration}ms` })],
+  [/^(?: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) })],
   ["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)" }],
   ["ease-out", { "transition-timing-function": "cubic-bezier(0, 0, 0.2, 1)" }],
   ["ease-in-out", { "transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)" }],
-  [/^transition-delay-(\d+)$/, ([, v]) => ({ "transition-delay": `${v}ms` })],
-  [/^transition-duration-(\d+)$/, ([, v]) => ({ "transition-duration": `${v}ms` })],
   [/^(?:transition-)?property-(.+)$/, ([, v]) => ({ "transition-property": handler.global(v) || transitionProperty(v) })],
   ["transition-property-none", { "transition-property": "none" }],
   ["property-none", { "transition-property": "none" }],
@@ -176,6 +184,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-row", { "flex-direction": "row" }],
   ["flex-row-reverse", { "flex-direction": "row-reverse" }],
   ["flex-col", { "flex-direction": "column" }],
@@ -197,14 +206,7 @@ const weightMap = {
   black: "900"
 };
 const fonts = [
-  [/^font-(\w+)$/, ([, d], { theme }) => {
-    const font = theme.fontFamily?.[d];
-    if (font) {
-      return {
-        "font-family": font
-      };
-    }
-  }],
+  [/^font-(\w+)$/, ([, d], { theme }) => ({ "font-family": theme.fontFamily?.[d] })],
   [/^text-(.+)$/, ([, s = "base"], { theme }) => {
     const size = handler.bracket.auto.rem(s);
     if (size)
@@ -218,37 +220,16 @@ const fonts = [
       };
     }
   }],
-  [/^text-size-(.+)$/, ([, s]) => {
-    const raw = handler.bracket.auto.rem(s);
-    if (raw)
-      return { "font-size": raw };
-  }],
-  [/^(?:font|fw)-?([^-]+)$/, ([, s]) => {
-    const v = weightMap[s] || handler.number(s);
-    if (v)
-      return { "font-weight": v };
-  }],
-  [/^(?:leading|lh)-([^-]+)$/, ([, s], { theme }) => {
-    const v = theme.lineHeight?.[s] || handler.bracket.auto.rem(s);
-    if (v !== null)
-      return { "line-height": v };
-  }],
-  [/^tracking-([^-]+)$/, ([, s], { theme }) => {
-    const v = theme.letterSpacing?.[s] || handler.bracket.auto.rem(s);
-    if (v !== null)
-      return { "letter-spacing": v };
-  }],
-  [/^word-spacing-([^-]+)$/, ([, s], { theme }) => {
-    const v = theme.wordSpacing?.[s] || handler.bracket.auto.rem(s);
-    if (v !== null)
-      return { "word-spacing": v };
-  }]
+  [/^text-size-(.+)$/, ([, s]) => ({ "font-size": handler.bracket.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]) => {
-    s = s || "4";
-    const v = handler.bracket.global.number(s);
-    if (v !== null) {
+    const v = handler.bracket.global.number(s || "4");
+    if (v != null) {
       return {
         "-moz-tab-size": v,
         "-o-tab-size": v,
@@ -258,44 +239,34 @@ const tabSizes = [
   }]
 ];
 const textIndents = [
-  [/^indent(?:-(.+))?$/, ([, s], { theme }) => {
-    const v = theme.textIndent?.[s || "DEFAULT"] || handler.bracket.cssvar.fraction.auto.rem(s);
-    if (v != null)
-      return { "text-indent": v };
-  }]
+  [/^indent(?:-(.+))?$/, ([, s], { theme }) => ({ "text-indent": theme.textIndent?.[s || "DEFAULT"] || handler.bracket.cssvar.fraction.auto.rem(s) })]
 ];
 const textStrokes = [
-  [/^text-stroke(?:-(.+))?$/, ([, s], { theme }) => {
-    const v = theme.textStrokeWidth?.[s || "DEFAULT"] || handler.bracket.cssvar.px(s);
-    if (v != null)
-      return { "-webkit-text-stroke-width": v };
-  }],
-  [/^text-stroke-(.+)$/, colorResolver$1("-webkit-text-stroke-color", "text-stroke")],
+  [/^text-stroke(?:-(.+))?$/, ([, s], { theme }) => ({ "-webkit-text-stroke-width": theme.textStrokeWidth?.[s || "DEFAULT"] || handler.bracket.cssvar.px(s) })],
+  [/^text-stroke-(.+)$/, colorResolver("-webkit-text-stroke-color", "text-stroke")],
   [/^text-stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-text-stroke-opacity": handler.bracket.percent(opacity) })]
 ];
 const textShadows = [
-  [/^text-shadow(?:-(.+))?$/, ([, s], { theme }) => {
-    const v = theme.textShadow?.[s || "DEFAULT"] || handler.bracket.cssvar(s);
-    if (v != null)
-      return { "text-shadow": v };
-  }]
+  [/^text-shadow(?:-(.+))?$/, ([, s], { theme }) => ({ "text-shadow": theme.textShadow?.[s || "DEFAULT"] || handler.bracket.cssvar(s) })]
 ];
 
+const directions = {
+  "": "",
+  "x": "column-",
+  "y": "row-"
+};
+const handleGap = ([, d = "", s]) => {
+  const v = handler.bracket.auto.rem(s);
+  if (v != null) {
+    return {
+      [`grid-${directions[d]}gap`]: v,
+      [`${directions[d]}gap`]: v
+    };
+  }
+};
 const gaps = [
-  [/^(?:flex-|grid-)?gap-(x-|y-)?([^-]+)$/, ([, d = "", s]) => {
-    const v = handler.bracket.auto.rem(s);
-    if (v != null) {
-      const direction = {
-        "": "",
-        "x-": "column-",
-        "y-": "row-"
-      }[d];
-      return {
-        [`grid-${direction}gap`]: v,
-        [`${direction}gap`]: v
-      };
-    }
-  }]
+  [/^(?:flex-|grid-)?gap-()([^-]+)$/, handleGap],
+  [/^(?:flex-|grid-)?gap-([xy])-([^-]+)$/, handleGap]
 ];
 
 const calSize = (s, theme) => toArray(theme.fontSize?.[s] || handler.bracket.auto.rem(s))[0];
@@ -353,7 +324,6 @@ const overflows = [
   [/^(?:overflow|of)-([xy])-(.+)$/, ([, d, v]) => overflowValues.includes(v) ? { [`overflow-${d}`]: v } : void 0]
 ];
 
-const basicSet = ["auto", "start", "end", "center", "stretch"];
 const positions = [
   [/^(?:position-|pos-)?(relative|absolute|fixed|sticky)$/, ([, v]) => ({ position: v })],
   [/^(?:position-|pos-)?(static)$/, ([, v]) => ({ position: v })]
@@ -365,8 +335,15 @@ const justifies = [
   ["justify-between", { "justify-content": "space-between" }],
   ["justify-around", { "justify-content": "space-around" }],
   ["justify-evenly", { "justify-content": "space-evenly" }],
-  ...basicSet.map((i) => [`justify-items-${i}`, { "justify-items": i }]),
-  ...basicSet.map((i) => [`justify-self-${i}`, { "justify-self": i }])
+  ["justify-items-start", { "justify-items": "start" }],
+  ["justify-items-end", { "justify-items": "end" }],
+  ["justify-items-center", { "justify-items": "center" }],
+  ["justify-items-stretch", { "justify-items": "stretch" }],
+  ["justify-self-auto", { "justify-self": "auto" }],
+  ["justify-self-start", { "justify-self": "start" }],
+  ["justify-self-end", { "justify-self": "end" }],
+  ["justify-self-center", { "justify-self": "center" }],
+  ["justify-self-stretch", { "justify-self": "stretch" }]
 ];
 const orders = [
   [/^order-(.+)$/, ([, v]) => ({ order: handler.bracket.number(v) })],
@@ -375,9 +352,9 @@ const orders = [
   ["order-none", { order: "0" }]
 ];
 const alignments = [
+  ["content-center", { "align-content": "center" }],
   ["content-start", { "align-content": "flex-start" }],
   ["content-end", { "align-content": "flex-end" }],
-  ["content-center", { "align-content": "center" }],
   ["content-between", { "align-content": "space-between" }],
   ["content-around", { "align-content": "space-around" }],
   ["content-evenly", { "align-content": "space-evenly" }],
@@ -390,29 +367,39 @@ const alignments = [
   ["self-start", { "align-self": "flex-start" }],
   ["self-end", { "align-self": "flex-end" }],
   ["self-center", { "align-self": "center" }],
-  ["self-stretch", { "align-self": "stretch" }]
+  ["self-stretch", { "align-self": "stretch" }],
+  ["self-baseline", { "align-self": "baseline" }]
 ];
 const placements = [
+  ["place-content-center", { "place-content": "center" }],
   ["place-content-start", { "place-content": "start" }],
   ["place-content-end", { "place-content": "end" }],
-  ["place-content-center", { "place-content": "center" }],
   ["place-content-between", { "place-content": "space-between" }],
   ["place-content-around", { "place-content": "space-around" }],
   ["place-content-evenly", { "place-content": "space-evenly" }],
   ["place-content-stretch", { "place-content": "stretch" }],
-  ...basicSet.map((i) => [`place-items-${i}`, { "place-items": i }]),
-  ...basicSet.map((i) => [`place-self-${i}`, { "place-self": i }])
+  ["place-items-start", { "place-items": "start" }],
+  ["place-items-end", { "place-items": "end" }],
+  ["place-items-center", { "place-items": "center" }],
+  ["place-items-stretch", { "place-items": "stretch" }],
+  ["place-self-auto", { "place-self": "auto" }],
+  ["place-self-start", { "place-self": "start" }],
+  ["place-self-end", { "place-self": "end" }],
+  ["place-self-center", { "place-self": "center" }],
+  ["place-self-stretch", { "place-self": "stretch" }]
 ];
 function handleInsetValue(v) {
   return { auto: "auto", full: "100%" }[v] ?? handler.bracket.fraction.cssvar.auto.rem(v);
 }
+function handleInsetValues([, d, v]) {
+  const r = handleInsetValue(v);
+  if (r != null && d in directionMap)
+    return directionMap[d].map((i) => [i.slice(1), r]);
+}
 const insets = [
-  [/^(?:position-|pos-)?(top|left|right|bottom|inset)-(.+)$/, ([, d, v]) => ({ [d]: handleInsetValue(v) })],
-  [/^(?:position-|pos-)?inset-([xy])-(.+)$/, ([, d, v]) => {
-    const r = handleInsetValue(v);
-    if (r != null && d in directionMap)
-      return directionMap[d].map((i) => [i.slice(1), r]);
-  }]
+  [/^(?:position-|pos-)?inset-()(.+)$/, handleInsetValues],
+  [/^(?:position-|pos-)?inset-([xy])-(.+)$/, handleInsetValues],
+  [/^(?:position-|pos-)?(top|left|right|bottom)-(.+)$/, ([, d, v]) => ({ [d]: handleInsetValue(v) })]
 ];
 const floats = [
   ["float-left", { float: "left" }],
@@ -432,7 +419,6 @@ const boxSizing = [
   ["box-content", { "box-sizing": "content-box" }]
 ];
 
-const varEmptyFn = cacheFunction((prefix) => `var(--${prefix}empty,/*!*/ /*!*/)`);
 const varEmpty = "var(--un-empty,/*!*/ /*!*/)";
 const displays = [
   ["inline", { display: "inline" }],
@@ -508,31 +494,30 @@ const fontSmoothings = [
 ];
 
 const rings = [
-  [/^ring-?(.*)$/, ([, d], { options: { variablePrefix: p } }) => {
+  [/^ring-?(.*)$/, ([, d]) => {
     const value = handler.px(d || "1");
     if (value) {
       return {
-        [`--${p}ring-inset`]: varEmptyFn(p),
-        [`--${p}ring-offset-width`]: "0px",
-        [`--${p}ring-offset-color`]: "#fff",
-        [`--${p}ring-color`]: "rgba(59, 130, 246, .5)",
-        [`--${p}ring-offset-shadow`]: `var(--${p}ring-inset) 0 0 0 var(--${p}ring-offset-width) var(--${p}ring-offset-color)`,
-        [`--${p}ring-shadow`]: `var(--${p}ring-inset) 0 0 0 calc(${value} + var(--${p}ring-offset-width)) var(--${p}ring-color)`,
-        "-webkit-box-shadow": `var(--${p}ring-offset-shadow), var(--${p}ring-shadow), var(--${p}shadow, 0 0 #0000)`,
-        "box-shadow": `var(--${p}ring-offset-shadow), var(--${p}ring-shadow), var(--${p}shadow, 0 0 #0000)`
+        "--un-ring-inset": varEmpty,
+        "--un-ring-offset-width": "0px",
+        "--un-ring-offset-color": "#fff",
+        "--un-ring-color": "rgba(59, 130, 246, .5)",
+        "--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)`,
+        "box-shadow": "var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow, 0 0 #0000)"
       };
     }
   }],
-  [/^ring-offset$/, (_, { options: { variablePrefix: p } }) => ({ [`--${p}ring-offset-width`]: "1px" })],
-  [/^ring-offset-(.+)$/, ([, d], { options: { variablePrefix: p } }) => ({ [`--${p}ring-offset-width`]: handler.px(d || "1") })],
-  [/^ring-(.+)$/, (m, ctx) => colorResolver$1(`--${ctx.options.variablePrefix}ring-color`, "ring")(m, ctx)],
-  [/^ring-op(?:acity)?-?(.+)$/, ([, opacity], { options: { variablePrefix: p } }) => ({ [`--${p}ring-opacity`]: handler.bracket.percent(opacity) })],
-  [/^ring-offset-(.+)$/, (m, ctx) => colorResolver$1(`--${ctx.options.variablePrefix}ring-offset-color`, "ring-offset")(m, ctx)],
-  [/^ring-offset-op(?:acity)?-?(.+)$/, ([, opacity], { options: { variablePrefix: p } }) => ({ [`--${p}ring-offset-opacity`]: handler.bracket.percent(opacity) })],
-  [/^ring-inset$/, (_, { options: { variablePrefix: p } }) => ({ [`--${p}ring-inset`]: "inset" })]
+  ["ring-offset", { "--un-ring-offset-width": "1px" }],
+  [/^ring-offset-(.+)$/, ([, d]) => ({ "--un-ring-offset-width": handler.px(d || "1") })],
+  [/^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")],
+  [/^ring-offset-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-ring-offset-opacity": handler.bracket.percent(opacity) })],
+  ["ring-inset", { "--un-ring-inset": "inset" }]
 ];
 
-const colorResolver = (body, theme) => {
+const shadowColorResolver = (body, theme) => {
   const data = parseColor(body, theme);
   if (!data)
     return;
@@ -554,13 +539,15 @@ const boxShadows = [
     const value = theme.boxShadow?.[d || "DEFAULT"];
     if (value) {
       return {
+        "--un-shadow-inset": varEmpty,
         "--un-shadow-color": "0,0,0",
         "--un-shadow": value,
         "box-shadow": "var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)"
       };
     }
   }],
-  [/^shadow-(.+)$/, ([, d], { theme }) => colorResolver(d, theme)]
+  [/^shadow-(.+)$/, ([, d], { theme }) => shadowColorResolver(d, theme)],
+  ["shadow-inset", { "--un-shadow-inset": "inset" }]
 ];
 
 function getPropName(minmax, hw) {
@@ -585,11 +572,17 @@ const sizes = [
   }]
 ];
 const aspectRatio = [
-  ["aspect-ratio-auto", { "aspect-ratio": "auto" }],
-  [/^aspect-ratio-(.+)$/, ([, d]) => {
-    const v = (/^\d+\/\d+$/.test(d) ? d : null) || handler.bracket.cssvar.number(d);
+  [/^aspect-(?:ratio-)?(.+)$/, ([, d]) => {
+    if (/^\d+\/\d+$/.test(d))
+      return { "aspect-ratio": d };
+    const v = {
+      auto: "auto",
+      square: "1/1",
+      video: "16/9"
+    }[d];
     if (v != null)
       return { "aspect-ratio": v };
+    return { "aspect-ratio": handler.bracket.cssvar.number(d) };
   }]
 ];
 
@@ -638,24 +631,14 @@ const transforms = [
   ["transform-gpu", transformGpu],
   ["transform-cpu", transformCpu],
   ["transform-none", { transform: "none" }],
-  ["origin-center", { "transform-origin": "center" }],
-  ["origin-top", { "transform-origin": "top" }],
-  ["origin-top-right", { "transform-origin": "top right" }],
-  ["origin-right", { "transform-origin": "right" }],
-  ["origin-bottom-right", { "transform-origin": "bottom right" }],
-  ["origin-bottom", { "transform-origin": "bottom" }],
-  ["origin-bottom-left", { "transform-origin": "bottom left" }],
-  ["origin-left", { "transform-origin": "left" }],
-  ["origin-top-left", { "transform-origin": "top left" }]
+  [/^origin-([-\w]{3,})$/, ([, s]) => ({ "transform-origin": positionMap[s] })]
 ];
 function handleTranslate([, d, b]) {
   const v = handler.bracket.fraction.auto.rem(b);
   if (v != null) {
     return [
       transformBase,
-      [
-        ...xyzMap[d].map((i) => [`--un-translate${i}`, v])
-      ]
+      xyzMap[d].map((i) => [`--un-translate${i}`, v])
     ];
   }
 }
@@ -664,9 +647,7 @@ function handleScale([, d, b]) {
   if (v != null) {
     return [
       transformBase,
-      [
-        ...xyzMap[d].map((i) => [`--un-scale${i}`, v])
-      ]
+      xyzMap[d].map((i) => [`--un-scale${i}`, v])
     ];
   }
 }
@@ -714,17 +695,12 @@ const variablesAbbrMap = {
   "backface": "backface-visibility",
   "whitespace": "white-space",
   "break": "word-break",
-  "b": "border-color",
-  "border": "border-color",
-  "color": "color",
   "case": "text-transform",
   "origin": "transform-origin",
-  "bg": "background-color",
   "bg-opacity": "background-opacity",
   "tab": "tab-size",
   "underline": "text-decoration-thickness",
   "underline-offset": "text-underline-offset",
-  "text": "color",
   "grid-cols": "grid-template-columns",
   "grid-rows": "grid-template-rows",
   "auto-flow": "grid-auto-flow",
@@ -739,15 +715,8 @@ const variablesAbbrMap = {
 const cssVariables = [
   [/^(.+)-\$(.+)$/, ([, name, varname]) => {
     const prop = variablesAbbrMap[name];
-    if (prop) {
-      return {
-        [prop]: `var(--${varname})`
-      };
-    }
-  }],
-  [/^(?:border|b)-([^-]+)-\$(.+)$/, ([, a, v]) => {
-    if (a in directionMap)
-      return directionMap[a].map((i) => [`border${i}-color`, `var(--${v})`]);
+    if (prop)
+      return { [prop]: `var(--${varname})` };
   }]
 ];
 
@@ -770,7 +739,7 @@ const textDecorations = [
   [/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s]) => ({ "text-decoration-thickness": handler.bracket.px(s) })],
   [/^(?:underline|decoration)-(auto|from-font)$/, ([, s]) => ({ "text-decoration-thickness": s })],
   [/^(?:underline|decoration)-(.+)$/, (match, ctx) => {
-    const result = colorResolver$1("text-decoration-color", "line")(match, ctx);
+    const result = colorResolver("text-decoration-color", "line")(match, ctx);
     if (result) {
       return {
         "-webkit-text-decoration-color": result["text-decoration-color"],
@@ -786,15 +755,11 @@ const textDecorations = [
 ];
 
 const svgUtilities = [
-  [/^fill-(.+)$/, colorResolver$1("fill", "fill")],
+  [/^fill-(.+)$/, colorResolver("fill", "fill")],
   [/^fill-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-fill-opacity": handler.bracket.percent(opacity) })],
   ["fill-none", { fill: "none" }],
-  [/^stroke-(?:size-|width-)?(.+)$/, ([, s]) => {
-    const v = handler.bracket.fraction.px.number(s);
-    if (v)
-      return { "stroke-width": v };
-  }],
-  [/^stroke-(.+)$/, colorResolver$1("stroke", "stroke")],
+  [/^stroke-(?:size-|width-)?(.+)$/, ([, s]) => ({ "stroke-width": handler.bracket.fraction.px.number(s) })],
+  [/^stroke-(.+)$/, colorResolver("stroke", "stroke")],
   [/^stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-stroke-opacity": handler.bracket.percent(opacity) })],
   ["stroke-none", { stroke: "none" }]
 ];
@@ -855,4 +820,4 @@ const rules = [
   questionMark
 ].flat(1);
 
-export { cssVariables as $, sizes as A, aspectRatio as B, paddings as C, margins as D, varEmptyFn 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, textDecorations as a0, 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, boxShadows as y, zIndexes as z };
+export { textDecorations as $, sizes as A, aspectRatio as B, paddings as C, margins as D, varEmpty as E, displays as F, appearances as G, cursors as H, pointerEvents as I, resizes as J, userSelects as K, whitespaces as L, contents as M, breaks as N, textOverflows as O, textTransforms as P, fontStyles as Q, fontSmoothings as R, svgUtilities as S, transforms as T, transitions as U, fonts as V, tabSizes as W, textIndents as X, textStrokes as Y, textShadows as Z, cssVariables as _, appearance as a, 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, boxShadows as y, zIndexes as z };