npm - @unocss/preset-wind - Versions diffs - 0.20.2 → 0.21.2 - Mend

@unocss/preset-wind 0.20.2 → 0.21.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.cjs CHANGED Viewed

@@ -2,14 +2,20 @@
 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 }) => {
+    const kf = theme.animation?.keyframes?.[name];
+    if (kf)
+      return `@keyframes ${name}${kf}
+${constructCSS({ animation: `${name}` })}`;
+  }],
   [/^animate-(.+)$/, ([, name], { theme, constructCSS }) => {
     const kf = theme.animation?.keyframes?.[name];
     if (kf) {
@@ -20,15 +26,15 @@ const animations = [
 ${constructCSS(Object.assign({ animation: `${name} ${duration} ${timing} infinite` }, props))}`;
     }
   }],
-  [/^animate(?:-duration)?-((.+)(?:(s|ms)?))$/, ([, d]) => ({ "animation-duration": utils.handler.bracket.time(d.replace(/-duration/, "")) })],
-  [/^animate-delay-((.+)(?:(s|ms)?))$/, ([, d]) => ({ "animation-delay": utils.handler.bracket.time(d) })],
+  [/^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-(?: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": d.replace(/\-/g, ", ") })],
+  [/^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-none", { animation: "none" }]
@@ -64,107 +70,64 @@ const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
       };
   }
 };
-const bgGradientDirections = {
-  t: "top",
-  tr: "top right",
-  r: "right",
-  br: "bottom right",
-  b: "bottom",
-  bl: "bottom left",
-  l: "left",
-  tl: "top left"
-};
 const backgroundStyles = [
-  ["bg-fixed", { "background-attachment": "fixed" }],
-  ["bg-local", { "background-attachment": "local" }],
-  ["bg-scroll", { "background-attachment": "scroll" }],
-  ["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-clip-border", { "-webkit-background-clip": "border-box", "background-attachment": "border-box" }],
-  ["bg-clip-content", { "-webkit-background-clip": "content-box", "background-attachment": "content-box" }],
-  ["bg-clip-padding", { "-webkit-background-clip": "padding-box", "background-attachment": "padding-box" }],
-  ["bg-clip-text", { "-webkit-background-clip": "text", "background-attachment": "text" }],
   [/^(?: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-to-([trbl]{1,2})$/, ([, d]) => {
-    const v = bgGradientDirections[d];
-    if (v)
-      return { "background-image": `linear-gradient(to ${v}, var(--un-gradient-stops))` };
+  [/^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))` };
   }],
   ["bg-none", { "background-image": "none" }],
-  ["bg-origin-border", { "background-origin": "border-box" }],
-  ["bg-origin-padding", { "background-origin": "padding-box" }],
-  ["bg-origin-content", { "background-origin": "content-box" }],
-  ["bg-bottom", { "background-position": "bottom" }],
-  ["bg-center", { "background-position": "center" }],
-  ["bg-left", { "background-position": "left" }],
-  ["bg-left-bottom", { "background-position": "left bottom" }],
-  ["bg-left-top", { "background-position": "left top" }],
-  ["bg-right", { "background-position": "right" }],
-  ["bg-right-bottom", { "background-position": "right bottom" }],
-  ["bg-right-top", { "background-position": "right top" }],
-  ["bg-top", { "background-position": "top" }],
+  ["box-decoration-slice", { "box-decoration-break": "slice" }],
+  ["box-decoration-clone", { "box-decoration-break": "clone" }],
+  ["bg-auto", { "background-size": "auto" }],
+  ["bg-cover", { "background-size": "cover" }],
+  ["bg-contain", { "background-size": "contain" }],
+  ["bg-fixed", { "background-attachment": "fixed" }],
+  ["bg-local", { "background-attachment": "local" }],
+  ["bg-scroll", { "background-attachment": "scroll" }],
+  ["bg-clip-border", { "-webkit-background-clip": "border-box", "background-attachment": "border-box" }],
+  ["bg-clip-content", { "-webkit-background-clip": "content-box", "background-attachment": "content-box" }],
+  ["bg-clip-padding", { "-webkit-background-clip": "padding-box", "background-attachment": "padding-box" }],
+  ["bg-clip-text", { "-webkit-background-clip": "text", "background-attachment": "text" }],
+  [/^bg-([-\w]{3,})$/, ([, s]) => ({ "background-position": utils.positionMap[s] })],
   ["bg-repeat", { "background-repeat": "repeat" }],
   ["bg-no-repeat", { "background-repeat": "no-repeat" }],
   ["bg-repeat-x", { "background-position": "repeat-x" }],
   ["bg-repeat-y", { "background-position": "repeat-y" }],
   ["bg-repeat-round", { "background-position": "round" }],
   ["bg-repeat-space", { "background-position": "space" }],
-  ["bg-auto", { "background-size": "auto" }],
-  ["bg-cover", { "background-size": "cover" }],
-  ["bg-contain", { "background-size": "contain" }]
+  ["bg-origin-border", { "background-origin": "border-box" }],
+  ["bg-origin-padding", { "background-origin": "padding-box" }],
+  ["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 boxDecorationBreaks = [
-  ["decoration-slice", { "box-decoration-break": "slice" }],
-  ["decoration-clone", { "box-decoration-break": "clone" }]
-];
-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" }],
@@ -176,18 +139,15 @@ const imageRenderings = [
     ["image-rendering", "pixelated"]
   ]]
 ];
