@unocss/preset-mini 0.20.0 → 0.21.0

package/dist/chunks/default2.mjs

@@ -1,4 +1,4 @@
-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 { 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';
 
@@ -8,7 +8,7 @@ const verticalAlignAlias = {
   btm: "bottom"
 };
 const verticalAligns = [
-  [/^(?:vertical|align|v)-(baseline|top|bottom|middle|text-top|text-bottom|mid|base|btm)$/, ([, v]) => ({ "vertical-align": verticalAlignAlias[v] || v })]
+  [/^(?:vertical|align|v)-(baseline|top|middle|bottom|text-top|text-bottom|sub|super|mid|base|btm)$/, ([, v]) => ({ "vertical-align": verticalAlignAlias[v] || v })]
 ];
 const textAligns = [
   ["text-center", { "text-align": "center" }],
@@ -19,10 +19,10 @@ 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 })],
+  [/^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" }]
 ];
 const appearance = [
@@ -32,31 +32,31 @@ const appearance = [
   }]
 ];
 const willChange = [
-  [/^will-change-(.+)/, ([, p]) => ({ "will-change": handler.properties.global(p) })]
+  [/^will-change-(.+)/, ([, p]) => ({ "will-change": handler.properties.auto.global(p) })]
 ];
 
 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]) => ({ "--un-border-opacity": handler.bracket.percent(opacity) })],
