@unocss/preset-mini 0.15.4 → 0.16.1

package/dist/chunks/default2.cjs

@@ -25,11 +25,13 @@ const parseColorUtil = (body, theme) => {
   if (!name)
     return;
   let color;
-  const bracket = index.handler.bracket(main) || main;
-  if (bracket.startsWith("#"))
-    color = bracket.slice(1);
-  if (bracket.startsWith("hex-"))
-    color = bracket.slice(4);
+  const bracket = index.handler.bracket(main);
+  const bracketOrMain = bracket || main;
+  if (bracketOrMain.startsWith("#"))
+    color = bracketOrMain.slice(1);
+  if (bracketOrMain.startsWith("hex-"))
+    color = bracketOrMain.slice(4);
+  color = color || bracket;
   if (!color) {
     const colorData = theme.colors?.[name];
     if (typeof colorData === "string")
@@ -78,22 +80,6 @@ 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) })]
 ];
-const textDecorationColors = [
-  [/^underline-(.+)$/, (match, ctx) => {
-    const result = colorResolver$1("text-decoration-color", "line")(match, ctx);
-    if (result) {
-      return {
-        "-webkit-text-decoration-color": result["text-decoration-color"],
-        ...result
-      };
-    }
-  }],
-  [/^underline-op(?:acity)?-?(.+)$/m, ([, opacity2]) => ({ "--un-line-opacity": index.handler.bracket.percent(opacity2) })]
-];
-const textStrokeColors = [
-  [/^text-stroke-(.+)$/, colorResolver$1("-webkit-text-stroke-color", "text-stroke")],
-  [/^text-stroke-op(?:acity)?-?(.+)$/m, ([, opacity2]) => ({ "--un-text-stroke-opacity": index.handler.bracket.percent(opacity2) })]
-];
 const bgColors = [
   [/^bg-(.+)$/, colorResolver$1("background-color", "bg")],
   [/^bg-op(?:acity)?-?(.+)$/m, ([, opacity2]) => ({ "--un-bg-opacity": index.handler.bracket.percent(opacity2) })]
@@ -178,39 +164,51 @@ const placeholder = [
   ]
 ];
 
