@unocss/preset-wind 0.35.2 → 0.36.0

package/dist/index.cjs

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+const presetMini = require('@unocss/preset-mini');
 const core = require('@unocss/core');
 const utils = require('@unocss/preset-mini/utils');
-const theme$1 = require('@unocss/preset-mini/theme');
-const presetMini = require('@unocss/preset-mini');
 const rules$1 = require('@unocss/preset-mini/rules');
+const theme$1 = require('@unocss/preset-mini/theme');
 const variants$1 = require('@unocss/preset-mini/variants');
 
 const animations = [
@@ -32,36 +32,36 @@ ${constructCSS(Object.assign({ animation: `${name} ${duration} ${timing} infinit
   [/^animate-delay-(.+)$/, ([, d], { theme }) => ({ "animation-delay": theme.duration?.[d || "DEFAULT"] ?? utils.handler.bracket.cssvar.time(d) }), { autocomplete: ["animate-delay", "animate-delay-$duration"] }],
   [/^animate-ease(?:-(.+))?$/, ([, d], { theme }) => ({ "animation-timing-function": theme.easing?.[d || "DEFAULT"] ?? utils.handler.bracket.cssvar(d) }), { autocomplete: "animate-delay-$easing" }],
   [
-    /^animate-(?:fill-|mode-|fill-mode-)?(none|forwards|backwards|both|inherit|initial|revert|unset)$/,
+    /^animate-(?:fill-|mode-|fill-mode-)?(none|forwards|backwards|both|inherit|initial|revert|revert-layer|unset)$/,
     ([, d]) => ({ "animation-fill-mode": d }),
     {
       autocomplete: [
         "animate-(fill|mode|fill-mode)",
-        "animate-(fill|mode|fill-mode)-(none|forwards|backwards|both|inherit|initial|revert|unset)",
-        "animate-(none|forwards|backwards|both|inherit|initial|revert|unset)"
+        "animate-(fill|mode|fill-mode)-(none|forwards|backwards|both|inherit|initial|revert|revert-layer|unset)",
+        "animate-(none|forwards|backwards|both|inherit|initial|revert|revert-layer|unset)"
       ]
     }
   ],
   [
-    /^animate-(?:direction-)?(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|unset)$/,
+    /^animate-(?:direction-)?(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|revert-layer|unset)$/,
     ([, d]) => ({ "animation-direction": d }),
     {
       autocomplete: [
         "animate-direction",
-        "animate-direction-(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|unset)",
-        "animate-(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|unset)"
+        "animate-direction-(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|revert-layer|unset)",
+        "animate-(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|revert-layer|unset)"
       ]
     }
   ],
   [/^animate-(?:iteration-|count-|iteration-count-)(.+)$/, ([, d]) => ({ "animation-iteration-count": utils.handler.bracket.cssvar(d) ?? d.replace(/\-/g, ",") }), { autocomplete: ["animate-(iteration|count|iteration-count)", "animate-(iteration|count|iteration-count)-<num>"] }],
   [
-    /^animate-(?:play-|state-|play-state-)?(paused|running|inherit|initial|revert|unset)$/,
+    /^animate-(?:play-|state-|play-state-)?(paused|running|inherit|initial|revert|revert-layer|unset)$/,
     ([, d]) => ({ "animation-play-state": d }),
     {
       autocomplete: [
         "animate-(play|state|play-state)",
-        "animate-(play|state|play-state)-(paused|running|inherit|initial|revert|unset)",
-        "animate-(paused|running|inherit|initial|revert|unset)"
+        "animate-(play|state|play-state)-(paused|running|inherit|initial|revert|revert-layer|unset)",
+        "animate-(paused|running|inherit|initial|revert|revert-layer|unset)"
       ]
     }
   ],
@@ -98,14 +98,17 @@ const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
       };
   }
 };
+const bgUrlRE = /^\[url\(.+\)\]$/;
+const bgLengthRE = /^\[length:.+\]$/;
+const bgPositionRE = /^\[position:.+\]$/;
 const backgroundStyles = [
-  [/^bg-(.*)$/, ([, d]) => {
-    if (/^\[url\((.+)\)\]$/.test(d))
-      return { "--un-url": `${utils.handler.bracket(d)}`, "background-image": "var(--un-url)" };
-    else if (/^\[length:(.+)\]$/.test(d) && utils.handler.bracketOfLength(d) != null)
+  [/^bg-(.+)$/, ([, d]) => {
+    if (bgUrlRE.test(d))
+      return { "--un-url": utils.handler.bracket(d), "background-image": "var(--un-url)" };
+    if (bgLengthRE.test(d) && utils.handler.bracketOfLength(d) != null)
       return { "background-size": utils.handler.bracketOfLength(d).split(" ").map((e) => utils.handler.fraction.auto.px.cssvar(e)).join(" ") };
-    else if (/^\[position:(.+)\]$/.test(d) && utils.handler.bracketOfPosition(d) != null)
-      return { "background-position": utils.handler.bracketOfPosition(d).split(" ").map((e) => utils.handler.fraction.auto.px.cssvar(e)).join(" ") };
+    if (bgPositionRE.test(d) && utils.handler.bracketOfPosition(d) != null)
+      return { "background-position": utils.handler.bracketOfPosition(d).split(" ").map((e) => utils.handler.position.fraction.auto.px.cssvar(e)).join(" ") };
   }],
   [/^bg-gradient-(.+)$/, ([, d]) => ({ "--un-gradient": utils.handler.bracket(d) }), {
     autocomplete: ["bg-gradient", "bg-gradient-(from|to|via)", "bg-gradient-(from|to|via)-$colors", "bg-gradient-(from|to|via)-(op|opacity)", "bg-gradient-(from|to|via)-(op|opacity)-<percent>"]
@@ -294,8 +297,7 @@ const filterBase = {
   "--un-invert": rules$1.varEmpty,
   "--un-saturate": rules$1.varEmpty,
   "--un-sepia": rules$1.varEmpty,
-  "--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]: ""
+  "--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)"
 };
 const backdropFilterBase = {
   "--un-backdrop-blur": rules$1.varEmpty,
@@ -307,8 +309,7 @@ const backdropFilterBase = {
   "--un-backdrop-opacity": rules$1.varEmpty,
   "--un-backdrop-saturate": rules$1.varEmpty,
   "--un-backdrop-sepia": rules$1.varEmpty,
-  "--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]: ""
+  "--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)"
 };
 const percentWithDefault = (str) => {
   let v = utils.handler.bracket.cssvar(str || "");
@@ -322,22 +323,16 @@ const toFilter = (varName, resolver) => ([, b, s], { theme }) => {
   const value = resolver(s, theme) ?? (s === "none" ? "0" : "");
   if (value !== "") {
     if (b) {
-      return [
-        backdropFilterBase,
-        {
-          [`--un-${b}${varName}`]: `${varName}(${value})`,
-          "-webkit-backdrop-filter": "var(--un-backdrop-filter)",
-          "backdrop-filter": "var(--un-backdrop-filter)"
-        }
-      ];
+      return {
+        [`--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)"
-        }
-      ];
+      return {
+        [`--un-${varName}`]: `${varName}(${value})`,
+        filter: "var(--un-filter)"
+      };
     }
   }
 };
