@unocss/preset-mini 0.20.0 → 0.20.1

package/dist/chunks/default.cjs

@@ -115,12 +115,12 @@ const borderRadius = {
   "full": "9999px"
 };
 const boxShadow = {
-  "DEFAULT": "0 1px 3px 0 rgba(var(--un-shadow-color), 0.1), 0 1px 2px 0 rgba(var(--un-shadow-color), 0.06)",
-  "sm": "0 1px 2px 0 rgba(var(--un-shadow-color), 0.05)",
-  "md": "0 4px 6px -1px rgba(var(--un-shadow-color), 0.1), 0 2px 4px -1px rgba(var(--un-shadow-color), 0.06)",
-  "lg": "0 10px 15px -3px rgba(var(--un-shadow-color), 0.1), 0 4px 6px -2px rgba(var(--un-shadow-color), 0.05)",
-  "xl": "0 20px 25px -5px rgba(var(--un-shadow-color), 0.1), 0 10px 10px -5px rgba(var(--un-shadow-color), 0.04)",
-  "2xl": "25px 50px -12px rgba(var(--un-shadow-color), 0.25)",
+  "DEFAULT": "var(--un-shadow-inset) 0 1px 3px 0 rgba(var(--un-shadow-color), 0.1), var(--un-shadow-inset) 0 1px 2px 0 rgba(var(--un-shadow-color), 0.06)",
+  "sm": "var(--un-shadow-inset) 0 1px 2px 0 rgba(var(--un-shadow-color), 0.05)",
+  "md": "var(--un-shadow-inset) 0 4px 6px -1px rgba(var(--un-shadow-color), 0.1), var(--un-shadow-inset) 0 2px 4px -1px rgba(var(--un-shadow-color), 0.06)",
+  "lg": "var(--un-shadow-inset) 0 10px 15px -3px rgba(var(--un-shadow-color), 0.1), var(--un-shadow-inset) 0 4px 6px -2px rgba(var(--un-shadow-color), 0.05)",
+  "xl": "var(--un-shadow-inset) 0 20px 25px -5px rgba(var(--un-shadow-color), 0.1), var(--un-shadow-inset) 0 10px 10px -5px rgba(var(--un-shadow-color), 0.04)",
+  "2xl": "var(--un-shadow-inset) 0 25px 50px -12px rgba(var(--un-shadow-color), 0.25)",
   "inner": "inset 0 2px 4px 0 rgba(var(--un-shadow-color), 0.06)",
   "none": "none"
 };

package/dist/chunks/default.mjs

@@ -113,12 +113,12 @@ const borderRadius = {
   "full": "9999px"
 };
 const boxShadow = {
-  "DEFAULT": "0 1px 3px 0 rgba(var(--un-shadow-color), 0.1), 0 1px 2px 0 rgba(var(--un-shadow-color), 0.06)",
-  "sm": "0 1px 2px 0 rgba(var(--un-shadow-color), 0.05)",
-  "md": "0 4px 6px -1px rgba(var(--un-shadow-color), 0.1), 0 2px 4px -1px rgba(var(--un-shadow-color), 0.06)",
-  "lg": "0 10px 15px -3px rgba(var(--un-shadow-color), 0.1), 0 4px 6px -2px rgba(var(--un-shadow-color), 0.05)",
-  "xl": "0 20px 25px -5px rgba(var(--un-shadow-color), 0.1), 0 10px 10px -5px rgba(var(--un-shadow-color), 0.04)",
-  "2xl": "25px 50px -12px rgba(var(--un-shadow-color), 0.25)",
+  "DEFAULT": "var(--un-shadow-inset) 0 1px 3px 0 rgba(var(--un-shadow-color), 0.1), var(--un-shadow-inset) 0 1px 2px 0 rgba(var(--un-shadow-color), 0.06)",
+  "sm": "var(--un-shadow-inset) 0 1px 2px 0 rgba(var(--un-shadow-color), 0.05)",
+  "md": "var(--un-shadow-inset) 0 4px 6px -1px rgba(var(--un-shadow-color), 0.1), var(--un-shadow-inset) 0 2px 4px -1px rgba(var(--un-shadow-color), 0.06)",
+  "lg": "var(--un-shadow-inset) 0 10px 15px -3px rgba(var(--un-shadow-color), 0.1), var(--un-shadow-inset) 0 4px 6px -2px rgba(var(--un-shadow-color), 0.05)",
+  "xl": "var(--un-shadow-inset) 0 20px 25px -5px rgba(var(--un-shadow-color), 0.1), var(--un-shadow-inset) 0 10px 10px -5px rgba(var(--un-shadow-color), 0.04)",
+  "2xl": "var(--un-shadow-inset) 0 25px 50px -12px rgba(var(--un-shadow-color), 0.25)",
   "inner": "inset 0 2px 4px 0 rgba(var(--un-shadow-color), 0.06)",
   "none": "none"
 };

package/dist/chunks/default2.cjs

