@unocss/preset-wind 0.20.4 → 0.22.0

package/dist/index.cjs

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+const variants = require('@unocss/preset-mini/variants');
 const core = require('@unocss/core');
 const theme$1 = require('@unocss/preset-mini/theme');
 const presetMini = require('@unocss/preset-mini');
 const rules$1 = require('@unocss/preset-mini/rules');
 const utils = require('@unocss/preset-mini/utils');
-const variants$1 = require('@unocss/preset-mini/variants');
 
 const animations = [
   [/^keyframes-(.+)$/, ([, name], { theme, constructCSS }) => {
@@ -71,22 +71,6 @@ const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
   }
 };
 const backgroundStyles = [
-  ["bg-blend-multiply", { "background-blend-mode": "multiply" }],
-  ["bg-blend-screen", { "background-blend-mode": "screen" }],
-  ["bg-blend-overlay", { "background-blend-mode": "overlay" }],
-  ["bg-blend-darken", { "background-blend-mode": "darken" }],
-  ["bg-blend-lighten", { "background-blend-mode": "lighten" }],
-  ["bg-blend-color-dodge", { "background-blend-mode": "color-dodge" }],
-  ["bg-blend-color-burn", { "background-blend-mode": "color-burn" }],
-  ["bg-blend-hard-light", { "background-blend-mode": "hard-light" }],
-  ["bg-blend-soft-light", { "background-blend-mode": "soft-light" }],
-  ["bg-blend-difference", { "background-blend-mode": "difference" }],
-  ["bg-blend-exclusion", { "background-blend-mode": "exclusion" }],
-  ["bg-blend-hue", { "background-blend-mode": "hue" }],
-  ["bg-blend-saturation", { "background-blend-mode": "saturation" }],
-  ["bg-blend-color", { "background-blend-mode": "color" }],
-  ["bg-blend-luminosity", { "background-blend-mode": "luminosity" }],
-  ["bg-blend-normal", { "background-blend-mode": "normal" }],
   [/^(?:bg-gradient-)?from-(.+)$/, bgGradientColorResolver("from")],
   [/^(?:bg-gradient-)?to-(.+)$/, bgGradientColorResolver("to")],
   [/^(?:bg-gradient-)?via-(.+)$/, bgGradientColorResolver("via")],
@@ -122,34 +106,28 @@ const backgroundStyles = [
   ["bg-origin-content", { "background-origin": "content-box" }]
 ];
 
-const listStyleProps = ["disc", "circle", "square", "decimal", "zero-decimal", "greek", "roman", "upper-roman", "alpha", "upper-alpha"];
 const listStyle = [
-  [new RegExp(`^list-((?:${listStyleProps.join("|")})(?:-outside|-inside)?)$`), ([, value]) => {
-    const style = value.split(/-outside|-inside/)[0];
-    const position = /outside|inside/.exec(value) ?? [];
-    if (position.length) {
+  [/^list-(disc|circle|square|decimal|zero-decimal|greek|roman|upper-roman|alpha|upper-alpha)(?:-(outside|inside))?$/, ([, style, position]) => {
+    if (position != null) {
       return {
-        "list-style-position": `${position[0]}`,
+        "list-style-position": position,
         "list-style-type": style
       };
     }
     return { "list-style-type": style };
   }],
-  [/^list-(outside|inside)$/, ([, value]) => ({ "list-style-position": value })],
+  ["list-outside", { "list-style-position": "outside" }],
+  ["list-inside", { "list-style-position": "inside" }],
   ["list-none", { "list-style-type": "none" }]
 ];
-const accentOpacity = [
+const accents = [
+  [/^accent-(.+)$/, utils.colorResolver("accent-color", "accent")],
   [/^accent-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-accent-opacity": utils.handler.bracket.percent(d) })]
 ];
-const accentColors = [
-  [/^accent-(.+)$/, utils.colorResolver("accent-color", "accent")]
-];
-const caretOpacity = [
+const carets = [
+  [/^caret-(.+)$/, utils.colorResolver("caret-color", "caret")],
   [/^caret-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-caret-opacity": utils.handler.bracket.percent(d) })]
 ];
-const caretColors = [
-  [/^caret-(.+)$/, utils.colorResolver("caret-color", "caret")]
-];
 const imageRenderings = [
   ["image-render-auto", { "image-rendering": "auto" }],
   ["image-render-edge", { "image-rendering": "crisp-edges" }],
@@ -235,21 +213,19 @@ const containerShortcuts = [
   }]
 ];
 
-const filterContnet = "var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia) var(--un-drop-shadow)";
 const filterBase = {
   "--un-blur": rules$1.varEmpty,
   "--un-brightness": rules$1.varEmpty,
   "--un-contrast": rules$1.varEmpty,
+  "--un-drop-shadow": rules$1.varEmpty,
   "--un-grayscale": rules$1.varEmpty,
   "--un-hue-rotate": rules$1.varEmpty,
   "--un-invert": rules$1.varEmpty,
   "--un-saturate": rules$1.varEmpty,
   "--un-sepia": rules$1.varEmpty,
-  "--un-drop-shadow": rules$1.varEmpty,
-  "filter": filterContnet,
-  [variants$1.CONTROL_BYPASS_PSEUDO_CLASS]: ""
+  "--un-filter": "var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)",
+  [core.CONTROL_SHORTCUT_NO_MERGE]: ""
 };
-const backdropFilterContent = "var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-saturate) var(--un-backdrop-sepia)";
 const backdropFilterBase = {
   "--un-backdrop-blur": rules$1.varEmpty,
   "--un-backdrop-brightness": rules$1.varEmpty,
@@ -257,72 +233,87 @@ const backdropFilterBase = {
   "--un-backdrop-grayscale": rules$1.varEmpty,
   "--un-backdrop-hue-rotate": rules$1.varEmpty,
   "--un-backdrop-invert": rules$1.varEmpty,
+  "--un-backdrop-opacity": rules$1.varEmpty,
   "--un-backdrop-saturate": rules$1.varEmpty,
   "--un-backdrop-sepia": rules$1.varEmpty,
-  "-webkit-backdrop-filter": backdropFilterContent,
-  "backdrop-filter": backdropFilterContent,
-  [variants$1.CONTROL_BYPASS_PSEUDO_CLASS]: ""
+  "--un-backdrop-filter": "var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)",
+  [core.CONTROL_SHORTCUT_NO_MERGE]: ""
 };
-const percentWithDefault = (defaultValue = "1") => (str) => {
-  const v = str ? utils.handler.bracket.percent(str) : defaultValue;
-  return v && parseFloat(v) <= 1 ? v : void 0;
+const percentWithDefault = (str) => {
+  let v = utils.handler.bracket(str || "");
+  if (v != null)
+    return v;
+  v = str ? utils.handler.percent(str) : "1";
+  if (v != null && parseFloat(v) <= 1)
+    return v;
 };
 const toFilter = (varName, resolver) => ([, b, s], { theme }) => {
   const value = resolver(s, theme);
-  if (value) {
-    return [
-      b ? backdropFilterBase : filterBase,
-      { [`--un-${b || ""}${varName}`]: `${varName}(${value})` }
-    ];
+  if (value != null && value !== "") {
+    if (b) {
+      return [
+        backdropFilterBase,
+        {
+          [`--un-${b}${varName}`]: `${varName}(${value})`,
+          "-webkit-backdrop-filter": "var(--un-backdrop-filter)",
+          "backdrop-filter": "var(--un-backdrop-filter)"
+        }
+      ];
+    } else {
+      return [
+        filterBase,
+        {
+          [`--un-${varName}`]: `${varName}(${value})`,
+          filter: "var(--un-filter)"
+        }
+      ];
+    }
   }
 };
 const filters = [
-  ["filter", filterBase],
-  ["backdrop-filter", backdropFilterBase],
   [/^(backdrop-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || utils.handler.bracket.px(s))],
-  [/^(backdrop-)?brightness-(\d+)$/, toFilter("brightness", (s) => utils.handler.bracket.percent(s))],
-  [/^(backdrop-)?contrast-(\d+)$/, toFilter("contrast", (s) => utils.handler.bracket.percent(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) => {
-    const v = utils.handler.bracket(s) || theme.dropShadow?.[s || "DEFAULT"];
-    if (v)
+    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(?:-(\d+))?$/, toFilter("grayscale", percentWithDefault())],
-  [/^(backdrop-)?hue-rotate-(\d+)$/, toFilter("hue-rotate", (s) => `${utils.handler.bracket.number(s)}deg`)],
-  [/^(backdrop-)?invert(?:-(\d+))?$/, toFilter("invert", percentWithDefault())],
-  [/^(backdrop-)?saturate(?:-(\d+))?$/, toFilter("saturate", percentWithDefault("0"))],
-  [/^(backdrop-)?sepia(?:-(\d+))?$/, toFilter("sepia", percentWithDefault())],
+  [/^(backdrop-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault)],
+  [/^(backdrop-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => utils.handler.bracket.degree(s))],
+  [/^(backdrop-)?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)],
+  [/^filter$/, () => [
+    filterBase,
+    { filter: "var(--un-filter)" }
+  ]],
+  [/^backdrop-filter$/, () => [
+    backdropFilterBase,
+    {
+      "-webkit-backdrop-filter": "var(--un-backdrop-filter)",
+      "backdrop-filter": "var(--un-backdrop-filter)"
+    }
+  ]],
   ["filter-none", { filter: "none" }],
   ["backdrop-filter-none", {
     "-webkit-backdrop-filter": "none",
     "backdrop-filter": "none"
-  }]
-];
-
-const mixBlendModes = [
-  ["mix-blend-multiply", { "mix-blend-mode": "multiply" }],
-  ["mix-blend-screen", { "mix-blend-mode": "screen" }],
-  ["mix-blend-overlay", { "mix-blend-mode": "overlay" }],
-  ["mix-blend-darken", { "mix-blend-mode": "darken" }],
-  ["mix-blend-lighten", { "mix-blend-mode": "lighten" }],
-  ["mix-blend-color-dodge", { "mix-blend-mode": "color-dodge" }],
-  ["mix-blend-color-burn", { "mix-blend-mode": "color-burn" }],
-  ["mix-blend-hard-light", { "mix-blend-mode": "hard-light" }],
-  ["mix-blend-soft-light", { "mix-blend-mode": "soft-light" }],
-  ["mix-blend-difference", { "mix-blend-mode": "difference" }],
-  ["mix-blend-exclusion", { "mix-blend-mode": "exclusion" }],
-  ["mix-blend-hue", { "mix-blend-mode": "hue" }],
-  ["mix-blend-saturation", { "mix-blend-mode": "saturation" }],
-  ["mix-blend-color", { "mix-blend-mode": "color" }],
-  ["mix-blend-luminosity", { "mix-blend-mode": "luminosity" }],
-  ["mix-blend-normal", { "mix-blend-mode": "normal" }]
+  }],
+  [/^(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)`
+  })]
 ];
 
 const spaces = [
   [/^space-?([xy])-?(-?.+)$/, (match) => {
-    const [, direction, size] = match;
-    if (size === "reverse")
-      return { [`--un-space-${direction}-reverse`]: 1 };
+    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];
@@ -333,7 +324,8 @@ const spaces = [
         ...results
       ];
     }
-  }]
+  }],
+  [/^space-?([xy])-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })]
 ];
 
 const textTransforms = [
@@ -400,7 +392,8 @@ const screenReadersAccess = [
 ];
 const isolations = [
   ["isolate", { isolation: "isolate" }],
-  ["isolate-auto", { isolation: "auto" }]
+  ["isolate-auto", { isolation: "auto" }],
+  ["isolation-auto", { isolation: "auto" }]
 ];
 const objectPositions = [
   ["object-cover", { "object-fit": "cover" }],
@@ -408,7 +401,43 @@ const objectPositions = [
   ["object-fill", { "object-fit": "fill" }],
   ["object-scale-down", { "object-fit": "scale-down" }],
   ["object-none", { "object-fit": "none" }],
-  [/^object-([\w]+)$/, ([, s]) => ({ "object-position": utils.positionMap[s] })]
+  [/^object-([-\w]+)$/, ([, s]) => ({ "object-position": utils.positionMap[s] })]
+];
+const backgroundBlendModes = [
+  ["bg-blend-multiply", { "background-blend-mode": "multiply" }],
+  ["bg-blend-screen", { "background-blend-mode": "screen" }],
+  ["bg-blend-overlay", { "background-blend-mode": "overlay" }],
+  ["bg-blend-darken", { "background-blend-mode": "darken" }],
+  ["bg-blend-lighten", { "background-blend-mode": "lighten" }],
+  ["bg-blend-color-dodge", { "background-blend-mode": "color-dodge" }],
+  ["bg-blend-color-burn", { "background-blend-mode": "color-burn" }],
+  ["bg-blend-hard-light", { "background-blend-mode": "hard-light" }],
+  ["bg-blend-soft-light", { "background-blend-mode": "soft-light" }],
+  ["bg-blend-difference", { "background-blend-mode": "difference" }],
+  ["bg-blend-exclusion", { "background-blend-mode": "exclusion" }],
+  ["bg-blend-hue", { "background-blend-mode": "hue" }],
+  ["bg-blend-saturation", { "background-blend-mode": "saturation" }],
+  ["bg-blend-color", { "background-blend-mode": "color" }],
+  ["bg-blend-luminosity", { "background-blend-mode": "luminosity" }],
+  ["bg-blend-normal", { "background-blend-mode": "normal" }]
+];
+const mixBlendModes = [
+  ["mix-blend-multiply", { "mix-blend-mode": "multiply" }],
+  ["mix-blend-screen", { "mix-blend-mode": "screen" }],
+  ["mix-blend-overlay", { "mix-blend-mode": "overlay" }],
+  ["mix-blend-darken", { "mix-blend-mode": "darken" }],
+  ["mix-blend-lighten", { "mix-blend-mode": "lighten" }],
+  ["mix-blend-color-dodge", { "mix-blend-mode": "color-dodge" }],
+  ["mix-blend-color-burn", { "mix-blend-mode": "color-burn" }],
+  ["mix-blend-hard-light", { "mix-blend-mode": "hard-light" }],
+  ["mix-blend-soft-light", { "mix-blend-mode": "soft-light" }],
+  ["mix-blend-difference", { "mix-blend-mode": "difference" }],
+  ["mix-blend-exclusion", { "mix-blend-mode": "exclusion" }],
+  ["mix-blend-hue", { "mix-blend-mode": "hue" }],
+  ["mix-blend-saturation", { "mix-blend-mode": "saturation" }],
+  ["mix-blend-color", { "mix-blend-mode": "color" }],
+  ["mix-blend-luminosity", { "mix-blend-mode": "luminosity" }],
+  ["mix-blend-normal", { "mix-blend-mode": "normal" }]
 ];
 
 const tables = [
@@ -454,25 +483,19 @@ const cssVariables = [[
   }
 ]];
 
-const divideColors = [
-  [/^divide-(.+)$/, utils.colorResolver("border-color", "divide")],
-  [/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": utils.handler.bracket.percent(opacity) })]
-];
-const divideSizes = [
+const divides = [
   [/^divide-?([xy])$/, handlerDivide],
   [/^divide-?([xy])-?(-?.+)$/, handlerDivide],
-  [/^divide-?([xy])-reverse$/, ([, d]) => [[`--un-divide-${d}-reverse`, 1]]]
-];
-const divideStyles = [
+  [/^divide-?([xy])-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" }],
   ["divide-dashed", { "border-style": "dashed" }],
   ["divide-dotted", { "border-style": "dotted" }],
   ["divide-double", { "border-style": "double" }],
   ["divide-none", { "border-style": "none" }]
 ];
-const divides = [divideSizes, divideColors, divideStyles].flat(1);
-function handlerDivide([, a, b]) {
-  const [d, s = "1"] = utils.directionMap[a] ? [a, b] : ["", a];
+function handlerDivide([, d, s = "1"]) {
   const v = utils.handler.bracket.px(s);
   if (v != null) {
     const results = utils.directionMap[d].map((item) => {
@@ -505,18 +528,25 @@ const fontVariantNumericBase = {
   "--un-numeric-figure": rules$1.varEmpty,
   "--un-numeric-spacing": rules$1.varEmpty,
   "--un-numeric-fraction": rules$1.varEmpty,
-  "font-variant-numeric": "var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)",
-  [variants$1.CONTROL_BYPASS_PSEUDO_CLASS]: ""
+  "--un-font-variant-numeric": "var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)",
+  [core.CONTROL_SHORTCUT_NO_MERGE]: ""
 };
+const toEntries = (entry) => [
+  fontVariantNumericBase,
+  {
+    ...entry,
+    "font-variant-numeric": "var(--un-font-variant-numeric)"
+  }
+];
 const fontVariantNumeric = [
-  [/^ordinal$/, () => [fontVariantNumericBase, { "--un-ordinal": "ordinal" }]],
-  [/^slashed-zero$/, () => [fontVariantNumericBase, { "--un-slashed-zero": "slashed-zero" }]],
-  [/^lining-nums$/, () => [fontVariantNumericBase, { "--un-numeric-figure": "lining-nums" }]],
-  [/^oldstyle-nums$/, () => [fontVariantNumericBase, { "--un-numeric-figure": "oldstyle-nums" }]],
-  [/^proportional-nums$/, () => [fontVariantNumericBase, { "--un-numeric-spacing": "proportional-nums" }]],
-  [/^tabular-nums$/, () => [fontVariantNumericBase, { "--un-numeric-spacing": "tabular-nums" }]],
-  [/^diagonal-fractions$/, () => [fontVariantNumericBase, { "--un-numeric-fraction": "diagonal-fractions" }]],
-  [/^stacked-fractions$/, () => [fontVariantNumericBase, { "--un-numeric-fraction": "stacked-fractions" }]],
+  [/^ordinal$/, () => toEntries({ "--un-ordinal": "ordinal" })],
+  [/^slashed-zero$/, () => toEntries({ "--un-slashed-zero": "slashed-zero" })],
+  [/^lining-nums$/, () => toEntries({ "--un-numeric-figure": "lining-nums" })],
+  [/^oldstyle-nums$/, () => toEntries({ "--un-numeric-figure": "oldstyle-nums" })],
+  [/^proportional-nums$/, () => toEntries({ "--un-numeric-spacing": "proportional-nums" })],
+  [/^tabular-nums$/, () => toEntries({ "--un-numeric-spacing": "tabular-nums" })],
+  [/^diagonal-fractions$/, () => toEntries({ "--un-numeric-fraction": "diagonal-fractions" })],
+  [/^stacked-fractions$/, () => toEntries({ "--un-numeric-fraction": "stacked-fractions" })],
   ["normal-nums", { "font-variant-numeric": "normal" }]
 ];
 
@@ -525,7 +555,7 @@ const touchActionBase = {
   "--un-pan-y": rules$1.varEmpty,
   "--un-pinch-zoom": rules$1.varEmpty,
   "--un-touch-action": "var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom)",
-  [variants$1.CONTROL_BYPASS_PSEUDO_CLASS]: ""
+  [core.CONTROL_SHORTCUT_NO_MERGE]: ""
 };
 const touchActions = [
   [/^touch-pan-(x|left|right)$/, ([, d]) => [
@@ -555,10 +585,10 @@ const touchActions = [
 ];
 
 const scrolls = [
-  [/^snap-(x|y|base)$/, ([, d]) => [
+  [/^snap-(x|y|both)$/, ([, d]) => [
     {
       "--un-scroll-snap-strictness": "proximity",
-      [variants$1.CONTROL_BYPASS_PSEUDO_CLASS]: ""
+      [core.CONTROL_SHORTCUT_NO_MERGE]: ""
     },
     {
       "scroll-snap-type": `${d} var(--un-scroll-snap-strictness)`
@@ -581,6 +611,11 @@ const scrolls = [
   [/^scroll-p-?([rltb])-?(-?.+)$/, utils.directionSize("scroll-padding")]
 ];
 
+const placeholders = [
+  [/^\$-placeholder-(.+)$/, utils.colorResolver("color", "placeholder")],
+  [/^\$-placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": utils.handler.bracket.percent.cssvar(opacity) })]
+];
+
 const rules = [
   rules$1.cssVariables,
   cssVariables,
@@ -647,11 +682,10 @@ const rules = [
   hyphens,
   writingModes,
   writingOrientations,
-  caretColors,
-  caretOpacity,
-  accentColors,
-  accentOpacity,
+  carets,
+  accents,
   rules$1.opacity,
+  backgroundBlendModes,
   mixBlendModes,
   rules$1.boxShadows,
   rules$1.outline,
@@ -661,6 +695,7 @@ const rules = [
   rules$1.transitions,
   rules$1.willChange,
   rules$1.contents,
+  placeholders,
   rules$1.questionMark
 ].flat(1);
 
@@ -836,11 +871,26 @@ const variantSpaceAndDivide = (matcher) => {
   }
 };
 
-const variants = [
-  variantSpaceAndDivide,
-  ...variants$1.variants,
-  ...variantColorsScheme
-];
+const placeholderModifier = (input, { theme }) => {
+  const m = input.match(/^(.*)\b(placeholder-)(.+?)$/);
+  if (m) {
+    const [, pre = "", p, body] = m;
+    if (hasColorValue(body, theme) || hasOpacityValue(body)) {
+      return {
+        matcher: `${pre}${p}$-placeholder-${body}`
+      };
+    }
+  }
+};
+function hasColorValue(body, theme) {
+  return !!utils.parseColor(body, theme)?.color;
+}
+function hasOpacityValue(body) {
+  const match = body.match(/^op(?:acity)?-?(.+)$/);
+  if (match && match[1] != null)
+    return utils.handler.bracket.percent.cssvar(match[1]) != null;
+  return false;
+}
 
 const presetWind = (options = {}) => {
   options.dark = options.dark ?? "class";
@@ -852,7 +902,12 @@ const presetWind = (options = {}) => {
     shortcuts: [
       ...containerShortcuts
     ],
-    variants,
+    variants: [
+      placeholderModifier,
+      variantSpaceAndDivide,
+      ...variants.variants(options),
+      ...variantColorsScheme
+    ],
     options
   };
 };

package/dist/index.mjs

@@ -1,9 +1,9 @@
-import { toArray } from '@unocss/core';
+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 { handler, positionMap, parseColor, colorResolver, directionSize, directionMap, variantMatcher, variantParentMatcher } from '@unocss/preset-mini/utils';
-import { CONTROL_BYPASS_PSEUDO_CLASS, variants as variants$1 } from '@unocss/preset-mini/variants';
 
 const animations = [
   [/^keyframes-(.+)$/, ([, name], { theme, constructCSS }) => {
@@ -67,22 +67,6 @@ const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
   }
 };
 const backgroundStyles = [
-  ["bg-blend-multiply", { "background-blend-mode": "multiply" }],
-  ["bg-blend-screen", { "background-blend-mode": "screen" }],
-  ["bg-blend-overlay", { "background-blend-mode": "overlay" }],
-  ["bg-blend-darken", { "background-blend-mode": "darken" }],
-  ["bg-blend-lighten", { "background-blend-mode": "lighten" }],
-  ["bg-blend-color-dodge", { "background-blend-mode": "color-dodge" }],
-  ["bg-blend-color-burn", { "background-blend-mode": "color-burn" }],
-  ["bg-blend-hard-light", { "background-blend-mode": "hard-light" }],
-  ["bg-blend-soft-light", { "background-blend-mode": "soft-light" }],
-  ["bg-blend-difference", { "background-blend-mode": "difference" }],
-  ["bg-blend-exclusion", { "background-blend-mode": "exclusion" }],
-  ["bg-blend-hue", { "background-blend-mode": "hue" }],
-  ["bg-blend-saturation", { "background-blend-mode": "saturation" }],
-  ["bg-blend-color", { "background-blend-mode": "color" }],
-  ["bg-blend-luminosity", { "background-blend-mode": "luminosity" }],
-  ["bg-blend-normal", { "background-blend-mode": "normal" }],
   [/^(?:bg-gradient-)?from-(.+)$/, bgGradientColorResolver("from")],
   [/^(?:bg-gradient-)?to-(.+)$/, bgGradientColorResolver("to")],
   [/^(?:bg-gradient-)?via-(.+)$/, bgGradientColorResolver("via")],
@@ -118,34 +102,28 @@ const backgroundStyles = [
   ["bg-origin-content", { "background-origin": "content-box" }]
 ];
 
-const listStyleProps = ["disc", "circle", "square", "decimal", "zero-decimal", "greek", "roman", "upper-roman", "alpha", "upper-alpha"];
 const listStyle = [
-  [new RegExp(`^list-((?:${listStyleProps.join("|")})(?:-outside|-inside)?)$`), ([, value]) => {
-    const style = value.split(/-outside|-inside/)[0];
-    const position = /outside|inside/.exec(value) ?? [];
-    if (position.length) {
+  [/^list-(disc|circle|square|decimal|zero-decimal|greek|roman|upper-roman|alpha|upper-alpha)(?:-(outside|inside))?$/, ([, style, position]) => {
+    if (position != null) {
       return {
-        "list-style-position": `${position[0]}`,
+        "list-style-position": position,
         "list-style-type": style
       };
     }
     return { "list-style-type": style };
   }],
-  [/^list-(outside|inside)$/, ([, value]) => ({ "list-style-position": value })],
+  ["list-outside", { "list-style-position": "outside" }],
+  ["list-inside", { "list-style-position": "inside" }],
   ["list-none", { "list-style-type": "none" }]
 ];
-const accentOpacity = [
+const accents = [
+  [/^accent-(.+)$/, colorResolver("accent-color", "accent")],
   [/^accent-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-accent-opacity": handler.bracket.percent(d) })]
 ];
-const accentColors = [
-  [/^accent-(.+)$/, colorResolver("accent-color", "accent")]
-];
-const caretOpacity = [
+const carets = [
+  [/^caret-(.+)$/, colorResolver("caret-color", "caret")],
   [/^caret-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-caret-opacity": handler.bracket.percent(d) })]
 ];
-const caretColors = [
-  [/^caret-(.+)$/, colorResolver("caret-color", "caret")]
-];
 const imageRenderings = [
   ["image-render-auto", { "image-rendering": "auto" }],
   ["image-render-edge", { "image-rendering": "crisp-edges" }],
@@ -231,21 +209,19 @@ const containerShortcuts = [
   }]
 ];
 
-const filterContnet = "var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia) var(--un-drop-shadow)";
 const filterBase = {
   "--un-blur": varEmpty,
   "--un-brightness": varEmpty,
   "--un-contrast": varEmpty,
+  "--un-drop-shadow": varEmpty,
   "--un-grayscale": varEmpty,
   "--un-hue-rotate": varEmpty,
   "--un-invert": varEmpty,
   "--un-saturate": varEmpty,
   "--un-sepia": varEmpty,
-  "--un-drop-shadow": varEmpty,
-  "filter": filterContnet,
-  [CONTROL_BYPASS_PSEUDO_CLASS]: ""
+  "--un-filter": "var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)",
+  [CONTROL_SHORTCUT_NO_MERGE]: ""
 };
-const backdropFilterContent = "var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-saturate) var(--un-backdrop-sepia)";
 const backdropFilterBase = {
   "--un-backdrop-blur": varEmpty,
   "--un-backdrop-brightness": varEmpty,
@@ -253,72 +229,87 @@ const backdropFilterBase = {
   "--un-backdrop-grayscale": varEmpty,
   "--un-backdrop-hue-rotate": varEmpty,
   "--un-backdrop-invert": varEmpty,
+  "--un-backdrop-opacity": varEmpty,
   "--un-backdrop-saturate": varEmpty,
   "--un-backdrop-sepia": varEmpty,
-  "-webkit-backdrop-filter": backdropFilterContent,
-  "backdrop-filter": backdropFilterContent,
-  [CONTROL_BYPASS_PSEUDO_CLASS]: ""
+  "--un-backdrop-filter": "var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)",
+  [CONTROL_SHORTCUT_NO_MERGE]: ""
 };
-const percentWithDefault = (defaultValue = "1") => (str) => {
-  const v = str ? handler.bracket.percent(str) : defaultValue;
-  return v && parseFloat(v) <= 1 ? v : void 0;
+const percentWithDefault = (str) => {
+  let v = handler.bracket(str || "");
+  if (v != null)
+    return v;
+  v = str ? handler.percent(str) : "1";
+  if (v != null && parseFloat(v) <= 1)
+    return v;
 };
 const toFilter = (varName, resolver) => ([, b, s], { theme }) => {
   const value = resolver(s, theme);
-  if (value) {
-    return [
-      b ? backdropFilterBase : filterBase,
-      { [`--un-${b || ""}${varName}`]: `${varName}(${value})` }
-    ];
+  if (value != null && value !== "") {
+    if (b) {
+      return [
+        backdropFilterBase,
+        {
+          [`--un-${b}${varName}`]: `${varName}(${value})`,
+          "-webkit-backdrop-filter": "var(--un-backdrop-filter)",
+          "backdrop-filter": "var(--un-backdrop-filter)"
+        }
+      ];
+    } else {
+      return [
+        filterBase,
+        {
+          [`--un-${varName}`]: `${varName}(${value})`,
+          filter: "var(--un-filter)"
+        }
+      ];
+    }
   }
 };
 const filters = [
-  ["filter", filterBase],
-  ["backdrop-filter", backdropFilterBase],
   [/^(backdrop-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || handler.bracket.px(s))],
-  [/^(backdrop-)?brightness-(\d+)$/, toFilter("brightness", (s) => handler.bracket.percent(s))],
-  [/^(backdrop-)?contrast-(\d+)$/, toFilter("contrast", (s) => handler.bracket.percent(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) => {
-    const v = handler.bracket(s) || theme.dropShadow?.[s || "DEFAULT"];
-    if (v)
+    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(?:-(\d+))?$/, toFilter("grayscale", percentWithDefault())],
-  [/^(backdrop-)?hue-rotate-(\d+)$/, toFilter("hue-rotate", (s) => `${handler.bracket.number(s)}deg`)],
-  [/^(backdrop-)?invert(?:-(\d+))?$/, toFilter("invert", percentWithDefault())],
-  [/^(backdrop-)?saturate(?:-(\d+))?$/, toFilter("saturate", percentWithDefault("0"))],
-  [/^(backdrop-)?sepia(?:-(\d+))?$/, toFilter("sepia", percentWithDefault())],
+  [/^(backdrop-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault)],
+  [/^(backdrop-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => handler.bracket.degree(s))],
+  [/^(backdrop-)?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)],
+  [/^filter$/, () => [
+    filterBase,
+    { filter: "var(--un-filter)" }
+  ]],
+  [/^backdrop-filter$/, () => [
+    backdropFilterBase,
+    {
+      "-webkit-backdrop-filter": "var(--un-backdrop-filter)",
+      "backdrop-filter": "var(--un-backdrop-filter)"
+    }
+  ]],
   ["filter-none", { filter: "none" }],
   ["backdrop-filter-none", {
     "-webkit-backdrop-filter": "none",
     "backdrop-filter": "none"
-  }]
-];
-
-const mixBlendModes = [
-  ["mix-blend-multiply", { "mix-blend-mode": "multiply" }],
-  ["mix-blend-screen", { "mix-blend-mode": "screen" }],
-  ["mix-blend-overlay", { "mix-blend-mode": "overlay" }],
-  ["mix-blend-darken", { "mix-blend-mode": "darken" }],
-  ["mix-blend-lighten", { "mix-blend-mode": "lighten" }],
-  ["mix-blend-color-dodge", { "mix-blend-mode": "color-dodge" }],
-  ["mix-blend-color-burn", { "mix-blend-mode": "color-burn" }],
-  ["mix-blend-hard-light", { "mix-blend-mode": "hard-light" }],
-  ["mix-blend-soft-light", { "mix-blend-mode": "soft-light" }],
-  ["mix-blend-difference", { "mix-blend-mode": "difference" }],
-  ["mix-blend-exclusion", { "mix-blend-mode": "exclusion" }],
-  ["mix-blend-hue", { "mix-blend-mode": "hue" }],
-  ["mix-blend-saturation", { "mix-blend-mode": "saturation" }],
-  ["mix-blend-color", { "mix-blend-mode": "color" }],
-  ["mix-blend-luminosity", { "mix-blend-mode": "luminosity" }],
-  ["mix-blend-normal", { "mix-blend-mode": "normal" }]
+  }],
+  [/^(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)`
+  })]
 ];
 
 const spaces = [
   [/^space-?([xy])-?(-?.+)$/, (match) => {
-    const [, direction, size] = match;
-    if (size === "reverse")
-      return { [`--un-space-${direction}-reverse`]: 1 };
+    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];
@@ -329,7 +320,8 @@ const spaces = [
         ...results
       ];
     }
-  }]
+  }],
+  [/^space-?([xy])-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })]
 ];
 
 const textTransforms = [
@@ -396,7 +388,8 @@ const screenReadersAccess = [
 ];
 const isolations = [
   ["isolate", { isolation: "isolate" }],
-  ["isolate-auto", { isolation: "auto" }]
+  ["isolate-auto", { isolation: "auto" }],
+  ["isolation-auto", { isolation: "auto" }]
 ];
 const objectPositions = [
   ["object-cover", { "object-fit": "cover" }],
@@ -404,7 +397,43 @@ const objectPositions = [
   ["object-fill", { "object-fit": "fill" }],
   ["object-scale-down", { "object-fit": "scale-down" }],
   ["object-none", { "object-fit": "none" }],
-  [/^object-([\w]+)$/, ([, s]) => ({ "object-position": positionMap[s] })]
+  [/^object-([-\w]+)$/, ([, s]) => ({ "object-position": positionMap[s] })]
+];
+const backgroundBlendModes = [
+  ["bg-blend-multiply", { "background-blend-mode": "multiply" }],
+  ["bg-blend-screen", { "background-blend-mode": "screen" }],
+  ["bg-blend-overlay", { "background-blend-mode": "overlay" }],
+  ["bg-blend-darken", { "background-blend-mode": "darken" }],
+  ["bg-blend-lighten", { "background-blend-mode": "lighten" }],
+  ["bg-blend-color-dodge", { "background-blend-mode": "color-dodge" }],
+  ["bg-blend-color-burn", { "background-blend-mode": "color-burn" }],
+  ["bg-blend-hard-light", { "background-blend-mode": "hard-light" }],
+  ["bg-blend-soft-light", { "background-blend-mode": "soft-light" }],
+  ["bg-blend-difference", { "background-blend-mode": "difference" }],
+  ["bg-blend-exclusion", { "background-blend-mode": "exclusion" }],
+  ["bg-blend-hue", { "background-blend-mode": "hue" }],
+  ["bg-blend-saturation", { "background-blend-mode": "saturation" }],
+  ["bg-blend-color", { "background-blend-mode": "color" }],
+  ["bg-blend-luminosity", { "background-blend-mode": "luminosity" }],
+  ["bg-blend-normal", { "background-blend-mode": "normal" }]
+];
+const mixBlendModes = [
+  ["mix-blend-multiply", { "mix-blend-mode": "multiply" }],
+  ["mix-blend-screen", { "mix-blend-mode": "screen" }],
+  ["mix-blend-overlay", { "mix-blend-mode": "overlay" }],
+  ["mix-blend-darken", { "mix-blend-mode": "darken" }],
+  ["mix-blend-lighten", { "mix-blend-mode": "lighten" }],
+  ["mix-blend-color-dodge", { "mix-blend-mode": "color-dodge" }],
+  ["mix-blend-color-burn", { "mix-blend-mode": "color-burn" }],
+  ["mix-blend-hard-light", { "mix-blend-mode": "hard-light" }],
+  ["mix-blend-soft-light", { "mix-blend-mode": "soft-light" }],
+  ["mix-blend-difference", { "mix-blend-mode": "difference" }],
+  ["mix-blend-exclusion", { "mix-blend-mode": "exclusion" }],
+  ["mix-blend-hue", { "mix-blend-mode": "hue" }],
+  ["mix-blend-saturation", { "mix-blend-mode": "saturation" }],
+  ["mix-blend-color", { "mix-blend-mode": "color" }],
+  ["mix-blend-luminosity", { "mix-blend-mode": "luminosity" }],
+  ["mix-blend-normal", { "mix-blend-mode": "normal" }]
 ];
 
 const tables = [
@@ -450,25 +479,19 @@ const cssVariables = [[
   }
 ]];
 
-const divideColors = [
-  [/^divide-(.+)$/, colorResolver("border-color", "divide")],
-  [/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": handler.bracket.percent(opacity) })]
-];
-const divideSizes = [
+const divides = [
   [/^divide-?([xy])$/, handlerDivide],
   [/^divide-?([xy])-?(-?.+)$/, handlerDivide],
-  [/^divide-?([xy])-reverse$/, ([, d]) => [[`--un-divide-${d}-reverse`, 1]]]
-];
-const divideStyles = [
+  [/^divide-?([xy])-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" }],
   ["divide-dashed", { "border-style": "dashed" }],
   ["divide-dotted", { "border-style": "dotted" }],
   ["divide-double", { "border-style": "double" }],
   ["divide-none", { "border-style": "none" }]
 ];
-const divides = [divideSizes, divideColors, divideStyles].flat(1);
-function handlerDivide([, a, b]) {
-  const [d, s = "1"] = directionMap[a] ? [a, b] : ["", a];
+function handlerDivide([, d, s = "1"]) {
   const v = handler.bracket.px(s);
   if (v != null) {
     const results = directionMap[d].map((item) => {
@@ -501,18 +524,25 @@ const fontVariantNumericBase = {
   "--un-numeric-figure": varEmpty,
   "--un-numeric-spacing": varEmpty,
   "--un-numeric-fraction": varEmpty,
-  "font-variant-numeric": "var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)",
-  [CONTROL_BYPASS_PSEUDO_CLASS]: ""
+  "--un-font-variant-numeric": "var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)",
+  [CONTROL_SHORTCUT_NO_MERGE]: ""
 };
+const toEntries = (entry) => [
+  fontVariantNumericBase,
+  {
+    ...entry,
+    "font-variant-numeric": "var(--un-font-variant-numeric)"
+  }
+];
 const fontVariantNumeric = [
-  [/^ordinal$/, () => [fontVariantNumericBase, { "--un-ordinal": "ordinal" }]],
-  [/^slashed-zero$/, () => [fontVariantNumericBase, { "--un-slashed-zero": "slashed-zero" }]],
-  [/^lining-nums$/, () => [fontVariantNumericBase, { "--un-numeric-figure": "lining-nums" }]],
-  [/^oldstyle-nums$/, () => [fontVariantNumericBase, { "--un-numeric-figure": "oldstyle-nums" }]],
-  [/^proportional-nums$/, () => [fontVariantNumericBase, { "--un-numeric-spacing": "proportional-nums" }]],
-  [/^tabular-nums$/, () => [fontVariantNumericBase, { "--un-numeric-spacing": "tabular-nums" }]],
-  [/^diagonal-fractions$/, () => [fontVariantNumericBase, { "--un-numeric-fraction": "diagonal-fractions" }]],
-  [/^stacked-fractions$/, () => [fontVariantNumericBase, { "--un-numeric-fraction": "stacked-fractions" }]],
+  [/^ordinal$/, () => toEntries({ "--un-ordinal": "ordinal" })],
+  [/^slashed-zero$/, () => toEntries({ "--un-slashed-zero": "slashed-zero" })],
+  [/^lining-nums$/, () => toEntries({ "--un-numeric-figure": "lining-nums" })],
+  [/^oldstyle-nums$/, () => toEntries({ "--un-numeric-figure": "oldstyle-nums" })],
+  [/^proportional-nums$/, () => toEntries({ "--un-numeric-spacing": "proportional-nums" })],
+  [/^tabular-nums$/, () => toEntries({ "--un-numeric-spacing": "tabular-nums" })],
+  [/^diagonal-fractions$/, () => toEntries({ "--un-numeric-fraction": "diagonal-fractions" })],
+  [/^stacked-fractions$/, () => toEntries({ "--un-numeric-fraction": "stacked-fractions" })],
   ["normal-nums", { "font-variant-numeric": "normal" }]
 ];
 
@@ -521,7 +551,7 @@ const touchActionBase = {
   "--un-pan-y": varEmpty,
   "--un-pinch-zoom": varEmpty,
   "--un-touch-action": "var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom)",
-  [CONTROL_BYPASS_PSEUDO_CLASS]: ""
+  [CONTROL_SHORTCUT_NO_MERGE]: ""
 };
 const touchActions = [
   [/^touch-pan-(x|left|right)$/, ([, d]) => [
@@ -551,10 +581,10 @@ const touchActions = [
 ];
 
 const scrolls = [
-  [/^snap-(x|y|base)$/, ([, d]) => [
+  [/^snap-(x|y|both)$/, ([, d]) => [
     {
       "--un-scroll-snap-strictness": "proximity",
-      [CONTROL_BYPASS_PSEUDO_CLASS]: ""
+      [CONTROL_SHORTCUT_NO_MERGE]: ""
     },
     {
       "scroll-snap-type": `${d} var(--un-scroll-snap-strictness)`
@@ -577,6 +607,11 @@ const scrolls = [
   [/^scroll-p-?([rltb])-?(-?.+)$/, directionSize("scroll-padding")]
 ];
 
+const placeholders = [
+  [/^\$-placeholder-(.+)$/, colorResolver("color", "placeholder")],
+  [/^\$-placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": handler.bracket.percent.cssvar(opacity) })]
+];
+
 const rules = [
   cssVariables$1,
   cssVariables,
@@ -643,11 +678,10 @@ const rules = [
   hyphens,
   writingModes,
   writingOrientations,
-  caretColors,
-  caretOpacity,
-  accentColors,
-  accentOpacity,
+  carets,
+  accents,
   opacity,
+  backgroundBlendModes,
   mixBlendModes,
   boxShadows,
   outline,
@@ -657,6 +691,7 @@ const rules = [
   transitions,
   willChange,
   contents,
+  placeholders,
   questionMark
 ].flat(1);
 
@@ -832,11 +867,26 @@ const variantSpaceAndDivide = (matcher) => {
   }
 };
 
-const variants = [
-  variantSpaceAndDivide,
-  ...variants$1,
-  ...variantColorsScheme
-];
+const placeholderModifier = (input, { theme }) => {
+  const m = input.match(/^(.*)\b(placeholder-)(.+?)$/);
+  if (m) {
+    const [, pre = "", p, body] = m;
+    if (hasColorValue(body, theme) || hasOpacityValue(body)) {
+      return {
+        matcher: `${pre}${p}$-placeholder-${body}`
+      };
+    }
+  }
+};
+function hasColorValue(body, theme) {
+  return !!parseColor(body, theme)?.color;
+}
+function hasOpacityValue(body) {
+  const match = body.match(/^op(?:acity)?-?(.+)$/);
+  if (match && match[1] != null)
+    return handler.bracket.percent.cssvar(match[1]) != null;
+  return false;
+}
 
 const presetWind = (options = {}) => {
   options.dark = options.dark ?? "class";
@@ -848,7 +898,12 @@ const presetWind = (options = {}) => {
     shortcuts: [
       ...containerShortcuts
     ],
-    variants,
+    variants: [
+      placeholderModifier,
+      variantSpaceAndDivide,
+      ...variants(options),
+      ...variantColorsScheme
+    ],
     options
   };
 };

package/package.json

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