-const overflowValues = [
-  "auto",
-  "hidden",
-  "visible",
-  "scroll",
-  "contain"
-];
 const overscrolls = [
-  [/^overscroll-(.+)$/, ([, v]) => overflowValues.includes(v) ? { "overscroll-behavior": v } : void 0],
+  ["overscroll-auto", { "overscroll-behavior": "auto" }],
+  ["overscroll-contain", { "overscroll-behavior": "contain" }],
   ["overscroll-none", { "overscroll-behavior": "none" }],
-  [/^overscroll-([xy])-(.+)$/, ([, d, v]) => overflowValues.includes(v) ? { [`overscroll-behavior-${d}`]: v } : void 0],
+  ["overscroll-x-auto", { "overscroll-behavior-x": "auto" }],
+  ["overscroll-x-contain", { "overscroll-behavior-x": "contain" }],
   ["overscroll-x-none", { "overscroll-behavior-x": "none" }],
+  ["overscroll-y-auto", { "overscroll-behavior-y": "auto" }],
+  ["overscroll-y-contain", { "overscroll-behavior-y": "contain" }],
   ["overscroll-y-none", { "overscroll-behavior-y": "none" }]
 ];
 const scrollBehaviors = [
@@ -253,21 +213,21 @@ 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 filterContnet = "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)";
 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]: ""
+  [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
 };
-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 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-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)";
 const backdropFilterBase = {
   "--un-backdrop-blur": rules$1.varEmpty,
   "--un-backdrop-brightness": rules$1.varEmpty,
@@ -275,19 +235,24 @@ 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]: ""
+  [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
 };