-  [/^(?:border|b)-([^-]+)-op(?:acity)?-?(.+)$/, ([, a, opacity]) => {
-    const v = handler.bracket.percent(opacity);
-    const d = directionMap[a];
-    if (v !== void 0 && d)
-      return d.map((i) => [`--un-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 }) => {
@@ -66,33 +66,31 @@ 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 {
-          "--un-border-opacity": 1,
-          [`border${direction}-color`]: `rgba(${rgba.slice(0, 3).join(",")},var(--un-border${direction}-opacity))`
+          "--un-border-opacity": (opacity && handler.cssvar(opacity)) ?? 1,
+          [`border${direction}-color`]: `rgba(${rgba.join(",")},var(--un-border${direction}-opacity))`
         };
       } else {
         return {
-          "--un-border-opacity": 1,
+          "--un-border-opacity": (opacity && handler.cssvar(opacity)) ?? 1,
           [`--un-border${direction}-opacity`]: "var(--un-border-opacity)",
-          [`border${direction}-color`]: `rgba(${rgba.slice(0, 3).join(",")},var(--un-border${direction}-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" }],
@@ -172,10 +180,11 @@ const flex = [
   ["flex-initial", { flex: "0 1 auto" }],
   ["flex-none", { flex: "none" }],
   [/^flex-(\[.+\])$/, ([, d]) => ({ flex: handler.bracket(d).replace(/\d+\/\d+/, ($1) => handler.fraction($1)) })],
-  ["flex-shrink", { "flex-shrink": 1 }],
-  ["flex-shrink-0", { "flex-shrink": 0 }],
-  ["flex-grow", { "flex-grow": 1 }],
-  ["flex-grow-0", { "flex-grow": 0 }],
+  [/^(?:flex-)?shrink$/, () => ({ "flex-shrink": 1 })],
+  [/^(?: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) {
+  [/^tab(?:-([^-]+))?$/, ([, s]) => {
+    const v = handler.bracket.global.number(s || "4");
+    if (v != null) {
       return {
         "-moz-tab-size": v,
         "-o-tab-size": v,
@@ -258,93 +239,77 @@ 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];
+const rowCol = (s) => s.replace("col", "column");
 const autoDirection = (selector, theme) => {
-  if (selector === "min")
-    return "min-content";
-  else if (selector === "max")
-    return "max-content";
-  else if (selector === "fr")
-    return "minmax(0,1fr)";
-  return calSize(selector, theme);
+  const v = theme.fontSize?.[selector];
+  if (v != null)
+    return toArray(v)[0];
+  switch (selector) {
+    case "min":
+      return "min-content";
+    case "max":
+      return "max-content";
+    case "fr":
+      return "minmax(0,1fr)";
+  }
+  return handler.bracket.auto.rem(selector);
 };
 const grids = [
   ["grid", { display: "grid" }],
   ["inline-grid", { display: "inline-grid" }],
-  [/^(?:grid-)?col-start-([\w.-]+)$/, ([, v]) => ({ "grid-column-start": v })],
-  [/^(?:grid-)?col-end-([\w.]+)$/, ([, v]) => ({ "grid-column-end": v })],
-  [/^(?:grid-)?row-start-([\w.-]+)$/, ([, v]) => ({ "grid-row-start": v })],
-  [/^(?:grid-)?row-end-([\w.-]+)$/, ([, v]) => ({ "grid-row-end": v })],
-  [/^(?:grid-)?(row|col)-(.+)$/, ([, d, v]) => {
-    const key = d === "row" ? "grid-row" : "grid-column";
-    let raw = handler.bracket(v);
-    if (raw)
-      return { [key]: raw };
-    const parts = v.split("-");
-    if (parts.length === 1 && parts[0] === "auto")
-      return { [key]: parts[0] };
-    if (parts[0] === "span") {
-      if (parts[1] === "full")
-        return { [key]: "1/-1" };
-      raw = handler.number.bracket(parts[1]);
-      if (raw)
-        return { [key]: `span ${raw}/span ${raw}` };
-    }
+  [/^(?:grid-)?(row|col)-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}`]: handler.bracket.auto(v) })],
+  [/^(?:grid-)?(row|col)-span-(.+)$/, ([, c, s]) => {
+    if (s === "full")
+      return { [`grid-${rowCol(c)}`]: "1/-1" };
+    const v = handler.bracket.number(s);
+    if (v != null)
+      return { [`grid-${rowCol(c)}`]: `span ${v}/span ${v}` };
   }],
-  [/^(?:grid-)?auto-cols-([\w.-]+)$/, ([, v], { theme }) => ({ "grid-auto-columns": autoDirection(v, theme) })],
-  [/^(?:grid-)?auto-flow-([\w.-]+)$/, ([, v]) => ({ "grid-auto-flow": v.replace("col", "column").split("-").join(" ") })],
-  [/^(?:grid-)?auto-rows-([\w.-]+)$/, ([, v], { theme }) => ({ "grid-auto-rows": autoDirection(v, theme) })],
-  [/^grid-cols-(.+)$/, ([, v]) => ({ "grid-template-columns": handler.bracket(v) })],
-  [/^grid-rows-(.+)$/, ([, v]) => ({ "grid-template-rows": handler.bracket(v) })],
-  [/^grid-cols-minmax-([\w.-]+)$/, ([, d]) => ({ "grid-template-columns": `repeat(auto-fill,minmax(${d},1fr))` })],
-  [/^grid-rows-minmax-([\w.-]+)$/, ([, d]) => ({ "grid-template-rows": `repeat(auto-fill,minmax(${d},1fr))` })],
-  [/^grid-cols-(\d+)$/, ([, d]) => ({ "grid-template-columns": `repeat(${d},minmax(0,1fr))` })],
-  [/^grid-rows-(\d+)$/, ([, d]) => ({ "grid-template-rows": `repeat(${d},minmax(0,1fr))` })]
+  [/^(?: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-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)-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" }],
+  ["grid-cols-none", { "grid-template-columns": "none" }]
 ];
 
 const overflowValues = [
   "auto",
   "hidden",
+  "clip",
   "visible",
   "scroll"
 ];
@@ -353,7 +318,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 +329,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 +346,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 +361,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-(.+)$/, ([, v]) => ({ inset: handleInsetValue(v) })],
+  [/^(?:position-|pos-)?inset-([xy])-(.+)$/, handleInsetValues],
+  [/^(?:position-|pos-)?(top|left|right|bottom)-(.+)$/, ([, d, v]) => ({ [d]: handleInsetValue(v) })]
 ];
 const floats = [
   ["float-left", { float: "left" }],
@@ -475,7 +456,7 @@ const contents = [
 ];
 const breaks = [
   ["break-normal", { "overflow-wrap": "normal", "word-break": "normal" }],
-  ["break-word", { "overflow-wrap": "break-word" }],
+  ["break-words", { "overflow-wrap": "break-word" }],
   ["break-all", { "word-break": "break-all" }]
 ];
 const textOverflows = [
@@ -507,35 +488,30 @@ const fontSmoothings = [
 ];
 
 const rings = [
-  [/^ring-?(.*)$/, ([, d]) => {
+  [/^ring(?:-(.+))?$/, ([, d]) => {
     const value = handler.px(d || "1");
     if (value) {
       return {
         "--un-ring-inset": varEmpty,
         "--un-ring-offset-width": "0px",
         "--un-ring-offset-color": "#fff",
-        "--un-ring-color": "rgba(59, 130, 246, .5)",
+        "--un-ring-color": "rgba(147, 197, 253, .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)`,
-        "-webkit-box-shadow": "var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow, 0 0 #0000)",
         "box-shadow": "var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow, 0 0 #0000)"
       };
     }
   }],
   ["ring-offset", { "--un-ring-offset-width": "1px" }],
-  [/^ring-offset-(.+)$/, ([, d]) => {
-    const value = handler.px(d || "1");
-    if (value)
-      return { "--un-ring-offset-width": value };
-  }],
-  [/^ring-(.+)$/, colorResolver$1("--un-ring-color", "ring")],
+  [/^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$1("--un-ring-offset-color", "ring-offset")],
+  [/^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;
@@ -553,47 +529,56 @@ const colorResolver = (body, theme) => {
   }
 };
 const boxShadows = [
-  [/^shadow-?(.*)$/, ([, d], { theme }) => {
+  [/^shadow(?:-(.+))?$/, ([, d], { theme }) => {
     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) {
   return `${minmax ? `${minmax}-` : ""}${hw === "h" ? "height" : "width"}`;
 }
-function getThemeValue(minmax, hw, theme, prop) {
+function getSizeValue(minmax, hw, theme, prop) {
   let str = `${hw === "h" ? "height" : "width"}`;
   if (minmax)
     str = `${minmax}${capitalize(str)}`;
-  return theme[str]?.[prop];
+  const v = theme[str]?.[prop];
+  if (v != null)
+    return v;
+  switch (prop) {
+    case "fit":
+    case "max":
+    case "min":
+      return `${prop}-content`;
+  }
+  return handler.bracket.cssvar.fraction.auto.rem(prop);
 }
 const sizes = [
-  [/^(?:(min|max)-)?(w|h)-(.+)$/, ([, m, w, s], { theme }) => {
-    const v = getThemeValue(m, w, theme, s) || handler.bracket.cssvar.fraction.auto.rem(s);
-    if (v != null)
-      return { [getPropName(m, w)]: v };
-  }],
-  [/^(?:(min|max)-)?(w)-screen-(.+)$/, ([, m, w, s], { theme }) => {
-    const v = theme.breakpoints?.[s];
-    if (v != null)
-      return { [getPropName(m, w)]: v };
-  }]
-];
+  [/^(?:(min|max)-)?(w|h)-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, theme, s) })],
+  [/^(?:(min|max)-)?(w)-screen-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: theme.breakpoints?.[s] })]
+];
+function getAspectRatio(prop) {
+  if (/^\d+\/\d+$/.test(prop))
+    return prop;
+  switch (prop) {
+    case "square":
+      return "1/1";
+    case "video":
+      return "16/9";
+  }
+  return handler.bracket.cssvar.auto.number(prop);
+}
 const aspectRatio = [
-  ["aspect-ratio-auto", { "aspect-ratio": "auto" }],
-  [/^aspect-ratio-(.+)$/, ([, d]) => {
-    const v = (/^\d+\/\d+$/.test(d) ? d : null) || handler.bracket.cssvar.number(d);
-    if (v != null)
-      return { "aspect-ratio": v };
-  }]
+  [/^aspect-(?:ratio-)?(.+)$/, ([, d]) => ({ "aspect-ratio": getAspectRatio(d) })]
 ];
 
 const paddings = [
@@ -629,36 +614,26 @@ const transformBase = {
 };
 const transforms = [
   ["transform", transformBase],
-  [/^preserve-(3d|flat)$/, ([, value]) => ({ "transform-style": value === "3d" ? `preserve-${value}` : value })],
-  [/^translate()-(.+)$/, handleTranslate],
+  [/^origin-([-\w]{3,})$/, ([, s]) => ({ "transform-origin": positionMap[s] })],
+  [/^translate-()(.+)$/, handleTranslate],
   [/^translate-([xyz])-(.+)$/, handleTranslate],
-  [/^scale()-(.+)$/, handleScale],
-  [/^scale-([xyz])-(.+)$/, handleScale],
   [/^rotate-(.+)$/, handleRotate],
-  [/^rotate-((?!\[)[^-]+?)(?:deg)?$/, handleRotateWithUnit],
+  [/^skew-()(.+)$/, handleSkew],
   [/^skew-([xy])-(.+)$/, handleSkew],
-  [/^skew-([xy])-((?!\[)[^-]+?)(?:deg)?$/, handleSkewWithUnit],
+  [/^scale-()(.+)$/, handleScale],
+  [/^scale-([xyz])-(.+)$/, handleScale],
+  ["preserve-3d", { "transform-style": "preserve-3d" }],
+  ["preserve-flat", { "transform-style": "flat" }],
   ["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" }]
+  ["transform-none", { transform: "none" }]
 ];
 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])
     ];
   }
 }
@@ -667,23 +642,12 @@ function handleScale([, d, b]) {
   if (v != null) {
     return [
       transformBase,
-      [
-        ...xyzMap[d].map((i) => [`--un-scale${i}`, v])
-      ]
-    ];
-  }
-}
-function handleRotateWithUnit([, b]) {
-  const v = handler.bracket.number(b);
-  if (v != null) {
-    return [
-      transformBase,
-      { "--un-rotate": `${v}deg` }
+      xyzMap[d].map((i) => [`--un-scale${i}`, v])
     ];
   }
 }
 function handleRotate([, b]) {
-  const v = handler.bracket(b);
+  const v = handler.bracket.degree(b);
   if (v != null) {
     return [
       transformBase,
@@ -691,17 +655,8 @@ function handleRotate([, b]) {
     ];
   }
 }
-function handleSkewWithUnit([, d, b]) {
-  const v = handler.bracket.number(b);
-  if (v != null) {
-    return [
-      transformBase,
-      { [`--un-skew-${d}`]: `${v}deg` }
-    ];
-  }
-}
 function handleSkew([, d, b]) {
-  const v = handler.bracket(b);
+  const v = handler.bracket.degree(b);
   if (v != null) {
     return [
       transformBase,
@@ -717,17 +672,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",
@@ -742,15 +692,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})` };
   }]
 ];
 
@@ -766,14 +709,15 @@ ${constructCSS({ animation: "__un_qm 0.5s ease-in-out alternate infinite" })}`;
 ];
 
 const textDecorations = [
-  ["underline", { "text-decoration": "underline" }],
-  ["line-through", { "text-decoration": "line-through" }],
-  ["decoration-underline", { "text-decoration": "underline" }],
-  ["decoration-line-through", { "text-decoration": "line-through" }],
+  ["underline", { "text-decoration-line": "underline" }],
+  ["overline", { "text-decoration-line": "overline" }],
+  ["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)-(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"],
@@ -789,15 +733,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" }]
 ];