@unocss/preset-wind 0.22.2 → 0.22.6

package/dist/index.cjs

@@ -10,7 +10,7 @@ const rules$1 = require('@unocss/preset-mini/rules');
 const utils = require('@unocss/preset-mini/utils');
 
 const animations = [
-  [/^keyframes-(.+)$/, ([, name], { theme, constructCSS }) => {
+  [/^(?:animate-)?keyframes-(.+)$/, ([, name], { theme, constructCSS }) => {
     const kf = theme.animation?.keyframes?.[name];
     if (kf)
       return `@keyframes ${name}${kf}
@@ -25,18 +25,18 @@ ${constructCSS({ animation: `${name}` })}`;
       return `@keyframes ${name}${kf}
 ${constructCSS(Object.assign({ animation: `${name} ${duration} ${timing} infinite` }, props))}`;
     }
+    return { animate: utils.handler.bracket.cssvar(name) };
   }],
-  [/^animate-(?:duration-)?(.+)$/, ([, d]) => ({ "animation-duration": utils.handler.bracket.time(d) })],
-  [/^animate-delay-(.+)$/, ([, d]) => ({ "animation-delay": utils.handler.bracket.time(d) })],
-  [/^animate-(?:fill-)?mode-(forwards|backwards|both|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-fill-mode": d })],
-  ["animate-mode-none", { "animation-fill-mode": "none" }],
-  ["animate-fill-mode-none", { "animation-fill-mode": "none" }],
+  [/^animate-name-(.+)/, ([, d]) => ({ "animation-name": utils.handler.bracket.cssvar(d) ?? d })],
+  [/^animate-duration-(.+)$/, ([, d]) => ({ "animation-duration": utils.handler.bracket.cssvar.time(d) })],
+  [/^animate-delay-(.+)$/, ([, d]) => ({ "animation-delay": utils.handler.bracket.cssvar.time(d) })],
+  [/^animate-ease(?:-(.+))?$/, ([, d], { theme }) => ({ "animation-timing-function": theme.easing?.[d || "DEFAULT"] ?? utils.handler.bracket.cssvar(d) })],
+  [/^animate-(?:fill-|mode-|fill-mode-)?(forwards|backwards|both|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-fill-mode": d })],
+  [/^animate-(?:fill-|mode-|fill-mode-)none$/, () => ({ "animation-fill-mode": "none" })],
   [/^animate-(?:direction-)?(reverse|alternate|alternate-reverse|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-direction": d })],
-  ["animate-normal", { "animation-direction": "normal" }],
-  ["animate-direction-normal", { "animation-direction": "normal" }],
-  [/^animate-(?:iteration-)?count-(.+)$/, ([, d]) => ({ "animation-iteration-count": utils.handler.bracket(d) ?? d.replace(/\-/g, ",") })],
-  [/^animate-name-(.+)/, ([, d]) => ({ "animation-name": d })],
-  [/^animate-play(?:-state)?-(paused|running|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-play-state": d })],
+  [/^animate-(?:direction-)?normal$/, () => ({ "animation-direction": "normal" })],
+  [/^animate-(?:iteration-|count-|iteration-count-)(.+)$/, ([, d]) => ({ "animation-iteration-count": utils.handler.bracket.cssvar(d) ?? d.replace(/\-/g, ",") })],
+  [/^animate-(?:play-|state-|play-state-)?(paused|running|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-play-state": d })],
   ["animate-none", { animation: "none" }]
 ];
 
@@ -175,7 +175,7 @@ const scrollBehaviors = [
 ];
 
 const columns = [
-  [/^columns-(.+)$/, ([, v]) => ({ column: utils.handler.bracket.global.number.auto.numberWithUnit(v) })],
+  [/^columns-(.+)$/, ([, v]) => ({ columns: utils.handler.bracket.global.number.auto.numberWithUnit(v) })],
   ["break-before-auto", { "break-before": "auto" }],
   ["break-before-avoid", { "break-before": "avoid" }],
   ["break-before-all", { "break-before": "all" }],
@@ -259,7 +259,7 @@ const backdropFilterBase = {
   [core.CONTROL_SHORTCUT_NO_MERGE]: ""
 };
 const percentWithDefault = (str) => {
-  let v = utils.handler.bracket(str || "");
+  let v = utils.handler.bracket.cssvar(str || "");
   if (v != null)
     return v;
   v = str ? utils.handler.percent(str) : "1";
@@ -301,7 +301,7 @@ const dropShadowResolver = ([, s], { theme }) => {
       }
     ];
   }
-  v = utils.handler.bracket(s);
+  v = utils.handler.bracket.cssvar(s);
   if (v != null) {
     return [
       filterBase,
@@ -313,17 +313,17 @@ const dropShadowResolver = ([, s], { theme }) => {
   }
 };
 const filters = [
-  [/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || utils.handler.bracket.px(s))],
-  [/^(?:(backdrop-)|filter-)?brightness-(.+)$/, toFilter("brightness", (s) => utils.handler.bracket.percent(s))],
-  [/^(?:(backdrop-)|filter-)?contrast-(.+)$/, toFilter("contrast", (s) => utils.handler.bracket.percent(s))],
+  [/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || utils.handler.bracket.cssvar.px(s))],
+  [/^(?:(backdrop-)|filter-)?brightness-(.+)$/, toFilter("brightness", (s) => utils.handler.bracket.cssvar.percent(s))],
+  [/^(?:(backdrop-)|filter-)?contrast-(.+)$/, toFilter("contrast", (s) => utils.handler.bracket.cssvar.percent(s))],
   [/^(?:filter-)?drop-shadow(?:-(.+))?$/, dropShadowResolver],
   [/^(?:filter-)?drop-shadow-color-(.+)$/, utils.colorResolver("--un-drop-shadow-color", "drop-shadow")],
-  [/^(?:filter-)?drop-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-drop-shadow-opacity": utils.handler.bracket.percent.cssvar(opacity) })],
+  [/^(?:filter-)?drop-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-drop-shadow-opacity": utils.handler.bracket.percent(opacity) })],
   [/^(?:(backdrop-)|filter-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault)],
-  [/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => utils.handler.bracket.degree(s))],
+  [/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => utils.handler.bracket.cssvar.degree(s))],
   [/^(?:(backdrop-)|filter-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault)],
-  [/^(backdrop-)opacity-(.+)$/, toFilter("opacity", (s) => utils.handler.bracket.percent(s))],
-  [/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => utils.handler.bracket.percent(s))],
+  [/^(backdrop-)opacity-(.+)$/, toFilter("opacity", (s) => utils.handler.bracket.cssvar.percent(s))],
+  [/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => utils.handler.bracket.cssvar.percent(s))],
   [/^(?:(backdrop-)|filter-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault)],
   [/^filter$/, () => [
     filterBase,
@@ -354,17 +354,20 @@ const spaces = [
   [/^space-(block|inline)-(-?.+)$/, handlerSpace],
   [/^space-(block|inline)-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })]
 ];
-function handlerSpace(match) {
-  const [, direction] = match;
-  const results = utils.directionSize("margin")(match)?.map((item) => {
-    const value = item[0].endsWith("right") || item[0].endsWith("bottom") ? `calc(${item[1]} * var(--un-space-${direction}-reverse))` : `calc(${item[1]} * calc(1 - var(--un-space-${direction}-reverse)))`;
-    return [item[0], value];
-  });
-  if (results) {
-    return [
-      [`--un-space-${direction}-reverse`, 0],
-      ...results
-    ];
+function handlerSpace([, d, s = "1"]) {
+  const v = utils.handler.bracket.cssvar.auto.fraction.rem(s);
+  if (v != null) {
+    const results = utils.directionMap[d].map((item) => {
+      const key = `margin${item}`;
+      const value = item.endsWith("right") || item.endsWith("bottom") ? `calc(${v} * var(--un-space-${d}-reverse))` : `calc(${v} * calc(1 - var(--un-space-${d}-reverse)))`;
+      return [key, value];
+    });
+    if (results) {
+      return [
+        [`--un-space-${d}-reverse`, 0],
+        ...results
+      ];
+    }
   }
 }
 
@@ -502,26 +505,27 @@ const tables = [
 ];
 
 const variablesAbbrMap = {
-  "write": "writing-mode",
-  "write-orient": "text-orientation",
   "bg-blend": "background-blend-mode",
   "bg-clip": "-webkit-background-clip",
   "bg-gradient": "linear-gradient",
-  "bg-origin-border": "background-origin",
+  "bg-image": "background-image",
+  "bg-origin": "background-origin",
   "bg-position": "background-position",
   "bg-repeat": "background-repeat",
   "bg-size": "background-size",
   "mix-blend": "mix-blend-mode",
-  "animate-speed": "animation-speed"
+  "object": "object-fit",
+  "object-position": "object-position",
+  "write": "writing-mode",
+  "write-orient": "text-orientation"
 };
-const cssVariables = [[
-  /^(.+)-\$(.+)$/,
-  ([, name, varname]) => {
+const cssVariables = [
+  [/^(.+?)-(\$.+)$/, ([, name, varname]) => {
     const prop = variablesAbbrMap[name];
     if (prop)
-      return { [prop]: `var(--${varname})` };
-  }
-]];
+      return { [prop]: utils.handler.cssvar(varname) };
+  }]
+];
 
 const divides = [
   [/^divide-?([xy])$/, handlerDivide],
@@ -539,15 +543,19 @@ const divides = [
   ["divide-none", { "border-style": "none" }]
 ];
 function handlerDivide([, d, s = "1"]) {
-  const v = utils.handler.bracket.px(s);
+  const v = utils.handler.bracket.cssvar.px(s);
   if (v != null) {
     const results = utils.directionMap[d].map((item) => {
       const key = `border${item}-width`;
       const value = item.endsWith("right") || item.endsWith("bottom") ? `calc(${v} * var(--un-divide-${d}-reverse))` : `calc(${v} * calc(1 - var(--un-divide-${d}-reverse)))`;
       return [key, value];
     });
-    if (results)
-      return [[`--un-divide-${d}-reverse`, 0], ...results];
+    if (results) {
+      return [
+        [`--un-divide-${d}-reverse`, 0],
+        ...results
+      ];
+    }
   }
 }
 
@@ -660,7 +668,7 @@ const scrolls = [
 
 const placeholders = [
   [/^\$ placeholder-(.+)$/, utils.colorResolver("color", "placeholder")],
-  [/^\$ placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": utils.handler.bracket.percent.cssvar(opacity) })]
+  [/^\$ placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": utils.handler.bracket.percent(opacity) })]
 ];
 
 const rules = [
@@ -920,7 +928,7 @@ const variantSpaceAndDivide = (matcher) => {
 };
 
 const placeholderModifier = (input, { theme }) => {
-  const m = input.match(/^(.*)\b(placeholder-)(.+?)$/);
+  const m = input.match(/^(.*)\b(placeholder-)(.+)$/);
   if (m) {
     const [, pre = "", p, body] = m;
     if (hasColorValue(body, theme) || hasOpacityValue(body)) {
@@ -936,7 +944,7 @@ function hasColorValue(body, theme) {
 function hasOpacityValue(body) {
   const match = body.match(/^op(?:acity)?-?(.+)$/);
   if (match && match[1] != null)
-    return utils.handler.bracket.percent.cssvar(match[1]) != null;
+    return utils.handler.bracket.percent(match[1]) != null;
   return false;
 }
 

package/dist/index.mjs

@@ -3,10 +3,10 @@ import { toArray, CONTROL_SHORTCUT_NO_MERGE } from '@unocss/core';
 import { theme as theme$1 } from '@unocss/preset-mini/theme';
 export { colors } from '@unocss/preset-mini';
 import { varEmpty, colorableShadows, cssVariables as cssVariables$1, cssProperty, pointerEvents, appearances, positions, insets, zIndexes, orders, grids, floats, margins, boxSizing, displays, aspectRatio, sizes, flex, transforms, cursors, userSelects, resizes, appearance, placements, alignments, justifies, gaps, overflows, textOverflows, whitespaces, breaks, borders, bgColors, svgUtilities, paddings, textAligns, textIndents, verticalAligns, fonts, fontStyles, textColors, textDecorations, fontSmoothings, tabSizes, textStrokes, textShadows, opacity, boxShadows, outline, rings, transitions, willChange, contents, questionMark } from '@unocss/preset-mini/rules';
-import { handler, positionMap, parseColor, colorResolver, directionSize, directionMap, variantMatcher, variantParentMatcher } from '@unocss/preset-mini/utils';
+import { handler, positionMap, parseColor, colorResolver, directionMap, directionSize, variantMatcher, variantParentMatcher } from '@unocss/preset-mini/utils';
 
 const animations = [
-  [/^keyframes-(.+)$/, ([, name], { theme, constructCSS }) => {
+  [/^(?:animate-)?keyframes-(.+)$/, ([, name], { theme, constructCSS }) => {
     const kf = theme.animation?.keyframes?.[name];
     if (kf)
       return `@keyframes ${name}${kf}
@@ -21,18 +21,18 @@ ${constructCSS({ animation: `${name}` })}`;
       return `@keyframes ${name}${kf}
 ${constructCSS(Object.assign({ animation: `${name} ${duration} ${timing} infinite` }, props))}`;
     }
+    return { animate: handler.bracket.cssvar(name) };
   }],
-  [/^animate-(?:duration-)?(.+)$/, ([, d]) => ({ "animation-duration": handler.bracket.time(d) })],
-  [/^animate-delay-(.+)$/, ([, d]) => ({ "animation-delay": handler.bracket.time(d) })],
-  [/^animate-(?:fill-)?mode-(forwards|backwards|both|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-fill-mode": d })],
-  ["animate-mode-none", { "animation-fill-mode": "none" }],
-  ["animate-fill-mode-none", { "animation-fill-mode": "none" }],
+  [/^animate-name-(.+)/, ([, d]) => ({ "animation-name": handler.bracket.cssvar(d) ?? d })],
+  [/^animate-duration-(.+)$/, ([, d]) => ({ "animation-duration": handler.bracket.cssvar.time(d) })],
+  [/^animate-delay-(.+)$/, ([, d]) => ({ "animation-delay": handler.bracket.cssvar.time(d) })],
+  [/^animate-ease(?:-(.+))?$/, ([, d], { theme }) => ({ "animation-timing-function": theme.easing?.[d || "DEFAULT"] ?? handler.bracket.cssvar(d) })],
+  [/^animate-(?:fill-|mode-|fill-mode-)?(forwards|backwards|both|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-fill-mode": d })],
+  [/^animate-(?:fill-|mode-|fill-mode-)none$/, () => ({ "animation-fill-mode": "none" })],
   [/^animate-(?:direction-)?(reverse|alternate|alternate-reverse|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-direction": d })],
-  ["animate-normal", { "animation-direction": "normal" }],
-  ["animate-direction-normal", { "animation-direction": "normal" }],
-  [/^animate-(?:iteration-)?count-(.+)$/, ([, d]) => ({ "animation-iteration-count": handler.bracket(d) ?? d.replace(/\-/g, ",") })],
-  [/^animate-name-(.+)/, ([, d]) => ({ "animation-name": d })],
-  [/^animate-play(?:-state)?-(paused|running|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-play-state": d })],
+  [/^animate-(?:direction-)?normal$/, () => ({ "animation-direction": "normal" })],
+  [/^animate-(?:iteration-|count-|iteration-count-)(.+)$/, ([, d]) => ({ "animation-iteration-count": handler.bracket.cssvar(d) ?? d.replace(/\-/g, ",") })],
+  [/^animate-(?:play-|state-|play-state-)?(paused|running|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-play-state": d })],
   ["animate-none", { animation: "none" }]
 ];
 
@@ -171,7 +171,7 @@ const scrollBehaviors = [
 ];
 
 const columns = [
-  [/^columns-(.+)$/, ([, v]) => ({ column: handler.bracket.global.number.auto.numberWithUnit(v) })],
+  [/^columns-(.+)$/, ([, v]) => ({ columns: handler.bracket.global.number.auto.numberWithUnit(v) })],
   ["break-before-auto", { "break-before": "auto" }],
   ["break-before-avoid", { "break-before": "avoid" }],
   ["break-before-all", { "break-before": "all" }],
@@ -255,7 +255,7 @@ const backdropFilterBase = {
   [CONTROL_SHORTCUT_NO_MERGE]: ""
 };
 const percentWithDefault = (str) => {
-  let v = handler.bracket(str || "");
+  let v = handler.bracket.cssvar(str || "");
   if (v != null)
     return v;
   v = str ? handler.percent(str) : "1";
@@ -297,7 +297,7 @@ const dropShadowResolver = ([, s], { theme }) => {
       }
     ];
   }
-  v = handler.bracket(s);
+  v = handler.bracket.cssvar(s);
   if (v != null) {
     return [
       filterBase,
@@ -309,17 +309,17 @@ const dropShadowResolver = ([, s], { theme }) => {
   }
 };
 const filters = [
-  [/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || handler.bracket.px(s))],
-  [/^(?:(backdrop-)|filter-)?brightness-(.+)$/, toFilter("brightness", (s) => handler.bracket.percent(s))],
-  [/^(?:(backdrop-)|filter-)?contrast-(.+)$/, toFilter("contrast", (s) => handler.bracket.percent(s))],
+  [/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || handler.bracket.cssvar.px(s))],
+  [/^(?:(backdrop-)|filter-)?brightness-(.+)$/, toFilter("brightness", (s) => handler.bracket.cssvar.percent(s))],
+  [/^(?:(backdrop-)|filter-)?contrast-(.+)$/, toFilter("contrast", (s) => handler.bracket.cssvar.percent(s))],
   [/^(?:filter-)?drop-shadow(?:-(.+))?$/, dropShadowResolver],
   [/^(?:filter-)?drop-shadow-color-(.+)$/, colorResolver("--un-drop-shadow-color", "drop-shadow")],
-  [/^(?:filter-)?drop-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-drop-shadow-opacity": handler.bracket.percent.cssvar(opacity) })],
+  [/^(?:filter-)?drop-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-drop-shadow-opacity": handler.bracket.percent(opacity) })],
   [/^(?:(backdrop-)|filter-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault)],
-  [/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => handler.bracket.degree(s))],
+  [/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => handler.bracket.cssvar.degree(s))],
   [/^(?:(backdrop-)|filter-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault)],
-  [/^(backdrop-)opacity-(.+)$/, toFilter("opacity", (s) => handler.bracket.percent(s))],
-  [/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => handler.bracket.percent(s))],
+  [/^(backdrop-)opacity-(.+)$/, toFilter("opacity", (s) => handler.bracket.cssvar.percent(s))],
+  [/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => handler.bracket.cssvar.percent(s))],
   [/^(?:(backdrop-)|filter-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault)],
   [/^filter$/, () => [
     filterBase,
@@ -350,17 +350,20 @@ const spaces = [
   [/^space-(block|inline)-(-?.+)$/, handlerSpace],
   [/^space-(block|inline)-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })]
 ];
-function handlerSpace(match) {
-  const [, direction] = match;
-  const results = directionSize("margin")(match)?.map((item) => {
-    const value = item[0].endsWith("right") || item[0].endsWith("bottom") ? `calc(${item[1]} * var(--un-space-${direction}-reverse))` : `calc(${item[1]} * calc(1 - var(--un-space-${direction}-reverse)))`;
-    return [item[0], value];
-  });
-  if (results) {
-    return [
-      [`--un-space-${direction}-reverse`, 0],
-      ...results
-    ];
+function handlerSpace([, d, s = "1"]) {
+  const v = handler.bracket.cssvar.auto.fraction.rem(s);
+  if (v != null) {
+    const results = directionMap[d].map((item) => {
+      const key = `margin${item}`;
+      const value = item.endsWith("right") || item.endsWith("bottom") ? `calc(${v} * var(--un-space-${d}-reverse))` : `calc(${v} * calc(1 - var(--un-space-${d}-reverse)))`;
+      return [key, value];
+    });
+    if (results) {
+      return [
+        [`--un-space-${d}-reverse`, 0],
+        ...results
+      ];
+    }
   }
 }
 
@@ -498,26 +501,27 @@ const tables = [
 ];
 
 const variablesAbbrMap = {
-  "write": "writing-mode",
-  "write-orient": "text-orientation",
   "bg-blend": "background-blend-mode",
   "bg-clip": "-webkit-background-clip",
   "bg-gradient": "linear-gradient",
-  "bg-origin-border": "background-origin",
+  "bg-image": "background-image",
+  "bg-origin": "background-origin",
   "bg-position": "background-position",
   "bg-repeat": "background-repeat",
   "bg-size": "background-size",
   "mix-blend": "mix-blend-mode",
-  "animate-speed": "animation-speed"
+  "object": "object-fit",
+  "object-position": "object-position",
+  "write": "writing-mode",
+  "write-orient": "text-orientation"
 };
-const cssVariables = [[
-  /^(.+)-\$(.+)$/,
-  ([, name, varname]) => {
+const cssVariables = [
+  [/^(.+?)-(\$.+)$/, ([, name, varname]) => {
     const prop = variablesAbbrMap[name];
     if (prop)
-      return { [prop]: `var(--${varname})` };
-  }
-]];
+      return { [prop]: handler.cssvar(varname) };
+  }]
+];
 
 const divides = [
   [/^divide-?([xy])$/, handlerDivide],
@@ -535,15 +539,19 @@ const divides = [
   ["divide-none", { "border-style": "none" }]
 ];
 function handlerDivide([, d, s = "1"]) {
-  const v = handler.bracket.px(s);
+  const v = handler.bracket.cssvar.px(s);
   if (v != null) {
     const results = directionMap[d].map((item) => {
       const key = `border${item}-width`;
       const value = item.endsWith("right") || item.endsWith("bottom") ? `calc(${v} * var(--un-divide-${d}-reverse))` : `calc(${v} * calc(1 - var(--un-divide-${d}-reverse)))`;
       return [key, value];
     });
-    if (results)
-      return [[`--un-divide-${d}-reverse`, 0], ...results];
+    if (results) {
+      return [
+        [`--un-divide-${d}-reverse`, 0],
+        ...results
+      ];
+    }
   }
 }
 
@@ -656,7 +664,7 @@ const scrolls = [
 
 const placeholders = [
   [/^\$ placeholder-(.+)$/, colorResolver("color", "placeholder")],
-  [/^\$ placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": handler.bracket.percent.cssvar(opacity) })]
+  [/^\$ placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": handler.bracket.percent(opacity) })]
 ];
 
 const rules = [
@@ -916,7 +924,7 @@ const variantSpaceAndDivide = (matcher) => {
 };
 
 const placeholderModifier = (input, { theme }) => {
-  const m = input.match(/^(.*)\b(placeholder-)(.+?)$/);
+  const m = input.match(/^(.*)\b(placeholder-)(.+)$/);
   if (m) {
     const [, pre = "", p, body] = m;
     if (hasColorValue(body, theme) || hasOpacityValue(body)) {
@@ -932,7 +940,7 @@ function hasColorValue(body, theme) {
 function hasOpacityValue(body) {
   const match = body.match(/^op(?:acity)?-?(.+)$/);
   if (match && match[1] != null)
-    return handler.bracket.percent.cssvar(match[1]) != null;
+    return handler.bracket.percent(match[1]) != null;
   return false;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-wind",
-  "version": "0.22.2",
+  "version": "0.22.6",
   "description": "Tailwind / Windi CSS compact preset for UnoCSS",
   "keywords": [
     "unocss",
@@ -35,8 +35,8 @@
     "*.css"
   ],
   "dependencies": {
-    "@unocss/core": "0.22.2",
-    "@unocss/preset-mini": "0.22.2"
+    "@unocss/core": "0.22.6",
+    "@unocss/preset-mini": "0.22.6"
   },
   "scripts": {
     "build": "unbuild",