-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) {
+  if (value != null && value !== "") {
     return [
       b ? backdropFilterBase : filterBase,
       { [`--un-${b || ""}${varName}`]: `${varName}(${value})` }
@@ -298,49 +263,37 @@ 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-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-color-light", { "mix-blend-mode": "color-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];
@@ -351,7 +304,8 @@ const spaces = [
         ...results
       ];
     }
-  }]
+  }],
+  [/^space-?([xy])-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })]
 ];
 const textTransforms = [
@@ -418,7 +372,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" }],
@@ -426,17 +381,43 @@ const objectPositions = [
   ["object-fill", { "object-fit": "fill" }],
   ["object-scale-down", { "object-fit": "scale-down" }],
   ["object-none", { "object-fit": "none" }],
-  ["object-center", { "object-position": "center" }],
-  ["object-bottom", { "object-position": "bottom" }],
-  ["object-top", { "object-position": "top" }],
-  ["object-right", { "object-position": "right" }],
-  ["object-left", { "object-position": "left" }],
-  ["object-lb", { "object-position": "left bottom" }],
-  ["object-lt", { "object-position": "left top" }],
-  ["object-rb", { "object-position": "right bottom" }],
-  ["object-rt", { "object-position": "right top" }],
-  ["object-cb", { "object-position": "center bottom" }],
-  ["object-ct", { "object-position": "center top" }]
+  [/^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 = [
@@ -482,25 +463,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) => {
@@ -534,7 +509,7 @@ const fontVariantNumericBase = {
   "--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]: ""
+  [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
 };
 const fontVariantNumeric = [
   [/^ordinal$/, () => [fontVariantNumericBase, { "--un-ordinal": "ordinal" }]],
@@ -553,7 +528,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]: ""
+  [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
 };
 const touchActions = [
   [/^touch-pan-(x|left|right)$/, ([, d]) => [
@@ -583,10 +558,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]: ""
+      [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
     },
     {
       "scroll-snap-type": `${d} var(--un-scroll-snap-strictness)`
@@ -609,6 +584,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,
@@ -655,7 +635,6 @@ const rules = [
   rules$1.breaks,
   rules$1.borders,
   rules$1.bgColors,
-  boxDecorationBreaks,
   backgroundStyles,
   rules$1.svgUtilities,
   objectPositions,
@@ -676,11 +655,10 @@ const rules = [
   hyphens,
   writingModes,
   writingOrientations,
-  caretColors,
-  caretOpacity,
-  accentColors,
-  accentOpacity,
+  carets,
+  accents,
   rules$1.opacity,
+  backgroundBlendModes,
   mixBlendModes,
   rules$1.boxShadows,
   rules$1.outline,
@@ -690,6 +668,7 @@ const rules = [
   rules$1.transitions,
   rules$1.willChange,
   rules$1.contents,
+  placeholders,
   rules$1.questionMark
 ].flat(1);
@@ -854,13 +833,37 @@ const variantColorsScheme = [
   utils.variantParentMatcher("@light", "@media (prefers-color-scheme: light)")
 ];
-const variantFilePseudoElement = utils.variantMatcher("file", (input) => `${input}::file-selector-button`);
+const variantSpaceAndDivide = (matcher) => {
+  if (/^space-?([xy])-?(-?.+)$/.test(matcher) || /^divide-/.test(matcher)) {
+    return {
+      matcher,
+      selector: (input) => {
+        return `${input}>:not([hidden])~:not([hidden])`;
+      }
+    };
+  }
+};
-const variants = [
-  ...variants$1.variants,
-  variantFilePseudoElement,
-  ...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";
@@ -872,7 +875,12 @@ const presetWind = (options = {}) => {
     shortcuts: [
       ...containerShortcuts
     ],
-    variants,
+    variants: [
+      placeholderModifier,
+      variantSpaceAndDivide,
+      ...variants.variants(options),
+      ...variantColorsScheme
+    ],
     options
   };
 };

package/dist/index.mjs CHANGED Viewed

@@ -1,11 +1,17 @@
+import { CONTROL_BYPASS_PSEUDO_CLASS, variants } from '@unocss/preset-mini/variants';
 import { toArray } 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, 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';
+import { handler, positionMap, parseColor, colorResolver, directionSize, directionMap, variantMatcher, variantParentMatcher } from '@unocss/preset-mini/utils';
 const animations = [
+  [/^keyframes-(.+)$/, ([, name], { theme, constructCSS }) => {
+    const kf = theme.animation?.keyframes?.[name];
+    if (kf)
+      return `@keyframes ${name}${kf}
+${constructCSS({ animation: `${name}` })}`;
+  }],
   [/^animate-(.+)$/, ([, name], { theme, constructCSS }) => {
     const kf = theme.animation?.keyframes?.[name];
     if (kf) {
@@ -16,15 +22,15 @@ const animations = [
 ${constructCSS(Object.assign({ animation: `${name} ${duration} ${timing} infinite` }, props))}`;
     }
   }],
-  [/^animate(?:-duration)?-((.+)(?:(s|ms)?))$/, ([, d]) => ({ "animation-duration": handler.bracket.time(d.replace(/-duration/, "")) })],
-  [/^animate-delay-((.+)(?:(s|ms)?))$/, ([, d]) => ({ "animation-delay": handler.bracket.time(d) })],
+  [/^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-(?: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": d.replace(/\-/g, ", ") })],
+  [/^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-none", { animation: "none" }]
@@ -60,107 +66,64 @@ const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
       };
   }
 };
-const bgGradientDirections = {
-  t: "top",
-  tr: "top right",
-  r: "right",
-  br: "bottom right",
-  b: "bottom",
-  bl: "bottom left",
-  l: "left",
-  tl: "top left"
-};
 const backgroundStyles = [
-  ["bg-fixed", { "background-attachment": "fixed" }],
-  ["bg-local", { "background-attachment": "local" }],
-  ["bg-scroll", { "background-attachment": "scroll" }],
-  ["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-clip-border", { "-webkit-background-clip": "border-box", "background-attachment": "border-box" }],
-  ["bg-clip-content", { "-webkit-background-clip": "content-box", "background-attachment": "content-box" }],
-  ["bg-clip-padding", { "-webkit-background-clip": "padding-box", "background-attachment": "padding-box" }],
-  ["bg-clip-text", { "-webkit-background-clip": "text", "background-attachment": "text" }],
   [/^(?: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-to-([trbl]{1,2})$/, ([, d]) => {
-    const v = bgGradientDirections[d];
-    if (v)
-      return { "background-image": `linear-gradient(to ${v}, var(--un-gradient-stops))` };
+  [/^bg-gradient-to-([rltb]{1,2})$/, ([, d]) => {
+    if (d in positionMap)
+      return { "background-image": `linear-gradient(to ${positionMap[d]}, var(--un-gradient-stops))` };
   }],
   ["bg-none", { "background-image": "none" }],
-  ["bg-origin-border", { "background-origin": "border-box" }],
-  ["bg-origin-padding", { "background-origin": "padding-box" }],
-  ["bg-origin-content", { "background-origin": "content-box" }],
-  ["bg-bottom", { "background-position": "bottom" }],
-  ["bg-center", { "background-position": "center" }],
-  ["bg-left", { "background-position": "left" }],
-  ["bg-left-bottom", { "background-position": "left bottom" }],
-  ["bg-left-top", { "background-position": "left top" }],
-  ["bg-right", { "background-position": "right" }],
-  ["bg-right-bottom", { "background-position": "right bottom" }],
-  ["bg-right-top", { "background-position": "right top" }],
-  ["bg-top", { "background-position": "top" }],
+  ["box-decoration-slice", { "box-decoration-break": "slice" }],
+  ["box-decoration-clone", { "box-decoration-break": "clone" }],
+  ["bg-auto", { "background-size": "auto" }],
+  ["bg-cover", { "background-size": "cover" }],
+  ["bg-contain", { "background-size": "contain" }],
+  ["bg-fixed", { "background-attachment": "fixed" }],
+  ["bg-local", { "background-attachment": "local" }],
+  ["bg-scroll", { "background-attachment": "scroll" }],
+  ["bg-clip-border", { "-webkit-background-clip": "border-box", "background-attachment": "border-box" }],
+  ["bg-clip-content", { "-webkit-background-clip": "content-box", "background-attachment": "content-box" }],
+  ["bg-clip-padding", { "-webkit-background-clip": "padding-box", "background-attachment": "padding-box" }],
+  ["bg-clip-text", { "-webkit-background-clip": "text", "background-attachment": "text" }],
+  [/^bg-([-\w]{3,})$/, ([, s]) => ({ "background-position": positionMap[s] })],
   ["bg-repeat", { "background-repeat": "repeat" }],
   ["bg-no-repeat", { "background-repeat": "no-repeat" }],
   ["bg-repeat-x", { "background-position": "repeat-x" }],
   ["bg-repeat-y", { "background-position": "repeat-y" }],
   ["bg-repeat-round", { "background-position": "round" }],
   ["bg-repeat-space", { "background-position": "space" }],
-  ["bg-auto", { "background-size": "auto" }],
-  ["bg-cover", { "background-size": "cover" }],
-  ["bg-contain", { "background-size": "contain" }]
+  ["bg-origin-border", { "background-origin": "border-box" }],
+  ["bg-origin-padding", { "background-origin": "padding-box" }],
+  ["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 boxDecorationBreaks = [
-  ["decoration-slice", { "box-decoration-break": "slice" }],
-  ["decoration-clone", { "box-decoration-break": "clone" }]
-];
-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" }],
@@ -172,18 +135,15 @@ const imageRenderings = [
     ["image-rendering", "pixelated"]
   ]]
 ];
-const overflowValues = [
-  "auto",
-  "hidden",
-  "visible",
-  "scroll",
-  "contain"
-];
 const overscrolls = [
-  [/^overscroll-(.+)$/, ([, v]) => overflowValues.includes(v) ? { "overscroll-behavior": v } : void 0],
+  ["overscroll-auto", { "overscroll-behavior": "auto" }],
+  ["overscroll-contain", { "overscroll-behavior": "contain" }],
   ["overscroll-none", { "overscroll-behavior": "none" }],
-  [/^overscroll-([xy])-(.+)$/, ([, d, v]) => overflowValues.includes(v) ? { [`overscroll-behavior-${d}`]: v } : void 0],
+  ["overscroll-x-auto", { "overscroll-behavior-x": "auto" }],
+  ["overscroll-x-contain", { "overscroll-behavior-x": "contain" }],
   ["overscroll-x-none", { "overscroll-behavior-x": "none" }],
+  ["overscroll-y-auto", { "overscroll-behavior-y": "auto" }],
+  ["overscroll-y-contain", { "overscroll-behavior-y": "contain" }],
   ["overscroll-y-none", { "overscroll-behavior-y": "none" }]
 ];
 const scrollBehaviors = [
@@ -249,21 +209,21 @@ 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 filterContnet = "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)";
 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]: ""
 };
-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 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-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)";
 const backdropFilterBase = {
   "--un-backdrop-blur": varEmpty,
   "--un-backdrop-brightness": varEmpty,
@@ -271,19 +231,24 @@ 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]: ""
 };
-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) {
+  if (value != null && value !== "") {
     return [
       b ? backdropFilterBase : filterBase,
       { [`--un-${b || ""}${varName}`]: `${varName}(${value})` }
@@ -294,49 +259,37 @@ 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-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-color-light", { "mix-blend-mode": "color-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];
@@ -347,7 +300,8 @@ const spaces = [
         ...results
       ];
     }
-  }]
+  }],
+  [/^space-?([xy])-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })]
 ];
 const textTransforms = [
@@ -414,7 +368,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" }],
@@ -422,17 +377,43 @@ const objectPositions = [
   ["object-fill", { "object-fit": "fill" }],
   ["object-scale-down", { "object-fit": "scale-down" }],
   ["object-none", { "object-fit": "none" }],
-  ["object-center", { "object-position": "center" }],
-  ["object-bottom", { "object-position": "bottom" }],
-  ["object-top", { "object-position": "top" }],
-  ["object-right", { "object-position": "right" }],
-  ["object-left", { "object-position": "left" }],
-  ["object-lb", { "object-position": "left bottom" }],
-  ["object-lt", { "object-position": "left top" }],
-  ["object-rb", { "object-position": "right bottom" }],
-  ["object-rt", { "object-position": "right top" }],
-  ["object-cb", { "object-position": "center bottom" }],
-  ["object-ct", { "object-position": "center top" }]
+  [/^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 = [
@@ -478,25 +459,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) => {
@@ -579,7 +554,7 @@ const touchActions = [
 ];
 const scrolls = [
-  [/^snap-(x|y|base)$/, ([, d]) => [
+  [/^snap-(x|y|both)$/, ([, d]) => [
     {
       "--un-scroll-snap-strictness": "proximity",
       [CONTROL_BYPASS_PSEUDO_CLASS]: ""
@@ -605,6 +580,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,
@@ -651,7 +631,6 @@ const rules = [
   breaks,
   borders,
   bgColors,
-  boxDecorationBreaks,
   backgroundStyles,
   svgUtilities,
   objectPositions,
@@ -672,11 +651,10 @@ const rules = [
   hyphens,
   writingModes,
   writingOrientations,
-  caretColors,
-  caretOpacity,
-  accentColors,
-  accentOpacity,
+  carets,
+  accents,
   opacity,
+  backgroundBlendModes,
   mixBlendModes,
   boxShadows,
   outline,
@@ -686,6 +664,7 @@ const rules = [
   transitions,
   willChange,
   contents,
+  placeholders,
   questionMark
 ].flat(1);
@@ -850,13 +829,37 @@ const variantColorsScheme = [
   variantParentMatcher("@light", "@media (prefers-color-scheme: light)")
 ];
-const variantFilePseudoElement = variantMatcher("file", (input) => `${input}::file-selector-button`);
+const variantSpaceAndDivide = (matcher) => {
+  if (/^space-?([xy])-?(-?.+)$/.test(matcher) || /^divide-/.test(matcher)) {
+    return {
+      matcher,
+      selector: (input) => {
+        return `${input}>:not([hidden])~:not([hidden])`;
+      }
+    };
+  }
+};
-const variants = [
-  ...variants$1,
-  variantFilePseudoElement,
-  ...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";
@@ -868,7 +871,12 @@ const presetWind = (options = {}) => {
     shortcuts: [
       ...containerShortcuts
     ],
-    variants,
+    variants: [
+      placeholderModifier,
+      variantSpaceAndDivide,
+      ...variants(options),
+      ...variantColorsScheme
+    ],
     options
   };
 };

package/package.json CHANGED Viewed

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