@unocss/preset-mini 0.22.2 → 0.22.6

package/dist/chunks/default2.mjs

@@ -17,9 +17,9 @@ const textAligns = [
 ];
 
 const outline = [
-  [/^outline-(?:width-|size-)?(.+)$/, ([, d]) => ({ "outline-width": handler.bracket.fraction.auto.rem(d) })],
+  [/^outline-(?:width-|size-)?(.+)$/, ([, d]) => ({ "outline-width": handler.bracket.cssvar.px(d) })],
   [/^outline-(?:color-)?(.+)$/, colorResolver("outline-color", "outline-color")],
-  [/^outline-offset-(.+)$/, ([, d]) => ({ "outline-offset": handler.bracket.fraction.auto.rem(d) })],
+  [/^outline-offset-(.+)$/, ([, d]) => ({ "outline-offset": handler.bracket.cssvar.px(d) })],
   ["outline", { "outline-style": "solid" }],
   [/^outline-(auto|dashed|dotted|double|hidden|solid|groove|ridge|inset|outset|inherit|initial|revert|unset)$/, ([, c]) => ({ "outline-style": c })],
   ["outline-none", { "outline": "2px solid transparent", "outline-offset": "2px" }]
@@ -118,7 +118,7 @@ function handlerBorder(m) {
   }
 }
 function handlerBorderSize([, a = "", b = "1"]) {
-  const v = handler.bracket.px(b);
+  const v = handler.bracket.cssvar.px(b);
   if (a in directionMap && v != null)
     return directionMap[a].map((i) => [`border${i}-width`, v]);
 }
@@ -133,7 +133,7 @@ function handlerBorderOpacity([, a = "", opacity]) {
     return directionMap[a].map((i) => [`--un-border${i}-opacity`, v]);
 }
 function handlerRounded([, a = "", s = "DEFAULT"], { theme }) {
-  const v = theme.borderRadius?.[s] || handler.auto.rem.fraction.bracket.cssvar(s);
+  const v = theme.borderRadius?.[s] || handler.bracket.cssvar.fraction.rem(s);
   if (a in cornerMap && v != null)
     return cornerMap[a].map((i) => [`border${i}-radius`, v]);
 }
@@ -143,7 +143,7 @@ const opacity = [
 ];
 const textColors = [
   [/^(?:text|color|c)-(.+)$/, colorResolver("color", "text")],
-  [/^(?:text|color|c)-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-text-opacity": handler.bracket.percent.cssvar(opacity2) })]
+  [/^(?:text|color|c)-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-text-opacity": handler.bracket.percent(opacity2) })]
 ];
 const bgColors = [
   [/^bg-(.+)$/, colorResolver("background-color", "bg")],
@@ -166,19 +166,14 @@ const transitions = [
     if (p) {
       return {
         "transition-property": p,
-        "transition-timing-function": "cubic-bezier(0.4,0,0.2,1)",
+        "transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)",
         "transition-duration": `${duration}ms`
       };
     }
   }],
-  [/^(?:transition-)?delay-(.+)(?:s|ms)?$/, ([, d]) => ({ "transition-delay": handler.bracket.time(d) })],
-  [/^(?:transition-)?duration-(.+)(?:s|ms)?$/, ([, d]) => ({ "transition-duration": handler.bracket.time(d) })],
-  [/^ease-(.+)$/, ([, d]) => ({ "transition-timing-function": handler.bracket(d) })],
-  ["ease", { "transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)" }],
-  ["ease-linear", { "transition-timing-function": "linear" }],
-  ["ease-in", { "transition-timing-function": "cubic-bezier(0.4, 0, 1, 1)" }],
-  ["ease-out", { "transition-timing-function": "cubic-bezier(0, 0, 0.2, 1)" }],
-  ["ease-in-out", { "transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)" }],
+  [/^(?:transition-)?duration-(.+)$/, ([, d]) => ({ "transition-duration": handler.bracket.cssvar.time(d) })],
+  [/^(?:transition-)?delay-(.+)$/, ([, d]) => ({ "transition-delay": handler.bracket.cssvar.time(d) })],
+  [/^(?:transition-)?ease(?:-(.+))?$/, ([, d], { theme }) => ({ "transition-timing-function": theme.easing?.[d || "DEFAULT"] ?? handler.bracket.cssvar(d) })],
   [/^(?:transition-)?property-(.+)$/, ([, v]) => ({ "transition-property": handler.global(v) || transitionProperty(v) })],
   ["transition-property-none", { "transition-property": "none" }],
   ["property-none", { "transition-property": "none" }],
@@ -198,7 +193,7 @@ const flex = [
   [/^(?:flex-)?shrink-0$/, () => ({ "flex-shrink": 0 })],
   [/^(?:flex-)?grow$/, () => ({ "flex-grow": 1 })],
   [/^(?:flex-)?grow-0$/, () => ({ "flex-grow": 0 })],
-  [/^(?:flex-)?basis-(.+)$/, ([, d]) => ({ "flex-basis": handler.bracket.fraction.auto.rem(d) })],
+  [/^(?:flex-)?basis-(.+)$/, ([, d]) => ({ "flex-basis": handler.bracket.cssvar.auto.fraction.rem(d) })],
   ["flex-row", { "flex-direction": "row" }],
   ["flex-row-reverse", { "flex-direction": "row-reverse" }],
   ["flex-col", { "flex-direction": "column" }],
@@ -225,7 +220,7 @@ const appearances = [
   ["backface-hidden", { "backface-visibility": "hidden" }]
 ];
 const cursors = [
-  [/^cursor-(.+)$/, ([, c]) => ({ cursor: c })]
+  [/^cursor-(.+)$/, ([, c]) => ({ cursor: handler.bracket.cssvar(c) || c })]
 ];
 const pointerEvents = [
   ["pointer-events-auto", { "pointer-events": "auto" }],
@@ -315,7 +310,7 @@ const boxShadows = [
     }
   }],
   [/^shadow-(.+)$/, colorResolver("--un-shadow-color", "shadow")],
-  [/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": handler.bracket.percent.cssvar(opacity) })],
+  [/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": handler.bracket.percent(opacity) })],
   ["shadow-inset", { "--un-shadow-inset": "inset" }]
 ];
 
@@ -341,17 +336,17 @@ const fonts = [
         "line-height": height
       };
     }
-    return { "font-size": handler.bracket.auto.rem(s) };
+    return { "font-size": handler.bracket.rem(s) };
   }],
