@unocss/preset-wind 0.35.4 → 0.37.1

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 = [
@@ -150,10 +150,10 @@ const backgroundStyles = [
   ["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-clip-border", { "-webkit-background-clip": "border-box", "background-clip": "border-box" }],
+  ["bg-clip-content", { "-webkit-background-clip": "content-box", "background-clip": "content-box" }],
+  ["bg-clip-padding", { "-webkit-background-clip": "padding-box", "background-clip": "padding-box" }],
+  ["bg-clip-text", { "-webkit-background-clip": "text", "background-clip": "text" }],
   [/^bg-([-\w]{3,})$/, ([, s]) => ({ "background-position": utils.positionMap[s] })],
   ["bg-repeat", { "background-repeat": "repeat" }],
   ["bg-no-repeat", { "background-repeat": "no-repeat" }],
@@ -297,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,
@@ -310,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 || "");
@@ -325,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)"
+      };
     }
   }
 };
@@ -348,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 = [
@@ -390,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",
@@ -560,6 +530,10 @@ const mixBlendModes = [
   ["mix-blend-normal", { "mix-blend-mode": "normal" }]
 ];
 
+const borderSpacingBase = {
+  "--un-border-spacing-x": 0,
+  "--un-border-spacing-y": 0
+};
 const tables = [
   ["inline-table", { display: "inline-table" }],
   ["table", { display: "table" }],
@@ -573,7 +547,25 @@ const tables = [
   ["table-row-group", { display: "table-row-group" }],
   ["border-collapse", { "border-collapse": "collapse" }],
   ["border-separate", { "border-collapse": "separate" }],
-  [/^border-spacing-(.+)$/, ([, d], { theme }) => ({ "border-spacing": theme.spacing?.[d] ?? utils.handler.bracket.cssvar.auto.fraction.rem(d) }), { autocomplete: ["border-spacing", "border-spacing-$spacing"] }],
+  [/^border-spacing-(.+)$/, ([, s], { theme }) => {
+    const v = theme.spacing?.[s] ?? utils.handler.bracket.cssvar.global.auto.fraction.rem(s);
+    if (v != null) {
+      return {
+        "--un-border-spacing-x": v,
+        "--un-border-spacing-y": v,
+        "border-spacing": "var(--un-border-spacing-x) var(--un-border-spacing-y)"
+      };
+    }
+  }, { autocomplete: ["border-spacing", "border-spacing-$spacing"] }],
+  [/^border-spacing-([xy])-(.+)$/, ([, d, s], { theme }) => {
+    const v = theme.spacing?.[s] ?? utils.handler.bracket.cssvar.global.auto.fraction.rem(s);
+    if (v != null) {
+      return {
+        [`--un-border-spacing-${d}`]: v,
+        "border-spacing": "var(--un-border-spacing-x) var(--un-border-spacing-y)"
+      };
+    }
+  }, { autocomplete: ["border-spacing-(x|y)", "border-spacing-(x|y)-$spacing"] }],
   ["caption-top", { "caption-side": "top" }],
   ["caption-bottom", { "caption-side": "bottom" }],
   ["table-auto", { "table-layout": "auto" }],
@@ -657,16 +649,12 @@ const fontVariantNumericBase = {
   "--un-numeric-figure": rules$1.varEmpty,
   "--un-numeric-spacing": rules$1.varEmpty,
   "--un-numeric-fraction": rules$1.varEmpty,
-  "--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]: ""
+  "--un-font-variant-numeric": "var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)"
 };
-const toEntries = (entry) => [
-  fontVariantNumericBase,
-  {
-    ...entry,
-    "font-variant-numeric": "var(--un-font-variant-numeric)"
-  }
-];
+const toEntries = (entry) => ({
+  ...entry,
+  "font-variant-numeric": "var(--un-font-variant-numeric)"
+});
 const fontVariantNumeric = [
   [/^ordinal$/, () => toEntries({ "--un-ordinal": "ordinal" }), { autocomplete: "ordinal" }],
   [/^slashed-zero$/, () => toEntries({ "--un-slashed-zero": "slashed-zero" }), { autocomplete: "slashed-zero" }],
@@ -683,46 +671,36 @@ const touchActionBase = {
   "--un-pan-x": rules$1.varEmpty,
   "--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)",
-  [core.CONTROL_SHORTCUT_NO_MERGE]: ""
+  "--un-touch-action": "var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom)"
 };
 const touchActions = [
-  [/^touch-pan-(x|left|right)$/, ([, d]) => [
-    touchActionBase,
-    {
-      "--un-pan-x": `pan-${d}`,
-      "touch-action": "var(--un-touch-action)"
-    }
-  ], { autocomplete: ["touch-pan", "touch-pan-(x|left|right|y|up|down)"] }],
-  [/^touch-pan-(y|up|down)$/, ([, d]) => [
-    touchActionBase,
-    {
-      "--un-pan-y": `pan-${d}`,
-      "touch-action": "var(--un-touch-action)"
-    }
-  ]],
-  [/^touch-pinch-zoom$/, () => [
-    touchActionBase,
-    {
-      "--un-pinch-zoom": "pinch-zoom",
-      "touch-action": "var(--un-touch-action)"
-    }
-  ], { autocomplete: ["touch-pinch", "touch-pinch-zoom"] }],
+  [/^touch-pan-(x|left|right)$/, ([, d]) => ({
+    "--un-pan-x": `pan-${d}`,
+    "touch-action": "var(--un-touch-action)"
+  }), { autocomplete: ["touch-pan", "touch-pan-(x|left|right|y|up|down)"] }],
+  [/^touch-pan-(y|up|down)$/, ([, d]) => ({
+    "--un-pan-y": `pan-${d}`,
+    "touch-action": "var(--un-touch-action)"
+  })],
+  ["touch-pinch-zoom", {
+    "--un-pinch-zoom": "pinch-zoom",
+    "touch-action": "var(--un-touch-action)"
+  }],
   ["touch-auto", { "touch-action": "auto" }],
   ["touch-manipulation", { "touch-action": "manipulation" }],
   ["touch-none", { "touch-action": "none" }]
 ];
 
+const scrollSnapTypeBase = {
+  "--un-scroll-snap-strictness": "proximity"
+};
 const scrolls = [
-  [/^snap-(x|y|both)$/, ([, d]) => [
-    {
-      "--un-scroll-snap-strictness": "proximity",
-      [core.CONTROL_SHORTCUT_NO_MERGE]: ""
-    },
-    {
-      "scroll-snap-type": `${d} var(--un-scroll-snap-strictness)`
-    }
-  ], { autocomplete: "snap-(x|y|both)" }],
+  [/^snap-(x|y)$/, ([, d]) => ({
+    "scroll-snap-type": `${d} var(--un-scroll-snap-strictness)`
+  }), { autocomplete: "snap-(x|y|both)" }],
+  [/^snap-both$/, () => ({
+    "scroll-snap-type": "both var(--un-scroll-snap-strictness)"
+  })],
   ["snap-mandatory", { "--un-scroll-snap-strictness": "mandatory" }],
   ["snap-proximity", { "--un-scroll-snap-strictness": "proximity" }],
   ["snap-none", { "scroll-snap-type": "none" }],
@@ -1015,6 +993,17 @@ const theme = {
     pointer: "(hover) and (pointer: coarse)",
     mouse: "(hover) and (pointer: fine)",
     hd_color: "(dynamic-range: high)"
+  },
+  preflightBase: {
+    ...rules$1.transformBase,
+    ...touchActionBase,
+    ...scrollSnapTypeBase,
+    ...fontVariantNumericBase,
+    ...borderSpacingBase,
+    ...rules$1.boxShadowsBase,
+    ...rules$1.ringBase,
+    ...filterBase,
+    ...backdropFilterBase
   }
 };
 
@@ -1091,11 +1080,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 { toArray, CONTROL_SHORTCUT_NO_MERGE } from '@unocss/core';
+import { preflights } from '@unocss/preset-mini';
+export { colors, preflights } from '@unocss/preset-mini';
+import { toArray } 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, boxShadowsBase, ringBase } 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 = [
@@ -146,10 +147,10 @@ const backgroundStyles = [
   ["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-clip-border", { "-webkit-background-clip": "border-box", "background-clip": "border-box" }],
+  ["bg-clip-content", { "-webkit-background-clip": "content-box", "background-clip": "content-box" }],
+  ["bg-clip-padding", { "-webkit-background-clip": "padding-box", "background-clip": "padding-box" }],
+  ["bg-clip-text", { "-webkit-background-clip": "text", "background-clip": "text" }],
   [/^bg-([-\w]{3,})$/, ([, s]) => ({ "background-position": positionMap[s] })],
   ["bg-repeat", { "background-repeat": "repeat" }],
   ["bg-no-repeat", { "background-repeat": "no-repeat" }],
@@ -293,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,
@@ -306,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 || "");
@@ -321,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)"
+      };
     }
   }
 };
