@unocss/preset-mini 0.16.4 → 0.18.1

package/dist/chunks/default2.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-const core = require('@unocss/core');
 const utilities = require('./utilities.cjs');
+const core = require('@unocss/core');
 const pseudo = require('./pseudo.cjs');
 
 const verticalAlignAlias = {
@@ -19,257 +19,13 @@ 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 = utilities.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: core.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] === "[" ? utilities.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: utilities.handler.bracket.percent.cssvar(d) })]
-];
-const textColors = [
-  [/^(?:text|color|c)-(.+)$/, colorResolver$1("color", "text")],
-  [/^(?:text|color|c)-op(?:acity)?-?(.+)$/m, ([, opacity2]) => ({ "--un-text-opacity": utilities.handler.bracket.percent.cssvar(opacity2) })]
-];
-const bgColors = [
-  [/^bg-(.+)$/, colorResolver$1("background-color", "bg")],
-  [/^bg-op(?:acity)?-?(.+)$/m, ([, opacity2]) => ({ "--un-bg-opacity": utilities.handler.bracket.percent(opacity2) })]
-];
-const borderColors = [
-  [/^(?:border|b)-(.+)$/, colorResolver$1("border-color", "border")],
-  [/^(?:border|b)-op(?:acity)?-?(.+)$/m, ([, opacity2]) => ({ "--un-border-opacity": utilities.handler.bracket.percent(opacity2) })]
-];
-const ringColors = [
-  [/^ring-(.+)$/, colorResolver$1("--un-ring-color", "ring")],
-  [/^ring-op(?:acity)?-?(.+)$/m, ([, opacity2]) => ({ "--un-ring-opacity": utilities.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": utilities.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 parseOutlineSize = (s) => {
-  const propName = ["width", "offset"].find((item) => s.startsWith(item)) || "width";
-  const size = utilities.handler.bracket.fraction.rem(s.replace(/^(offset\-|width\-|size\-)/, ""));
-  if (size) {
-    return {
-      [`outline-${propName}`]: size
-    };
-  }
-};
 const outline = [
-  ["outline-none", { "outline": "2px solid transparent", "outline-offset": "2px" }],
+  [/^outline-(?:width-|size-)?(.+)$/, ([, d]) => ({ "outline-width": utilities.handler.bracket.fraction.auto.rem(d) })],
+  [/^outline-(?:color-)?(.+)$/, utilities.colorResolver("outline-color", "outline-color")],
+  [/^outline-offset-(.+)$/, ([, d]) => ({ "outline-offset": utilities.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 colorSheet = colorResolver$1("outline-color", "outline-color")([
-        match[0],
-        match[1].replace(/^color-/, "")
-      ], config);
-      if (colorSheet)
-        return colorSheet;
-      const sizeSheet = parseOutlineSize(d);
-      if (sizeSheet)
-        return sizeSheet;
-    }
-  ]
+  [/^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", {
@@ -277,33 +33,8 @@ const appearance = [
     "-webkit-appearance": "none"
   }]
 ];
-const placeholder = [
-  [
-    /^placeholder-opacity-(\d+)$/,
-    ([, d]) => ({
-      "placeholder-opacity": utilities.handler.bracket.percent(d)
-    })
-  ],
-  [
-    /^placeholder-(?!opacity)(.+)$/,
-    (match, config) => {
-      match[1] = match[1].replace(/^color-/, "");
-      return colorResolver$1("placeholder-color", "placeholder-color")(match, config);
-    }
-  ]
-];
-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) || utilities.handler.global(p);
-    if (w)
-      return { "will-change": w };
-  }]
+  [/^will-change-(.+)/, ([, p]) => ({ "will-change": utilities.handler.properties.global(p) })]
 ];
 
 const borders = [
@@ -315,15 +46,58 @@ const borders = [
   [/^(?:border|b)()-(.+)$/, handlerBorderColor],
   [/^(?:border|b)-([^-]+)(?:-(.+))?$/, handlerBorderColor],
   [/^(?:border|b)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-border-opacity": utilities.handler.bracket.percent(opacity) })],
+  [/^(?:border|b)-([^-]+)-op(?:acity)?-?(.+)$/, ([, a, opacity]) => {
+    const v = utilities.handler.bracket.percent(opacity);
+    const d = utilities.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 && !!utilities.parseColor(color, theme)?.color;
+};
+const borderColorResolver = (direction) => ([, body], { theme }) => {
+  const data = utilities.parseColor(body, theme);
+  if (!data)
+    return;
+  const { opacity, color, rgba } = data;
+  if (!color)
+    return;
+  const a = opacity ? opacity[0] === "[" ? utilities.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) {
@@ -336,64 +110,59 @@ function handlerBorder(m) {
 function handlerBorderSize([, a, b]) {
   const [d, s = "1"] = utilities.directionMap[a] ? [a, b] : ["", a];
   const v = utilities.handler.bracket.px(s);
-  if (v != null) {
-    return [
-      ...utilities.directionMap[d].map((i) => [`border${i}-width`, v])
-    ];
-  }
+  if (v !== void 0)
+    return utilities.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 = utilities.directionMap[utilities.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({}, ...utilities.directionMap[utilities.directionMap[a] ? a : ""].map((i) => borderColorResolver(i)(["", c], ctx)));
   }
 }
 function handlerRounded([, a, b], { theme }) {
   const [d, s = "DEFAULT"] = utilities.cornerMap[a] ? [a, b] : ["", a];
-  const v = theme.borderRadius?.[s] || utilities.handler.bracket.fraction.rem(s);
-  if (v != null)
+  const v = theme.borderRadius?.[s] || utilities.handler.auto.rem.fraction.bracket.cssvar(s);
+  if (v !== void 0)
     return utilities.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: utilities.handler.bracket.percent.cssvar(d) })]
+];
+const textColors = [
+  [/^(?:text|color|c)-(.+)$/, utilities.colorResolver("color", "text")],
+  [/^(?:text|color|c)-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-text-opacity": utilities.handler.bracket.percent.cssvar(opacity2) })]
+];
+const bgColors = [
+  [/^bg-(.+)$/, utilities.colorResolver("background-color", "bg")],
+  [/^bg-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-bg-opacity": utilities.handler.bracket.percent(opacity2) })]
+];
+
+const transitionProperty = (prop) => {
+  return utilities.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": utilities.handler.global(v) || transitionProperty(v) })],
+  ["transition-property-none", { "transition-property": "none" }],
+  ["property-none", { "transition-property": "none" }],
+  ["transition-none", { transition: "none" }]
 ];
 
 const flex = [
@@ -404,7 +173,7 @@ const flex = [
   ["flex-auto", { flex: "1 1 auto" }],
   ["flex-initial", { flex: "0 1 auto" }],
   ["flex-none", { flex: "none" }],
-  [/^flex-\[(.+)\]$/, ([, d]) => ({ flex: d })],
+  [/^flex-(\[.+\])$/, ([, d]) => ({ flex: utilities.handler.bracket(d).replace(/\d+\/\d+/, ($1) => utilities.handler.fraction($1)) })],
   ["flex-shrink", { "flex-shrink": 1 }],
   ["flex-shrink-0", { "flex-shrink": 0 }],
   ["flex-grow", { "flex-grow": 1 }],
@@ -439,7 +208,7 @@ const fonts = [
     }
   }],
   [/^text-(.+)$/, ([, s = "base"], { theme }) => {
-    const size = utilities.handler.bracket.rem(s);
+    const size = utilities.handler.bracket.auto.rem(s);
     if (size)
       return { "font-size": size };
     const themed = core.toArray(theme.fontSize?.[s]);
@@ -452,7 +221,7 @@ const fonts = [
     }
   }],
   [/^text-size-(.+)$/, ([, s]) => {
-    const raw = utilities.handler.bracket.rem(s);
+    const raw = utilities.handler.bracket.auto.rem(s);
     if (raw)
       return { "font-size": raw };
   }],
@@ -462,17 +231,17 @@ const fonts = [
       return { "font-weight": v };
   }],
   [/^(?:leading|lh)-([^-]+)$/, ([, s], { theme }) => {
-    const v = theme.lineHeight?.[s] || utilities.handler.bracket.rem(s);
+    const v = theme.lineHeight?.[s] || utilities.handler.bracket.auto.rem(s);
     if (v !== null)
       return { "line-height": v };
   }],
   [/^tracking-([^-]+)$/, ([, s], { theme }) => {
-    const v = theme.letterSpacing?.[s] || utilities.handler.bracket.rem(s);
+    const v = theme.letterSpacing?.[s] || utilities.handler.bracket.auto.rem(s);
     if (v !== null)
       return { "letter-spacing": v };
   }],
   [/^word-spacing-([^-]+)$/, ([, s], { theme }) => {
-    const v = theme.wordSpacing?.[s] || utilities.handler.bracket.rem(s);
+    const v = theme.wordSpacing?.[s] || utilities.handler.bracket.auto.rem(s);
     if (v !== null)
       return { "word-spacing": v };
   }]
@@ -492,7 +261,7 @@ const tabSizes = [
 ];
 const textIndents = [
   [/^indent(?:-(.+))?$/, ([, s], { theme }) => {
-    const v = theme.textIndent?.[s || "DEFAULT"] || utilities.handler.bracket.cssvar.fraction.rem(s);
+    const v = theme.textIndent?.[s || "DEFAULT"] || utilities.handler.bracket.cssvar.fraction.auto.rem(s);
     if (v != null)
       return { "text-indent": v };
   }]
@@ -503,8 +272,8 @@ const textStrokes = [
     if (v != null)
       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": utilities.handler.bracket.percent(opacity) })]
+  [/^text-stroke-(.+)$/, utilities.colorResolver("-webkit-text-stroke-color", "text-stroke")],
+  [/^text-stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-text-stroke-opacity": utilities.handler.bracket.percent(opacity) })]
 ];
 const textShadows = [
   [/^text-shadow(?:-(.+))?$/, ([, s], { theme }) => {
@@ -515,36 +284,23 @@ const textShadows = [
 ];
 
 const gaps = [
-  [/^(?:flex-|grid-)?gap-([^-]+)$/, ([, s]) => {
-    const v = utilities.handler.bracket.rem(s);
+  [/^(?:flex-|grid-)?gap-(x-|y-)?([^-]+)$/, ([, d = "", s]) => {
+    const v = utilities.handler.bracket.auto.rem(s);
     if (v != null) {
+      const direction = {
+        "": "",
+        "x-": "column-",
+        "y-": "row-"
+      }[d];
       return {
-        "grid-gap": v,
-        "gap": v
-      };
-    }
-  }],
-  [/^(?:flex-|grid-)?gap-x-([^-]+)$/, ([, s]) => {
-    const v = utilities.handler.bracket.rem(s);
-    if (v != null) {
-      return {
-        "grid-column-gap": v,
-        "column-gap": v
-      };
-    }
-  }],
-  [/^(?:flex-|grid-)?gap-y-([^-]+)$/, ([, s]) => {
-    const v = utilities.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) => core.toArray(theme.fontSize?.[s] || utilities.handler.bracket.rem(s))[0];
+const calSize = (s, theme) => core.toArray(theme.fontSize?.[s] || utilities.handler.bracket.auto.rem(s))[0];
 const autoDirection = (selector, theme) => {
   if (selector === "min")
     return "min-content";
@@ -557,10 +313,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 = utilities.handler.bracket(v);
@@ -572,16 +328,16 @@ const grids = [
     if (parts[0] === "span") {
       if (parts[1] === "full")
         return { [key]: "1/-1" };
-      raw = utilities.handler.number.bracket(parts[1])?.toString().replace(/_/g, " ");
+      raw = utilities.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, " ") })],
@@ -618,7 +374,10 @@ const justifies = [
   ...basicSet.map((i) => [`justify-self-${i}`, { "justify-self": i }])
 ];
 const orders = [
-  [/^order-(.+)$/, ([, v]) => ({ order: { first: "-9999", last: "9999", none: "0" }[v] || utilities.handler.bracket.number(v) })]
+  [/^order-(.+)$/, ([, v]) => ({ order: utilities.handler.bracket.number(v) })],
+  ["order-first", { order: "-9999" }],
+  ["order-last", { order: "9999" }],
+  ["order-none", { order: "0" }]
 ];
 const alignments = [
   ["content-start", { "align-content": "flex-start" }],
@@ -636,7 +395,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" }],
@@ -650,7 +409,7 @@ const placements = [
   ...basicSet.map((i) => [`place-self-${i}`, { "place-self": i }])
 ];
 function handleInsetValue(v) {
-  return { auto: "auto", full: "100%" }[v] ?? utilities.handler.bracket.fraction.cssvar.rem(v);
+  return { auto: "auto", full: "100%" }[v] ?? utilities.handler.bracket.fraction.cssvar.auto.rem(v);
 }
 const insets = [
   [/^(top|left|right|bottom|inset)-(.+)$/, ([, d, v]) => ({ [d]: handleInsetValue(v) })],
@@ -661,20 +420,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": utilities.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 = [
@@ -682,7 +516,7 @@ const rings = [
     const value = utilities.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)",
@@ -693,21 +527,21 @@ const rings = [
       };
     }
   }],
-  [/^ring-offset-?(.*)$/, ([, d]) => {
+  ["ring-offset", { "--un-ring-offset-width": "1px" }],
+  [/^ring-offset-(.+)$/, ([, d]) => {
     const value = utilities.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-(.+)$/, utilities.colorResolver("--un-ring-color", "ring")],
+  [/^ring-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-ring-opacity": utilities.handler.bracket.percent(opacity) })],
+  [/^ring-offset-(.+)$/, utilities.colorResolver("--un-ring-offset-color", "ring-offset")],
+  [/^ring-offset-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-ring-offset-opacity": utilities.handler.bracket.percent(opacity) })],
+  ["ring-inset", { "--un-ring-inset": "inset" }]
 ];
 
 const colorResolver = (body, theme) => {
-  const data = parseColorUtil(body, theme);
+  const data = utilities.parseColor(body, theme);
   if (!data)
     return;
   const { color, rgba } = data;
@@ -725,7 +559,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",
@@ -733,10 +567,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) {
@@ -750,7 +582,7 @@ function getThemeValue(minmax, hw, theme, prop) {
 }
 const sizes = [
   [/^(?:(min|max)-)?(w|h)-(.+)$/, ([, m, w, s], { theme }) => {
-    const v = getThemeValue(m, w, theme, s) || utilities.handler.bracket.cssvar.fraction.rem(s);
+    const v = getThemeValue(m, w, theme, s) || utilities.handler.bracket.cssvar.fraction.auto.rem(s);
     if (v != null)
       return { [getPropName(m, w)]: v };
   }],
@@ -809,6 +641,8 @@ const transforms = [
   [/^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" }],
@@ -823,7 +657,7 @@ const transforms = [
   ["origin-top-left", { "transform-origin": "top left" }]
 ];
 function handleTranslate([, d, b]) {
-  const v = utilities.handler.bracket.fraction.rem(b);
+  const v = utilities.handler.bracket.fraction.auto.rem(b);
   if (v != null) {
     return [
       transformBase,
@@ -862,6 +696,24 @@ function handleRotate([, b]) {
     ];
   }
 }
+function handleSkewWithUnit([, d, b]) {
+  const v = utilities.handler.bracket.number(b);
+  if (v != null) {
+    return [
+      transformBase,
+      { [`--un-skew-${d}`]: `${v}deg` }
+    ];
+  }
+}
+function handleSkew([, d, b]) {
+  const v = utilities.handler.bracket(b);
+  if (v != null) {
+    return [
+      transformBase,
+      { [`--un-skew-${d}`]: v }
+    ];
+  }
+}
 
 const variablesAbbrMap = {
   "visible": "visibility",
@@ -921,20 +773,12 @@ ${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 : utilities.handler.bracket.px(s) })],
-  [/^decoration-(.*)$/, ([, d]) => ({ "text-decoration-thickness": utilities.handler.bracket.px(d) })],
-  [/^underline-offset-([^-]+)$/, ([, s]) => {
-    const v = s === "auto" ? s : utilities.handler.bracket.px(s);
-    if (v != null)
-      return { "text-underline-offset": v };
-  }],
+  [/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s]) => ({ "text-decoration-thickness": utilities.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 = utilities.colorResolver("text-decoration-color", "line")(match, ctx);
     if (result) {
       return {
         "-webkit-text-decoration-color": result["text-decoration-color"],
@@ -942,20 +786,24 @@ const textDecorations = [
       };
     }
   }],
-  [/^(?:underline|decoration)-op(?:acity)?-?(.+)$/m, ([, opacity]) => ({ "--un-line-opacity": utilities.handler.bracket.percent(opacity) })]
+  [/^(?:underline|decoration)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-line-opacity": utilities.handler.bracket.percent(opacity) })],
+  [/^underline-offset-(.+)$/, ([, s]) => ({ "text-underline-offset": utilities.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)?-?(.+)$/m, ([, opacity]) => ({ "--un-fill-opacity": utilities.handler.bracket.percent(opacity) })],
+  [/^fill-(.+)$/, utilities.colorResolver("fill", "fill")],
+  [/^fill-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-fill-opacity": utilities.handler.bracket.percent(opacity) })],
   ["fill-none", { fill: "none" }],
   [/^stroke-(?:size-|width-)?(.+)$/, ([, s]) => {
     const v = utilities.handler.bracket.fraction.px.number(s);
     if (v)
       return { "stroke-width": v };
   }],
-  [/^stroke-(.+)$/, colorResolver$1("stroke", "stroke")],
-  [/^stroke-op(?:acity)?-?(.+)$/m, ([, opacity]) => ({ "--un-stroke-opacity": utilities.handler.bracket.percent(opacity) })],
+  [/^stroke-(.+)$/, utilities.colorResolver("stroke", "stroke")],
+  [/^stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-stroke-opacity": utilities.handler.bracket.percent(opacity) })],
   ["stroke-none", { stroke: "none" }]
 ];
 
@@ -1000,7 +848,6 @@ const rules = [
   overflows,
   outline,
   appearance,
-  placeholder,
   positions,
   orders,
   justifies,
@@ -1021,14 +868,11 @@ exports.appearance = appearance;
 exports.appearances = appearances;
 exports.aspectRatio = aspectRatio;
 exports.bgColors = bgColors;
-exports.borderColors = borderColors;
 exports.borders = borders;
 exports.boxShadows = boxShadows;
 exports.boxSizing = boxSizing;
 exports.breaks = breaks;
-exports.colorResolver = colorResolver$1;
 exports.contents = contents;
-exports.cssProps = cssProps;
 exports.cssVariables = cssVariables;
 exports.cursors = cursors;
 exports.displays = displays;
@@ -1047,15 +891,11 @@ exports.orders = orders;
 exports.outline = outline;
 exports.overflows = overflows;
 exports.paddings = paddings;
-exports.parseColorUtil = parseColorUtil;
-exports.placeholder = placeholder;
 exports.placements = placements;
 exports.pointerEvents = pointerEvents;
 exports.positions = positions;
 exports.questionMark = questionMark;
 exports.resizes = resizes;
-exports.ringColors = ringColors;
-exports.ringOffsetColors = ringOffsetColors;
 exports.rings = rings;
 exports.rules = rules;
 exports.sizes = sizes;