@@ -345,23 +340,17 @@ const dropShadowResolver = ([, s], { theme }) => {
   let v = theme.dropShadow?.[s || "DEFAULT"];
   if (v != null) {
     const shadows = utils.colorableShadows(v, "--un-drop-shadow-color");
-    return [
-      filterBase,
-      {
-        "--un-drop-shadow": `drop-shadow(${shadows.join(") drop-shadow(")})`,
-        "filter": "var(--un-filter)"
-      }
-    ];
+    return {
+      "--un-drop-shadow": `drop-shadow(${shadows.join(") drop-shadow(")})`,
+      "filter": "var(--un-filter)"
+    };
   }
   v = utils.handler.bracket.cssvar(s);
   if (v != null) {
-    return [
-      filterBase,
-      {
-        "--un-drop-shadow": `drop-shadow(${v})`,
-        "filter": "var(--un-filter)"
-      }
-    ];
+    return {
+      "--un-drop-shadow": `drop-shadow(${v})`,
+      "filter": "var(--un-filter)"
+    };
   }
 };
 const filters = [
@@ -387,33 +376,17 @@ const filters = [
   }],
   [/^(?:filter-)?drop-shadow-color-(.+)$/, utils.colorResolver("--un-drop-shadow-color", "drop-shadow")],
   [/^(?:filter-)?drop-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-drop-shadow-opacity": utils.handler.bracket.percent(opacity) })],
-  [/^(?:(backdrop-)|filter-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault), {
-    autocomplete: ["(backdrop|filter)-grayscale", "(backdrop|filter)-grayscale-<percent>", "grayscale-<percent>"]
-  }],
+  [/^(?:(backdrop-)|filter-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault), { autocomplete: ["(backdrop|filter)-grayscale", "(backdrop|filter)-grayscale-<percent>", "grayscale-<percent>"] }],
   [/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => utils.handler.bracket.cssvar.degree(s))],