@@ -344,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 = [
@@ -386,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-)?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-)?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$/, () => [
-    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",
@@ -556,6 +527,10 @@ const mixBlendModes = [
   ["mix-blend-normal", { "mix-blend-mode": "normal" }]
 ];
 
+const borderSpacingBase = {
+  "--un-border-spacing-x": 0,
+  "--un-border-spacing-y": 0
+};
 const tables = [
   ["inline-table", { display: "inline-table" }],
   ["table", { display: "table" }],
@@ -569,7 +544,25 @@ const tables = [
   ["table-row-group", { display: "table-row-group" }],
   ["border-collapse", { "border-collapse": "collapse" }],
   ["border-separate", { "border-collapse": "separate" }],
-  [/^border-spacing-(.+)$/, ([, d], { theme }) => ({ "border-spacing": theme.spacing?.[d] ?? handler.bracket.cssvar.auto.fraction.rem(d) }), { autocomplete: ["border-spacing", "border-spacing-$spacing"] }],
+  [/^border-spacing-(.+)$/, ([, s], { theme }) => {
+    const v = theme.spacing?.[s] ?? handler.bracket.cssvar.global.auto.fraction.rem(s);
+    if (v != null) {
+      return {
+        "--un-border-spacing-x": v,
+        "--un-border-spacing-y": v,
+        "border-spacing": "var(--un-border-spacing-x) var(--un-border-spacing-y)"
+      };
+    }
+  }, { autocomplete: ["border-spacing", "border-spacing-$spacing"] }],
+  [/^border-spacing-([xy])-(.+)$/, ([, d, s], { theme }) => {
+    const v = theme.spacing?.[s] ?? handler.bracket.cssvar.global.auto.fraction.rem(s);
+    if (v != null) {
+      return {
+        [`--un-border-spacing-${d}`]: v,
+        "border-spacing": "var(--un-border-spacing-x) var(--un-border-spacing-y)"
+      };
+    }
+  }, { autocomplete: ["border-spacing-(x|y)", "border-spacing-(x|y)-$spacing"] }],
   ["caption-top", { "caption-side": "top" }],
   ["caption-bottom", { "caption-side": "bottom" }],
   ["table-auto", { "table-layout": "auto" }],
@@ -653,16 +646,12 @@ const fontVariantNumericBase = {
   "--un-numeric-figure": varEmpty,
   "--un-numeric-spacing": varEmpty,
   "--un-numeric-fraction": varEmpty,
-  "--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]: ""
+  "--un-font-variant-numeric": "var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)"
 };
-const toEntries = (entry) => [
-  fontVariantNumericBase,
-  {
-    ...entry,
-    "font-variant-numeric": "var(--un-font-variant-numeric)"
-  }
-];
+const toEntries = (entry) => ({
+  ...entry,
+  "font-variant-numeric": "var(--un-font-variant-numeric)"
+});
 const fontVariantNumeric = [
   [/^ordinal$/, () => toEntries({ "--un-ordinal": "ordinal" }), { autocomplete: "ordinal" }],
   [/^slashed-zero$/, () => toEntries({ "--un-slashed-zero": "slashed-zero" }), { autocomplete: "slashed-zero" }],
@@ -679,46 +668,36 @@ const touchActionBase = {
   "--un-pan-x": varEmpty,
   "--un-pan-y": varEmpty,
   "--un-pinch-zoom": varEmpty,
-  "--un-touch-action": "var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom)",
-  [CONTROL_SHORTCUT_NO_MERGE]: ""
+  "--un-touch-action": "var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom)"
 };
 const touchActions = [
-  [/^touch-pan-(x|left|right)$/, ([, d]) => [
-    touchActionBase,
-    {
-      "--un-pan-x": `pan-${d}`,
-      "touch-action": "var(--un-touch-action)"
-    }
-  ], { autocomplete: ["touch-pan", "touch-pan-(x|left|right|y|up|down)"] }],
-  [/^touch-pan-(y|up|down)$/, ([, d]) => [
-    touchActionBase,
-    {
-      "--un-pan-y": `pan-${d}`,
-      "touch-action": "var(--un-touch-action)"
-    }
-  ]],
-  [/^touch-pinch-zoom$/, () => [
-    touchActionBase,
-    {
-      "--un-pinch-zoom": "pinch-zoom",
-      "touch-action": "var(--un-touch-action)"
-    }
-  ], { autocomplete: ["touch-pinch", "touch-pinch-zoom"] }],
+  [/^touch-pan-(x|left|right)$/, ([, d]) => ({
+    "--un-pan-x": `pan-${d}`,
+    "touch-action": "var(--un-touch-action)"
+  }), { autocomplete: ["touch-pan", "touch-pan-(x|left|right|y|up|down)"] }],
+  [/^touch-pan-(y|up|down)$/, ([, d]) => ({
+    "--un-pan-y": `pan-${d}`,
+    "touch-action": "var(--un-touch-action)"
+  })],
+  ["touch-pinch-zoom", {
+    "--un-pinch-zoom": "pinch-zoom",
+    "touch-action": "var(--un-touch-action)"
+  }],
   ["touch-auto", { "touch-action": "auto" }],
   ["touch-manipulation", { "touch-action": "manipulation" }],
   ["touch-none", { "touch-action": "none" }]
 ];
 
+const scrollSnapTypeBase = {
+  "--un-scroll-snap-strictness": "proximity"
+};
 const scrolls = [
-  [/^snap-(x|y|both)$/, ([, d]) => [
-    {
-      "--un-scroll-snap-strictness": "proximity",
-      [CONTROL_SHORTCUT_NO_MERGE]: ""
-    },
-    {
-      "scroll-snap-type": `${d} var(--un-scroll-snap-strictness)`
-    }
-  ], { autocomplete: "snap-(x|y|both)" }],
+  [/^snap-(x|y)$/, ([, d]) => ({
+    "scroll-snap-type": `${d} var(--un-scroll-snap-strictness)`
+  }), { autocomplete: "snap-(x|y|both)" }],
+  [/^snap-both$/, () => ({
+    "scroll-snap-type": "both var(--un-scroll-snap-strictness)"
+  })],
   ["snap-mandatory", { "--un-scroll-snap-strictness": "mandatory" }],
   ["snap-proximity", { "--un-scroll-snap-strictness": "proximity" }],
   ["snap-none", { "scroll-snap-type": "none" }],
@@ -1011,6 +990,17 @@ const theme = {
     pointer: "(hover) and (pointer: coarse)",
     mouse: "(hover) and (pointer: fine)",
     hd_color: "(dynamic-range: high)"
+  },
+  preflightBase: {
+    ...transformBase,
+    ...touchActionBase,
+    ...scrollSnapTypeBase,
+    ...fontVariantNumericBase,
+    ...borderSpacingBase,
+    ...boxShadowsBase,
+    ...ringBase,
+    ...filterBase,
+    ...backdropFilterBase
   }
 };
 
@@ -1087,7 +1077,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.4",
+  "version": "0.37.1",
   "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.4",
-    "@unocss/preset-mini": "0.35.4"
+    "@unocss/core": "0.37.1",
+    "@unocss/preset-mini": "0.37.1"
   },
   "scripts": {
     "build": "unbuild",