@unocss/preset-mini 0.16.4 → 0.17.2

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,222 +19,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 = 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 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 = utilities.handler.bracket.fraction.rem(s.replace(/^(offset\-|width\-|size\-)/, ""));
+  const size = utilities.handler.bracket.fraction.auto.rem(s.replace(/^(offset\-|width\-|size\-)/, ""));
   if (size) {
     return {
       [`outline-${propName}`]: size
@@ -242,24 +30,17 @@ 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
         };
       }
-      const colorSheet = colorResolver$1("outline-color", "outline-color")([
+      const colorSheet = utilities.colorResolver("outline-color", "outline-color")([
         match[0],
         match[1].replace(/^color-/, "")
       ], config);
@@ -269,7 +50,8 @@ const outline = [
       if (sizeSheet)
         return sizeSheet;
     }
-  ]
+  ],
+  ["outline-none", { "outline": "2px solid transparent", "outline-offset": "2px" }]
 ];
 const appearance = [
   ["appearance-none", {
@@ -288,22 +70,12 @@ const placeholder = [
     /^placeholder-(?!opacity)(.+)$/,
     (match, config) => {
       match[1] = match[1].replace(/^color-/, "");
-      return colorResolver$1("placeholder-color", "placeholder-color")(match, config);
+      return utilities.colorResolver("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 = [
@@ -321,8 +93,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);
@@ -336,64 +108,71 @@ 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 (c !== void 0 && utilities.colorResolver("border-color", "border")(["", c], ctx)) {
+    return Object.assign({}, ...utilities.directionMap[utilities.directionMap[a] ? a : ""].map((i) => utilities.colorResolver(`border${i}-color`, "border")(["", 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 borderColors = [
+  [/^(?:border|b)-(.+)$/, utilities.colorResolver("border-color", "border")],
+  [/^(?:border|b)-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-border-opacity": utilities.handler.bracket.percent(opacity2) })]
+];
+const ringColors = [
+  [/^ring-(.+)$/, utilities.colorResolver("--un-ring-color", "ring")],
+  [/^ring-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-ring-opacity": utilities.handler.bracket.percent(opacity2) })]
+];
+const ringOffsetColors = [
+  [/^ring-offset-(.+)$/, utilities.colorResolver("--un-ring-offset-color", "ring-offset")],
+  [/^ring-offset-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-ring-offset-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 = [
@@ -439,7 +218,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 +231,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 +241,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 +271,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 +282,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 }) => {
@@ -516,7 +295,7 @@ const textShadows = [
 
 const gaps = [
   [/^(?:flex-|grid-)?gap-([^-]+)$/, ([, s]) => {
-    const v = utilities.handler.bracket.rem(s);
+    const v = utilities.handler.bracket.auto.rem(s);
     if (v != null) {
       return {
         "grid-gap": v,
@@ -525,7 +304,7 @@ const gaps = [
     }
   }],
   [/^(?:flex-|grid-)?gap-x-([^-]+)$/, ([, s]) => {
-    const v = utilities.handler.bracket.rem(s);
+    const v = utilities.handler.bracket.auto.rem(s);
     if (v != null) {
       return {
         "grid-column-gap": v,
@@ -534,7 +313,7 @@ const gaps = [
     }
   }],
   [/^(?:flex-|grid-)?gap-y-([^-]+)$/, ([, s]) => {
-    const v = utilities.handler.bracket.rem(s);
+    const v = utilities.handler.bracket.auto.rem(s);
     if (v != null) {
       return {
         "grid-row-gap": v,
@@ -544,7 +323,7 @@ const gaps = [
   }]
 ];
 
-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 +336,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);
@@ -577,11 +356,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, " ") })],
@@ -618,7 +397,8 @@ 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: { first: "-9999", last: "9999" }[v] || utilities.handler.bracket.number(v) })],
+  ["order-none", { order: "0" }]
 ];
 const alignments = [
   ["content-start", { "align-content": "flex-start" }],
@@ -636,7 +416,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 +430,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,8 +441,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" }],
@@ -677,12 +459,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 = 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,13 +547,11 @@ 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,
@@ -707,7 +559,7 @@ const rings = [
 ];
 
 const colorResolver = (body, theme) => {
-  const data = parseColorUtil(body, theme);
+  const data = utilities.parseColor(body, theme);
   if (!data)
     return;
   const { color, rgba } = data;
@@ -725,7 +577,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",
@@ -750,7 +602,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 };
   }],
@@ -823,7 +675,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,
@@ -921,20 +773,18 @@ ${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) })],
+  [/^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)-(.+)$/, (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 +792,22 @@ 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) })],
+  ["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" }]
 ];
 
@@ -1026,9 +878,7 @@ 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,7 +897,6 @@ exports.orders = orders;
 exports.outline = outline;
 exports.overflows = overflows;
 exports.paddings = paddings;
-exports.parseColorUtil = parseColorUtil;
 exports.placeholder = placeholder;
 exports.placements = placements;
 exports.pointerEvents = pointerEvents;