@unocss/preset-mini 0.16.4 → 0.17.2

package/dist/chunks/default2.mjs

@@ -1,5 +1,5 @@
-import { hex2rgba, toArray } from '@unocss/core';
-import { h as handler, d as directionMap, c as cornerMap, a as capitalize, b as directionSize, x as xyzMap } from './utilities.mjs';
+import { c as colorResolver$1, h as handler, d as directionMap, a as cornerMap, p as parseColor, b as capitalize, e as directionSize, x as xyzMap } from './utilities.mjs';
+import { toArray } from '@unocss/core';
 import { C as CONTROL_BYPASS_PSEUDO_CLASS } from './pseudo.mjs';
 
 const verticalAlignAlias = {
@@ -17,222 +17,10 @@ const textAligns = [
   ["text-justify", { "text-align": "justify" }]
 ];
 
-const parseColorUtil = (body, theme) => {
-  const [main, opacity2] = body.split(/(?:\/|:)/);
-  const colors = main.replace(/([a-z])([0-9])/g, "$1-$2").split(/-/g);
-  const [name] = colors;
-  if (!name)
-    return;
-  let color;
-  const bracket = handler.bracket(main);
-  const bracketOrMain = bracket || main;
-  if (bracketOrMain.startsWith("#"))
-    color = bracketOrMain.slice(1);
-  if (bracketOrMain.startsWith("hex-"))
-    color = bracketOrMain.slice(4);
-  color = color || bracket;
-  let no = "DEFAULT";
-  if (!color) {
-    let colorData = theme.colors?.[name];
-    if (colorData) {
-      [, no = no] = colors;
-    } else {
-      if (colors.slice(-1)[0].match(/^\d+$/))
-        no = colors.pop();
-      colorData = theme.colors?.[colors.join("-").replace(/(-[a-z])/g, (n) => n.slice(1).toUpperCase())];
-    }
-    if (typeof colorData === "string")
-      color = colorData;
-    else if (no && colorData)
-      color = colorData[no];
-  }
-  return {
-    opacity: opacity2,
-    name,
-    no,
-    color,
-    rgba: hex2rgba(color)
-  };
-};
-const colorResolver$1 = (attribute, varName) => ([, body], { theme }) => {
-  const data = parseColorUtil(body, theme);
-  if (!data)
-    return;
-  const { opacity: opacity2, color, rgba } = data;
-  if (!color)
-    return;
-  const a = opacity2 ? opacity2[0] === "[" ? handler.bracket.percent(opacity2) : parseFloat(opacity2) / 100 : rgba?.[3];
-  if (rgba) {
-    if (a != null && !Number.isNaN(a)) {
-      rgba[3] = typeof a === "string" && !a.includes("%") ? parseFloat(a) : a;
-      return {
-        [attribute]: `rgba(${rgba.join(",")})`
-      };
-    } else {
-      return {
-        [`--un-${varName}-opacity`]: 1,
-        [attribute]: `rgba(${rgba.slice(0, 3).join(",")},var(--un-${varName}-opacity))`
-      };
-    }
-  } else {
-    return {
-      [attribute]: color.replace("%alpha", `${a || 1}`)
-    };
-  }
-};
-const opacity = [
-  [/^op(?:acity)?-?(.+)$/, ([, d]) => ({ opacity: handler.bracket.percent.cssvar(d) })]
-];
-const textColors = [
-  [/^(?:text|color|c)-(.+)$/, colorResolver$1("color", "text")],
-  [/^(?:text|color|c)-op(?:acity)?-?(.+)$/m, ([, opacity2]) => ({ "--un-text-opacity": handler.bracket.percent.cssvar(opacity2) })]
-];
-const bgColors = [
-  [/^bg-(.+)$/, colorResolver$1("background-color", "bg")],
-  [/^bg-op(?:acity)?-?(.+)$/m, ([, opacity2]) => ({ "--un-bg-opacity": handler.bracket.percent(opacity2) })]
-];
-const borderColors = [
-  [/^(?:border|b)-(.+)$/, colorResolver$1("border-color", "border")],
-  [/^(?:border|b)-op(?:acity)?-?(.+)$/m, ([, opacity2]) => ({ "--un-border-opacity": handler.bracket.percent(opacity2) })]
-];
-const ringColors = [
-  [/^ring-(.+)$/, colorResolver$1("--un-ring-color", "ring")],
-  [/^ring-op(?:acity)?-?(.+)$/m, ([, opacity2]) => ({ "--un-ring-opacity": handler.bracket.percent(opacity2) })]
-];
-const ringOffsetColors = [
-  [/^ring-offset-(.+)$/, colorResolver$1("--un-ring-offset-color", "ring-offset")],
-  [/^ring-offset-op(?:acity)?-?(.+)$/m, ([, opacity2]) => ({ "--un-ring-offset-opacity": handler.bracket.percent(opacity2) })]
-];
-
-const cssBasicProps = [
-  "color",
-  "border-color",
-  "background-color",
-  "flex-grow",
-  "flex",
-  "flex-shrink",
-  "caret-color",
-  "font",
-  "gap",
-  "opacity",
-  "visibility",
-  "z-index",
-  "font-weight",
-  "zoom",
-  "text-shadow",
-  "transform",
-  "box-shadow"
-];
-const cssPositionProps = [
-  "backround-position",
-  "left",
-  "right",
-  "top",
-  "bottom",
-  "object-position"
-];
-const cssSizeProps = [
-  "max-height",
-  "min-height",
-  "max-width",
-  "min-width",
-  "height",
-  "width",
-  "border-width",
-  "margin",
-  "padding",
-  "outline-width",
-  "outline-offset",
-  "font-size",
-  "line-height",
-  "text-indent",
-  "vertical-align",
-  "border-spacing",
-  "letter-spacing",
-  "word-spacing"
-];
-const cssEnhanceProps = ["stroke", "filter", "backdrop-filter", "fill", "mask", "mask-size", "mask-border", "clip-path", "clip"];
-const cssProps = [
-  ...cssBasicProps,
-  ...cssPositionProps,
-  ...cssSizeProps,
-  ...cssEnhanceProps
-];
-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-none", { "pointer-events": "none" }],
-  ["pointer-events-auto", { "pointer-events": "auto" }]
-];
-const resizes = [
-  ["resize-none", { resize: "none" }],
-  ["resize-x", { resize: "horizontal" }],
-  ["resize-y", { resize: "vertical" }],
-  ["resize", { resize: "both" }]
-];
-const userSelects = [
-  [/^select-(none|text|all|auto)$/, ([, v]) => ({ "user-select": v })]
-];
-const whitespaces = [
-  [/^(?:whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap)$/, ([, v]) => ({ "white-space": v })]
-];
-const contents = [
-  ["content-empty", { content: '""' }]
-];
-const breaks = [
-  ["break-normal", { "overflow-wrap": "normal", "word-break": "normal" }],
-  ["break-word", { "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 outlineStyle = ["none", "auto", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset", "inherit", "initial", "revert", "unset"];
+const outlineStyle = ["auto", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset", "inherit", "initial", "revert", "unset"];
 const parseOutlineSize = (s) => {
   const propName = ["width", "offset"].find((item) => s.startsWith(item)) || "width";
-  const size = handler.bracket.fraction.rem(s.replace(/^(offset\-|width\-|size\-)/, ""));
+  const size = handler.bracket.fraction.auto.rem(s.replace(/^(offset\-|width\-|size\-)/, ""));
   if (size) {
     return {
       [`outline-${propName}`]: size
@@ -240,18 +28,11 @@ const parseOutlineSize = (s) => {
   }
 };
 const outline = [
-  ["outline-none", { "outline": "2px solid transparent", "outline-offset": "2px" }],
   ["outline", { "outline-style": "solid" }],
   [
     /^outline-(.+)$/,
     (match, config) => {
       const [, d] = match;
-      if (d === "none") {
-        return {
-          "outline": "2px solid transparent",
-          "outline-offset": "2px"
-        };
-      }
       if (outlineStyle.includes(d)) {
         return {
           "outline-style": d
@@ -267,7 +48,8 @@ const outline = [
       if (sizeSheet)
         return sizeSheet;
     }
-  ]
+  ],
+  ["outline-none", { "outline": "2px solid transparent", "outline-offset": "2px" }]
 ];
 const appearance = [
   ["appearance-none", {
@@ -290,18 +72,8 @@ const placeholder = [
     }
   ]
 ];
-const cssPropsStr = cssProps.join(", ");
-const validateProperty$1 = (prop) => {
-  if (prop && !cssProps.includes(prop))
-    return;
-  return prop || cssPropsStr;
-};
 const willChange = [
-  [/^will-change-(.*)/, ([, p]) => {
-    const w = validateProperty$1(p) || handler.global(p);
-    if (w)
-      return { "will-change": w };
-  }]
+  [/^will-change-(.+)/, ([, p]) => ({ "will-change": handler.properties.global(p) })]
 ];
 
 const borders = [
@@ -319,8 +91,8 @@ const borders = [
   ["border-double", { "border-style": "double" }],
   ["border-none", { "border-style": "none" }],
   [/^(?:border-)?(?:rounded|rd)$/, handlerRounded],
-  [/^(?:border-)?(?:rounded|rd)(?:-([^-]+))?$/, handlerRounded],
-  [/^(?:border-)?(?:rounded|rd)(?:-([^-]+))?(?:-([^-]+))?$/, handlerRounded]
+  [/^(?:border-)?(?:rounded|rd)(?:-(.+))?$/, handlerRounded],
+  [/^(?:border-)?(?:rounded|rd)(?:-([^-]+))?(?:-(.+))?$/, handlerRounded]
 ];
 function handlerBorder(m) {
   const borderSizes = handlerBorderSize(m);
@@ -334,64 +106,71 @@ function handlerBorder(m) {
 function handlerBorderSize([, a, b]) {
   const [d, s = "1"] = directionMap[a] ? [a, b] : ["", a];
   const v = handler.bracket.px(s);
-  if (v != null) {
-    return [
-      ...directionMap[d].map((i) => [`border${i}-width`, v])
-    ];
-  }
+  if (v !== void 0)
+    return directionMap[d].map((i) => [`border${i}-width`, v]);
 }
 function handlerBorderColor([, a, c], ctx) {
-  if (c !== void 0) {
-    const ofColor = colorResolver$1("border-color", "border")(["", c], ctx);
-    if (ofColor) {
-      const borders2 = directionMap[directionMap[a] ? a : ""].map((i) => colorResolver$1(`border${i}-color`, "border")(["", c], ctx));
-      const borderObject = {};
-      Object.assign(borderObject, ...borders2);
-      return borderObject;
-    }
+  if (c !== void 0 && colorResolver$1("border-color", "border")(["", c], ctx)) {
+    return Object.assign({}, ...directionMap[directionMap[a] ? a : ""].map((i) => colorResolver$1(`border${i}-color`, "border")(["", c], ctx)));
   }
 }
 function handlerRounded([, a, b], { theme }) {
   const [d, s = "DEFAULT"] = cornerMap[a] ? [a, b] : ["", a];
-  const v = theme.borderRadius?.[s] || handler.bracket.fraction.rem(s);
-  if (v != null)
+  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]);
 }
 
-const transitionSwitchProps = ["all", "none"];
-const transitionPropsStr = cssProps.join(", ");
-const validateProperty = (prop) => {
-  if (prop && ![...cssProps, ...transitionSwitchProps].includes(prop))
-    return;
-  return prop || transitionPropsStr;
+const opacity = [
+  [/^op(?:acity)?-?(.+)$/, ([, d]) => ({ opacity: handler.bracket.percent.cssvar(d) })]
+];
+const textColors = [
+  [/^(?:text|color|c)-(.+)$/, colorResolver$1("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-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-bg-opacity": handler.bracket.percent(opacity2) })]
+];
+const borderColors = [
+  [/^(?:border|b)-(.+)$/, colorResolver$1("border-color", "border")],
+  [/^(?:border|b)-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-border-opacity": handler.bracket.percent(opacity2) })]
+];
+const ringColors = [
+  [/^ring-(.+)$/, colorResolver$1("--un-ring-color", "ring")],
+  [/^ring-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-ring-opacity": handler.bracket.percent(opacity2) })]
+];
+const ringOffsetColors = [
+  [/^ring-offset-(.+)$/, colorResolver$1("--un-ring-offset-color", "ring-offset")],
+  [/^ring-offset-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-ring-offset-opacity": handler.bracket.percent(opacity2) })]
+];
+
+const transitionProperty = (prop) => {
+  return handler.properties(prop) || (prop === "all" ? prop : void 0);
 };
 const transitions = [
-  [/^transition(?:-([a-z-]+))?(?:-(\d+))?$/, ([, prop, duration = "150"]) => {
-    const transitionProperty = validateProperty(prop);
-    if (!transitionProperty)
-      return;
-    return {
-      "transition-property": transitionProperty,
-      "transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)",
-      "transition-duration": `${duration}ms`
-    };
-  }],
-  [/^duration-(\d+)$/, ([, duration = "150"]) => {
-    return {
-      "transition-duration": `${duration}ms`
-    };
+  [/^transition(?:-([a-z-]+(?:,[a-z-]+)*))?(?:-(\d+))?$/, ([, prop = "all", duration = "150"]) => {
+    const p = transitionProperty(prop);
+    if (p) {
+      return {
+        "transition-property": p,
+        "transition-timing-function": "cubic-bezier(0.4,0,0.2,1)",
+        "transition-duration": `${duration}ms`
+      };
+    }
   }],
+  [/^duration-(\d+)$/, ([, duration = "150"]) => ({ "transition-duration": `${duration}ms` })],
   ["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-([a-z-]+)$/, ([, v]) => {
-    const transitionProperty = validateProperty(v);
-    if (transitionProperty)
-      return { "transition-property": transitionProperty };
-  }]
+  [/^(?:transition-)?property-(.+)$/, ([, v]) => ({ "transition-property": handler.global(v) || transitionProperty(v) })],
+  ["transition-property-none", { "transition-property": "none" }],
+  ["property-none", { "transition-property": "none" }],
+  ["transition-none", { transition: "none" }]
 ];
 
 const flex = [
@@ -437,7 +216,7 @@ const fonts = [
     }
   }],
   [/^text-(.+)$/, ([, s = "base"], { theme }) => {
-    const size = handler.bracket.rem(s);
+    const size = handler.bracket.auto.rem(s);
     if (size)
       return { "font-size": size };
     const themed = toArray(theme.fontSize?.[s]);
@@ -450,7 +229,7 @@ const fonts = [
     }
   }],
   [/^text-size-(.+)$/, ([, s]) => {
-    const raw = handler.bracket.rem(s);
+    const raw = handler.bracket.auto.rem(s);
     if (raw)
       return { "font-size": raw };
   }],
@@ -460,17 +239,17 @@ const fonts = [
       return { "font-weight": v };
   }],
   [/^(?:leading|lh)-([^-]+)$/, ([, s], { theme }) => {
-    const v = theme.lineHeight?.[s] || handler.bracket.rem(s);
+    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.rem(s);
+    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.rem(s);
+    const v = theme.wordSpacing?.[s] || handler.bracket.auto.rem(s);
     if (v !== null)
       return { "word-spacing": v };
   }]
@@ -490,7 +269,7 @@ const tabSizes = [
 ];
 const textIndents = [
   [/^indent(?:-(.+))?$/, ([, s], { theme }) => {
-    const v = theme.textIndent?.[s || "DEFAULT"] || handler.bracket.cssvar.fraction.rem(s);
+    const v = theme.textIndent?.[s || "DEFAULT"] || handler.bracket.cssvar.fraction.auto.rem(s);
     if (v != null)
       return { "text-indent": v };
   }]
@@ -502,7 +281,7 @@ const textStrokes = [
       return { "-webkit-text-stroke-width": v };
   }],
   [/^text-stroke-(.+)$/, colorResolver$1("-webkit-text-stroke-color", "text-stroke")],
-  [/^text-stroke-op(?:acity)?-?(.+)$/m, ([, opacity]) => ({ "--un-text-stroke-opacity": handler.bracket.percent(opacity) })]
+  [/^text-stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-text-stroke-opacity": handler.bracket.percent(opacity) })]
 ];
 const textShadows = [
   [/^text-shadow(?:-(.+))?$/, ([, s], { theme }) => {
@@ -514,7 +293,7 @@ const textShadows = [
 
 const gaps = [
   [/^(?:flex-|grid-)?gap-([^-]+)$/, ([, s]) => {
-    const v = handler.bracket.rem(s);
+    const v = handler.bracket.auto.rem(s);
     if (v != null) {
       return {
         "grid-gap": v,
@@ -523,7 +302,7 @@ const gaps = [
     }
   }],
   [/^(?:flex-|grid-)?gap-x-([^-]+)$/, ([, s]) => {
-    const v = handler.bracket.rem(s);
+    const v = handler.bracket.auto.rem(s);
     if (v != null) {
       return {
         "grid-column-gap": v,
@@ -532,7 +311,7 @@ const gaps = [
     }
   }],
   [/^(?:flex-|grid-)?gap-y-([^-]+)$/, ([, s]) => {
-    const v = handler.bracket.rem(s);
+    const v = handler.bracket.auto.rem(s);
     if (v != null) {
       return {
         "grid-row-gap": v,
@@ -542,7 +321,7 @@ const gaps = [
   }]
 ];
 
-const calSize = (s, theme) => toArray(theme.fontSize?.[s] || handler.bracket.rem(s))[0];
+const calSize = (s, theme) => toArray(theme.fontSize?.[s] || handler.bracket.auto.rem(s))[0];
 const autoDirection = (selector, theme) => {
   if (selector === "min")
     return "min-content";
@@ -555,10 +334,10 @@ const autoDirection = (selector, theme) => {
 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-)?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);
@@ -575,11 +354,11 @@ const grids = [
         return { [key]: `span ${raw}/span ${raw}` };
     }
   }],
-  [/^(?: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-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-)?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-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-cols-\[(.+)\]$/, ([, v]) => ({ "grid-template-columns": v.replace(/,/g, " ") })],
@@ -616,7 +395,8 @@ const justifies = [
   ...basicSet.map((i) => [`justify-self-${i}`, { "justify-self": i }])
 ];
 const orders = [
-  [/^order-(.+)$/, ([, v]) => ({ order: { first: "-9999", last: "9999", none: "0" }[v] || handler.bracket.number(v) })]
+  [/^order-(.+)$/, ([, v]) => ({ order: { first: "-9999", last: "9999" }[v] || handler.bracket.number(v) })],
+  ["order-none", { order: "0" }]
 ];
 const alignments = [
   ["content-start", { "align-content": "flex-start" }],
@@ -634,7 +414,7 @@ const alignments = [
   ["self-start", { "align-self": "flex-start" }],
   ["self-end", { "align-self": "flex-end" }],
   ["self-center", { "align-self": "center" }],
-  ["self-stretch", { "align-items": "stretch" }]
+  ["self-stretch", { "align-self": "stretch" }]
 ];
 const placements = [
   ["place-content-start", { "place-content": "start" }],
@@ -648,7 +428,7 @@ const placements = [
   ...basicSet.map((i) => [`place-self-${i}`, { "place-self": i }])
 ];
 function handleInsetValue(v) {
-  return { auto: "auto", full: "100%" }[v] ?? handler.bracket.fraction.cssvar.rem(v);
+  return { auto: "auto", full: "100%" }[v] ?? handler.bracket.fraction.cssvar.auto.rem(v);
 }
 const insets = [
   [/^(top|left|right|bottom|inset)-(.+)$/, ([, d, v]) => ({ [d]: handleInsetValue(v) })],
@@ -659,8 +439,10 @@ const insets = [
   }]
 ];
 const floats = [
-  [/^float-(left|right|none)$/, ([, value]) => ({ float: value })],
-  [/^clear-(left|right|both|none)$/, ([, value]) => ({ clear: value })]
+  [/^float-(left|right)$/, ([, value]) => ({ float: value })],
+  ["float-none", { float: "none" }],
+  [/^clear-(left|right|both)$/, ([, value]) => ({ clear: value })],
+  ["clear-none", { clear: "none" }]
 ];
 const zIndexes = [
   ["z-auto", { "z-index": "auto" }],
@@ -675,12 +457,84 @@ const boxSizing = [
   ]
 ];
 
+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-(text|all|auto)$/, ([, v]) => ({ "user-select": v })],
+  ["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: '""' }]
+];
+const breaks = [
+  ["break-normal", { "overflow-wrap": "normal", "word-break": "normal" }],
+  ["break-word", { "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 rings = [
   [/^ring-?(.*)$/, ([, d]) => {
     const value = handler.px(d || "1");
     if (value) {
       return {
-        "--un-ring-inset": "var(--un-empty, )",
+        "--un-ring-inset": varEmpty,
         "--un-ring-offset-width": "0px",
         "--un-ring-offset-color": "#fff",
         "--un-ring-color": "rgba(59, 130, 246, .5)",
@@ -691,13 +545,11 @@ const rings = [
       };
     }
   }],
-  [/^ring-offset-?(.*)$/, ([, d]) => {
+  ["ring-offset", { "--un-ring-offset-width": "1px" }],
+  [/^ring-offset-(.+)$/, ([, d]) => {
     const value = handler.px(d || "1");
-    if (value) {
-      return {
-        "--un-ring-offset-width": value
-      };
-    }
+    if (value)
+      return { "--un-ring-offset-width": value };
   }],
   ["ring-inset", { "--un-ring-inset": "inset" }],
   ...ringColors,
@@ -705,7 +557,7 @@ const rings = [
 ];
 
 const colorResolver = (body, theme) => {
-  const data = parseColorUtil(body, theme);
+  const data = parseColor(body, theme);
   if (!data)
     return;
   const { color, rgba } = data;
@@ -723,7 +575,7 @@ const colorResolver = (body, theme) => {
 };
 const boxShadows = [
   [/^shadow-?(.*)$/, ([, d], { theme }) => {
-    const value = theme?.boxShadow?.[d || "DEFAULT"];
+    const value = theme.boxShadow?.[d || "DEFAULT"];
     if (value) {
       return {
         "--un-shadow-color": "0,0,0",
@@ -748,7 +600,7 @@ function getThemeValue(minmax, hw, theme, prop) {
 }
 const sizes = [
   [/^(?:(min|max)-)?(w|h)-(.+)$/, ([, m, w, s], { theme }) => {
-    const v = getThemeValue(m, w, theme, s) || handler.bracket.cssvar.fraction.rem(s);
+    const v = getThemeValue(m, w, theme, s) || handler.bracket.cssvar.fraction.auto.rem(s);
     if (v != null)
       return { [getPropName(m, w)]: v };
   }],
@@ -821,7 +673,7 @@ const transforms = [
   ["origin-top-left", { "transform-origin": "top left" }]
 ];
 function handleTranslate([, d, b]) {
-  const v = handler.bracket.fraction.rem(b);
+  const v = handler.bracket.fraction.auto.rem(b);
   if (v != null) {
     return [
       transformBase,
@@ -919,13 +771,11 @@ ${constructCSS({ animation: "__un_qm 0.5s ease-in-out alternate infinite" })}`;
 const textDecorations = [
   ["underline", { "text-decoration": "underline" }],
   ["line-through", { "text-decoration": "line-through" }],
-  ["no-underline", { "text-decoration": "none" }],
   ["decoration-underline", { "text-decoration": "underline" }],
   ["decoration-line-through", { "text-decoration": "line-through" }],
-  ["decoration-none", { "text-decoration": "none" }],
   [/^(?:underline|decoration)-(solid|double|dotted|dashed|wavy)$/, ([, d]) => ({ "text-decoration-style": d })],
   [/^(?:underline|decoration)-([^-]+)$/, ([, s]) => ({ "text-decoration-thickness": ["auto", "from-font"].includes(s) ? s : handler.bracket.px(s) })],
-  [/^decoration-(.*)$/, ([, d]) => ({ "text-decoration-thickness": handler.bracket.px(d) })],
+  [/^decoration-(.+)$/, ([, d]) => ({ "text-decoration-thickness": handler.bracket.px(d) })],
   [/^underline-offset-([^-]+)$/, ([, s]) => {
     const v = s === "auto" ? s : handler.bracket.px(s);
     if (v != null)
@@ -940,12 +790,14 @@ const textDecorations = [
       };
     }
   }],
-  [/^(?:underline|decoration)-op(?:acity)?-?(.+)$/m, ([, opacity]) => ({ "--un-line-opacity": handler.bracket.percent(opacity) })]
+  [/^(?:underline|decoration)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-line-opacity": handler.bracket.percent(opacity) })],
+  ["no-underline", { "text-decoration": "none" }],
+  ["decoration-none", { "text-decoration": "none" }]
 ];
 
 const svgUtilities = [
   [/^fill-(.+)$/, colorResolver$1("fill", "fill")],
-  [/^fill-op(?:acity)?-?(.+)$/m, ([, opacity]) => ({ "--un-fill-opacity": handler.bracket.percent(opacity) })],
+  [/^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);
@@ -953,7 +805,7 @@ const svgUtilities = [
       return { "stroke-width": v };
   }],
   [/^stroke-(.+)$/, colorResolver$1("stroke", "stroke")],
-  [/^stroke-op(?:acity)?-?(.+)$/m, ([, opacity]) => ({ "--un-stroke-opacity": handler.bracket.percent(opacity) })],
+  [/^stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-stroke-opacity": handler.bracket.percent(opacity) })],
   ["stroke-none", { stroke: "none" }]
 ];
 
@@ -1014,4 +866,4 @@ const rules = [
   questionMark
 ].flat(1);
 
-export { transitions as $, floats as A, zIndexes as B, boxSizing as C, questionMark as D, rings as E, boxShadows as F, sizes as G, aspectRatio as H, paddings as I, margins as J, cssProps as K, varEmpty as L, displays as M, appearances as N, cursors as O, pointerEvents as P, resizes as Q, userSelects as R, whitespaces as S, contents as T, breaks as U, textOverflows as V, textTransforms as W, fontStyles as X, fontSmoothings as Y, svgUtilities as Z, transforms as _, appearance as a, fonts as a0, tabSizes as a1, textIndents as a2, textStrokes as a3, textShadows as a4, cssVariables as a5, textDecorations as a6, borders as b, parseColorUtil as c, colorResolver$1 as d, opacity as e, textColors as f, bgColors as g, borderColors as h, ringColors as i, ringOffsetColors as j, flex as k, gaps as l, grids as m, overflows as n, outline as o, placeholder as p, positions as q, rules as r, justifies as s, textAligns as t, orders as u, verticalAligns as v, willChange as w, alignments as x, placements as y, insets as z };
+export { textIndents as $, boxSizing as A, questionMark as B, rings as C, boxShadows as D, sizes as E, aspectRatio as F, paddings as G, margins as H, varEmpty as I, displays as J, appearances as K, cursors as L, pointerEvents as M, resizes as N, userSelects as O, whitespaces as P, contents as Q, breaks as R, textOverflows as S, textTransforms as T, fontStyles as U, fontSmoothings as V, svgUtilities as W, transforms as X, transitions as Y, fonts as Z, tabSizes as _, appearance as a, textStrokes as a0, textShadows as a1, cssVariables as a2, textDecorations as a3, borders as b, opacity as c, textColors as d, bgColors as e, borderColors as f, ringColors as g, ringOffsetColors as h, flex as i, gaps as j, grids as k, overflows as l, positions as m, justifies as n, outline as o, placeholder as p, orders as q, rules as r, alignments as s, textAligns as t, placements as u, verticalAligns as v, willChange as w, insets as x, floats as y, zIndexes as z };