@unocss/preset-mini 0.16.0 → 0.16.4

package/dist/chunks/default2.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const core = require('@unocss/core');
-const index = require('./index.cjs');
+const utilities = require('./utilities.cjs');
 const pseudo = require('./pseudo.cjs');
 
 const verticalAlignAlias = {
@@ -21,19 +21,28 @@ const textAligns = [
 
 const parseColorUtil = (body, theme) => {
   const [main, opacity2] = body.split(/(?:\/|:)/);
-  const [name, no = "DEFAULT"] = main.replace(/([a-z])([0-9])/g, "$1-$2").split(/-/g);
+  const colors = main.replace(/([a-z])([0-9])/g, "$1-$2").split(/-/g);
+  const [name] = colors;
   if (!name)
     return;
   let color;
-  const bracket = index.handler.bracket(main);
+  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) {
-    const colorData = theme.colors?.[name];
+    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)
@@ -54,7 +63,7 @@ const colorResolver$1 = (attribute, varName) => ([, body], { theme }) => {
   const { opacity: opacity2, color, rgba } = data;
   if (!color)
     return;
-  const a = opacity2 ? opacity2[0] === "[" ? index.handler.bracket.percent(opacity2) : parseFloat(opacity2) / 100 : rgba?.[3];
+  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;
@@ -74,38 +83,158 @@ const colorResolver$1 = (attribute, varName) => ([, body], { theme }) => {
   }
 };
 const opacity = [
-  [/^op(?:acity)?-?(.+)$/, ([, d]) => ({ opacity: index.handler.bracket.percent.cssvar(d) })]
+  [/^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": index.handler.bracket.percent.cssvar(opacity2) })]
+  [/^(?: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": index.handler.bracket.percent(opacity2) })]
+  [/^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": index.handler.bracket.percent(opacity2) })]
+  [/^(?: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": index.handler.bracket.percent(opacity2) })]
+  [/^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": index.handler.bracket.percent(opacity2) })]
+  [/^ring-offset-op(?:acity)?-?(.+)$/m, ([, opacity2]) => ({ "--un-ring-offset-opacity": utilities.handler.bracket.percent(opacity2) })]
 ];
-const fillColors = [
-  ["fill-none", { fill: "none" }],
-  [/^fill-(.+)$/, colorResolver$1("fill", "fill")],
-  [/^fill-op(?:acity)?-?(.+)$/m, ([, opacity2]) => ({ "--un-fill-opacity": index.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 = index.handler.bracket.fraction.rem(s.replace(/^(offset\-|width\-)/, ""));
+  const size = utilities.handler.bracket.fraction.rem(s.replace(/^(offset\-|width\-|size\-)/, ""));
   if (size) {
     return {
       [`outline-${propName}`]: size
@@ -130,15 +259,15 @@ const outline = [
           "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;
+      const sizeSheet = parseOutlineSize(d);
+      if (sizeSheet)
+        return sizeSheet;
     }
   ]
 ];
@@ -152,7 +281,7 @@ const placeholder = [
   [
     /^placeholder-opacity-(\d+)$/,
     ([, d]) => ({
-      "placeholder-opacity": index.handler.bracket.percent(d)
+      "placeholder-opacity": utilities.handler.bracket.percent(d)
     })
   ],
   [
@@ -163,11 +292,29 @@ const placeholder = [
     }
   ]
 ];
+const cssPropsStr = cssProps.join(", ");
+const validateProperty$1 = (prop) => {
+  if (prop && !cssProps.includes(prop))
+    return;
+  return prop || cssPropsStr;
+};
+const willChange = [
+  [/^will-change-(.*)/, ([, p]) => {
+    const w = validateProperty$1(p) || utilities.handler.global(p);
+    if (w)
+      return { "will-change": w };
+  }]
+];
 
 const borders = [
   [/^border$/, handlerBorder],
-  [/^(?:border|b)(?:-([^-]+))?$/, handlerBorder],
-  [/^(?:border|b)(?:-([^-]+))?(?:-([^-]+))?$/, handlerBorder],
+  [/^(?:border|b)()-(.+)$/, handlerBorder],
+  [/^(?:border|b)-([^-]+)(?:-(.+))?$/, handlerBorder],
+  [/^(?:border|b)()-size-(.+)$/, handlerBorderSize],
+  [/^(?:border|b)-([^-]+)-size-(.+)$/, handlerBorderSize],
+  [/^(?:border|b)()-(.+)$/, handlerBorderColor],
+  [/^(?:border|b)-([^-]+)(?:-(.+))?$/, handlerBorderColor],
+  [/^(?:border|b)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-border-opacity": utilities.handler.bracket.percent(opacity) })],
   ["border-solid", { "border-style": "solid" }],
   ["border-dashed", { "border-style": "dashed" }],
   ["border-dotted", { "border-style": "dotted" }],
@@ -175,85 +322,48 @@ const borders = [
   ["border-none", { "border-style": "none" }],
   [/^(?:border-)?(?:rounded|rd)$/, handlerRounded],
   [/^(?:border-)?(?:rounded|rd)(?:-([^-]+))?$/, handlerRounded],
-  [/^(?:border-)?(?:rounded|rd)(?:-([^-]+))?(?:-([^-]+))?$/, handlerRounded],
-  [/^(?:border|b)-(.+)$/, colorResolver$1("border-color", "border")],
-  [/^(?:border|b)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-border-opacity": index.handler.bracket.percent(opacity) })]
+  [/^(?:border-)?(?:rounded|rd)(?:-([^-]+))?(?:-([^-]+))?$/, handlerRounded]
 ];
-function handlerBorder([, a, b]) {
-  const [d, s = "1"] = index.directionMap[a] ? [a, b] : ["", a];
-  const v = index.handler.bracket.px(s);
-  if (v != null) {
+function handlerBorder(m) {
+  const borderSizes = handlerBorderSize(m);
+  if (borderSizes) {
     return [
-      ...index.directionMap[d].map((i) => [`border${i}-width`, v]),
+      ...borderSizes,
       ["border-style", "solid"]
     ];
   }
 }
+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])
+    ];
+  }
+}
+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;
+    }
+  }
+}
 function handlerRounded([, a, b], { theme }) {
-  const [d, s = "DEFAULT"] = index.cornerMap[a] ? [a, b] : ["", a];
-  const v = theme.borderRadius?.[s] || index.handler.bracket.fraction.rem(s);
+  const [d, s = "DEFAULT"] = utilities.cornerMap[a] ? [a, b] : ["", a];
+  const v = theme.borderRadius?.[s] || utilities.handler.bracket.fraction.rem(s);
   if (v != null)
-    return index.cornerMap[d].map((i) => [`border${i}-radius`, v]);
+    return utilities.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 transitionPropsStr = cssProps.join(", ");
 const validateProperty = (prop) => {
-  if (prop && ![...transitionProps, ...transitionSwitchProps].includes(prop))
+  if (prop && ![...cssProps, ...transitionSwitchProps].includes(prop))
     return;
   return prop || transitionPropsStr;
 };
@@ -329,7 +439,7 @@ const fonts = [
     }
   }],
   [/^text-(.+)$/, ([, s = "base"], { theme }) => {
-    const size = index.handler.bracket.rem(s);
+    const size = utilities.handler.bracket.rem(s);
     if (size)
       return { "font-size": size };
     const themed = core.toArray(theme.fontSize?.[s]);
@@ -342,27 +452,27 @@ const fonts = [
     }
   }],
   [/^text-size-(.+)$/, ([, s]) => {
-    const raw = index.handler.bracket.rem(s);
+    const raw = utilities.handler.bracket.rem(s);
     if (raw)
       return { "font-size": raw };
   }],
   [/^(?:font|fw)-?([^-]+)$/, ([, s]) => {
-    const v = weightMap[s] || index.handler.number(s);
+    const v = weightMap[s] || utilities.handler.number(s);
     if (v)
       return { "font-weight": v };
   }],
   [/^(?:leading|lh)-([^-]+)$/, ([, s], { theme }) => {
-    const v = theme.lineHeight?.[s] || index.handler.bracket.rem(s);
+    const v = theme.lineHeight?.[s] || utilities.handler.bracket.rem(s);
     if (v !== null)
       return { "line-height": v };
   }],
   [/^tracking-([^-]+)$/, ([, s], { theme }) => {
-    const v = theme.letterSpacing?.[s] || index.handler.bracket.rem(s);
+    const v = theme.letterSpacing?.[s] || utilities.handler.bracket.rem(s);
     if (v !== null)
       return { "letter-spacing": v };
   }],
   [/^word-spacing-([^-]+)$/, ([, s], { theme }) => {
-    const v = theme.wordSpacing?.[s] || index.handler.bracket.rem(s);
+    const v = theme.wordSpacing?.[s] || utilities.handler.bracket.rem(s);
     if (v !== null)
       return { "word-spacing": v };
   }]
@@ -370,7 +480,7 @@ const fonts = [
 const tabSizes = [
   [/^tab-?([^-]*)$/, ([, s]) => {
     s = s || "4";
-    const v = index.handler.bracket.global.number(s);
+    const v = utilities.handler.bracket.global.number(s);
     if (v !== null) {
       return {
         "-moz-tab-size": v,
@@ -382,23 +492,23 @@ const tabSizes = [
 ];
 const textIndents = [
   [/^indent(?:-(.+))?$/, ([, s], { theme }) => {
-    const v = theme.textIndent?.[s || "DEFAULT"] || index.handler.bracket.cssvar.fraction.rem(s);
+    const v = theme.textIndent?.[s || "DEFAULT"] || utilities.handler.bracket.cssvar.fraction.rem(s);
     if (v != null)
       return { "text-indent": v };
   }]
 ];
 const textStrokes = [
   [/^text-stroke(?:-(.+))?$/, ([, s], { theme }) => {
-    const v = theme.textStrokeWidth?.[s || "DEFAULT"] || index.handler.bracket.cssvar.px(s);
+    const v = theme.textStrokeWidth?.[s || "DEFAULT"] || utilities.handler.bracket.cssvar.px(s);
     if (v != null)
       return { "-webkit-text-stroke-width": v };
   }],
   [/^text-stroke-(.+)$/, colorResolver$1("-webkit-text-stroke-color", "text-stroke")],
-  [/^text-stroke-op(?:acity)?-?(.+)$/m, ([, opacity]) => ({ "--un-text-stroke-opacity": index.handler.bracket.percent(opacity) })]
+  [/^text-stroke-op(?:acity)?-?(.+)$/m, ([, opacity]) => ({ "--un-text-stroke-opacity": utilities.handler.bracket.percent(opacity) })]
 ];
 const textShadows = [
   [/^text-shadow(?:-(.+))?$/, ([, s], { theme }) => {
-    const v = theme.textShadow?.[s || "DEFAULT"] || index.handler.bracket.cssvar(s);
+    const v = theme.textShadow?.[s || "DEFAULT"] || utilities.handler.bracket.cssvar(s);
     if (v != null)
       return { "text-shadow": v };
   }]
@@ -406,7 +516,7 @@ const textShadows = [
 
 const gaps = [
   [/^(?:flex-|grid-)?gap-([^-]+)$/, ([, s]) => {
-    const v = index.handler.bracket.rem(s);
+    const v = utilities.handler.bracket.rem(s);
     if (v != null) {
       return {
         "grid-gap": v,
@@ -415,7 +525,7 @@ const gaps = [
     }
   }],
   [/^(?:flex-|grid-)?gap-x-([^-]+)$/, ([, s]) => {
-    const v = index.handler.bracket.rem(s);
+    const v = utilities.handler.bracket.rem(s);
     if (v != null) {
       return {
         "grid-column-gap": v,
@@ -424,7 +534,7 @@ const gaps = [
     }
   }],
   [/^(?:flex-|grid-)?gap-y-([^-]+)$/, ([, s]) => {
-    const v = index.handler.bracket.rem(s);
+    const v = utilities.handler.bracket.rem(s);
     if (v != null) {
       return {
         "grid-row-gap": v,
@@ -434,7 +544,7 @@ const gaps = [
   }]
 ];
 
-const calSize = (s, theme) => core.toArray(theme.fontSize?.[s] || index.handler.bracket.rem(s))[0];
+const calSize = (s, theme) => core.toArray(theme.fontSize?.[s] || utilities.handler.bracket.rem(s))[0];
 const autoDirection = (selector, theme) => {
   if (selector === "min")
     return "min-content";
@@ -453,7 +563,7 @@ const grids = [
   [/^(?:grid-)?row-end-([\w.-]+)$/, ([, v]) => ({ "grid-row-end": `${v}` })],
   [/^(?:grid-)?(row|col)-(.+)$/, ([, d, v]) => {
     const key = d === "row" ? "grid-row" : "grid-column";
-    let raw = index.handler.bracket(v);
+    let raw = utilities.handler.bracket(v);
     if (raw)
       return { [key]: raw };
     const parts = v.split("-");
@@ -462,7 +572,7 @@ const grids = [
     if (parts[0] === "span") {
       if (parts[1] === "full")
         return { [key]: "1/-1" };
-      raw = index.handler.number.bracket(parts[1])?.toString().replace(/_/g, " ");
+      raw = utilities.handler.number.bracket(parts[1])?.toString().replace(/_/g, " ");
       if (raw)
         return { [key]: `span ${raw}/span ${raw}` };
     }
@@ -508,7 +618,7 @@ const justifies = [
   ...basicSet.map((i) => [`justify-self-${i}`, { "justify-self": i }])
 ];
 const orders = [
-  [/^order-(.+)$/, ([, v]) => ({ order: { first: "-9999", last: "9999", none: "0" }[v] || index.handler.bracket.number(v) })]
+  [/^order-(.+)$/, ([, v]) => ({ order: { first: "-9999", last: "9999", none: "0" }[v] || utilities.handler.bracket.number(v) })]
 ];
 const alignments = [
   ["content-start", { "align-content": "flex-start" }],
@@ -540,14 +650,14 @@ const placements = [
   ...basicSet.map((i) => [`place-self-${i}`, { "place-self": i }])
 ];
 function handleInsetValue(v) {
-  return { auto: "auto", full: "100%" }[v] ?? index.handler.bracket.fraction.cssvar.rem(v);
+  return { auto: "auto", full: "100%" }[v] ?? utilities.handler.bracket.fraction.cssvar.rem(v);
 }
 const insets = [
   [/^(top|left|right|bottom|inset)-(.+)$/, ([, d, v]) => ({ [d]: handleInsetValue(v) })],
   [/^inset-([xy])-(.+)$/, ([, d, v]) => {
     const r = handleInsetValue(v);
-    if (r != null && d in index.directionMap)
-      return index.directionMap[d].map((i) => [i.slice(1), r]);
+    if (r != null && d in utilities.directionMap)
+      return utilities.directionMap[d].map((i) => [i.slice(1), r]);
   }]
 ];
 const floats = [
@@ -556,7 +666,7 @@ const floats = [
 ];
 const zIndexes = [
   ["z-auto", { "z-index": "auto" }],
-  [/^z-([^-]+)$/, ([, v]) => ({ "z-index": index.handler.number(v) })]
+  [/^z-([^-]+)$/, ([, v]) => ({ "z-index": utilities.handler.number(v) })]
 ];
 const boxSizing = [
   [
@@ -569,7 +679,7 @@ const boxSizing = [
 
 const rings = [
   [/^ring-?(.*)$/, ([, d]) => {
-    const value = index.handler.px(d || "1");
+    const value = utilities.handler.px(d || "1");
     if (value) {
       return {
         "--un-ring-inset": "var(--un-empty, )",
@@ -578,13 +688,13 @@ const rings = [
         "--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]) => {
-    const value = index.handler.px(d || "1");
+    const value = utilities.handler.px(d || "1");
     if (value) {
       return {
         "--un-ring-offset-width": value
@@ -635,12 +745,12 @@ function getPropName(minmax, hw) {
 function getThemeValue(minmax, hw, theme, prop) {
   let str = `${hw === "h" ? "height" : "width"}`;
   if (minmax)
-    str = `${minmax}${index.capitalize(str)}`;
+    str = `${minmax}${utilities.capitalize(str)}`;
   return theme[str]?.[prop];
 }
 const sizes = [
   [/^(?:(min|max)-)?(w|h)-(.+)$/, ([, m, w, s], { theme }) => {
-    const v = getThemeValue(m, w, theme, s) || index.handler.bracket.cssvar.fraction.rem(s);
+    const v = getThemeValue(m, w, theme, s) || utilities.handler.bracket.cssvar.fraction.rem(s);
     if (v != null)
       return { [getPropName(m, w)]: v };
   }],
@@ -653,106 +763,30 @@ const sizes = [
 const aspectRatio = [
   ["aspect-ratio-auto", { "aspect-ratio": "auto" }],
   [/^aspect-ratio-(.+)$/, ([, d]) => {
-    const v = (/^\d+\/\d+$/.test(d) ? d : null) || index.handler.bracket.cssvar.number(d);
+    const v = (/^\d+\/\d+$/.test(d) ? d : null) || utilities.handler.bracket.cssvar.number(d);
     if (v != null)
       return { "aspect-ratio": v };
   }]
 ];
 
-const directionSize = (prefix) => ([_, direction, size]) => {
-  const v = index.handler.bracket.rem.fraction.cssvar(size);
-  if (v)
-    return index.directionMap[direction].map((i) => [prefix + i, v]);
-};
 const paddings = [
-  [/^pa?()-?(-?.+)$/, directionSize("padding")],
-  [/^p-?([xy])-?(-?.+)$/, directionSize("padding")],
-  [/^p-?([rltbse])-?(-?.+)$/, directionSize("padding")]
+  [/^pa?()-?(-?.+)$/, utilities.directionSize("padding")],
+  [/^p-?([xy])-?(-?.+)$/, utilities.directionSize("padding")],
+  [/^p-?([rltbse])-?(-?.+)$/, utilities.directionSize("padding")]
 ];
 const margins = [
-  [/^ma?()-?(-?.+)$/, directionSize("margin")],
-  [/^m-?([xy])-?(-?.+)$/, directionSize("margin")],
-  [/^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"
-  }]
+  [/^ma?()-?(-?.+)$/, utilities.directionSize("margin")],
+  [/^m-?([xy])-?(-?.+)$/, utilities.directionSize("margin")],
+  [/^m-?([rltbse])-?(-?.+)$/, utilities.directionSize("margin")]
 ];
 
 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))",
-  [pseudo.CONTROL_BYPASS_PSEUDO]: ""
+  [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))",
-  [pseudo.CONTROL_BYPASS_PSEUDO]: ""
+  [pseudo.CONTROL_BYPASS_PSEUDO_CLASS]: ""
 };
 const transformBase = {
   "--un-rotate": 0,
@@ -769,11 +803,12 @@ 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],
   ["transform-gpu", transformGpu],
   ["transform-cpu", transformCpu],
   ["transform-none", { transform: "none" }],
@@ -788,29 +823,29 @@ const transforms = [
   ["origin-top-left", { "transform-origin": "top left" }]
 ];
 function handleTranslate([, d, b]) {
-  const v = index.handler.bracket.fraction.rem(b);
+  const v = utilities.handler.bracket.fraction.rem(b);
   if (v != null) {
     return [
       transformBase,
       [
-        ...index.xyzMap[d].map((i) => [`--un-translate${i}`, v])
+        ...utilities.xyzMap[d].map((i) => [`--un-translate${i}`, v])
       ]
     ];
   }
 }
 function handleScale([, d, b]) {
-  const v = index.handler.bracket.fraction.percent(b);
+  const v = utilities.handler.bracket.fraction.percent(b);
   if (v != null) {
     return [
       transformBase,
       [
-        ...index.xyzMap[d].map((i) => [`--un-scale${i}`, v])
+        ...utilities.xyzMap[d].map((i) => [`--un-scale${i}`, v])
       ]
     ];
   }
 }
-function handleRotate([, b]) {
-  const v = index.handler.bracket.number(b);
+function handleRotateWithUnit([, b]) {
+  const v = utilities.handler.bracket.number(b);
   if (v != null) {
     return [
       transformBase,
@@ -818,6 +853,15 @@ function handleRotate([, b]) {
     ];
   }
 }
+function handleRotate([, b]) {
+  const v = utilities.handler.bracket(b);
+  if (v != null) {
+    return [
+      transformBase,
+      { "--un-rotate": v }
+    ];
+  }
+}
 
 const variablesAbbrMap = {
   "visible": "visibility",
@@ -826,6 +870,8 @@ const variablesAbbrMap = {
   "backface": "backface-visibility",
   "whitespace": "white-space",
   "break": "word-break",
+  "b": "border-color",
+  "border": "border-color",
   "color": "color",
   "case": "text-transform",
   "origin": "transform-origin",
@@ -846,23 +892,26 @@ const variablesAbbrMap = {
   "self": "align-self",
   "object": "object-fit"
 };
-const cssVariables = [[
-  /^(.+)-\$(.+)$/,
-  ([, name, varname]) => {
+const cssVariables = [
+  [/^(.+)-\$(.+)$/, ([, name, varname]) => {
     const prop = variablesAbbrMap[name];
     if (prop) {
       return {
         [prop]: `var(--${varname})`
       };
     }
-  }
-]];
+  }],
+  [/^(?:border|b)-([^-]+)-\$(.+)$/, ([, a, v]) => {
+    if (a in utilities.directionMap)
+      return utilities.directionMap[a].map((i) => [`border${i}-color`, `var(--${v})`]);
+  }]
+];
 
 const questionMark = [
   [
     /^(where|\?)$/,
     (_, { constructCSS, generator }) => {
-      if (generator.config.envMode === "dev")
+      if (generator.userConfig.envMode === "dev")
         return `@keyframes __un_qm{0%{box-shadow:inset 4px 4px #ff1e90, inset -4px -4px #ff1e90}100%{box-shadow:inset 8px 8px #3399ff, inset -8px -8px #3399ff}}
 ${constructCSS({ animation: "__un_qm 0.5s ease-in-out alternate infinite" })}`;
     }
@@ -877,10 +926,10 @@ const textDecorations = [
   ["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 : index.handler.bracket.px(s) })],
-  [/^decoration-(.*)$/, ([, d]) => ({ "text-decoration-thickness": index.handler.bracket.px(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 : index.handler.bracket.px(s);
+    const v = s === "auto" ? s : utilities.handler.bracket.px(s);
     if (v != null)
       return { "text-underline-offset": v };
   }],
@@ -893,7 +942,21 @@ const textDecorations = [
       };
     }
   }],
-  [/^(?:underline|decoration)-op(?:acity)?-?(.+)$/m, ([, opacity]) => ({ "--un-line-opacity": index.handler.bracket.percent(opacity) })]
+  [/^(?:underline|decoration)-op(?:acity)?-?(.+)$/m, ([, opacity]) => ({ "--un-line-opacity": utilities.handler.bracket.percent(opacity) })]
+];
+
+const svgUtilities = [
+  [/^fill-(.+)$/, colorResolver$1("fill", "fill")],
+  [/^fill-op(?:acity)?-?(.+)$/m, ([, 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-none", { stroke: "none" }]
 ];
 
 const rules = [
@@ -903,7 +966,7 @@ const rules = [
   displays,
   opacity,
   bgColors,
-  fillColors,
+  svgUtilities,
   borders,
   contents,
   fonts,
@@ -949,6 +1012,7 @@ const rules = [
   boxSizing,
   transitions,
   transforms,
+  willChange,
   questionMark
 ].flat(1);
 
@@ -964,10 +1028,10 @@ 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;
-exports.fillColors = fillColors;
 exports.flex = flex;
 exports.floats = floats;
 exports.fontSmoothings = fontSmoothings;
@@ -995,6 +1059,7 @@ exports.ringOffsetColors = ringOffsetColors;
 exports.rings = rings;
 exports.rules = rules;
 exports.sizes = sizes;
+exports.svgUtilities = svgUtilities;
 exports.tabSizes = tabSizes;
 exports.textAligns = textAligns;
 exports.textColors = textColors;
@@ -1010,4 +1075,5 @@ exports.userSelects = userSelects;
 exports.varEmpty = varEmpty;
 exports.verticalAligns = verticalAligns;
 exports.whitespaces = whitespaces;
+exports.willChange = willChange;
 exports.zIndexes = zIndexes;