-  [/^(?:(backdrop-)|filter-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault), {
-    autocomplete: ["(backdrop|filter)-invert", "(backdrop|filter)-invert-<percent>", "invert-<percent>"]
-  }],
-  [/^(backdrop-)op(?:acity)-(.+)$/, toFilter("opacity", (s) => utils.handler.bracket.cssvar.percent(s)), {
-    autocomplete: ["backdrop-(op|opacity)", "backdrop-(op|opacity)-<percent>"]
+  [/^(?:(backdrop-)|filter-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault), { autocomplete: ["(backdrop|filter)-invert", "(backdrop|filter)-invert-<percent>", "invert-<percent>"] }],
+  [/^(backdrop-)op(?:acity)-(.+)$/, toFilter("opacity", (s) => utils.handler.bracket.cssvar.percent(s)), { autocomplete: ["backdrop-(op|opacity)", "backdrop-(op|opacity)-<percent>"] }],
+  [/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => utils.handler.bracket.cssvar.percent(s)), { autocomplete: ["(backdrop|filter)-saturate", "(backdrop|filter)-saturate-<percent>", "saturate-<percent>"] }],
+  [/^(?:(backdrop-)|filter-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault), { autocomplete: ["(backdrop|filter)-sepia", "(backdrop|filter)-sepia-<percent>", "sepia-<percent>"] }],
+  ["filter", { filter: "var(--un-filter)" }],
+  ["backdrop-filter", {
+    "-webkit-backdrop-filter": "var(--un-backdrop-filter)",
+    "backdrop-filter": "var(--un-backdrop-filter)"
   }],
-  [/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => utils.handler.bracket.cssvar.percent(s)), {
-    autocomplete: ["(backdrop|filter)-saturate", "(backdrop|filter)-saturate-<percent>", "saturate-<percent>"]
-  }],
-  [/^(?:(backdrop-)|filter-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault), {
-    autocomplete: ["(backdrop|filter)-sepia", "(backdrop|filter)-sepia-<percent>", "sepia-<percent>"]
-  }],
-  [/^filter$/, () => [
-    filterBase,
-    { filter: "var(--un-filter)" }
-  ]],
-  [/^backdrop-filter$/, () => [
-    backdropFilterBase,
-    {
-      "-webkit-backdrop-filter": "var(--un-backdrop-filter)",
-      "backdrop-filter": "var(--un-backdrop-filter)"
-    }
-  ], { autocomplete: "backdrop-filter" }],
   ["filter-none", { filter: "none" }],
   ["backdrop-filter-none", {
     "-webkit-backdrop-filter": "none",
@@ -553,6 +526,7 @@ const mixBlendModes = [
   ["mix-blend-saturation", { "mix-blend-mode": "saturation" }],
   ["mix-blend-color", { "mix-blend-mode": "color" }],
   ["mix-blend-luminosity", { "mix-blend-mode": "luminosity" }],
+  ["mix-blend-plus-lighter", { "mix-blend-mode": "plus-lighter" }],
   ["mix-blend-normal", { "mix-blend-mode": "normal" }]
 ];
 
@@ -1011,6 +985,11 @@ const theme = {
     pointer: "(hover) and (pointer: coarse)",
     mouse: "(hover) and (pointer: fine)",
     hd_color: "(dynamic-range: high)"
+  },
+  preflightBase: {
+    ...rules$1.transformBase,
+    ...filterBase,
+    ...backdropFilterBase
   }
 };
 
@@ -1025,6 +1004,10 @@ const variantColorsScheme = [
   utils.variantParentMatcher("@light", "@media (prefers-color-scheme: light)")
 ];
 
+const variantContrasts = [
+  utils.variantParentMatcher("contrast-more", "@media (prefers-contrast: more)"),
+  utils.variantParentMatcher("contrast-less", "@media (prefers-contrast: less)")
+];
 const variantMotions = [
   utils.variantParentMatcher("motion-reduce", "@media (prefers-reduced-motion: reduce)"),
   utils.variantParentMatcher("motion-safe", "@media (prefers-reduced-motion: no-preference)")
@@ -1067,6 +1050,7 @@ const variants = (options) => [
   placeholderModifier,
   variantSpaceAndDivide,
   ...variants$1.variants(options),
+  ...variantContrasts,
   ...variantOrientations,
   ...variantMotions,
   ...variantCombinators,
@@ -1082,11 +1066,13 @@ const presetWind = (options = {}) => {
     rules,
     shortcuts,
     variants: variants(options),
-    options
+    options,
+    preflights: presetMini.preflights
   };
 };
 
 exports.colors = presetMini.colors;
+exports.preflights = presetMini.preflights;
 exports["default"] = presetWind;
 exports.presetWind = presetWind;
 exports.rules = rules;

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as _unocss_core from '@unocss/core';
 import { Rule, Variant, Preset } from '@unocss/core';
 import * as _unocss_preset_mini from '@unocss/preset-mini';
 import { Theme, PresetMiniOptions } from '@unocss/preset-mini';
-export { Theme, colors } from '@unocss/preset-mini';
+export { Theme, colors, preflights } from '@unocss/preset-mini';
 
 declare const rules: Rule[];
 

package/dist/index.mjs

@@ -1,8 +1,9 @@
+import { preflights } from '@unocss/preset-mini';
+export { colors, preflights } from '@unocss/preset-mini';
 import { toArray, CONTROL_SHORTCUT_NO_MERGE } from '@unocss/core';
 import { handler, positionMap, parseColor, colorToString, colorResolver, resolveBreakpoints, colorableShadows, directionMap, directionSize, variantMatcher, variantParentMatcher, hasParseableColor } from '@unocss/preset-mini/utils';
+import { varEmpty, cssVariables as cssVariables$1, cssProperty, pointerEvents, appearances, positions, insets, zIndexes, orders, grids, floats, margins, boxSizing, displays, aspectRatio, sizes, flex, transforms, cursors, userSelects, resizes, appearance, placements, alignments, justifies, gaps, overflows, textOverflows, whitespaces, breaks, borders, bgColors, svgUtilities, paddings, textAligns, textIndents, verticalAligns, fonts, textTransforms as textTransforms$1, fontStyles, textColors, textDecorations, fontSmoothings, tabSizes, textStrokes, textShadows, opacity, boxShadows, outline, rings, transitions, willChange, contents, questionMark, transformBase } from '@unocss/preset-mini/rules';
 import { theme as theme$1 } from '@unocss/preset-mini/theme';
-export { colors } from '@unocss/preset-mini';
-import { varEmpty, cssVariables as cssVariables$1, cssProperty, pointerEvents, appearances, positions, insets, zIndexes, orders, grids, floats, margins, boxSizing, displays, aspectRatio, sizes, flex, transforms, cursors, userSelects, resizes, appearance, placements, alignments, justifies, gaps, overflows, textOverflows, whitespaces, breaks, borders, bgColors, svgUtilities, paddings, textAligns, textIndents, verticalAligns, fonts, textTransforms as textTransforms$1, fontStyles, textColors, textDecorations, fontSmoothings, tabSizes, textStrokes, textShadows, opacity, boxShadows, outline, rings, transitions, willChange, contents, questionMark } from '@unocss/preset-mini/rules';
 import { variants as variants$1 } from '@unocss/preset-mini/variants';
 
 const animations = [
@@ -28,36 +29,36 @@ ${constructCSS(Object.assign({ animation: `${name} ${duration} ${timing} infinit
   [/^animate-delay-(.+)$/, ([, d], { theme }) => ({ "animation-delay": theme.duration?.[d || "DEFAULT"] ?? handler.bracket.cssvar.time(d) }), { autocomplete: ["animate-delay", "animate-delay-$duration"] }],
   [/^animate-ease(?:-(.+))?$/, ([, d], { theme }) => ({ "animation-timing-function": theme.easing?.[d || "DEFAULT"] ?? handler.bracket.cssvar(d) }), { autocomplete: "animate-delay-$easing" }],
   [
-    /^animate-(?:fill-|mode-|fill-mode-)?(none|forwards|backwards|both|inherit|initial|revert|unset)$/,
+    /^animate-(?:fill-|mode-|fill-mode-)?(none|forwards|backwards|both|inherit|initial|revert|revert-layer|unset)$/,
     ([, d]) => ({ "animation-fill-mode": d }),
     {
       autocomplete: [
         "animate-(fill|mode|fill-mode)",
-        "animate-(fill|mode|fill-mode)-(none|forwards|backwards|both|inherit|initial|revert|unset)",
-        "animate-(none|forwards|backwards|both|inherit|initial|revert|unset)"
+        "animate-(fill|mode|fill-mode)-(none|forwards|backwards|both|inherit|initial|revert|revert-layer|unset)",
+        "animate-(none|forwards|backwards|both|inherit|initial|revert|revert-layer|unset)"
       ]
     }
   ],
   [
-    /^animate-(?:direction-)?(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|unset)$/,
+    /^animate-(?:direction-)?(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|revert-layer|unset)$/,
     ([, d]) => ({ "animation-direction": d }),
     {
       autocomplete: [
         "animate-direction",
-        "animate-direction-(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|unset)",
-        "animate-(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|unset)"
+        "animate-direction-(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|revert-layer|unset)",
+        "animate-(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|revert-layer|unset)"
       ]
     }
   ],
   [/^animate-(?:iteration-|count-|iteration-count-)(.+)$/, ([, d]) => ({ "animation-iteration-count": handler.bracket.cssvar(d) ?? d.replace(/\-/g, ",") }), { autocomplete: ["animate-(iteration|count|iteration-count)", "animate-(iteration|count|iteration-count)-<num>"] }],
   [
-    /^animate-(?:play-|state-|play-state-)?(paused|running|inherit|initial|revert|unset)$/,
+    /^animate-(?:play-|state-|play-state-)?(paused|running|inherit|initial|revert|revert-layer|unset)$/,
     ([, d]) => ({ "animation-play-state": d }),
     {
       autocomplete: [
         "animate-(play|state|play-state)",
-        "animate-(play|state|play-state)-(paused|running|inherit|initial|revert|unset)",
-        "animate-(paused|running|inherit|initial|revert|unset)"
+        "animate-(play|state|play-state)-(paused|running|inherit|initial|revert|revert-layer|unset)",
+        "animate-(paused|running|inherit|initial|revert|revert-layer|unset)"
       ]
     }
   ],
@@ -94,14 +95,17 @@ const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
       };
   }
 };
+const bgUrlRE = /^\[url\(.+\)\]$/;
+const bgLengthRE = /^\[length:.+\]$/;
+const bgPositionRE = /^\[position:.+\]$/;
 const backgroundStyles = [
-  [/^bg-(.*)$/, ([, d]) => {
-    if (/^\[url\((.+)\)\]$/.test(d))
-      return { "--un-url": `${handler.bracket(d)}`, "background-image": "var(--un-url)" };
-    else if (/^\[length:(.+)\]$/.test(d) && handler.bracketOfLength(d) != null)
+  [/^bg-(.+)$/, ([, d]) => {
+    if (bgUrlRE.test(d))
+      return { "--un-url": handler.bracket(d), "background-image": "var(--un-url)" };
+    if (bgLengthRE.test(d) && handler.bracketOfLength(d) != null)
       return { "background-size": handler.bracketOfLength(d).split(" ").map((e) => handler.fraction.auto.px.cssvar(e)).join(" ") };
-    else if (/^\[position:(.+)\]$/.test(d) && handler.bracketOfPosition(d) != null)
-      return { "background-position": handler.bracketOfPosition(d).split(" ").map((e) => handler.fraction.auto.px.cssvar(e)).join(" ") };
+    if (bgPositionRE.test(d) && handler.bracketOfPosition(d) != null)
+      return { "background-position": handler.bracketOfPosition(d).split(" ").map((e) => handler.position.fraction.auto.px.cssvar(e)).join(" ") };
   }],
   [/^bg-gradient-(.+)$/, ([, d]) => ({ "--un-gradient": handler.bracket(d) }), {
     autocomplete: ["bg-gradient", "bg-gradient-(from|to|via)", "bg-gradient-(from|to|via)-$colors", "bg-gradient-(from|to|via)-(op|opacity)", "bg-gradient-(from|to|via)-(op|opacity)-<percent>"]
@@ -290,8 +294,7 @@ const filterBase = {
   "--un-invert": varEmpty,
   "--un-saturate": varEmpty,
   "--un-sepia": varEmpty,
-  "--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]: ""
+  "--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)"
 };
 const backdropFilterBase = {
   "--un-backdrop-blur": varEmpty,
@@ -303,8 +306,7 @@ const backdropFilterBase = {
   "--un-backdrop-opacity": varEmpty,
   "--un-backdrop-saturate": varEmpty,
   "--un-backdrop-sepia": varEmpty,
-  "--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]: ""
+  "--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)"
 };
 const percentWithDefault = (str) => {
   let v = handler.bracket.cssvar(str || "");
@@ -318,22 +320,16 @@ const toFilter = (varName, resolver) => ([, b, s], { theme }) => {
   const value = resolver(s, theme) ?? (s === "none" ? "0" : "");
   if (value !== "") {
     if (b) {
-      return [
-        backdropFilterBase,
-        {
-          [`--un-${b}${varName}`]: `${varName}(${value})`,
-          "-webkit-backdrop-filter": "var(--un-backdrop-filter)",
-          "backdrop-filter": "var(--un-backdrop-filter)"
-        }
-      ];
+      return {
+        [`--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)"
-        }
-      ];
+      return {
+        [`--un-${varName}`]: `${varName}(${value})`,
+        filter: "var(--un-filter)"
+      };
     }
   }
 };
@@ -341,23 +337,17 @@ const dropShadowResolver = ([, s], { theme }) => {
   let v = theme.dropShadow?.[s || "DEFAULT"];
   if (v != null) {
     const shadows = colorableShadows(v, "--un-drop-shadow-color");
-    return [
-      filterBase,
-      {
-        "--un-drop-shadow": `drop-shadow(${shadows.join(") drop-shadow(")})`,
-        "filter": "var(--un-filter)"
-      }
-    ];
+    return {
+      "--un-drop-shadow": `drop-shadow(${shadows.join(") drop-shadow(")})`,
+      "filter": "var(--un-filter)"
+    };
   }
   v = handler.bracket.cssvar(s);
   if (v != null) {
-    return [
-      filterBase,
-      {
-        "--un-drop-shadow": `drop-shadow(${v})`,
-        "filter": "var(--un-filter)"
-      }
-    ];
+    return {
+      "--un-drop-shadow": `drop-shadow(${v})`,
+      "filter": "var(--un-filter)"
+    };
   }
 };
 const filters = [
@@ -383,33 +373,17 @@ const filters = [
   }],
   [/^(?:filter-)?drop-shadow-color-(.+)$/, colorResolver("--un-drop-shadow-color", "drop-shadow")],
   [/^(?:filter-)?drop-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-drop-shadow-opacity": handler.bracket.percent(opacity) })],
-  [/^(?:(backdrop-)|filter-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault), {
-    autocomplete: ["(backdrop|filter)-grayscale", "(backdrop|filter)-grayscale-<percent>", "grayscale-<percent>"]
-  }],
+  [/^(?:(backdrop-)|filter-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault), { autocomplete: ["(backdrop|filter)-grayscale", "(backdrop|filter)-grayscale-<percent>", "grayscale-<percent>"] }],
   [/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => handler.bracket.cssvar.degree(s))],
-  [/^(?:(backdrop-)|filter-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault), {
-    autocomplete: ["(backdrop|filter)-invert", "(backdrop|filter)-invert-<percent>", "invert-<percent>"]
-  }],
-  [/^(backdrop-)op(?:acity)-(.+)$/, toFilter("opacity", (s) => handler.bracket.cssvar.percent(s)), {
-    autocomplete: ["backdrop-(op|opacity)", "backdrop-(op|opacity)-<percent>"]
-  }],
-  [/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => handler.bracket.cssvar.percent(s)), {
-    autocomplete: ["(backdrop|filter)-saturate", "(backdrop|filter)-saturate-<percent>", "saturate-<percent>"]
+  [/^(?:(backdrop-)|filter-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault), { autocomplete: ["(backdrop|filter)-invert", "(backdrop|filter)-invert-<percent>", "invert-<percent>"] }],
+  [/^(backdrop-)op(?:acity)-(.+)$/, toFilter("opacity", (s) => handler.bracket.cssvar.percent(s)), { autocomplete: ["backdrop-(op|opacity)", "backdrop-(op|opacity)-<percent>"] }],
+  [/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => handler.bracket.cssvar.percent(s)), { autocomplete: ["(backdrop|filter)-saturate", "(backdrop|filter)-saturate-<percent>", "saturate-<percent>"] }],
+  [/^(?:(backdrop-)|filter-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault), { autocomplete: ["(backdrop|filter)-sepia", "(backdrop|filter)-sepia-<percent>", "sepia-<percent>"] }],
+  ["filter", { filter: "var(--un-filter)" }],
+  ["backdrop-filter", {
+    "-webkit-backdrop-filter": "var(--un-backdrop-filter)",
+    "backdrop-filter": "var(--un-backdrop-filter)"
   }],
-  [/^(?:(backdrop-)|filter-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault), {
-    autocomplete: ["(backdrop|filter)-sepia", "(backdrop|filter)-sepia-<percent>", "sepia-<percent>"]
-  }],
-  [/^filter$/, () => [
-    filterBase,
-    { filter: "var(--un-filter)" }
-  ]],
-  [/^backdrop-filter$/, () => [
-    backdropFilterBase,
-    {
-      "-webkit-backdrop-filter": "var(--un-backdrop-filter)",
-      "backdrop-filter": "var(--un-backdrop-filter)"
-    }
-  ], { autocomplete: "backdrop-filter" }],
   ["filter-none", { filter: "none" }],
   ["backdrop-filter-none", {
     "-webkit-backdrop-filter": "none",
@@ -549,6 +523,7 @@ const mixBlendModes = [
   ["mix-blend-saturation", { "mix-blend-mode": "saturation" }],
   ["mix-blend-color", { "mix-blend-mode": "color" }],
   ["mix-blend-luminosity", { "mix-blend-mode": "luminosity" }],
+  ["mix-blend-plus-lighter", { "mix-blend-mode": "plus-lighter" }],
   ["mix-blend-normal", { "mix-blend-mode": "normal" }]
 ];
 
@@ -1007,6 +982,11 @@ const theme = {
     pointer: "(hover) and (pointer: coarse)",
     mouse: "(hover) and (pointer: fine)",
     hd_color: "(dynamic-range: high)"
+  },
+  preflightBase: {
+    ...transformBase,
+    ...filterBase,
+    ...backdropFilterBase
   }
 };
 
@@ -1021,6 +1001,10 @@ const variantColorsScheme = [
   variantParentMatcher("@light", "@media (prefers-color-scheme: light)")
 ];
 
+const variantContrasts = [
+  variantParentMatcher("contrast-more", "@media (prefers-contrast: more)"),
+  variantParentMatcher("contrast-less", "@media (prefers-contrast: less)")
+];
 const variantMotions = [
   variantParentMatcher("motion-reduce", "@media (prefers-reduced-motion: reduce)"),
   variantParentMatcher("motion-safe", "@media (prefers-reduced-motion: no-preference)")
@@ -1063,6 +1047,7 @@ const variants = (options) => [
   placeholderModifier,
   variantSpaceAndDivide,
   ...variants$1(options),
+  ...variantContrasts,
   ...variantOrientations,
   ...variantMotions,
   ...variantCombinators,
@@ -1078,7 +1063,8 @@ const presetWind = (options = {}) => {
     rules,
     shortcuts,
     variants: variants(options),
-    options
+    options,
+    preflights
   };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-wind",
-  "version": "0.35.2",
+  "version": "0.36.0",
   "description": "Tailwind / Windi CSS compact preset for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -35,8 +35,8 @@
     "*.css"
   ],
   "dependencies": {
-    "@unocss/core": "0.35.2",
-    "@unocss/preset-mini": "0.35.2"
+    "@unocss/core": "0.36.0",
+    "@unocss/preset-mini": "0.36.0"
   },
   "scripts": {
     "build": "unbuild",