-const borderSizes = [
+const borders = [
   [/^border$/, handlerBorder],
-  [/^(?:border|b)(?:-([^-]+))?$/, handlerBorder],
-  [/^(?:border|b)(?:-([^-]+))?(?:-([^-]+))?$/, handlerBorder]
-];
-const borderRadius = [
-  [/^(?:border-)?(?:rounded|rd)$/, handlerRounded],
-  [/^(?:border-)?(?:rounded|rd)(?:-([^-]+))?$/, handlerRounded],
-  [/^(?:border-)?(?:rounded|rd)(?:-([^-]+))?(?:-([^-]+))?$/, handlerRounded]
-];
-const borderStyles = [
+  [/^(?: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": index.handler.bracket.percent(opacity) })],
   ["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-none", { "border-style": "none" }],
+  [/^(?:border-)?(?:rounded|rd)$/, handlerRounded],
+  [/^(?:border-)?(?:rounded|rd)(?:-([^-]+))?$/, handlerRounded],
+  [/^(?:border-)?(?:rounded|rd)(?:-([^-]+))?(?:-([^-]+))?$/, handlerRounded]
 ];
-const borders = [
-  borderSizes,
-  borderColors,
-  borderStyles,
-  borderRadius
-].flat(1);
-function handlerBorder([, a, b]) {
+function handlerBorder(m) {
+  const borderSizes = handlerBorderSize(m);
+  if (borderSizes) {
+    return [
+      ...borderSizes,
+      ["border-style", "solid"]
+    ];
+  }
+}
+function handlerBorderSize([, a, b]) {
   const [d, s = "1"] = index.directionMap[a] ? [a, b] : ["", a];
   const v = index.handler.bracket.px(s);
   if (v != null) {
     return [
-      ...index.directionMap[d].map((i) => [`border${i}-width`, v]),
-      ["border-style", "solid"]
+      ...index.directionMap[d].map((i) => [`border${i}-width`, v])
     ];
   }
 }
+function handlerBorderColor([, a, c], ctx) {
+  const ofColor = colorResolver$1("border-color", "border")(["", c], ctx);
+  if (ofColor) {
+    const borders2 = index.directionMap[index.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);
@@ -309,37 +307,27 @@ const transitions = [
 ];
 
 const flex = [
-  ["flex-col", { "flex-direction": "column" }],
-  ["flex-col-reverse", { "flex-direction": "column-reverse" }],
-  ["flex-row", { "flex-direction": "row" }],
-  ["flex-row-reverse", { "flex-direction": "row-reverse" }],
-  ["flex-wrap", { "flex-wrap": "wrap" }],
-  ["flex-wrap-reverse", { "flex-wrap": "wrap-reverse" }],
-  ["flex-nowrap", { "flex-wrap": "nowrap" }],
+  ["flex", { display: "flex" }],
+  ["inline-flex", { display: "inline-flex" }],
+  ["flex-inline", { display: "inline-flex" }],
   ["flex-1", { flex: "1 1 0%" }],
   ["flex-auto", { flex: "1 1 auto" }],
   ["flex-initial", { flex: "0 1 auto" }],
   ["flex-none", { flex: "none" }],
   [/^flex-\[(.+)\]$/, ([, d]) => ({ flex: d })],
-  ["flex-grow", { "flex-grow": 1 }],
-  ["flex-grow-0", { "flex-grow": 0 }],
   ["flex-shrink", { "flex-shrink": 1 }],
   ["flex-shrink-0", { "flex-shrink": 0 }],
-  ["flex", { display: "flex" }],
-  ["inline-flex", { display: "inline-flex" }],
-  ["flex-inline", { display: "inline-flex" }]
+  ["flex-grow", { "flex-grow": 1 }],
+  ["flex-grow-0", { "flex-grow": 0 }],
+  ["flex-row", { "flex-direction": "row" }],
+  ["flex-row-reverse", { "flex-direction": "row-reverse" }],
+  ["flex-col", { "flex-direction": "column" }],
+  ["flex-col-reverse", { "flex-direction": "column-reverse" }],
+  ["flex-wrap", { "flex-wrap": "wrap" }],
+  ["flex-wrap-reverse", { "flex-wrap": "wrap-reverse" }],
+  ["flex-nowrap", { "flex-wrap": "nowrap" }]
 ];
 
-const fontsFamilies = [
-  [/^font-(\w+)$/, ([, d], { theme }) => {
-    const font = theme.fontFamily?.[d];
-    if (font) {
-      return {
-        "font-family": font
-      };
-    }
-  }]
-];
 const weightMap = {
   thin: "100",
   extralight: "200",
@@ -351,40 +339,48 @@ const weightMap = {
   extrabold: "800",
   black: "900"
 };
-const fontSizes = [
-  [/^text-([^-]+)$/, ([, s = "base"], { theme }) => {
-    const result = core.toArray(theme.fontSize?.[s] || index.handler.bracket.rem(s));
-    if (result?.[0]) {
-      const [size, height = "1"] = result;
+const fonts = [
+  [/^font-(\w+)$/, ([, d], { theme }) => {
+    const font = theme.fontFamily?.[d];
+    if (font) {
+      return {
+        "font-family": font
+      };
+    }
+  }],
+  [/^text-(.+)$/, ([, s = "base"], { theme }) => {
+    const size = index.handler.bracket.rem(s);
+    if (size)
+      return { "font-size": size };
+    const themed = core.toArray(theme.fontSize?.[s]);
+    if (themed?.[0]) {
+      const [size2, height] = themed;
       return {
-        "font-size": size,
+        "font-size": size2,
         "line-height": height
       };
     }
-  }]
-];
-const fontWeights = [
+  }],
+  [/^text-size-(.+)$/, ([, s]) => {
+    const raw = index.handler.bracket.rem(s);
+    if (raw)
+      return { "font-size": raw };
+  }],
   [/^(?:font|fw)-?([^-]+)$/, ([, s]) => {
     const v = weightMap[s] || index.handler.number(s);
     if (v)
       return { "font-weight": v };
-  }]
-];
-const leadings = [
+  }],
   [/^(?:leading|lh)-([^-]+)$/, ([, s], { theme }) => {
     const v = theme.lineHeight?.[s] || index.handler.bracket.rem(s);
     if (v !== null)
       return { "line-height": v };
-  }]
-];
-const trackings = [
+  }],
   [/^tracking-([^-]+)$/, ([, s], { theme }) => {
     const v = theme.letterSpacing?.[s] || index.handler.bracket.rem(s);
     if (v !== null)
       return { "letter-spacing": v };
-  }]
-];
-const wordSpacings = [
+  }],
   [/^word-spacing-([^-]+)$/, ([, s], { theme }) => {
     const v = theme.wordSpacing?.[s] || index.handler.bracket.rem(s);
     if (v !== null)
@@ -404,20 +400,6 @@ const tabSizes = [
     }
   }]
 ];
-const textDecorationLengths = [
-  [/^underline-([^-]+)$/, ([, s]) => {
-    const v = s === "auto" ? s : index.handler.bracket.px(s);
-    if (v != null)
-      return { "text-decoration-thickness": v };
-  }]
-];
-const textDecorationOffsets = [
-  [/^underline-offset-([^-]+)$/, ([, s]) => {
-    const v = s === "auto" ? s : index.handler.bracket.px(s);
-    if (v != null)
-      return { "text-underline-offset": v };
-  }]
-];
 const textIndents = [
   [/^indent(?:-(.+))?$/, ([, s], { theme }) => {
     const v = theme.textIndent?.[s || "DEFAULT"] || index.handler.bracket.cssvar.fraction.rem(s);
@@ -425,12 +407,14 @@ const textIndents = [
       return { "text-indent": v };
   }]
 ];
-const textStrokeWidths = [
+const textStrokes = [
   [/^text-stroke(?:-(.+))?$/, ([, s], { theme }) => {
     const v = theme.textStrokeWidth?.[s || "DEFAULT"] || index.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) })]
 ];
 const textShadows = [
   [/^text-shadow(?:-(.+))?$/, ([, s], { theme }) => {
@@ -439,11 +423,6 @@ const textShadows = [
       return { "text-shadow": v };
   }]
 ];
-const fonts = [
-  fontsFamilies,
-  fontSizes,
-  fontWeights
-].flat(1);
 
 const gaps = [
   [/^(?:flex-|grid-)?gap-([^-]+)$/, ([, s]) => {
@@ -488,12 +467,10 @@ const autoDirection = (selector, theme) => {
 const grids = [
   ["grid", { display: "grid" }],
   ["inline-grid", { display: "inline-grid" }],
-  [/^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, " ") })],
-  [/^grid-rows-\[(.+)\]$/, ([, v]) => ({ "grid-template-rows": v.replace(/,/g, " ") })],
+  [/^(?: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 = index.handler.bracket(v);
@@ -510,13 +487,15 @@ 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-)?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-)?auto-rows-([\w.-]+)$/, ([, v], { theme }) => ({ "grid-auto-rows": `${autoDirection(v, theme)}` })],
-  [/^(?:grid-)?auto-cols-([\w.-]+)$/, ([, v], { theme }) => ({ "grid-auto-columns": `${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, " ") })],
+  [/^grid-rows-\[(.+)\]$/, ([, v]) => ({ "grid-template-rows": v.replace(/,/g, " ") })]
 ];
 
 const overflowValues = [
@@ -530,6 +509,7 @@ const overflows = [
   [/^(?:overflow|of)-([xy])-(.+)$/, ([, d, v]) => overflowValues.includes(v) ? { [`overflow-${d}`]: v } : void 0]
 ];
 
+const basicSet = ["auto", "start", "end", "center", "stretch"];
 const positions = [
   ["relative", { position: "relative" }],
   ["absolute", { position: "absolute" }],
@@ -543,47 +523,42 @@ const justifies = [
   ["justify-center", { "justify-content": "center" }],
   ["justify-between", { "justify-content": "space-between" }],
   ["justify-around", { "justify-content": "space-around" }],
-  ["justify-evenly", { "justify-content": "space-evenly" }]
+  ["justify-evenly", { "justify-content": "space-evenly" }],
+  ...basicSet.map((i) => [`justify-items-${i}`, { "justify-items": i }]),
+  ...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) })]
 ];
-const basicSet = ["auto", "start", "end", "center", "stretch"];
-const justifyItems = basicSet.map((i) => [`justify-items-${i}`, { "justify-items": i }]);
-const justifySelfs = basicSet.map((i) => [`justify-self-${i}`, { "justify-self": i }]);
-const alignContents = [
+const alignments = [
   ["content-start", { "align-content": "flex-start" }],
   ["content-end", { "align-content": "flex-end" }],
   ["content-center", { "align-content": "center" }],
   ["content-between", { "align-content": "space-between" }],
   ["content-around", { "align-content": "space-around" }],
-  ["content-evenly", { "align-content": "space-evenly" }]
-];
-const alignItems = [
+  ["content-evenly", { "align-content": "space-evenly" }],
   ["items-start", { "align-items": "flex-start" }],
   ["items-end", { "align-items": "flex-end" }],
   ["items-center", { "align-items": "center" }],
   ["items-baseline", { "align-items": "baseline" }],
-  ["items-stretch", { "align-items": "stretch" }]
-];
-const alignSelfs = [
+  ["items-stretch", { "align-items": "stretch" }],
   ["self-auto", { "align-self": "auto" }],
   ["self-start", { "align-self": "flex-start" }],
   ["self-end", { "align-self": "flex-end" }],
   ["self-center", { "align-self": "center" }],
   ["self-stretch", { "align-items": "stretch" }]
 ];
-const placeContents = [
+const placements = [
   ["place-content-start", { "place-content": "start" }],
   ["place-content-end", { "place-content": "end" }],
   ["place-content-center", { "place-content": "center" }],
   ["place-content-between", { "place-content": "space-between" }],
   ["place-content-around", { "place-content": "space-around" }],
   ["place-content-evenly", { "place-content": "space-evenly" }],
-  ["place-content-stretch", { "place-content": "stretch" }]
+  ["place-content-stretch", { "place-content": "stretch" }],
+  ...basicSet.map((i) => [`place-items-${i}`, { "place-items": i }]),
+  ...basicSet.map((i) => [`place-self-${i}`, { "place-self": i }])
 ];
-const placeItems = basicSet.map((i) => [`place-items-${i}`, { "place-items": i }]);
-const placeSelfs = 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);
 }
@@ -774,17 +749,6 @@ const textTransforms = [
   ["case-capital", { "text-transform": "capitalize" }],
   ["case-normal", { "text-transform": "none" }]
 ];
-const textDecorations = [
-  ["underline", { "text-decoration": "underline" }],
-  ["line-through", { "text-decoration": "line-through" }],
-  ["no-underline", { "text-decoration": "none" }]
-];
-const textDecorationStyles = [
-  ["underline-solid", { "text-decoration-style": "solid" }],
-  ["underline-double", { "text-decoration-style": "double" }],
-  ["underline-dotted", { "text-decoration-style": "dotted" }],
-  ["underline-dashed", { "text-decoration-style": "dashed" }]
-];
 const fontStyles = [
   ["italic", { "font-style": "italic" }],
   ["not-italic", { "font-style": "normal" }]
@@ -802,6 +766,14 @@ const fontSmoothings = [
   }]
 ];
 
+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]: ""
+};
+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]: ""
+};
 const transformBase = {
   "--un-rotate": 0,
   "--un-scale-x": 1,
@@ -812,12 +784,7 @@ const transformBase = {
   "--un-translate-x": 0,
   "--un-translate-y": 0,
   "--un-translate-z": 0,
-  "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]: ""
-};
-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]: ""
+  ...transformCpu
 };
 const transforms = [
   ["transform", transformBase],
@@ -828,6 +795,8 @@ const transforms = [
   [/^scale-([xyz])-([^-]+)$/, handleScale],
   [/^rotate-([^-]+)(?:deg)?$/, handleRotate],
   ["transform-gpu", transformGpu],
+  ["transform-cpu", transformCpu],
+  ["transform-none", { transform: "none" }],
   ["origin-center", { "transform-origin": "center" }],
   ["origin-top", { "transform-origin": "top" }],
   ["origin-top-right", { "transform-origin": "top right" }],
@@ -877,19 +846,12 @@ const variablesAbbrMap = {
   "backface": "backface-visibility",
   "whitespace": "white-space",
   "break": "word-break",
+  "b": "border-color",
+  "border": "border-color",
   "color": "color",
   "case": "text-transform",
-  "write": "writing-mode",
-  "write-orient": "text-orientation",
   "origin": "transform-origin",
   "bg": "background-color",
-  "bg-blend": "background-blend-mode",
-  "bg-clip": "-webkit-background-clip",
-  "bg-gradient": "linear-gradient",
-  "bg-origin-border": "background-origin",
-  "bg-position": "background-position",
-  "bg-repeat": "background-repeat",
-  "bg-size": "background-size",
   "bg-opacity": "background-opacity",
   "tab": "tab-size",
   "underline": "text-decoration-thickness",
@@ -904,21 +866,22 @@ const variablesAbbrMap = {
   "content": "align-content",
   "items": "align-items",
   "self": "align-self",
-  "object": "object-fit",
-  "mix-blend": "mix-blend-mode",
-  "animate-speed": "animation-speed"
+  "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 index.directionMap)
+      return index.directionMap[a].map((i) => [`border${i}-color`, `var(--${v})`]);
+  }]
+];
 
 const questionMark = [
   [
@@ -931,6 +894,33 @@ ${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 : index.handler.bracket.px(s) })],
+  [/^decoration-(.*)$/, ([, d]) => ({ "text-decoration-thickness": index.handler.bracket.px(d) })],
+  [/^underline-offset-([^-]+)$/, ([, s]) => {
+    const v = s === "auto" ? s : index.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);
+    if (result) {
+      return {
+        "-webkit-text-decoration-color": result["text-decoration-color"],
+        ...result
+      };
+    }
+  }],
+  [/^(?:underline|decoration)-op(?:acity)?-?(.+)$/m, ([, opacity]) => ({ "--un-line-opacity": index.handler.bracket.percent(opacity) })]
+];
+
 const rules = [
   cssVariables,
   paddings,
@@ -946,12 +936,7 @@ const rules = [
   textIndents,
   textOverflows,
   textDecorations,
-  textDecorationStyles,
-  textDecorationColors,
-  textDecorationLengths,
-  textDecorationOffsets,
-  textStrokeWidths,
-  textStrokeColors,
+  textStrokes,
   textShadows,
   textTransforms,
   textAligns,
@@ -974,9 +959,6 @@ const rules = [
   userSelects,
   whitespaces,
   breaks,
-  trackings,
-  wordSpacings,
-  leadings,
   overflows,
   outline,
   appearance,
@@ -984,14 +966,8 @@ const rules = [
   positions,
   orders,
   justifies,
-  justifyItems,
-  justifySelfs,
-  alignContents,
-  alignItems,
-  alignSelfs,
-  placeContents,
-  placeItems,
-  placeSelfs,
+  alignments,
+  placements,
   insets,
   floats,
   zIndexes,
@@ -1001,17 +977,12 @@ const rules = [
   questionMark
 ].flat(1);
 
-exports.alignContents = alignContents;
-exports.alignItems = alignItems;
-exports.alignSelfs = alignSelfs;
+exports.alignments = alignments;
 exports.appearance = appearance;
 exports.appearances = appearances;
 exports.aspectRatio = aspectRatio;
 exports.bgColors = bgColors;
 exports.borderColors = borderColors;
-exports.borderRadius = borderRadius;
-exports.borderSizes = borderSizes;
-exports.borderStyles = borderStyles;
 exports.borders = borders;
 exports.boxShadows = boxShadows;
 exports.boxSizing = boxSizing;
@@ -1024,19 +995,13 @@ exports.displays = displays;
 exports.fillColors = fillColors;
 exports.flex = flex;
 exports.floats = floats;
-exports.fontSizes = fontSizes;
 exports.fontSmoothings = fontSmoothings;
 exports.fontStyles = fontStyles;
-exports.fontWeights = fontWeights;
 exports.fonts = fonts;
-exports.fontsFamilies = fontsFamilies;
 exports.gaps = gaps;
 exports.grids = grids;
 exports.insets = insets;
 exports.justifies = justifies;
-exports.justifyItems = justifyItems;
-exports.justifySelfs = justifySelfs;
-exports.leadings = leadings;
 exports.margins = margins;
 exports.opacity = opacity;
 exports.orders = orders;
@@ -1044,10 +1009,8 @@ exports.outline = outline;
 exports.overflows = overflows;
 exports.paddings = paddings;
 exports.parseColorUtil = parseColorUtil;
-exports.placeContents = placeContents;
-exports.placeItems = placeItems;
-exports.placeSelfs = placeSelfs;
 exports.placeholder = placeholder;
+exports.placements = placements;
 exports.pointerEvents = pointerEvents;
 exports.positions = positions;
 exports.questionMark = questionMark;
@@ -1060,23 +1023,16 @@ exports.sizes = sizes;
 exports.tabSizes = tabSizes;
 exports.textAligns = textAligns;
 exports.textColors = textColors;
-exports.textDecorationColors = textDecorationColors;
-exports.textDecorationLengths = textDecorationLengths;
-exports.textDecorationOffsets = textDecorationOffsets;
-exports.textDecorationStyles = textDecorationStyles;
 exports.textDecorations = textDecorations;
 exports.textIndents = textIndents;
 exports.textOverflows = textOverflows;
 exports.textShadows = textShadows;
-exports.textStrokeColors = textStrokeColors;
-exports.textStrokeWidths = textStrokeWidths;
+exports.textStrokes = textStrokes;
 exports.textTransforms = textTransforms;
-exports.trackings = trackings;
 exports.transforms = transforms;
 exports.transitions = transitions;
 exports.userSelects = userSelects;
 exports.varEmpty = varEmpty;
 exports.verticalAligns = verticalAligns;
 exports.whitespaces = whitespaces;
-exports.wordSpacings = wordSpacings;
 exports.zIndexes = zIndexes;