-  [/^text-size-(.+)$/, ([, s]) => ({ "font-size": handler.bracket.auto.rem(s) })],
+  [/^text-size-(.+)$/, ([, s]) => ({ "font-size": handler.bracket.cssvar.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) })]
+  [/^(?:leading|lh)-(.+)$/, ([, s], { theme }) => ({ "line-height": theme.lineHeight?.[s] || handler.bracket.cssvar.rem(s) })],
+  [/^tracking-(.+)$/, ([, s], { theme }) => ({ "letter-spacing": theme.letterSpacing?.[s] || handler.bracket.cssvar.rem(s) })],
+  [/^word-spacing-(.+)$/, ([, s], { theme }) => ({ "word-spacing": theme.wordSpacing?.[s] || handler.bracket.cssvar.rem(s) })]
 ];
 const tabSizes = [
-  [/^tab(?:-([^-]+))?$/, ([, s]) => {
-    const v = handler.bracket.global.number(s || "4");
+  [/^tab(?:-(.+))?$/, ([, s]) => {
+    const v = handler.bracket.cssvar.global.number(s || "4");
     if (v != null) {
       return {
         "-moz-tab-size": v,
@@ -362,7 +357,7 @@ const tabSizes = [
   }]
 ];
 const textIndents = [
-  [/^indent(?:-(.+))?$/, ([, s], { theme }) => ({ "text-indent": theme.textIndent?.[s || "DEFAULT"] || handler.bracket.cssvar.fraction.auto.rem(s) })]
+  [/^indent(?:-(.+))?$/, ([, s], { theme }) => ({ "text-indent": theme.textIndent?.[s || "DEFAULT"] || handler.bracket.cssvar.fraction.rem(s) })]
 ];
 const textStrokes = [
   [/^text-stroke(?:-(.+))?$/, ([, s], { theme }) => ({ "-webkit-text-stroke-width": theme.textStrokeWidth?.[s || "DEFAULT"] || handler.bracket.cssvar.px(s) })],
@@ -390,7 +385,7 @@ const directions = {
   "y": "row-"
 };
 const handleGap = ([, d = "", s]) => {
-  const v = handler.bracket.auto.rem(s);
+  const v = handler.bracket.cssvar.rem(s);
   if (v != null) {
     return {
       [`grid-${directions[d]}gap`]: v,
@@ -416,12 +411,12 @@ const autoDirection = (selector, theme) => {
     case "fr":
       return "minmax(0,1fr)";
   }
-  return handler.bracket.auto.rem(selector);
+  return handler.bracket.cssvar.auto.rem(selector);
 };
 const grids = [
   ["grid", { display: "grid" }],
   ["inline-grid", { display: "inline-grid" }],
-  [/^(?:grid-)?(row|col)-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}`]: handler.bracket.auto(v) })],
+  [/^(?:grid-)?(row|col)-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}`]: handler.bracket.cssvar.auto(v) })],
   [/^(?:grid-)?(row|col)-span-(.+)$/, ([, c, s]) => {
     if (s === "full")
       return { [`grid-${rowCol(c)}`]: "1/-1" };
@@ -429,11 +424,12 @@ const grids = [
     if (v != null)
       return { [`grid-${rowCol(c)}`]: `span ${v}/span ${v}` };
   }],
-  [/^(?:grid-)?(row|col)-start-([\w.-]+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-start`]: v })],
-  [/^(?:grid-)?(row|col)-end-([\w.-]+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-end`]: v })],
-  [/^(?:grid-)?auto-(rows|cols)-([\w.-]+)$/, ([, c, v], { theme }) => ({ [`grid-auto-${rowCol(c)}`]: autoDirection(v, theme) })],
+  [/^(?:grid-)?(row|col)-start-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-start`]: handler.bracket.cssvar(v) ?? v })],
+  [/^(?:grid-)?(row|col)-end-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-end`]: handler.bracket.cssvar(v) ?? v })],
+  [/^(?:grid-)?auto-(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({ [`grid-auto-${rowCol(c)}`]: autoDirection(v, theme) })],
+  [/^(?:grid-auto-flow|auto-flow|grid-flow)-(.+)$/, ([, v]) => ({ "grid-auto-flow": handler.bracket.cssvar(v) })],
   [/^(?:grid-auto-flow|auto-flow|grid-flow)-((?:row|col)(?:-dense)?)$/, ([, v]) => ({ "grid-auto-flow": rowCol(v).replace("-", " ") })],
-  [/^grid-(rows|cols)-(\[.+\])$/, ([, c, v]) => ({ [`grid-template-${rowCol(c)}`]: handler.bracket(v) })],
+  [/^grid-(rows|cols)-(.+)$/, ([, c, v]) => ({ [`grid-template-${rowCol(c)}`]: handler.bracket.cssvar(v) })],
   [/^grid-(rows|cols)-minmax-([\w.-]+)$/, ([, c, d]) => ({ [`grid-template-${rowCol(c)}`]: `repeat(auto-fill,minmax(${d},1fr))` })],
   [/^grid-(rows|cols)-(\d+)$/, ([, c, d]) => ({ [`grid-template-${rowCol(c)}`]: `repeat(${d},minmax(0,1fr))` })],
   ["grid-rows-none", { "grid-template-rows": "none" }],
@@ -474,7 +470,7 @@ const justifies = [
   ["justify-self-stretch", { "justify-self": "stretch" }]
 ];
 const orders = [
-  [/^order-(.+)$/, ([, v]) => ({ order: handler.bracket.number(v) })],
+  [/^order-(.+)$/, ([, v]) => ({ order: handler.bracket.cssvar.number(v) })],
   ["order-first", { order: "-9999" }],
   ["order-last", { order: "9999" }],
   ["order-none", { order: "0" }]
@@ -517,7 +513,7 @@ const placements = [
   ["place-self-stretch", { "place-self": "stretch" }]
 ];
 function handleInsetValue(v) {
-  return handler.bracket.fraction.cssvar.auto.rem(v);
+  return handler.bracket.cssvar.auto.fraction.rem(v);
 }
 function handleInsetValues([, d, v]) {
   const r = handleInsetValue(v);
@@ -542,8 +538,8 @@ const floats = [
   ["clear-none", { clear: "none" }]
 ];
 const zIndexes = [
-  ["z-auto", { "z-index": "auto" }],
-  [/^z-([^-]+)$/, ([, v]) => ({ "z-index": handler.number(v) })]
+  [/^z-(.+)$/, ([, v]) => ({ "z-index": handler.bracket.cssvar.number(v) })],
+  ["z-auto", { "z-index": "auto" }]
 ];
 const boxSizing = [
   ["box-border", { "box-sizing": "border-box" }],
@@ -551,11 +547,12 @@ const boxSizing = [
 ];
 
 const ringBase = {
+  ...shadowBase,
   "--un-ring-inset": varEmpty,
   "--un-ring-offset-width": "0px",
   "--un-ring-offset-color": "#fff",
-  "--un-ring-color": "rgba(147,197,253,0.5)",
-  ...shadowBase
+  "--un-ring-width": "0px",
+  "--un-ring-color": "rgba(147,197,253,0.5)"
 };
 const rings = [
   [/^ring(?:-(.+))?$/, ([, d]) => {
@@ -564,15 +561,17 @@ const rings = [
       return [
         ringBase,
         {
+          "--un-ring-width": value,
           "--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)`,
+          "--un-ring-shadow": "var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color)",
           "box-shadow": "var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow, 0 0 #0000)"
         }
       ];
     }
   }],
+  [/^ring-(?:width-|size-)(.+)$/, ([, d]) => ({ "--un-ring-width": handler.bracket.cssvar.px(d) })],
   ["ring-offset", { "--un-ring-offset-width": "1px" }],
-  [/^ring-offset-(.+)$/, ([, d]) => ({ "--un-ring-offset-width": handler.px(d || "1") })],
+  [/^ring-offset-(?:width-|size-)?(.+)$/, ([, d]) => ({ "--un-ring-offset-width": handler.bracket.cssvar.px(d) })],
   [/^ring-(.+)$/, colorResolver("--un-ring-color", "ring")],
   [/^ring-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-ring-opacity": handler.bracket.percent(opacity) })],
   [/^ring-offset-(.+)$/, colorResolver("--un-ring-offset-color", "ring-offset")],
@@ -600,7 +599,7 @@ function getSizeValue(minmax, hw, theme, prop) {
     case "min":
       return `${prop}-content`;
   }
-  return handler.bracket.cssvar.fraction.auto.rem(prop);
+  return handler.bracket.cssvar.auto.fraction.rem(prop);
 }
 const sizes = [
   [/^(min-|max-)?([wh])-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, theme, s) })],
@@ -626,14 +625,14 @@ const paddings = [
   [/^pa?()-?(-?.+)$/, directionSize("padding")],
   [/^p-?([xy])-?(-?.+)$/, directionSize("padding")],
   [/^p-?([rltbse])-?(-?.+)$/, directionSize("padding")],
-  [/^p-(inline|block)-(-?.+)$/, directionSize("padding")],
+  [/^p-(block|inline)-(-?.+)$/, directionSize("padding")],
   [/^p-?([bi][se])-?(-?.+)$/, directionSize("padding")]
 ];
 const margins = [
   [/^ma?()-?(-?.+)$/, directionSize("margin")],
   [/^m-?([xy])-?(-?.+)$/, directionSize("margin")],
   [/^m-?([rltbse])-?(-?.+)$/, directionSize("margin")],
-  [/^m-(inline|block)-(-?.+)$/, directionSize("margin")],
+  [/^m-(block|inline)-(-?.+)$/, directionSize("margin")],
   [/^m-?([bi][se])-?(-?.+)$/, directionSize("margin")]
 ];
 
@@ -684,9 +683,9 @@ const transformBase = {
   [CONTROL_SHORTCUT_NO_MERGE]: ""
 };
 const transforms = [
-  [/^origin-([-\w]{3,})$/, ([, s]) => ({ "transform-origin": positionMap[s] })],
-  [/^perspect-(.+)$/, ([, s]) => {
-    const v = handler.px.numberWithUnit(s);
+  [/^(?:transform-)?origin-(.+)$/, ([, s]) => ({ "transform-origin": positionMap[s] ?? handler.bracket.cssvar(s) })],
+  [/^(?:transform-)?perspect(?:ive)?-(.+)$/, ([, s]) => {
+    const v = handler.bracket.cssvar.px.numberWithUnit(s);
     if (v != null) {
       return {
         "-webkit-perspective": v,
@@ -694,8 +693,8 @@ const transforms = [
       };
     }
   }],
-  [/^perspect-origin-(.+)$/, ([, s]) => {
-    const v = handler.bracket(s) ?? (s.length >= 3 ? positionMap[s] : void 0);
+  [/^(?:transform-)?perspect(?:ive)?-origin-(.+)$/, ([, s]) => {
+    const v = handler.bracket.cssvar(s) ?? (s.length >= 3 ? positionMap[s] : void 0);
     if (v != null) {
       return {
         "-webkit-perspective-origin": v,
@@ -703,16 +702,15 @@ const transforms = [
       };
     }
   }],
-  [/^translate-()(.+)$/, handleTranslate],
-  [/^translate-([xyz])-(.+)$/, handleTranslate],
-  [/^rotate-()(.+)$/, handleRotate],
-  [/^rotate(-[xyz])-(.+)$/, handleRotate],
-  [/^skew-()(.+)$/, handleSkew],
-  [/^skew-([xy])-(.+)$/, handleSkew],
-  [/^scale-()(.+)$/, handleScale],
-  [/^scale-([xyz])-(.+)$/, handleScale],
-  ["preserve-3d", { "transform-style": "preserve-3d" }],
-  ["preserve-flat", { "transform-style": "flat" }],
+  [/^(?:transform-)?translate-()(.+)$/, handleTranslate],
+  [/^(?:transform-)?translate-([xyz])-(.+)$/, handleTranslate],
+  [/^(?:transform-)?rotate-()(.+)$/, handleRotate],
+  [/^(?:transform-)?rotate-([xyz])-(.+)$/, handleRotate],
+  [/^(?:transform-)?skew-([xy])-(.+)$/, handleSkew],
+  [/^(?:transform-)?scale-()(.+)$/, handleScale],
+  [/^(?:transform-)?scale-([xyz])-(.+)$/, handleScale],
+  [/^(?:transform-)?preserve-3d$/, () => ({ "transform-style": "preserve-3d" })],
+  [/^(?:transform-)?preserve-flat$/, () => ({ "transform-style": "flat" })],
   [/^transform$/, () => [
     transformBase,
     { transform: "var(--un-transform)" }
@@ -722,7 +720,7 @@ const transforms = [
   ["transform-none", { transform: "none" }]
 ];
 function handleTranslate([, d, b]) {
-  const v = handler.bracket.fraction.auto.rem(b);
+  const v = handler.bracket.cssvar.fraction.rem(b);
   if (v != null) {
     return [
       transformBase,
@@ -734,7 +732,7 @@ function handleTranslate([, d, b]) {
   }
 }
 function handleScale([, d, b]) {
-  const v = handler.bracket.fraction.percent(b);
+  const v = handler.bracket.cssvar.fraction.percent(b);
   if (v != null) {
     return [
       transformBase,
@@ -745,20 +743,34 @@ function handleScale([, d, b]) {
     ];
   }
 }
-function handleRotate([, d, b]) {
-  const v = handler.bracket.degree(b);
+function handleRotate([, d = "", b]) {
+  const v = handler.bracket.cssvar.degree(b);
   if (v != null) {
-    return [
-      transformBase,
-      {
-        [`--un-rotate${d || ""}`]: v,
-        transform: "var(--un-transform)"
-      }
-    ];
+    if (d) {
+      return [
+        transformBase,
+        {
+          "--un-rotate": 0,
+          [`--un-rotate-${d}`]: v,
+          "transform": "var(--un-transform)"
+        }
+      ];
+    } else {
+      return [
+        transformBase,
+        {
+          "--un-rotate-x": 0,
+          "--un-rotate-y": 0,
+          "--un-rotate-z": 0,
+          "--un-rotate": v,
+          "transform": "var(--un-transform)"
+        }
+      ];
+    }
   }
 }
 function handleSkew([, d, b]) {
-  const v = handler.bracket.degree(b);
+  const v = handler.bracket.cssvar.degree(b);
   if (v != null) {
     return [
       transformBase,
@@ -771,38 +783,30 @@ function handleSkew([, d, b]) {
 }
 
 const variablesAbbrMap = {
-  "visible": "visibility",
-  "select": "user-select",
-  "vertical": "vertical-align",
-  "backface": "backface-visibility",
-  "whitespace": "white-space",
-  "break": "word-break",
-  "case": "text-transform",
-  "origin": "transform-origin",
-  "bg-opacity": "background-opacity",
-  "tab": "tab-size",
-  "underline": "text-decoration-thickness",
-  "underline-offset": "text-underline-offset",
-  "grid-cols": "grid-template-columns",
-  "grid-rows": "grid-template-rows",
-  "auto-flow": "grid-auto-flow",
-  "row-start": "grid-row-start",
-  "row-end": "grid-row-end",
-  "justify": "justify-content",
-  "content": "align-content",
-  "items": "align-items",
-  "self": "align-self",
-  "object": "object-fit"
+  backface: "backface-visibility",
+  break: "word-break",
+  case: "text-transform",
+  content: "align-content",
+  flex: "flex",
+  fw: "font-weight",
+  items: "align-items",
+  justify: "justify-content",
+  select: "user-select",
+  self: "align-self",
+  vertical: "vertical-align",
+  visible: "visibility",
+  whitespace: "white-space",
+  ws: "white-space"
 };
 const cssVariables = [
-  [/^(.+)-\$(.+)$/, ([, name, varname]) => {
+  [/^(.+?)-(\$.+)$/, ([, name, varname]) => {
     const prop = variablesAbbrMap[name];
     if (prop)
-      return { [prop]: `var(--${varname})` };
+      return { [prop]: handler.cssvar(varname) };
   }]
 ];
 const cssProperty = [
-  [/^\[(.+):(.+)\]$/, ([, prop, value]) => ({ [prop]: handler.bracket(`[${value}]`) })]
+  [/^\[([^:]+):(.+)\]$/, ([, prop, value]) => ({ [prop]: handler.bracket(`[${value}]`) })]
 ];
 
 const questionMark = [
@@ -822,7 +826,7 @@ const textDecorations = [
   ["line-through", { "text-decoration-line": "line-through" }],
   ["decoration-underline", { "text-decoration-line": "underline" }],
   ["decoration-line-through", { "text-decoration-line": "line-through" }],
-  [/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s]) => ({ "text-decoration-thickness": handler.bracket.px(s) })],
+  [/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s]) => ({ "text-decoration-thickness": handler.bracket.cssvar.px(s) })],
   [/^(?:underline|decoration)-(auto|from-font)$/, ([, s]) => ({ "text-decoration-thickness": s })],
   [/^(?:underline|decoration)-(.+)$/, (match, ctx) => {
     const result = colorResolver("text-decoration-color", "line")(match, ctx);
@@ -834,7 +838,7 @@ const textDecorations = [
     }
   }],
   [/^(?:underline|decoration)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-line-opacity": handler.bracket.percent(opacity) })],
-  [/^underline-offset-(.+)$/, ([, s]) => ({ "text-underline-offset": handler.auto.bracket.px(s) })],
+  [/^(?:underline|decoration)-offset-(.+)$/, ([, s]) => ({ "text-underline-offset": handler.auto.bracket.cssvar.px(s) })],
   [/^(?:underline|decoration)-(solid|double|dotted|dashed|wavy|inherit|initial|revert|unset)$/, ([, d]) => ({ "text-decoration-style": d })],
   ["no-underline", { "text-decoration": "none" }],
   ["decoration-none", { "text-decoration": "none" }]
@@ -844,9 +848,9 @@ const svgUtilities = [
   [/^fill-(.+)$/, colorResolver("fill", "fill")],
   [/^fill-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-fill-opacity": handler.bracket.percent(opacity) })],
   ["fill-none", { fill: "none" }],
-  [/^stroke-(?:width-|size-)?(.+)$/, ([, s]) => ({ "stroke-width": handler.bracket.fraction.px.number(s) })],
-  [/^stroke-dash-(.+)$/, ([, s]) => ({ "stroke-dasharray": handler.bracket.number(s) })],
-  [/^stroke-offset-(.+)$/, ([, s]) => ({ "stroke-dashoffset": handler.bracket.px.numberWithUnit(s) })],
+  [/^stroke-(?:width-|size-)?(.+)$/, ([, s]) => ({ "stroke-width": handler.bracket.cssvar.fraction.px.number(s) })],
+  [/^stroke-dash-(.+)$/, ([, s]) => ({ "stroke-dasharray": handler.bracket.cssvar.number(s) })],
+  [/^stroke-offset-(.+)$/, ([, s]) => ({ "stroke-dashoffset": handler.bracket.cssvar.px.numberWithUnit(s) })],
   [/^stroke-(.+)$/, colorResolver("stroke", "stroke")],
   [/^stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-stroke-opacity": handler.bracket.percent(opacity) })],
   ["stroke-cap-square", { "stroke-linecap": "square" }],

package/dist/chunks/default3.cjs

@@ -43,9 +43,19 @@ const variantCombinators = [
   variants$1.variantMatcher("next", (input) => `${input}+*`),
   variants$1.variantMatcher("sibling", (input) => `${input}+*`),
   variants$1.variantMatcher("siblings", (input) => `${input}~*`),
-  variants$1.variantMatcher("svg", (input) => `${input} svg *`)
+  variants$1.variantMatcher("svg", (input) => `${input} svg`)
 ];
 
+const variantMotions = [
+  variants$1.variantParentMatcher("motion-reduce", "@media (prefers-reduced-motion: reduce)"),
+  variants$1.variantParentMatcher("motion-safe", "@media (prefers-reduced-motion: no-preference)")
+];
+const variantOrientations = [
+  variants$1.variantParentMatcher("landscape", "@media (orientation: landscape)"),
+  variants$1.variantParentMatcher("portrait", "@media (orientation: portrait)")
+];
+const variantPrint = variants$1.variantParentMatcher("print", "@media print");
+
 const variantColorsMediaOrClass = (options = {}) => {
   if (options?.dark === "class") {
     return [
@@ -98,19 +108,6 @@ const variantNegative = {
   }
 };
 
-const variantMotions = [
-  variants$1.variantParentMatcher("motion-reduce", "@media (prefers-reduced-motion: reduce)"),
-  variants$1.variantParentMatcher("motion-safe", "@media (prefers-reduced-motion: no-preference)")
-];
-
-const variantOrientations = [
-  variants$1.variantParentMatcher("landscape", "@media (orientation: landscape)"),
-  variants$1.variantParentMatcher("portrait", "@media (orientation: portrait)")
-];
-
-const variantPrint = variants$1.variantParentMatcher("print", "@media print");
-
-const CONTROL_BYPASS_PSEUDO_CLASS = "$$no-pseudo";
 const PseudoClasses = Object.fromEntries([
   "any-link",
   "link",
@@ -173,9 +170,6 @@ const PartClassesRE = /(part-\[(.+)]:)(.+)/;
 const PseudoElementsRE = new RegExp(`^(${PseudoElementsStr})[:-]`);
 const PseudoClassesRE = new RegExp(`^(${PseudoClassesStr})[:-]`);
 const PseudoClassFunctionsRE = new RegExp(`^(${PseudoClassFunctionsStr})-(${PseudoClassesStr})[:-]`);
-function shouldAdd(entires) {
-  return !entires.find((i) => i[0] === CONTROL_BYPASS_PSEUDO_CLASS) || void 0;
-}
 const taggedPseudoClassMatcher = (tag, parent, combinator) => {
   const re = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))[:-]`);
   const rawRe = new RegExp(`^${core.escapeRegExp(parent)}:`);
@@ -187,9 +181,7 @@ const taggedPseudoClassMatcher = (tag, parent, combinator) => {
         pseudo = `:${match[2]}(${pseudo})`;
       return {
         matcher: input.slice(match[1].length + tag.length + 2),
-        selector: (s, body) => {
-          return shouldAdd(body) && rawRe.test(s) ? s.replace(rawRe, `${parent}${pseudo}:`) : `${parent}${pseudo}${combinator}${s}`;
-        }
+        selector: (s) => rawRe.test(s) ? s.replace(rawRe, `${parent}${pseudo}:`) : `${parent}${pseudo}${combinator}${s}`
       };
     }
   };
@@ -211,7 +203,7 @@ const variantPseudoClasses = {
       const pseudo = PseudoClasses[match[1]] || `:${match[1]}`;
       return {
         matcher: input.slice(match[1].length + 1),
-        selector: (s, body) => shouldAdd(body) && `${s}${pseudo}`
+        selector: (s) => `${s}${pseudo}`
       };
     }
   },
@@ -225,7 +217,7 @@ const variantPseudoClassFunctions = {
       const pseudo = PseudoClasses[match[2]] || `:${match[2]}`;
       return {
         matcher: input.slice(match[1].length + match[2].length + 2),
-        selector: (s, body) => shouldAdd(body) && `${s}:${fn}(${pseudo})`
+        selector: (s) => `${s}:${fn}(${pseudo})`
       };
     }
   },
@@ -251,9 +243,7 @@ const partClasses = {
       const part = `part(${match[2]})`;
       return {
         matcher: input.slice(match[1].length),
-        selector: (s, body) => {
-          return shouldAdd(body) && `${s}::${part}`;
-        }
+        selector: (s) => `${s}::${part}`
       };
     }
   },
@@ -277,7 +267,6 @@ const variants = (options) => [
   ...variantLanguageDirections
 ];
 
-exports.CONTROL_BYPASS_PSEUDO_CLASS = CONTROL_BYPASS_PSEUDO_CLASS;
 exports.partClasses = partClasses;
 exports.variantBreakpoints = variantBreakpoints;
 exports.variantColorsMediaOrClass = variantColorsMediaOrClass;

package/dist/chunks/default3.mjs

@@ -41,9 +41,19 @@ const variantCombinators = [
   variantMatcher("next", (input) => `${input}+*`),
   variantMatcher("sibling", (input) => `${input}+*`),
   variantMatcher("siblings", (input) => `${input}~*`),
-  variantMatcher("svg", (input) => `${input} svg *`)
+  variantMatcher("svg", (input) => `${input} svg`)
 ];
 
+const variantMotions = [
+  variantParentMatcher("motion-reduce", "@media (prefers-reduced-motion: reduce)"),
+  variantParentMatcher("motion-safe", "@media (prefers-reduced-motion: no-preference)")
+];
+const variantOrientations = [
+  variantParentMatcher("landscape", "@media (orientation: landscape)"),
+  variantParentMatcher("portrait", "@media (orientation: portrait)")
+];
+const variantPrint = variantParentMatcher("print", "@media print");
+
 const variantColorsMediaOrClass = (options = {}) => {
   if (options?.dark === "class") {
     return [
@@ -96,19 +106,6 @@ const variantNegative = {
   }
 };
 
-const variantMotions = [
-  variantParentMatcher("motion-reduce", "@media (prefers-reduced-motion: reduce)"),
-  variantParentMatcher("motion-safe", "@media (prefers-reduced-motion: no-preference)")
-];
-
-const variantOrientations = [
-  variantParentMatcher("landscape", "@media (orientation: landscape)"),
-  variantParentMatcher("portrait", "@media (orientation: portrait)")
-];
-
-const variantPrint = variantParentMatcher("print", "@media print");
-
-const CONTROL_BYPASS_PSEUDO_CLASS = "$$no-pseudo";
 const PseudoClasses = Object.fromEntries([
   "any-link",
   "link",
@@ -171,9 +168,6 @@ const PartClassesRE = /(part-\[(.+)]:)(.+)/;
 const PseudoElementsRE = new RegExp(`^(${PseudoElementsStr})[:-]`);
 const PseudoClassesRE = new RegExp(`^(${PseudoClassesStr})[:-]`);
 const PseudoClassFunctionsRE = new RegExp(`^(${PseudoClassFunctionsStr})-(${PseudoClassesStr})[:-]`);
-function shouldAdd(entires) {
-  return !entires.find((i) => i[0] === CONTROL_BYPASS_PSEUDO_CLASS) || void 0;
-}
 const taggedPseudoClassMatcher = (tag, parent, combinator) => {
   const re = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))[:-]`);
   const rawRe = new RegExp(`^${escapeRegExp(parent)}:`);
@@ -185,9 +179,7 @@ const taggedPseudoClassMatcher = (tag, parent, combinator) => {
         pseudo = `:${match[2]}(${pseudo})`;
       return {
         matcher: input.slice(match[1].length + tag.length + 2),
-        selector: (s, body) => {
-          return shouldAdd(body) && rawRe.test(s) ? s.replace(rawRe, `${parent}${pseudo}:`) : `${parent}${pseudo}${combinator}${s}`;
-        }
+        selector: (s) => rawRe.test(s) ? s.replace(rawRe, `${parent}${pseudo}:`) : `${parent}${pseudo}${combinator}${s}`
       };
     }
   };
@@ -209,7 +201,7 @@ const variantPseudoClasses = {
       const pseudo = PseudoClasses[match[1]] || `:${match[1]}`;
       return {
         matcher: input.slice(match[1].length + 1),
-        selector: (s, body) => shouldAdd(body) && `${s}${pseudo}`
+        selector: (s) => `${s}${pseudo}`
       };
     }
   },
@@ -223,7 +215,7 @@ const variantPseudoClassFunctions = {
       const pseudo = PseudoClasses[match[2]] || `:${match[2]}`;
       return {
         matcher: input.slice(match[1].length + match[2].length + 2),
-        selector: (s, body) => shouldAdd(body) && `${s}:${fn}(${pseudo})`
+        selector: (s) => `${s}:${fn}(${pseudo})`
       };
     }
   },
@@ -249,9 +241,7 @@ const partClasses = {
       const part = `part(${match[2]})`;
       return {
         matcher: input.slice(match[1].length),
-        selector: (s, body) => {
-          return shouldAdd(body) && `${s}::${part}`;
-        }
+        selector: (s) => `${s}::${part}`
       };
     }
   },
@@ -275,4 +265,4 @@ const variants = (options) => [
   ...variantLanguageDirections
 ];
 
-export { CONTROL_BYPASS_PSEUDO_CLASS as C, variantBreakpoints as a, variantCombinators as b, variantColorsMediaOrClass as c, variantLanguageDirections as d, variantImportant as e, variantNegative as f, variantMotions as g, variantOrientations as h, variantPrint as i, variantPseudoElements as j, variantPseudoClasses as k, variantPseudoClassFunctions as l, variantTaggedPseudoClasses as m, partClasses as p, variants as v };
+export { variantBreakpoints as a, variantCombinators as b, variantMotions as c, variantOrientations as d, variantPrint as e, variantColorsMediaOrClass as f, variantLanguageDirections as g, variantImportant as h, variantNegative as i, variantPseudoElements as j, variantPseudoClasses as k, variantPseudoClassFunctions as l, variantTaggedPseudoClasses as m, partClasses as p, variants as v };