@@ -81,12 +81,12 @@ const borderColorResolver = (direction) => ([, body], { theme }) => {
     } else {
       if (direction === "") {
         return {
-          "--un-border-opacity": 1,
+          "--un-border-opacity": (opacity && utilities.handler.cssvar(opacity)) ?? 1,
           [`border${direction}-color`]: `rgba(${rgba.slice(0, 3).join(",")},var(--un-border${direction}-opacity))`
         };
       } else {
         return {
-          "--un-border-opacity": 1,
+          "--un-border-opacity": (opacity && utilities.handler.cssvar(opacity)) ?? 1,
           [`--un-border${direction}-opacity`]: "var(--un-border-opacity)",
           [`border${direction}-color`]: `rgba(${rgba.slice(0, 3).join(",")},var(--un-border${direction}-opacity))`
         };
@@ -199,14 +199,7 @@ const weightMap = {
   black: "900"
 };
 const fonts = [
-  [/^font-(\w+)$/, ([, d], { theme }) => {
-    const font = theme.fontFamily?.[d];
-    if (font) {
-      return {
-        "font-family": font
-      };
-    }
-  }],
+  [/^font-(\w+)$/, ([, d], { theme }) => ({ "font-family": theme.fontFamily?.[d] })],
   [/^text-(.+)$/, ([, s = "base"], { theme }) => {
     const size = utilities.handler.bracket.auto.rem(s);
     if (size)
@@ -220,37 +213,16 @@ const fonts = [
       };
     }
   }],
-  [/^text-size-(.+)$/, ([, s]) => {
-    const raw = utilities.handler.bracket.auto.rem(s);
-    if (raw)
-      return { "font-size": raw };
-  }],
-  [/^(?:font|fw)-?([^-]+)$/, ([, s]) => {
-    const v = weightMap[s] || utilities.handler.number(s);
-    if (v)
-      return { "font-weight": v };
-  }],
-  [/^(?:leading|lh)-([^-]+)$/, ([, s], { theme }) => {
-    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.auto.rem(s);
-    if (v !== null)
-      return { "letter-spacing": v };
-  }],
-  [/^word-spacing-([^-]+)$/, ([, s], { theme }) => {
-    const v = theme.wordSpacing?.[s] || utilities.handler.bracket.auto.rem(s);
-    if (v !== null)
-      return { "word-spacing": v };
-  }]
+  [/^text-size-(.+)$/, ([, s]) => ({ "font-size": utilities.handler.bracket.auto.rem(s) })],
+  [/^(?:font|fw)-?([^-]+)$/, ([, s]) => ({ "font-weight": weightMap[s] || utilities.handler.number(s) })],
+  [/^(?:leading|lh)-([^-]+)$/, ([, s], { theme }) => ({ "line-height": theme.lineHeight?.[s] || utilities.handler.bracket.auto.rem(s) })],
+  [/^tracking-([^-]+)$/, ([, s], { theme }) => ({ "letter-spacing": theme.letterSpacing?.[s] || utilities.handler.bracket.auto.rem(s) })],
+  [/^word-spacing-([^-]+)$/, ([, s], { theme }) => ({ "word-spacing": theme.wordSpacing?.[s] || utilities.handler.bracket.auto.rem(s) })]
 ];
 const tabSizes = [
   [/^tab-?([^-]*)$/, ([, s]) => {
-    s = s || "4";
-    const v = utilities.handler.bracket.global.number(s);
-    if (v !== null) {
+    const v = utilities.handler.bracket.global.number(s || "4");
+    if (v != null) {
       return {
         "-moz-tab-size": v,
         "-o-tab-size": v,
@@ -260,41 +232,29 @@ const tabSizes = [
   }]
 ];
 const textIndents = [
-  [/^indent(?:-(.+))?$/, ([, s], { theme }) => {
-    const v = theme.textIndent?.[s || "DEFAULT"] || utilities.handler.bracket.cssvar.fraction.auto.rem(s);
-    if (v != null)
-      return { "text-indent": v };
-  }]
+  [/^indent(?:-(.+))?$/, ([, s], { theme }) => ({ "text-indent": theme.textIndent?.[s || "DEFAULT"] || utilities.handler.bracket.cssvar.fraction.auto.rem(s) })]
 ];
 const textStrokes = [
-  [/^text-stroke(?:-(.+))?$/, ([, s], { theme }) => {
-    const v = theme.textStrokeWidth?.[s || "DEFAULT"] || utilities.handler.bracket.cssvar.px(s);
-    if (v != null)
-      return { "-webkit-text-stroke-width": v };
-  }],
+  [/^text-stroke(?:-(.+))?$/, ([, s], { theme }) => ({ "-webkit-text-stroke-width": theme.textStrokeWidth?.[s || "DEFAULT"] || utilities.handler.bracket.cssvar.px(s) })],
   [/^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 }) => {
-    const v = theme.textShadow?.[s || "DEFAULT"] || utilities.handler.bracket.cssvar(s);
-    if (v != null)
-      return { "text-shadow": v };
-  }]
+  [/^text-shadow(?:-(.+))?$/, ([, s], { theme }) => ({ "text-shadow": theme.textShadow?.[s || "DEFAULT"] || utilities.handler.bracket.cssvar(s) })]
 ];
 
+const directions = {
+  "": "",
+  "x-": "column-",
+  "y-": "row-"
+};
 const gaps = [
   [/^(?: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-${direction}gap`]: v,
-        [`${direction}gap`]: v
+        [`grid-${directions[d]}gap`]: v,
+        [`${directions[d]}gap`]: v
       };
     }
   }]
@@ -519,17 +479,12 @@ 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)"
       };
     }
   }],
   ["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 };
-  }],
+  [/^ring-offset-(.+)$/, ([, d]) => ({ "--un-ring-offset-width": utilities.handler.px(d || "1") })],
   [/^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")],
@@ -537,7 +492,7 @@ const rings = [
   ["ring-inset", { "--un-ring-inset": "inset" }]
 ];
 
-const colorResolver = (body, theme) => {
+const shadowColorResolver = (body, theme) => {
   const data = utilities.parseColor(body, theme);
   if (!data)
     return;
@@ -559,13 +514,15 @@ const boxShadows = [
     const value = theme.boxShadow?.[d || "DEFAULT"];
     if (value) {
       return {
+        "--un-shadow-inset": varEmpty,
         "--un-shadow-color": "0,0,0",
         "--un-shadow": value,
         "box-shadow": "var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)"
       };
     }
   }],
-  [/^shadow-(.+)$/, ([, d], { theme }) => colorResolver(d, theme)]
+  [/^shadow-(.+)$/, ([, d], { theme }) => shadowColorResolver(d, theme)],
+  ["shadow-inset", { "--un-shadow-inset": "inset" }]
 ];
 
 function getPropName(minmax, hw) {
@@ -591,11 +548,7 @@ const sizes = [
 ];
 const aspectRatio = [
   ["aspect-ratio-auto", { "aspect-ratio": "auto" }],
-  [/^aspect-ratio-(.+)$/, ([, d]) => {
-    const v = (/^\d+\/\d+$/.test(d) ? d : null) || utilities.handler.bracket.cssvar.number(d);
-    if (v != null)
-      return { "aspect-ratio": v };
-  }]
+  [/^aspect-ratio-(.+)$/, ([, d]) => ({ "aspect-ratio": (/^\d+\/\d+$/.test(d) ? d : null) || utilities.handler.bracket.cssvar.number(d) })]
 ];
 
 const paddings = [
@@ -658,9 +611,7 @@ function handleTranslate([, d, b]) {
   if (v != null) {
     return [
       transformBase,
-      [
-        ...utilities.xyzMap[d].map((i) => [`--un-translate${i}`, v])
-      ]
+      utilities.xyzMap[d].map((i) => [`--un-translate${i}`, v])
     ];
   }
 }
@@ -669,9 +620,7 @@ function handleScale([, d, b]) {
   if (v != null) {
     return [
       transformBase,
-      [
-        ...utilities.xyzMap[d].map((i) => [`--un-scale${i}`, v])
-      ]
+      utilities.xyzMap[d].map((i) => [`--un-scale${i}`, v])
     ];
   }
 }
@@ -719,17 +668,12 @@ 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",
-  "bg": "background-color",
   "bg-opacity": "background-opacity",
   "tab": "tab-size",
   "underline": "text-decoration-thickness",
   "underline-offset": "text-underline-offset",
-  "text": "color",
   "grid-cols": "grid-template-columns",
   "grid-rows": "grid-template-rows",
   "auto-flow": "grid-auto-flow",
@@ -744,15 +688,8 @@ const variablesAbbrMap = {
 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})`]);
+    if (prop)
+      return { [prop]: `var(--${varname})` };
   }]
 ];
 
@@ -794,11 +731,7 @@ const svgUtilities = [
   [/^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-(?:size-|width-)?(.+)$/, ([, s]) => ({ "stroke-width": utilities.handler.bracket.fraction.px.number(s) })],
   [/^stroke-(.+)$/, utilities.colorResolver("stroke", "stroke")],
   [/^stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-stroke-opacity": utilities.handler.bracket.percent(opacity) })],
   ["stroke-none", { stroke: "none" }]

package/dist/chunks/default2.mjs

@@ -1,4 +1,4 @@
-import { h as handler, c as colorResolver$1, d as directionMap, p as parseColor, a as cornerMap, b as capitalize, e as directionSize, x as xyzMap } from './utilities.mjs';
+import { h as handler, c as colorResolver, d as directionMap, p as parseColor, a as cornerMap, b as capitalize, e as directionSize, x as xyzMap } from './utilities.mjs';
 import { toArray } from '@unocss/core';
 import { C as CONTROL_BYPASS_PSEUDO_CLASS } from './pseudo.mjs';
 
@@ -19,7 +19,7 @@ const textAligns = [
 
 const outline = [
   [/^outline-(?:width-|size-)?(.+)$/, ([, d]) => ({ "outline-width": handler.bracket.fraction.auto.rem(d) })],
-  [/^outline-(?:color-)?(.+)$/, colorResolver$1("outline-color", "outline-color")],
+  [/^outline-(?:color-)?(.+)$/, colorResolver("outline-color", "outline-color")],
   [/^outline-offset-(.+)$/, ([, d]) => ({ "outline-offset": handler.bracket.fraction.auto.rem(d) })],
   ["outline", { "outline-style": "solid" }],
   [/^outline-(auto|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit|initial|revert|unset)$/, ([, c]) => ({ "outline-style": c })],
@@ -79,12 +79,12 @@ const borderColorResolver = (direction) => ([, body], { theme }) => {
     } else {
       if (direction === "") {
         return {
-          "--un-border-opacity": 1,
+          "--un-border-opacity": (opacity && handler.cssvar(opacity)) ?? 1,
           [`border${direction}-color`]: `rgba(${rgba.slice(0, 3).join(",")},var(--un-border${direction}-opacity))`
         };
       } else {
         return {
-          "--un-border-opacity": 1,
+          "--un-border-opacity": (opacity && handler.cssvar(opacity)) ?? 1,
           [`--un-border${direction}-opacity`]: "var(--un-border-opacity)",
           [`border${direction}-color`]: `rgba(${rgba.slice(0, 3).join(",")},var(--un-border${direction}-opacity))`
         };
@@ -127,11 +127,11 @@ const opacity = [
   [/^op(?:acity)?-?(.+)$/, ([, d]) => ({ opacity: handler.bracket.percent.cssvar(d) })]
 ];
 const textColors = [
-  [/^(?:text|color|c)-(.+)$/, colorResolver$1("color", "text")],
+  [/^(?:text|color|c)-(.+)$/, colorResolver("color", "text")],
   [/^(?:text|color|c)-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-text-opacity": handler.bracket.percent.cssvar(opacity2) })]
 ];
 const bgColors = [
-  [/^bg-(.+)$/, colorResolver$1("background-color", "bg")],
+  [/^bg-(.+)$/, colorResolver("background-color", "bg")],
   [/^bg-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-bg-opacity": handler.bracket.percent(opacity2) })]
 ];
 
@@ -197,14 +197,7 @@ const weightMap = {
   black: "900"
 };
 const fonts = [
-  [/^font-(\w+)$/, ([, d], { theme }) => {
-    const font = theme.fontFamily?.[d];
-    if (font) {
-      return {
-        "font-family": font
-      };
-    }
-  }],
+  [/^font-(\w+)$/, ([, d], { theme }) => ({ "font-family": theme.fontFamily?.[d] })],
   [/^text-(.+)$/, ([, s = "base"], { theme }) => {
     const size = handler.bracket.auto.rem(s);
     if (size)
@@ -218,37 +211,16 @@ const fonts = [
       };
     }
   }],
-  [/^text-size-(.+)$/, ([, s]) => {
-    const raw = handler.bracket.auto.rem(s);
-    if (raw)
-      return { "font-size": raw };
-  }],
-  [/^(?:font|fw)-?([^-]+)$/, ([, s]) => {
-    const v = weightMap[s] || handler.number(s);
-    if (v)
-      return { "font-weight": v };
-  }],
-  [/^(?:leading|lh)-([^-]+)$/, ([, s], { theme }) => {
-    const v = theme.lineHeight?.[s] || handler.bracket.auto.rem(s);
-    if (v !== null)
-      return { "line-height": v };
-  }],
-  [/^tracking-([^-]+)$/, ([, s], { theme }) => {
-    const v = theme.letterSpacing?.[s] || handler.bracket.auto.rem(s);
-    if (v !== null)
-      return { "letter-spacing": v };
-  }],
-  [/^word-spacing-([^-]+)$/, ([, s], { theme }) => {
-    const v = theme.wordSpacing?.[s] || handler.bracket.auto.rem(s);
-    if (v !== null)
-      return { "word-spacing": v };
-  }]
+  [/^text-size-(.+)$/, ([, s]) => ({ "font-size": handler.bracket.auto.rem(s) })],
+  [/^(?:font|fw)-?([^-]+)$/, ([, s]) => ({ "font-weight": weightMap[s] || handler.number(s) })],
+  [/^(?:leading|lh)-([^-]+)$/, ([, s], { theme }) => ({ "line-height": theme.lineHeight?.[s] || handler.bracket.auto.rem(s) })],
+  [/^tracking-([^-]+)$/, ([, s], { theme }) => ({ "letter-spacing": theme.letterSpacing?.[s] || handler.bracket.auto.rem(s) })],
+  [/^word-spacing-([^-]+)$/, ([, s], { theme }) => ({ "word-spacing": theme.wordSpacing?.[s] || handler.bracket.auto.rem(s) })]
 ];
 const tabSizes = [
   [/^tab-?([^-]*)$/, ([, s]) => {
-    s = s || "4";
-    const v = handler.bracket.global.number(s);
-    if (v !== null) {
+    const v = handler.bracket.global.number(s || "4");
+    if (v != null) {
       return {
         "-moz-tab-size": v,
         "-o-tab-size": v,
@@ -258,41 +230,29 @@ const tabSizes = [
   }]
 ];
 const textIndents = [
-  [/^indent(?:-(.+))?$/, ([, s], { theme }) => {
-    const v = theme.textIndent?.[s || "DEFAULT"] || handler.bracket.cssvar.fraction.auto.rem(s);
-    if (v != null)
-      return { "text-indent": v };
-  }]
+  [/^indent(?:-(.+))?$/, ([, s], { theme }) => ({ "text-indent": theme.textIndent?.[s || "DEFAULT"] || handler.bracket.cssvar.fraction.auto.rem(s) })]
 ];
 const textStrokes = [
-  [/^text-stroke(?:-(.+))?$/, ([, s], { theme }) => {
-    const v = theme.textStrokeWidth?.[s || "DEFAULT"] || 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(?:-(.+))?$/, ([, s], { theme }) => ({ "-webkit-text-stroke-width": theme.textStrokeWidth?.[s || "DEFAULT"] || handler.bracket.cssvar.px(s) })],
+  [/^text-stroke-(.+)$/, colorResolver("-webkit-text-stroke-color", "text-stroke")],
   [/^text-stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-text-stroke-opacity": handler.bracket.percent(opacity) })]
 ];
 const textShadows = [
-  [/^text-shadow(?:-(.+))?$/, ([, s], { theme }) => {
-    const v = theme.textShadow?.[s || "DEFAULT"] || handler.bracket.cssvar(s);
-    if (v != null)
-      return { "text-shadow": v };
-  }]
+  [/^text-shadow(?:-(.+))?$/, ([, s], { theme }) => ({ "text-shadow": theme.textShadow?.[s || "DEFAULT"] || handler.bracket.cssvar(s) })]
 ];
 
+const directions = {
+  "": "",
+  "x-": "column-",
+  "y-": "row-"
+};
 const gaps = [
   [/^(?:flex-|grid-)?gap-(x-|y-)?([^-]+)$/, ([, d = "", s]) => {
     const v = handler.bracket.auto.rem(s);
     if (v != null) {
-      const direction = {
-        "": "",
-        "x-": "column-",
-        "y-": "row-"
-      }[d];
       return {
-        [`grid-${direction}gap`]: v,
-        [`${direction}gap`]: v
+        [`grid-${directions[d]}gap`]: v,
+        [`${directions[d]}gap`]: v
       };
     }
   }]
@@ -517,25 +477,20 @@ 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)"
       };
     }
   }],
   ["ring-offset", { "--un-ring-offset-width": "1px" }],
-  [/^ring-offset-(.+)$/, ([, d]) => {
-    const value = handler.px(d || "1");
-    if (value)
-      return { "--un-ring-offset-width": value };
-  }],
-  [/^ring-(.+)$/, colorResolver$1("--un-ring-color", "ring")],
+  [/^ring-offset-(.+)$/, ([, d]) => ({ "--un-ring-offset-width": handler.px(d || "1") })],
+  [/^ring-(.+)$/, colorResolver("--un-ring-color", "ring")],
   [/^ring-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-ring-opacity": handler.bracket.percent(opacity) })],
-  [/^ring-offset-(.+)$/, colorResolver$1("--un-ring-offset-color", "ring-offset")],
+  [/^ring-offset-(.+)$/, colorResolver("--un-ring-offset-color", "ring-offset")],
   [/^ring-offset-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-ring-offset-opacity": handler.bracket.percent(opacity) })],
   ["ring-inset", { "--un-ring-inset": "inset" }]
 ];
 
-const colorResolver = (body, theme) => {
+const shadowColorResolver = (body, theme) => {
   const data = parseColor(body, theme);
   if (!data)
     return;
@@ -557,13 +512,15 @@ const boxShadows = [
     const value = theme.boxShadow?.[d || "DEFAULT"];
     if (value) {
       return {
+        "--un-shadow-inset": varEmpty,
         "--un-shadow-color": "0,0,0",
         "--un-shadow": value,
         "box-shadow": "var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)"
       };
     }
   }],
-  [/^shadow-(.+)$/, ([, d], { theme }) => colorResolver(d, theme)]
+  [/^shadow-(.+)$/, ([, d], { theme }) => shadowColorResolver(d, theme)],
+  ["shadow-inset", { "--un-shadow-inset": "inset" }]
 ];
 
 function getPropName(minmax, hw) {
@@ -589,11 +546,7 @@ const sizes = [
 ];
 const aspectRatio = [
   ["aspect-ratio-auto", { "aspect-ratio": "auto" }],
-  [/^aspect-ratio-(.+)$/, ([, d]) => {
-    const v = (/^\d+\/\d+$/.test(d) ? d : null) || handler.bracket.cssvar.number(d);
-    if (v != null)
-      return { "aspect-ratio": v };
-  }]
+  [/^aspect-ratio-(.+)$/, ([, d]) => ({ "aspect-ratio": (/^\d+\/\d+$/.test(d) ? d : null) || handler.bracket.cssvar.number(d) })]
 ];
 
 const paddings = [
@@ -656,9 +609,7 @@ function handleTranslate([, d, b]) {
   if (v != null) {
     return [
       transformBase,
-      [
-        ...xyzMap[d].map((i) => [`--un-translate${i}`, v])
-      ]
+      xyzMap[d].map((i) => [`--un-translate${i}`, v])
     ];
   }
 }
@@ -667,9 +618,7 @@ function handleScale([, d, b]) {
   if (v != null) {
     return [
       transformBase,
-      [
-        ...xyzMap[d].map((i) => [`--un-scale${i}`, v])
-      ]
+      xyzMap[d].map((i) => [`--un-scale${i}`, v])
     ];
   }
 }
@@ -717,17 +666,12 @@ 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",
-  "bg": "background-color",
   "bg-opacity": "background-opacity",
   "tab": "tab-size",
   "underline": "text-decoration-thickness",
   "underline-offset": "text-underline-offset",
-  "text": "color",
   "grid-cols": "grid-template-columns",
   "grid-rows": "grid-template-rows",
   "auto-flow": "grid-auto-flow",
@@ -742,15 +686,8 @@ const variablesAbbrMap = {
 const cssVariables = [
   [/^(.+)-\$(.+)$/, ([, name, varname]) => {
     const prop = variablesAbbrMap[name];
-    if (prop) {
-      return {
-        [prop]: `var(--${varname})`
-      };
-    }
-  }],
-  [/^(?:border|b)-([^-]+)-\$(.+)$/, ([, a, v]) => {
-    if (a in directionMap)
-      return directionMap[a].map((i) => [`border${i}-color`, `var(--${v})`]);
+    if (prop)
+      return { [prop]: `var(--${varname})` };
   }]
 ];
 
@@ -773,7 +710,7 @@ const textDecorations = [
   [/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s]) => ({ "text-decoration-thickness": handler.bracket.px(s) })],
   [/^(?:underline|decoration)-(auto|from-font)$/, ([, s]) => ({ "text-decoration-thickness": s })],
   [/^(?:underline|decoration)-(.+)$/, (match, ctx) => {
-    const result = colorResolver$1("text-decoration-color", "line")(match, ctx);
+    const result = colorResolver("text-decoration-color", "line")(match, ctx);
     if (result) {
       return {
         "-webkit-text-decoration-color": result["text-decoration-color"],
@@ -789,15 +726,11 @@ const textDecorations = [
 ];
 
 const svgUtilities = [
-  [/^fill-(.+)$/, colorResolver$1("fill", "fill")],
+  [/^fill-(.+)$/, colorResolver("fill", "fill")],
   [/^fill-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-fill-opacity": handler.bracket.percent(opacity) })],
   ["fill-none", { fill: "none" }],
-  [/^stroke-(?:size-|width-)?(.+)$/, ([, s]) => {
-    const v = handler.bracket.fraction.px.number(s);
-    if (v)
-      return { "stroke-width": v };
-  }],
-  [/^stroke-(.+)$/, colorResolver$1("stroke", "stroke")],
+  [/^stroke-(?:size-|width-)?(.+)$/, ([, s]) => ({ "stroke-width": handler.bracket.fraction.px.number(s) })],
+  [/^stroke-(.+)$/, colorResolver("stroke", "stroke")],
   [/^stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-stroke-opacity": handler.bracket.percent(opacity) })],
   ["stroke-none", { stroke: "none" }]
 ];

package/dist/chunks/default3.cjs

@@ -48,40 +48,20 @@ const variantCombinators = [
 
 const variantColorsMediaOrClass = [
   (v, { options: { dark } }) => {
-    if (dark === "class") {
-      const match = variants$1.variantMatcher("dark", (input) => `.dark $$ ${input}`)(v);
-      if (match)
-        return match;
-    }
+    if (dark === "class")
+      return variants$1.variantMatcher("dark", (input) => `.dark $$ ${input}`)(v);
   },
   (v, { options: { dark } }) => {
-    if (dark === "class") {
-      const match = variants$1.variantMatcher("light", (input) => `.light $$ ${input}`)(v);
-      if (match)
-        return match;
-    }
+    if (dark === "class")
+      return variants$1.variantMatcher("light", (input) => `.light $$ ${input}`)(v);
   },
   (v, { options: { dark } }) => {
-    if (dark === "media") {
-      const match = variants$1.variantMatcher("dark")(v);
-      if (match) {
-        return {
-          ...match,
-          parent: "@media (prefers-color-scheme: dark)"
-        };
-      }
-    }
+    if (dark === "media")
+      return variants$1.variantParentMatcher("dark", "@media (prefers-color-scheme: dark)")(v);
   },
   (v, { options: { dark } }) => {
-    if (dark === "media") {
-      const match = variants$1.variantMatcher("light")(v);
-      if (match) {
-        return {
-          ...match,
-          parent: "@media (prefers-color-scheme: light)"
-        };
-      }
-    }
+    if (dark === "media")
+      return variants$1.variantParentMatcher("light", "@media (prefers-color-scheme: light)")(v);
   }
 ];
 
@@ -129,15 +109,7 @@ const variantSpace = (matcher) => {
   }
 };
 
-const variantPrint = (v) => {
-  const print = variants$1.variantMatcher("print")(v);
-  if (print) {
-    return {
-      ...print,
-      parent: "@media print"
-    };
-  }
-};
+const variantPrint = variants$1.variantParentMatcher("print", "@media print");
 
 const variants = [
   variantSpace,

package/dist/chunks/default3.mjs

@@ -1,4 +1,4 @@
-import { v as variantMatcher } from './variants.mjs';
+import { v as variantMatcher, a as variantParentMatcher } from './variants.mjs';
 import { v as variantPseudoClasses, a as variantPseudoClassFunctions, b as variantTaggedPseudoClasses, c as variantPseudoElements, p as partClasses } from './pseudo.mjs';
 
 const regexCache = {};
@@ -46,40 +46,20 @@ const variantCombinators = [
 
 const variantColorsMediaOrClass = [
   (v, { options: { dark } }) => {
-    if (dark === "class") {
-      const match = variantMatcher("dark", (input) => `.dark $$ ${input}`)(v);
-      if (match)
-        return match;
-    }
+    if (dark === "class")
+      return variantMatcher("dark", (input) => `.dark $$ ${input}`)(v);
   },
   (v, { options: { dark } }) => {
-    if (dark === "class") {
-      const match = variantMatcher("light", (input) => `.light $$ ${input}`)(v);
-      if (match)
-        return match;
-    }
+    if (dark === "class")
+      return variantMatcher("light", (input) => `.light $$ ${input}`)(v);
   },
   (v, { options: { dark } }) => {
-    if (dark === "media") {
-      const match = variantMatcher("dark")(v);
-      if (match) {
-        return {
-          ...match,
-          parent: "@media (prefers-color-scheme: dark)"
-        };
-      }
-    }
+    if (dark === "media")
+      return variantParentMatcher("dark", "@media (prefers-color-scheme: dark)")(v);
   },
   (v, { options: { dark } }) => {
-    if (dark === "media") {
-      const match = variantMatcher("light")(v);
-      if (match) {
-        return {
-          ...match,
-          parent: "@media (prefers-color-scheme: light)"
-        };
-      }
-    }
+    if (dark === "media")
+      return variantParentMatcher("light", "@media (prefers-color-scheme: light)")(v);
   }
 ];
 
@@ -127,15 +107,7 @@ const variantSpace = (matcher) => {
   }
 };
 
-const variantPrint = (v) => {
-  const print = variantMatcher("print")(v);
-  if (print) {
-    return {
-      ...print,
-      parent: "@media print"
-    };
-  }
-};
+const variantPrint = variantParentMatcher("print", "@media print");
 
 const variants = [
   variantSpace,

package/dist/chunks/utilities.cjs

@@ -225,8 +225,10 @@ const parseColor = (body, theme) => {
   const bracketOrMain = bracket || main;
   if (bracketOrMain.startsWith("#"))
     color = bracketOrMain.slice(1);
-  if (bracketOrMain.startsWith("hex-"))
+  else if (bracketOrMain.startsWith("hex-"))
     color = bracketOrMain.slice(4);
+  else if (main.startsWith("$"))
+    color = handler.cssvar(main);
   color = color || bracket;
   let no = "DEFAULT";
   if (!color) {
@@ -271,7 +273,7 @@ const colorResolver = (property, varName) => ([, body], { theme }) => {
       };
     } else {
       return {
-        [`--un-${varName}-opacity`]: 1,
+        [`--un-${varName}-opacity`]: (opacity && handler.cssvar(opacity)) ?? 1,
         [property]: `rgba(${rgba.slice(0, 3).join(",")},var(--un-${varName}-opacity))`
       };
     }

package/dist/chunks/utilities.mjs

@@ -223,8 +223,10 @@ const parseColor = (body, theme) => {
   const bracketOrMain = bracket || main;
   if (bracketOrMain.startsWith("#"))
     color = bracketOrMain.slice(1);
-  if (bracketOrMain.startsWith("hex-"))
+  else if (bracketOrMain.startsWith("hex-"))
     color = bracketOrMain.slice(4);
+  else if (main.startsWith("$"))
+    color = handler.cssvar(main);
   color = color || bracket;
   let no = "DEFAULT";
   if (!color) {
@@ -269,7 +271,7 @@ const colorResolver = (property, varName) => ([, body], { theme }) => {
       };
     } else {
       return {
-        [`--un-${varName}-opacity`]: 1,
+        [`--un-${varName}-opacity`]: (opacity && handler.cssvar(opacity)) ?? 1,
         [property]: `rgba(${rgba.slice(0, 3).join(",")},var(--un-${varName}-opacity))`
       };
     }

package/dist/chunks/variants.cjs

@@ -1,16 +1,31 @@
 'use strict';
 
+const core = require('@unocss/core');
+
 const variantMatcher = (name, selector) => {
-  const re = new RegExp(`^(${name})[:-]`);
+  const re = new RegExp(`^${core.escapeRegExp(name)}[:-]`);
   return (input) => {
     const match = input.match(re);
     if (match) {
       return {
-        matcher: input.slice(match[1].length + 1),
+        matcher: input.slice(match[0].length),
         selector
       };
     }
   };
 };
+const variantParentMatcher = (name, parent) => {
+  const re = new RegExp(`^${core.escapeRegExp(name)}[:-]`);
+  return (input) => {
+    const match = input.match(re);
+    if (match) {
+      return {
+        matcher: input.slice(match[0].length),
+        parent
+      };
+    }
+  };
+};
 
 exports.variantMatcher = variantMatcher;
+exports.variantParentMatcher = variantParentMatcher;

package/dist/chunks/variants.mjs

@@ -1,14 +1,28 @@
+import { escapeRegExp } from '@unocss/core';
+
 const variantMatcher = (name, selector) => {
-  const re = new RegExp(`^(${name})[:-]`);
+  const re = new RegExp(`^${escapeRegExp(name)}[:-]`);
   return (input) => {
     const match = input.match(re);
     if (match) {
       return {
-        matcher: input.slice(match[1].length + 1),
+        matcher: input.slice(match[0].length),
         selector
       };
     }
   };
 };
+const variantParentMatcher = (name, parent) => {
+  const re = new RegExp(`^${escapeRegExp(name)}[:-]`);
+  return (input) => {
+    const match = input.match(re);
+    if (match) {
+      return {
+        matcher: input.slice(match[0].length),
+        parent
+      };
+    }
+  };
+};
 
-export { variantMatcher as v };
+export { variantParentMatcher as a, variantMatcher as v };

package/dist/utils.cjs

@@ -19,3 +19,4 @@ exports.parseColor = utilities.parseColor;
 exports.valueHandlers = utilities.valueHandlers;
 exports.xyzMap = utilities.xyzMap;
 exports.variantMatcher = variants.variantMatcher;
+exports.variantParentMatcher = variants.variantParentMatcher;

package/dist/utils.d.ts

@@ -52,6 +52,7 @@ declare const handler: _unocss_core.ValueHandler<"number" | "auto" | "numberWith
 declare const h: _unocss_core.ValueHandler<"number" | "auto" | "numberWithUnit" | "rem" | "px" | "percent" | "fraction" | "bracket" | "cssvar" | "time" | "global" | "properties">;
 
 declare const variantMatcher: (name: string, selector?: ((input: string) => string | undefined) | undefined) => (input: string) => VariantHandler | undefined;
+declare const variantParentMatcher: (name: string, parent: string) => (input: string) => VariantHandler | undefined;
 
 declare function capitalize<T extends string>(str: T): Capitalize<T>;
 /**
@@ -105,4 +106,4 @@ declare const parseColor: (body: string, theme: Theme) => ParsedColorValue | und
  */
 declare const colorResolver: (property: string, varName: string) => DynamicMatcher;
 
-export { capitalize, colorResolver, cornerMap, directionMap, directionSize, h, handler, parseColor, handlers as valueHandlers, variantMatcher, xyzMap };
+export { capitalize, colorResolver, cornerMap, directionMap, directionSize, h, handler, parseColor, handlers as valueHandlers, variantMatcher, variantParentMatcher, xyzMap };

package/dist/utils.mjs

@@ -1,3 +1,3 @@
 export { b as capitalize, c as colorResolver, a as cornerMap, d as directionMap, e as directionSize, f as h, h as handler, p as parseColor, v as valueHandlers, x as xyzMap } from './chunks/utilities.mjs';
-export { v as variantMatcher } from './chunks/variants.mjs';
+export { v as variantMatcher, a as variantParentMatcher } from './chunks/variants.mjs';
 import '@unocss/core';

package/dist/variants.d.ts

@@ -1,3 +1,4 @@
+import * as _unocss_core from '@unocss/core';
 import { Variant, VariantFunction, VariantObject } from '@unocss/core';
 import { T as Theme } from './types-a2d2b52f';
 
@@ -13,7 +14,7 @@ declare const variantImportant: Variant;
 declare const variantNegative: Variant;
 declare const variantSpace: Variant;
 
-declare const variantPrint: VariantFunction;
+declare const variantPrint: (input: string) => _unocss_core.VariantHandler | undefined;
 
 declare const CONTROL_BYPASS_PSEUDO_CLASS = "$$no-pseudo";
 declare const variantPseudoElements: VariantFunction;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-mini",
-  "version": "0.20.0",
+  "version": "0.20.1",
   "description": "The minimal preset for UnoCSS",
   "keywords": [
     "unocss",
@@ -61,7 +61,7 @@
     "*.css"
   ],
   "dependencies": {
-    "@unocss/core": "0.20.0"
+    "@unocss/core": "0.20.1"
   },
   "scripts": {
     "build": "unbuild",