@unocss/preset-wind 0.22.0 → 0.22.1

package/dist/index.cjs

@@ -71,15 +71,34 @@ const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
   }
 };
 const backgroundStyles = [
+  [/^bg-gradient-(.+)$/, ([, d]) => ({ "--un-gradient": utils.handler.bracket(d) })],
+  [/^(?:bg-gradient-)?stops-(\[.+\])$/, ([, s]) => ({ "--un-gradient-stops": utils.handler.bracket(s) })],
   [/^(?:bg-gradient-)?from-(.+)$/, bgGradientColorResolver("from")],
   [/^(?:bg-gradient-)?to-(.+)$/, bgGradientColorResolver("to")],
   [/^(?:bg-gradient-)?via-(.+)$/, bgGradientColorResolver("via")],
   [/^(?:bg-gradient-)?from-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-from-opacity": utils.handler.bracket.percent(opacity) })],
   [/^(?:bg-gradient-)?to-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-to-opacity": utils.handler.bracket.percent(opacity) })],
   [/^(?:bg-gradient-)?via-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-via-opacity": utils.handler.bracket.percent(opacity) })],
+  [/^bg-gradient-((?:repeating-)?(?:linear|radial|conic))$/, ([, s]) => ({
+    "background-image": `${s}-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))))`
+  })],
   [/^bg-gradient-to-([rltb]{1,2})$/, ([, d]) => {
-    if (d in utils.positionMap)
-      return { "background-image": `linear-gradient(to ${utils.positionMap[d]}, var(--un-gradient-stops))` };
+    if (d in utils.positionMap) {
+      return {
+        "--un-gradient-shape": `to ${utils.positionMap[d]}`,
+        "--un-gradient": "var(--un-gradient-shape), var(--un-gradient-stops)",
+        "background-image": "linear-gradient(var(--un-gradient))"
+      };
+    }
+  }],
+  [/^(?:bg-gradient-)?shape-(.+)$/, ([, d]) => {
+    const v = d in utils.positionMap ? `to ${utils.positionMap[d]}` : utils.handler.bracket(d);
+    if (v != null) {
+      return {
+        "--un-gradient-shape": v,
+        "--un-gradient": "var(--un-gradient-shape), var(--un-gradient-stops)"
+      };
+    }
   }],
   ["bg-none", { "background-image": "none" }],
   ["box-decoration-slice", { "box-decoration-break": "slice" }],
@@ -218,6 +237,7 @@ const filterBase = {
   "--un-brightness": rules$1.varEmpty,
   "--un-contrast": rules$1.varEmpty,
   "--un-drop-shadow": rules$1.varEmpty,
+  "--un-drop-shadow-colored": rules$1.varEmpty,
   "--un-grayscale": rules$1.varEmpty,
   "--un-hue-rotate": rules$1.varEmpty,
   "--un-invert": rules$1.varEmpty,
@@ -270,24 +290,52 @@ const toFilter = (varName, resolver) => ([, b, s], { theme }) => {
     }
   }
 };
+const dropShadowResolver = ([, s], { theme }) => {
+  let v = theme.dropShadow?.[s || "DEFAULT"];
+  if (v != null) {
+    const shadow = core.toArray(v);
+    const colored = shadow.map((s2) => s2.replace(/\s\S+$/, " var(--un-drop-shadow-color)"));
+    return [
+      filterBase,
+      {
+        "--un-drop-shadow": `drop-shadow(${shadow.join(") drop-shadow(")})`,
+        "--un-drop-shadow-colored": `drop-shadow(${colored.join(") drop-shadow(")})`,
+        "filter": "var(--un-filter)"
+      }
+    ];
+  }
+  v = utils.handler.bracket(s);
+  if (v != null) {
+    return [
+      filterBase,
+      {
+        "--un-drop-shadow": `drop-shadow(${v})`,
+        "filter": "var(--un-filter)"
+      }
+    ];
+  }
+};
 const filters = [
-  [/^(backdrop-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || utils.handler.bracket.px(s))],
-  [/^(backdrop-)?brightness-(.+)$/, toFilter("brightness", (s) => utils.handler.bracket.percent(s))],
-  [/^(backdrop-)?contrast-(.+)$/, toFilter("contrast", (s) => utils.handler.bracket.percent(s))],
-  [/^()?drop-shadow(?:-(.+))?$/, toFilter("drop-shadow", (s, theme) => {
-    let v = theme.dropShadow?.[s || "DEFAULT"];
-    if (v != null)
-      return core.toArray(v).map((v2) => `drop-shadow(${v2})`).join(" ");
-    v = utils.handler.bracket(s);
-    if (v != null)
-      return `drop-shadow(${v})`;
-  })],
-  [/^(backdrop-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault)],
-  [/^(backdrop-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => utils.handler.bracket.degree(s))],
-  [/^(backdrop-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault)],
+  [/^(?:(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))],
+  [/^(?:filter-)?drop-shadow(?:-(.+))?$/, dropShadowResolver],
+  [/^(?:filter-)?drop-shadow-color-(.+)$/, (m, ctx) => {
+    const color = utils.colorResolver("--un-drop-shadow-color", "drop-shadow")(m, ctx);
+    if (color) {
+      return {
+        ...color,
+        "--un-drop-shadow": "var(--un-drop-shadow-colored)"
+      };
+    }
+  }],
+  [/^(?:filter-)?drop-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-drop-shadow-opacity": utils.handler.bracket.percent.cssvar(opacity) })],
+  [/^(?:(backdrop-)|filter-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault)],
+  [/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => utils.handler.bracket.degree(s))],
+  [/^(?:(backdrop-)|filter-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault)],
   [/^(backdrop-)opacity-(.+)$/, toFilter("opacity", (s) => utils.handler.bracket.percent(s))],
-  [/^(backdrop-)?saturate-(.+)$/, toFilter("saturate", (s) => utils.handler.bracket.percent(s))],
-  [/^(backdrop-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault)],
+  [/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => utils.handler.bracket.percent(s))],
+  [/^(?:(backdrop-)|filter-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault)],
   [/^filter$/, () => [
     filterBase,
     { filter: "var(--un-filter)" }
@@ -304,7 +352,7 @@ const filters = [
     "-webkit-backdrop-filter": "none",
     "backdrop-filter": "none"
   }],
-  [/^(blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|saturate|sepia)-none$/, ([, s]) => ({ filter: `${s}(0)` })],
+  [/^(?:filter-)?(blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|saturate|sepia)-none$/, ([, s]) => ({ filter: `${s}(0)` })],
   [/^backdrop-(blur|brightness|contrast|grayscale|hue-rotate|invert|opacity|saturate|sepia)-none$/, ([, s]) => ({
     "-webkit-backdrop-filter": `${s}(0)`,
     "backdrop-filter": `${s}(0)`
@@ -312,21 +360,24 @@ const filters = [
 ];
 
 const spaces = [
-  [/^space-?([xy])-?(-?.+)$/, (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
-      ];
-    }
-  }],
-  [/^space-?([xy])-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })]
+  [/^space-?([xy])-?(-?.+)$/, handlerSpace],
+  [/^space-?([xy])-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })],
+  [/^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
+    ];
+  }
+}
 
 const textTransforms = [
   ["uppercase", { "text-transform": "uppercase" }],
@@ -487,6 +538,9 @@ const divides = [
   [/^divide-?([xy])$/, handlerDivide],
   [/^divide-?([xy])-?(-?.+)$/, handlerDivide],
   [/^divide-?([xy])-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
+  [/^divide-(block|inline)$/, handlerDivide],
+  [/^divide-(block|inline)-(-?.+)$/, handlerDivide],
+  [/^divide-(block|inline)-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
   [/^divide-(.+)$/, utils.colorResolver("border-color", "divide")],
   [/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": utils.handler.bracket.percent(opacity) })],
   ["divide-solid", { "border-style": "solid" }],
@@ -606,19 +660,24 @@ const scrolls = [
   [/^scroll-ma?()-?(-?.+)$/, utils.directionSize("scroll-margin")],
   [/^scroll-m-?([xy])-?(-?.+)$/, utils.directionSize("scroll-margin")],
   [/^scroll-m-?([rltb])-?(-?.+)$/, utils.directionSize("scroll-margin")],
+  [/^scroll-m-(block|inline)-(-?.+)$/, utils.directionSize("scroll-margin")],
+  [/^scroll-m-?([bi][se])-?(-?.+)$/, utils.directionSize("scroll-margin")],
   [/^scroll-pa?()-?(-?.+)$/, utils.directionSize("scroll-padding")],
   [/^scroll-p-?([xy])-?(-?.+)$/, utils.directionSize("scroll-padding")],
-  [/^scroll-p-?([rltb])-?(-?.+)$/, utils.directionSize("scroll-padding")]
+  [/^scroll-p-?([rltb])-?(-?.+)$/, utils.directionSize("scroll-padding")],
+  [/^scroll-p-(block|inline)-(-?.+)$/, utils.directionSize("scroll-padding")],
+  [/^scroll-p-?([bi][se])-?(-?.+)$/, utils.directionSize("scroll-padding")]
 ];
 
 const placeholders = [
-  [/^\$-placeholder-(.+)$/, utils.colorResolver("color", "placeholder")],
-  [/^\$-placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": utils.handler.bracket.percent.cssvar(opacity) })]
+  [/^\$ placeholder-(.+)$/, utils.colorResolver("color", "placeholder")],
+  [/^\$ placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": utils.handler.bracket.percent.cssvar(opacity) })]
 ];
 
 const rules = [
   rules$1.cssVariables,
   cssVariables,
+  rules$1.cssProperty,
   container,
   screenReadersAccess,
   rules$1.pointerEvents,
@@ -877,7 +936,7 @@ const placeholderModifier = (input, { theme }) => {
     const [, pre = "", p, body] = m;
     if (hasColorValue(body, theme) || hasOpacityValue(body)) {
       return {
-        matcher: `${pre}${p}$-placeholder-${body}`
+        matcher: `${pre}placeholder-$ ${p}${body}`
       };
     }
   }

package/dist/index.mjs

@@ -2,7 +2,7 @@ import { variants } from '@unocss/preset-mini/variants';
 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, cssVariables as cssVariables$1, 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 { varEmpty, 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';
 
 const animations = [
@@ -67,15 +67,34 @@ const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
   }
 };
 const backgroundStyles = [
+  [/^bg-gradient-(.+)$/, ([, d]) => ({ "--un-gradient": handler.bracket(d) })],
+  [/^(?:bg-gradient-)?stops-(\[.+\])$/, ([, s]) => ({ "--un-gradient-stops": handler.bracket(s) })],
   [/^(?:bg-gradient-)?from-(.+)$/, bgGradientColorResolver("from")],
   [/^(?:bg-gradient-)?to-(.+)$/, bgGradientColorResolver("to")],
   [/^(?:bg-gradient-)?via-(.+)$/, bgGradientColorResolver("via")],
   [/^(?:bg-gradient-)?from-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-from-opacity": handler.bracket.percent(opacity) })],
   [/^(?:bg-gradient-)?to-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-to-opacity": handler.bracket.percent(opacity) })],
   [/^(?:bg-gradient-)?via-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-via-opacity": handler.bracket.percent(opacity) })],
+  [/^bg-gradient-((?:repeating-)?(?:linear|radial|conic))$/, ([, s]) => ({
+    "background-image": `${s}-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))))`
+  })],
   [/^bg-gradient-to-([rltb]{1,2})$/, ([, d]) => {
-    if (d in positionMap)
-      return { "background-image": `linear-gradient(to ${positionMap[d]}, var(--un-gradient-stops))` };
+    if (d in positionMap) {
+      return {
+        "--un-gradient-shape": `to ${positionMap[d]}`,
+        "--un-gradient": "var(--un-gradient-shape), var(--un-gradient-stops)",
+        "background-image": "linear-gradient(var(--un-gradient))"
+      };
+    }
+  }],
+  [/^(?:bg-gradient-)?shape-(.+)$/, ([, d]) => {
+    const v = d in positionMap ? `to ${positionMap[d]}` : handler.bracket(d);
+    if (v != null) {
+      return {
+        "--un-gradient-shape": v,
+        "--un-gradient": "var(--un-gradient-shape), var(--un-gradient-stops)"
+      };
+    }
   }],
   ["bg-none", { "background-image": "none" }],
   ["box-decoration-slice", { "box-decoration-break": "slice" }],
@@ -214,6 +233,7 @@ const filterBase = {
   "--un-brightness": varEmpty,
   "--un-contrast": varEmpty,
   "--un-drop-shadow": varEmpty,
+  "--un-drop-shadow-colored": varEmpty,
   "--un-grayscale": varEmpty,
   "--un-hue-rotate": varEmpty,
   "--un-invert": varEmpty,
@@ -266,24 +286,52 @@ const toFilter = (varName, resolver) => ([, b, s], { theme }) => {
     }
   }
 };
+const dropShadowResolver = ([, s], { theme }) => {
+  let v = theme.dropShadow?.[s || "DEFAULT"];
+  if (v != null) {
+    const shadow = toArray(v);
+    const colored = shadow.map((s2) => s2.replace(/\s\S+$/, " var(--un-drop-shadow-color)"));
+    return [
+      filterBase,
+      {
+        "--un-drop-shadow": `drop-shadow(${shadow.join(") drop-shadow(")})`,
+        "--un-drop-shadow-colored": `drop-shadow(${colored.join(") drop-shadow(")})`,
+        "filter": "var(--un-filter)"
+      }
+    ];
+  }
+  v = handler.bracket(s);
+  if (v != null) {
+    return [
+      filterBase,
+      {
+        "--un-drop-shadow": `drop-shadow(${v})`,
+        "filter": "var(--un-filter)"
+      }
+    ];
+  }
+};
 const filters = [
-  [/^(backdrop-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || handler.bracket.px(s))],
-  [/^(backdrop-)?brightness-(.+)$/, toFilter("brightness", (s) => handler.bracket.percent(s))],
-  [/^(backdrop-)?contrast-(.+)$/, toFilter("contrast", (s) => handler.bracket.percent(s))],
-  [/^()?drop-shadow(?:-(.+))?$/, toFilter("drop-shadow", (s, theme) => {
-    let v = theme.dropShadow?.[s || "DEFAULT"];
-    if (v != null)
-      return toArray(v).map((v2) => `drop-shadow(${v2})`).join(" ");
-    v = handler.bracket(s);
-    if (v != null)
-      return `drop-shadow(${v})`;
-  })],
-  [/^(backdrop-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault)],
-  [/^(backdrop-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => handler.bracket.degree(s))],
-  [/^(backdrop-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault)],
+  [/^(?:(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))],
+  [/^(?:filter-)?drop-shadow(?:-(.+))?$/, dropShadowResolver],
+  [/^(?:filter-)?drop-shadow-color-(.+)$/, (m, ctx) => {
+    const color = colorResolver("--un-drop-shadow-color", "drop-shadow")(m, ctx);
+    if (color) {
+      return {
+        ...color,
+        "--un-drop-shadow": "var(--un-drop-shadow-colored)"
+      };
+    }
+  }],
+  [/^(?:filter-)?drop-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-drop-shadow-opacity": handler.bracket.percent.cssvar(opacity) })],
+  [/^(?:(backdrop-)|filter-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault)],
+  [/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => handler.bracket.degree(s))],
+  [/^(?:(backdrop-)|filter-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault)],
   [/^(backdrop-)opacity-(.+)$/, toFilter("opacity", (s) => handler.bracket.percent(s))],
-  [/^(backdrop-)?saturate-(.+)$/, toFilter("saturate", (s) => handler.bracket.percent(s))],
-  [/^(backdrop-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault)],
+  [/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => handler.bracket.percent(s))],
+  [/^(?:(backdrop-)|filter-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault)],
   [/^filter$/, () => [
     filterBase,
     { filter: "var(--un-filter)" }
@@ -300,7 +348,7 @@ const filters = [
     "-webkit-backdrop-filter": "none",
     "backdrop-filter": "none"
   }],
-  [/^(blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|saturate|sepia)-none$/, ([, s]) => ({ filter: `${s}(0)` })],
+  [/^(?:filter-)?(blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|saturate|sepia)-none$/, ([, s]) => ({ filter: `${s}(0)` })],
   [/^backdrop-(blur|brightness|contrast|grayscale|hue-rotate|invert|opacity|saturate|sepia)-none$/, ([, s]) => ({
     "-webkit-backdrop-filter": `${s}(0)`,
     "backdrop-filter": `${s}(0)`
@@ -308,21 +356,24 @@ const filters = [
 ];
 
 const spaces = [
-  [/^space-?([xy])-?(-?.+)$/, (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
-      ];
-    }
-  }],
-  [/^space-?([xy])-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })]
+  [/^space-?([xy])-?(-?.+)$/, handlerSpace],
+  [/^space-?([xy])-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })],
+  [/^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
+    ];
+  }
+}
 
 const textTransforms = [
   ["uppercase", { "text-transform": "uppercase" }],
@@ -483,6 +534,9 @@ const divides = [
   [/^divide-?([xy])$/, handlerDivide],
   [/^divide-?([xy])-?(-?.+)$/, handlerDivide],
   [/^divide-?([xy])-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
+  [/^divide-(block|inline)$/, handlerDivide],
+  [/^divide-(block|inline)-(-?.+)$/, handlerDivide],
+  [/^divide-(block|inline)-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
   [/^divide-(.+)$/, colorResolver("border-color", "divide")],
   [/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": handler.bracket.percent(opacity) })],
   ["divide-solid", { "border-style": "solid" }],
@@ -602,19 +656,24 @@ const scrolls = [
   [/^scroll-ma?()-?(-?.+)$/, directionSize("scroll-margin")],
   [/^scroll-m-?([xy])-?(-?.+)$/, directionSize("scroll-margin")],
   [/^scroll-m-?([rltb])-?(-?.+)$/, directionSize("scroll-margin")],
+  [/^scroll-m-(block|inline)-(-?.+)$/, directionSize("scroll-margin")],
+  [/^scroll-m-?([bi][se])-?(-?.+)$/, directionSize("scroll-margin")],
   [/^scroll-pa?()-?(-?.+)$/, directionSize("scroll-padding")],
   [/^scroll-p-?([xy])-?(-?.+)$/, directionSize("scroll-padding")],
-  [/^scroll-p-?([rltb])-?(-?.+)$/, directionSize("scroll-padding")]
+  [/^scroll-p-?([rltb])-?(-?.+)$/, directionSize("scroll-padding")],
+  [/^scroll-p-(block|inline)-(-?.+)$/, directionSize("scroll-padding")],
+  [/^scroll-p-?([bi][se])-?(-?.+)$/, directionSize("scroll-padding")]
 ];
 
 const placeholders = [
-  [/^\$-placeholder-(.+)$/, colorResolver("color", "placeholder")],
-  [/^\$-placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": handler.bracket.percent.cssvar(opacity) })]
+  [/^\$ placeholder-(.+)$/, colorResolver("color", "placeholder")],
+  [/^\$ placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": handler.bracket.percent.cssvar(opacity) })]
 ];
 
 const rules = [
   cssVariables$1,
   cssVariables,
+  cssProperty,
   container,
   screenReadersAccess,
   pointerEvents,
@@ -873,7 +932,7 @@ const placeholderModifier = (input, { theme }) => {
     const [, pre = "", p, body] = m;
     if (hasColorValue(body, theme) || hasOpacityValue(body)) {
       return {
-        matcher: `${pre}${p}$-placeholder-${body}`
+        matcher: `${pre}placeholder-$ ${p}${body}`
       };
     }
   }

package/package.json

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