@unocss/preset-mini 0.16.3 → 0.18.0

package/dist/chunks/default2.mjs

@@ -1,6 +1,6 @@
-import { hex2rgba, toArray } from '@unocss/core';
-import { h as handler, d as directionMap, c as cornerMap, a as capitalize, x as xyzMap } from './index.mjs';
-import { C as CONTROL_BYPASS_PSEUDO } from './pseudo.mjs';
+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 } from '@unocss/core';
+import { C as CONTROL_BYPASS_PSEUDO_CLASS } from './pseudo.mjs';
 
 const verticalAlignAlias = {
   mid: "middle",
@@ -17,128 +17,13 @@ const textAligns = [
   ["text-justify", { "text-align": "justify" }]
 ];
 
-const parseColorUtil = (body, theme) => {
-  const [main, opacity2] = body.split(/(?:\/|:)/);
-  const [name, no = "DEFAULT"] = main.replace(/([a-z])([0-9])/g, "$1-$2").split(/-/g);
-  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;
-  if (!color) {
-    const colorData = theme.colors?.[name];
-    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 fillColors = [
-  ["fill-none", { fill: "none" }],
-  [/^fill-(.+)$/, colorResolver$1("fill", "fill")],
-  [/^fill-op(?:acity)?-?(.+)$/m, ([, opacity2]) => ({ "--un-fill-opacity": handler.bracket.percent(opacity2) })]
-];
-
-const outlineStyle = ["none", "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\-)/, ""));
-  if (size) {
-    return {
-      [`outline-${propName}`]: size
-    };
-  }
-};
 const outline = [
-  ["outline-none", { "outline": "2px solid transparent", "outline-offset": "2px" }],
+  [/^outline-(?:width-|size-)?(.+)$/, ([, d]) => ({ "outline-width": handler.bracket.fraction.auto.rem(d) })],
+  [/^outline-(?:color-)?(.+)$/, colorResolver$1("outline-color", "outline-color")],
+  [/^outline-offset-(.+)$/, ([, d]) => ({ "outline-offset": handler.bracket.fraction.auto.rem(d) })],
   ["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
-        };
-      }
-      const sizeSheet = parseOutlineSize(d);
-      if (sizeSheet)
-        return sizeSheet;
-      const colorSheet = colorResolver$1("outline-color", "outline-color")([
-        match[0],
-        match[1].replace(/^color-/, "")
-      ], config);
-      if (colorSheet)
-        return colorSheet;
-    }
-  ]
+  [/^outline-(auto|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit|initial|revert|unset)$/, ([, c]) => ({ "outline-style": c })],
+  ["outline-none", { "outline": "2px solid transparent", "outline-offset": "2px" }]
 ];
 const appearance = [
   ["appearance-none", {
@@ -146,20 +31,8 @@ const appearance = [
     "-webkit-appearance": "none"
   }]
 ];
-const placeholder = [
-  [
-    /^placeholder-opacity-(\d+)$/,
-    ([, d]) => ({
-      "placeholder-opacity": handler.bracket.percent(d)
-    })
-  ],
-  [
-    /^placeholder-(?!opacity)(.+)$/,
-    (match, config) => {
-      match[1] = match[1].replace(/^color-/, "");
-      return colorResolver$1("placeholder-color", "placeholder-color")(match, config);
-    }
-  ]
+const willChange = [
+  [/^will-change-(.+)/, ([, p]) => ({ "will-change": handler.properties.global(p) })]
 ];
 
 const borders = [
@@ -171,15 +44,58 @@ const borders = [
   [/^(?: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-solid", { "border-style": "solid" }],
   ["border-dashed", { "border-style": "dashed" }],
   ["border-dotted", { "border-style": "dotted" }],
   ["border-double", { "border-style": "double" }],
-  ["border-none", { "border-style": "none" }],
-  [/^(?:border-)?(?:rounded|rd)$/, handlerRounded],
-  [/^(?:border-)?(?:rounded|rd)(?:-([^-]+))?$/, handlerRounded],
-  [/^(?:border-)?(?:rounded|rd)(?:-([^-]+))?(?:-([^-]+))?$/, handlerRounded]
+  ["border-none", { "border-style": "none" }]
 ];
+const borderHasColor = (color, { theme }) => {
+  return color !== void 0 && !!parseColor(color, theme)?.color;
+};
+const borderColorResolver = (direction) => ([, body], { theme }) => {
+  const data = parseColor(body, theme);
+  if (!data)
+    return;
+  const { 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;
+      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))`
+        };
+      } else {
+        return {
+          "--un-border-opacity": 1,
+          [`--un-border${direction}-opacity`]: "var(--un-border-opacity)",
+          [`border${direction}-color`]: `rgba(${rgba.slice(0, 3).join(",")},var(--un-border${direction}-opacity))`
+        };
+      }
+    }
+  } else {
+    return {
+      [`border${direction}-color`]: color.replace("%alpha", `${a || 1}`)
+    };
+  }
+};
 function handlerBorder(m) {
   const borderSizes = handlerBorderSize(m);
   if (borderSizes) {
@@ -192,118 +108,59 @@ 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 (borderHasColor(c, ctx)) {
+    return Object.assign({}, ...directionMap[directionMap[a] ? a : ""].map((i) => borderColorResolver(i)(["", 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 transitionBasicProps = [
-  "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 transitionPositionProps = [
-  "backround-position",
-  "left",
-  "right",
-  "top",
-  "bottom",
-  "object-position"
-];
-const transitionSizeProps = [
-  "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 transitionSwitchProps = ["all", "none"];
-const transitionEnhanceProps = ["stroke", "filter", "backdrop-filter", "fill", "mask", "mask-size", "mask-border", "clip-path", "clip"];
-const transitionProps = [
-  ...transitionBasicProps,
-  ...transitionPositionProps,
-  ...transitionSizeProps,
-  ...transitionEnhanceProps
-];
-const transitionPropsStr = transitionProps.join(", ");
-const validateProperty = (prop) => {
-  if (prop && ![...transitionProps, ...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 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 = [
@@ -349,7 +206,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]);
@@ -362,7 +219,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 };
   }],
@@ -372,17 +229,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 };
   }]
@@ -402,7 +259,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 };
   }]
@@ -414,7 +271,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 }) => {
@@ -425,36 +282,23 @@ const textShadows = [
 ];
 
 const gaps = [
-  [/^(?:flex-|grid-)?gap-([^-]+)$/, ([, s]) => {
-    const v = handler.bracket.rem(s);
-    if (v != null) {
-      return {
-        "grid-gap": v,
-        "gap": v
-      };
-    }
-  }],
-  [/^(?:flex-|grid-)?gap-x-([^-]+)$/, ([, s]) => {
-    const v = handler.bracket.rem(s);
+  [/^(?: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-column-gap": v,
-        "column-gap": v
-      };
-    }
-  }],
-  [/^(?:flex-|grid-)?gap-y-([^-]+)$/, ([, s]) => {
-    const v = handler.bracket.rem(s);
-    if (v != null) {
-      return {
-        "grid-row-gap": v,
-        "row-gap": v
+        [`grid-${direction}gap`]: v,
+        [`${direction}gap`]: v
       };
     }
   }]
 ];
 
-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";
@@ -467,10 +311,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);
@@ -482,16 +326,16 @@ const grids = [
     if (parts[0] === "span") {
       if (parts[1] === "full")
         return { [key]: "1/-1" };
-      raw = handler.number.bracket(parts[1])?.toString().replace(/_/g, " ");
+      raw = handler.number.bracket(parts[1]);
       if (raw)
         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, " ") })],
@@ -528,7 +372,10 @@ 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: handler.bracket.number(v) })],
+  ["order-first", { order: "-9999" }],
+  ["order-last", { order: "9999" }],
+  ["order-none", { order: "0" }]
 ];
 const alignments = [
   ["content-start", { "align-content": "flex-start" }],
@@ -546,7 +393,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" }],
@@ -560,7 +407,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) })],
@@ -571,20 +418,95 @@ const insets = [
   }]
 ];
 const floats = [
-  [/^float-(left|right|none)$/, ([, value]) => ({ float: value })],
-  [/^clear-(left|right|both|none)$/, ([, value]) => ({ clear: value })]
+  ["float-left", { float: "left" }],
+  ["float-right", { float: "right" }],
+  ["float-none", { float: "none" }],
+  ["clear-left", { clear: "left" }],
+  ["clear-right", { clear: "right" }],
+  ["clear-both", { clear: "both" }],
+  ["clear-none", { clear: "none" }]
 ];
 const zIndexes = [
   ["z-auto", { "z-index": "auto" }],
   [/^z-([^-]+)$/, ([, v]) => ({ "z-index": handler.number(v) })]
 ];
 const boxSizing = [
-  [
-    /^box-(border|content)$/,
-    ([, value]) => ({
-      "box-sizing": `${value}-box`
-    })
-  ]
+  ["box-border", { "box-sizing": "border-box" }],
+  ["box-content", { "box-sizing": "content-box" }]
+];
+
+const varEmpty = "var(--un-empty,/*!*/ /*!*/)";
+const displays = [
+  ["inline", { display: "inline" }],
+  ["block", { display: "block" }],
+  ["inline-block", { display: "inline-block" }],
+  ["contents", { display: "contents" }],
+  ["flow-root", { display: "flow-root" }],
+  ["list-item", { display: "list-item" }],
+  ["hidden", { display: "none" }]
+];
+const appearances = [
+  ["visible", { visibility: "visible" }],
+  ["invisible", { visibility: "hidden" }],
+  ["backface-visible", { "backface-visibility": "visible" }],
+  ["backface-hidden", { "backface-visibility": "hidden" }]
+];
+const cursors = [
+  [/^cursor-(.+)$/, ([, c]) => ({ cursor: c })]
+];
+const pointerEvents = [
+  ["pointer-events-auto", { "pointer-events": "auto" }],
+  ["pointer-events-none", { "pointer-events": "none" }]
+];
+const resizes = [
+  ["resize-x", { resize: "horizontal" }],
+  ["resize-y", { resize: "vertical" }],
+  ["resize", { resize: "both" }],
+  ["resize-none", { resize: "none" }]
+];
+const userSelects = [
+  ["select-auto", { "user-select": "auto" }],
+  ["select-all", { "user-select": "all" }],
+  ["select-text", { "user-select": "text" }],
+  ["select-none", { "user-select": "none" }]
+];
+const whitespaces = [
+  [/^(?:whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap)$/, ([, v]) => ({ "white-space": v })]
+];
+const contents = [
+  ["content-empty", { content: '""' }]
+];
+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 = [
@@ -592,32 +514,32 @@ const rings = [
     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)",
         "--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);"
+        "-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-?(.*)$/, ([, 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,
-  ...ringOffsetColors
+  [/^ring-(.+)$/, colorResolver$1("--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-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-ring-offset-opacity": handler.bracket.percent(opacity) })],
+  ["ring-inset", { "--un-ring-inset": "inset" }]
 ];
 
 const colorResolver = (body, theme) => {
-  const data = parseColorUtil(body, theme);
+  const data = parseColor(body, theme);
   if (!data)
     return;
   const { color, rgba } = data;
@@ -635,7 +557,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",
@@ -643,10 +565,8 @@ const boxShadows = [
         "box-shadow": "var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)"
       };
     }
-    const color = colorResolver(d, theme);
-    if (color)
-      return color;
-  }]
+  }],
+  [/^shadow-(.+)$/, ([, d], { theme }) => colorResolver(d, theme)]
 ];
 
 function getPropName(minmax, hw) {
@@ -660,7 +580,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 };
   }],
@@ -679,11 +599,6 @@ const aspectRatio = [
   }]
 ];
 
-const directionSize = (prefix) => ([_, direction, size]) => {
-  const v = handler.bracket.rem.fraction.cssvar(size);
-  if (v)
-    return directionMap[direction].map((i) => [prefix + i, v]);
-};
 const paddings = [
   [/^pa?()-?(-?.+)$/, directionSize("padding")],
   [/^p-?([xy])-?(-?.+)$/, directionSize("padding")],
@@ -695,84 +610,13 @@ const margins = [
   [/^m-?([rltbse])-?(-?.+)$/, directionSize("margin")]
 ];
 
-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 transformGpu = {
   transform: "rotate(var(--un-rotate)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) translate3d(var(--un-translate-x), var(--un-translate-y), var(--un-translate-z))",
-  [CONTROL_BYPASS_PSEUDO]: ""
+  [CONTROL_BYPASS_PSEUDO_CLASS]: ""
 };
 const transformCpu = {
   transform: "rotate(var(--un-rotate)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z))",
-  [CONTROL_BYPASS_PSEUDO]: ""
+  [CONTROL_BYPASS_PSEUDO_CLASS]: ""
 };
 const transformBase = {
   "--un-rotate": 0,
@@ -789,11 +633,14 @@ const transformBase = {
 const transforms = [
   ["transform", transformBase],
   [/^preserve-(3d|flat)$/, ([, value]) => ({ "transform-style": value === "3d" ? `preserve-${value}` : value })],
-  [/^translate()-([^-]+)$/, handleTranslate],
-  [/^translate-([xyz])-([^-]+)$/, handleTranslate],
-  [/^scale()-([^-]+)$/, handleScale],
-  [/^scale-([xyz])-([^-]+)$/, handleScale],
-  [/^rotate-([^-]+)(?:deg)?$/, handleRotate],
+  [/^translate()-(.+)$/, handleTranslate],
+  [/^translate-([xyz])-(.+)$/, handleTranslate],
+  [/^scale()-(.+)$/, handleScale],
+  [/^scale-([xyz])-(.+)$/, handleScale],
+  [/^rotate-(.+)$/, handleRotate],
+  [/^rotate-((?!\[)[^-]+?)(?:deg)?$/, handleRotateWithUnit],
+  [/^skew-([xy])-(.+)$/, handleSkew],
+  [/^skew-([xy])-((?!\[)[^-]+?)(?:deg)?$/, handleSkewWithUnit],
   ["transform-gpu", transformGpu],
   ["transform-cpu", transformCpu],
   ["transform-none", { transform: "none" }],
@@ -808,7 +655,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,
@@ -829,7 +676,7 @@ function handleScale([, d, b]) {
     ];
   }
 }
-function handleRotate([, b]) {
+function handleRotateWithUnit([, b]) {
   const v = handler.bracket.number(b);
   if (v != null) {
     return [
@@ -838,6 +685,33 @@ function handleRotate([, b]) {
     ];
   }
 }
+function handleRotate([, b]) {
+  const v = handler.bracket(b);
+  if (v != null) {
+    return [
+      transformBase,
+      { "--un-rotate": v }
+    ];
+  }
+}
+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);
+  if (v != null) {
+    return [
+      transformBase,
+      { [`--un-skew-${d}`]: v }
+    ];
+  }
+}
 
 const variablesAbbrMap = {
   "visible": "visibility",
@@ -897,18 +771,10 @@ ${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) })],
-  [/^underline-offset-([^-]+)$/, ([, s]) => {
-    const v = s === "auto" ? s : handler.bracket.px(s);
-    if (v != null)
-      return { "text-underline-offset": v };
-  }],
+  [/^(?: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);
     if (result) {
@@ -918,7 +784,25 @@ 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) })],
+  [/^underline-offset-(.+)$/, ([, s]) => ({ "text-underline-offset": handler.auto.bracket.px(s) })],
+  [/^(?:underline|decoration)-(solid|double|dotted|dashed|wavy|inherit|initial|revert|unset)$/, ([, d]) => ({ "text-decoration-style": d })],
+  ["no-underline", { "text-decoration": "none" }],
+  ["decoration-none", { "text-decoration": "none" }]
+];
+
+const svgUtilities = [
+  [/^fill-(.+)$/, colorResolver$1("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-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-stroke-opacity": handler.bracket.percent(opacity) })],
+  ["stroke-none", { stroke: "none" }]
 ];
 
 const rules = [
@@ -928,7 +812,7 @@ const rules = [
   displays,
   opacity,
   bgColors,
-  fillColors,
+  svgUtilities,
   borders,
   contents,
   fonts,
@@ -962,7 +846,6 @@ const rules = [
   overflows,
   outline,
   appearance,
-  placeholder,
   positions,
   orders,
   justifies,
@@ -974,7 +857,8 @@ const rules = [
   boxSizing,
   transitions,
   transforms,
+  willChange,
   questionMark
 ].flat(1);
 
-export { tabSizes 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, varEmpty as K, displays as L, appearances as M, cursors as N, pointerEvents as O, resizes as P, userSelects as Q, whitespaces as R, contents as S, breaks as T, textOverflows as U, textTransforms as V, fontStyles as W, fontSmoothings as X, transforms as Y, transitions as Z, fonts as _, appearance as a, textIndents as a0, textStrokes as a1, textShadows as a2, cssVariables as a3, textDecorations as a4, 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, fillColors as k, flex as l, gaps as m, grids as n, outline as o, placeholder as p, overflows as q, rules as r, positions as s, textAligns as t, justifies as u, verticalAligns as v, orders as w, alignments as x, placements as y, insets 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 };