@unocss/preset-wind 0.55.1 → 0.55.3

package/dist/index.cjs

@@ -3,25 +3,25 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const presetMini = require('@unocss/preset-mini');
-const utils = require('@unocss/preset-mini/utils');
 const core = require('@unocss/core');
+const utils = require('@unocss/preset-mini/utils');
 const _ = require('@unocss/preset-mini/rules');
 const theme$1 = require('@unocss/preset-mini/theme');
 const variants$1 = require('@unocss/preset-mini/variants');
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === 'object' && 'default' in e) return e;
   const n = Object.create(null);
   if (e) {
     for (const k in e) {
       n[k] = e[k];
     }
   }
-  n["default"] = e;
+  n.default = e;
   return n;
 }
 
-const ___namespace = /*#__PURE__*/_interopNamespace(_);
+const ___namespace = /*#__PURE__*/_interopNamespaceCompat(_);
 
 const animations = [
   [/^(?:animate-)?keyframes-(.+)$/, ([, name], { theme }) => {
@@ -51,9 +51,11 @@ const animations = [
     return { animation: utils.h.bracket.cssvar(name) };
   }, { autocomplete: "animate-$animation.keyframes" }],
   [/^animate-name-(.+)/, ([, d]) => ({ "animation-name": utils.h.bracket.cssvar(d) ?? d })],
+  // timings
   [/^animate-duration-(.+)$/, ([, d], { theme }) => ({ "animation-duration": theme.duration?.[d || "DEFAULT"] ?? utils.h.bracket.cssvar.time(d) }), { autocomplete: ["animate-duration", "animate-duration-$duration"] }],
   [/^animate-delay-(.+)$/, ([, d], { theme }) => ({ "animation-delay": theme.duration?.[d || "DEFAULT"] ?? utils.h.bracket.cssvar.time(d) }), { autocomplete: ["animate-delay", "animate-delay-$duration"] }],
   [/^animate-ease(?:-(.+))?$/, ([, d], { theme }) => ({ "animation-timing-function": theme.easing?.[d || "DEFAULT"] ?? utils.h.bracket.cssvar(d) }), { autocomplete: ["animate-ease", "animate-ease-$easing"] }],
+  // fill mode
   [
     /^animate-(fill-mode-|fill-|mode-)?(.+)$/,
     ([, t, d]) => ["none", "forwards", "backwards", "both", ...[t ? utils.globalKeywords : []]].includes(d) ? { "animation-fill-mode": d } : void 0,
@@ -65,6 +67,7 @@ const animations = [
       ]
     }
   ],
+  // direction
   [
     /^animate-(direction-)?(.+)$/,
     ([, t, d]) => ["normal", "reverse", "alternate", "alternate-reverse", ...[t ? utils.globalKeywords : []]].includes(d) ? { "animation-direction": d } : void 0,
@@ -76,6 +79,7 @@ const animations = [
       ]
     }
   ],
+  // others
   [/^animate-(?:iteration-count-|iteration-|count-)(.+)$/, ([, d]) => ({ "animation-iteration-count": utils.h.bracket.cssvar(d) ?? d.replace(/\-/g, ",") }), { autocomplete: ["animate-(iteration|count|iteration-count)", "animate-(iteration|count|iteration-count)-<num>"] }],
   [
     /^animate-(play-state-|play-|state-)?(.+)$/,
@@ -157,6 +161,7 @@ const backgroundStyles = [
     if (bgPositionRE.test(d) && utils.h.bracketOfPosition(d) != null)
       return { "background-position": utils.h.bracketOfPosition(d).split(" ").map((e) => utils.h.position.fraction.auto.px.cssvar(e) ?? e).join(" ") };
   }],
+  // gradients
   [/^bg-gradient-(.+)$/, ([, d]) => ({ "--un-gradient": utils.h.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>"]
   }],
@@ -166,9 +171,11 @@ const backgroundStyles = [
   [/^(?:bg-gradient-)?(to)-(.+)$/, bgGradientColorResolver()],
   [/^(?:bg-gradient-)?(from|via|to)-op(?:acity)?-?(.+)$/, ([, position, opacity]) => ({ [`--un-${position}-opacity`]: utils.h.bracket.percent(opacity) })],
   [/^(from|via|to)-([\d\.]+)%$/, bgGradientPositionResolver()],
+  // images
   [/^bg-gradient-((?:repeating-)?(?:linear|radial|conic))$/, ([, s]) => ({
     "background-image": `${s}-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))))`
   }), { autocomplete: ["bg-gradient-repeating", "bg-gradient-(linear|radial|conic)", "bg-gradient-repeating-(linear|radial|conic)"] }],
+  // ignore any center position
   [/^bg-gradient-to-([rltb]{1,2})$/, ([, d]) => {
     if (d in utils.positionMap) {
       return {
@@ -191,12 +198,15 @@ const backgroundStyles = [
   ["box-decoration-slice", { "box-decoration-break": "slice" }],
   ["box-decoration-clone", { "box-decoration-break": "clone" }],
   ...utils.makeGlobalStaticRules("box-decoration", "box-decoration-break"),
+  // size
   ["bg-auto", { "background-size": "auto" }],
   ["bg-cover", { "background-size": "cover" }],
   ["bg-contain", { "background-size": "contain" }],
+  // attachments
   ["bg-fixed", { "background-attachment": "fixed" }],
   ["bg-local", { "background-attachment": "local" }],
   ["bg-scroll", { "background-attachment": "scroll" }],
+  // clips
   ["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" }],
@@ -205,7 +215,10 @@ const backgroundStyles = [
     "-webkit-background-clip": keyword,
     "background-clip": keyword
   }]),
+  // positions
+  // skip 1 & 2 letters shortcut
   [/^bg-([-\w]{3,})$/, ([, s]) => ({ "background-position": utils.positionMap[s] })],
+  // repeats
   ["bg-repeat", { "background-repeat": "repeat" }],
   ["bg-no-repeat", { "background-repeat": "no-repeat" }],
   ["bg-repeat-x", { "background-repeat": "repeat-x" }],
@@ -213,6 +226,7 @@ const backgroundStyles = [
   ["bg-repeat-round", { "background-repeat": "round" }],
   ["bg-repeat-space", { "background-repeat": "space" }],
   ...utils.makeGlobalStaticRules("bg-repeat", "background-repeat"),
+  // origins
   ["bg-origin-border", { "background-origin": "border-box" }],
   ["bg-origin-padding", { "background-origin": "padding-box" }],
   ["bg-origin-content", { "background-origin": "content-box" }],
@@ -234,6 +248,7 @@ const listStyles = {
   "upper-latin": "upper-latin"
 };
 const listStyle = [
+  // base
   [/^list-(.+?)(?:-(outside|inside))?$/, ([, alias, position]) => {
     const style = listStyles[alias];
     if (style) {
@@ -246,9 +261,11 @@ const listStyle = [
       return { "list-style-type": style };
     }
   }, { autocomplete: [`list-(${Object.keys(listStyles).join("|")})`, `list-(${Object.keys(listStyles).join("|")})-(outside|inside)`] }],
+  // styles
   ["list-outside", { "list-style-position": "outside" }],
   ["list-inside", { "list-style-position": "inside" }],
   ["list-none", { "list-style-type": "none" }],
+  // image
   [/^list-image-(.+)$/, ([, d]) => {
     if (/^\[url\(.+\)\]$/.test(d))
       return { "list-style-image": utils.h.bracket(d) };
@@ -297,6 +314,7 @@ const scrollBehaviors = [
 
 const columns = [
   [/^columns-(.+)$/, ([, v]) => ({ columns: utils.h.bracket.global.number.auto.numberWithUnit(v) }), { autocomplete: "columns-<num>" }],
+  // break before
   ["break-before-auto", { "break-before": "auto" }],
   ["break-before-avoid", { "break-before": "avoid" }],
   ["break-before-all", { "break-before": "all" }],
@@ -306,11 +324,13 @@ const columns = [
   ["break-before-right", { "break-before": "right" }],
   ["break-before-column", { "break-before": "column" }],
   ...utils.makeGlobalStaticRules("break-before"),
+  // break inside
   ["break-inside-auto", { "break-inside": "auto" }],
   ["break-inside-avoid", { "break-inside": "avoid" }],
   ["break-inside-avoid-page", { "break-inside": "avoid-page" }],
   ["break-inside-avoid-column", { "break-inside": "avoid-column" }],
   ...utils.makeGlobalStaticRules("break-inside"),
+  // break after
   ["break-after-auto", { "break-after": "auto" }],
   ["break-after-avoid", { "break-after": "avoid" }],
   ["break-after-all", { "break-after": "all" }],
@@ -454,9 +474,11 @@ function dropShadowResolver([, s], { theme }) {
   }
 }
 const filters = [
+  // filters
   [/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || utils.h.bracket.cssvar.px(s)), { autocomplete: ["(backdrop|filter)-blur-$blur", "blur-$blur", "filter-blur"] }],
   [/^(?:(backdrop-)|filter-)?brightness-(.+)$/, toFilter("brightness", (s) => utils.h.bracket.cssvar.percent(s)), { autocomplete: ["(backdrop|filter)-brightness-<percent>", "brightness-<percent>"] }],
   [/^(?:(backdrop-)|filter-)?contrast-(.+)$/, toFilter("contrast", (s) => utils.h.bracket.cssvar.percent(s)), { autocomplete: ["(backdrop|filter)-contrast-<percent>", "contrast-<percent>"] }],
+  // drop-shadow only on filter
   [/^(?:filter-)?drop-shadow(?:-(.+))?$/, dropShadowResolver, {
     autocomplete: [
       "filter-drop",
@@ -479,14 +501,17 @@ const filters = [
   [/^(?:(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.h.bracket.cssvar.degree(s))],
   [/^(?:(backdrop-)|filter-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault), { autocomplete: ["(backdrop|filter)-invert", "(backdrop|filter)-invert-<percent>", "invert-<percent>"] }],
+  // opacity only on backdrop-filter
   [/^(backdrop-)op(?:acity)-(.+)$/, toFilter("opacity", (s) => utils.h.bracket.cssvar.percent(s)), { autocomplete: ["backdrop-(op|opacity)", "backdrop-(op|opacity)-<percent>"] }],
   [/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => utils.h.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>"] }],
+  // base
   ["filter", { filter: filterProperty }],
   ["backdrop-filter", {
     "-webkit-backdrop-filter": backdropFilterProperty,
     "backdrop-filter": backdropFilterProperty
   }],
+  // nones
   ["filter-none", { filter: "none" }],
   ["backdrop-filter-none", {
     "-webkit-backdrop-filter": "none",
@@ -525,6 +550,7 @@ function handlerSpace([, d, s], { theme }) {
 }
 
 const textTransforms = [
+  // tailwind compat
   ["uppercase", { "text-transform": "uppercase" }],
   ["lowercase", { "text-transform": "lowercase" }],
   ["capitalize", { "text-transform": "capitalize" }],
@@ -584,11 +610,13 @@ const isolations = [
   ["isolation-auto", { isolation: "auto" }]
 ];
 const objectPositions = [
+  // object fit
   ["object-cover", { "object-fit": "cover" }],
   ["object-contain", { "object-fit": "contain" }],
   ["object-fill", { "object-fit": "fill" }],
   ["object-scale-down", { "object-fit": "scale-down" }],
   ["object-none", { "object-fit": "none" }],
+  // object position
   [/^object-(.+)$/, ([, d]) => {
     if (utils.positionMap[d])
       return { "object-position": utils.positionMap[d] };
@@ -642,6 +670,7 @@ const borderSpacingBase = {
 };
 const borderSpacingProperty = "var(--un-border-spacing-x) var(--un-border-spacing-y)";
 const tables = [
+  // displays
   ["inline-table", { display: "inline-table" }],
   ["table", { display: "table" }],
   ["table-caption", { display: "table-caption" }],
@@ -652,6 +681,7 @@ const tables = [
   ["table-header-group", { display: "table-header-group" }],
   ["table-row", { display: "table-row" }],
   ["table-row-group", { display: "table-row-group" }],
+  // layouts
   ["border-collapse", { "border-collapse": "collapse" }],
   ["border-separate", { "border-collapse": "separate" }],
   [/^border-spacing-(.+)$/, ([, s], { theme }) => {
@@ -705,14 +735,17 @@ const cssVariables = [
 ];
 
 const divides = [
+  // divides
   [/^divide-?([xy])$/, handlerDivide, { autocomplete: ["divide-(x|y|block|inline)", "divide-(x|y|block|inline)-reverse", "divide-(x|y|block|inline)-$lineWidth"] }],
   [/^divide-?([xy])-?(-?.+)$/, handlerDivide],
   [/^divide-?([xy])-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
   [/^divide-(block|inline)$/, handlerDivide],
   [/^divide-(block|inline)-(-?.+)$/, handlerDivide],
   [/^divide-(block|inline)-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
+  // color & opacity
   [/^divide-(.+)$/, utils.colorResolver("border-color", "divide"), { autocomplete: "divide-$colors" }],
   [/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": utils.h.bracket.percent(opacity) }), { autocomplete: ["divide-(op|opacity)", "divide-(op|opacity)-<percent>"] }],
+  // styles
   ..._.borderStyles.map((style) => [`divide-${style}`, { "border-style": style }])
 ];
 function handlerDivide([, d, s], { theme }) {
@@ -805,6 +838,7 @@ const scrollSnapTypeBase = {
   "--un-scroll-snap-strictness": "proximity"
 };
 const scrolls = [
+  // snap type
   [/^snap-(x|y)$/, ([, d]) => ({
     "scroll-snap-type": `${d} var(--un-scroll-snap-strictness)`
   }), { autocomplete: "snap-(x|y|both)" }],
@@ -814,12 +848,15 @@ const scrolls = [
   ["snap-mandatory", { "--un-scroll-snap-strictness": "mandatory" }],
   ["snap-proximity", { "--un-scroll-snap-strictness": "proximity" }],
   ["snap-none", { "scroll-snap-type": "none" }],
+  // snap align
   ["snap-start", { "scroll-snap-align": "start" }],
   ["snap-end", { "scroll-snap-align": "end" }],
   ["snap-center", { "scroll-snap-align": "center" }],
   ["snap-align-none", { "scroll-snap-align": "none" }],
+  // snap stop
   ["snap-normal", { "scroll-snap-stop": "normal" }],
   ["snap-always", { "scroll-snap-stop": "always" }],
+  // scroll margin
   [/^scroll-ma?()-?(-?.+)$/, utils.directionSize("scroll-margin"), {
     autocomplete: [
       "scroll-(m|p|ma|pa|block|inline)",
@@ -832,6 +869,7 @@ const scrolls = [
   [/^scroll-m-?([rltb])-?(-?.+)$/, utils.directionSize("scroll-margin")],
   [/^scroll-m-(block|inline)-(-?.+)$/, utils.directionSize("scroll-margin")],
   [/^scroll-m-?([bi][se])-?(-?.+)$/, utils.directionSize("scroll-margin")],
+  // scroll padding
   [/^scroll-pa?()-?(-?.+)$/, utils.directionSize("scroll-padding")],
   [/^scroll-p-?([xy])-?(-?.+)$/, utils.directionSize("scroll-padding")],
   [/^scroll-p-?([rltb])-?(-?.+)$/, utils.directionSize("scroll-padding")],
@@ -840,6 +878,8 @@ const scrolls = [
 ];
 
 const placeholders = [
+  // The prefix `$ ` is intentional. This rule is not to be matched directly from user-generated token.
+  // See variants/placeholder.
   [/^\$ placeholder-(.+)$/, utils.colorResolver("color", "placeholder"), { autocomplete: "placeholder-$colors" }],
   [/^\$ placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": utils.h.bracket.percent(opacity) }), { autocomplete: ["placeholder-(op|opacity)", "placeholder-(op|opacity)-<percent>"] }]
 ];
@@ -931,6 +971,7 @@ const rules = [
   ___namespace.contents,
   placeholders,
   ___namespace.containerParent,
+  // should be the last
   ___namespace.questionMark
 ].flat(1);
 
@@ -1198,6 +1239,10 @@ const placeholderModifier = (input, { theme }) => {
     const [, pre = "", p, body] = m;
     if (utils.hasParseableColor(body, theme) || hasOpacityValue(body)) {
       return {
+        // Append `placeholder-$ ` (with space!) to the rule to be matched.
+        // The `placeholder-` is added for placeholder variant processing, and
+        // the `$ ` is added for rule matching after `placeholder-` is removed by the variant.
+        // See rules/placeholder.
         matcher: `${pre}placeholder-$ ${p}${body}`
       };
     }
@@ -1237,7 +1282,7 @@ function presetWind(options = {}) {
 
 exports.colors = presetMini.colors;
 exports.preflights = presetMini.preflights;
-exports["default"] = presetWind;
+exports.default = presetWind;
 exports.presetWind = presetWind;
 exports.rules = rules;
 exports.shortcuts = shortcuts;

package/dist/index.d.cts

@@ -0,0 +1,19 @@
+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, preflights } from '@unocss/preset-mini';
+
+declare const rules: Rule[];
+
+declare const shortcuts: _unocss_core.Shortcut<_unocss_preset_mini.Theme>[];
+
+declare const theme: Theme;
+
+declare function variants(options: PresetWindOptions): Variant<Theme>[];
+
+interface PresetWindOptions extends PresetMiniOptions {
+}
+declare function presetWind(options?: PresetWindOptions): Preset<Theme>;
+
+export { type PresetWindOptions, presetWind as default, presetWind, rules, shortcuts, theme, variants };

package/dist/index.d.mts

@@ -0,0 +1,19 @@
+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, preflights } from '@unocss/preset-mini';
+
+declare const rules: Rule[];
+
+declare const shortcuts: _unocss_core.Shortcut<_unocss_preset_mini.Theme>[];
+
+declare const theme: Theme;
+
+declare function variants(options: PresetWindOptions): Variant<Theme>[];
+
+interface PresetWindOptions extends PresetMiniOptions {
+}
+declare function presetWind(options?: PresetWindOptions): Preset<Theme>;
+
+export { type PresetWindOptions, presetWind as default, presetWind, rules, shortcuts, theme, variants };

package/dist/index.d.ts

@@ -16,4 +16,4 @@ interface PresetWindOptions extends PresetMiniOptions {
 }
 declare function presetWind(options?: PresetWindOptions): Preset<Theme>;
 
-export { PresetWindOptions, presetWind as default, presetWind, rules, shortcuts, theme, variants };
+export { type PresetWindOptions, presetWind as default, presetWind, rules, shortcuts, theme, variants };

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { presetMini } from '@unocss/preset-mini';
 export { colors, preflights } from '@unocss/preset-mini';
-import { h, globalKeywords, makeGlobalStaticRules, positionMap, parseColor, colorToString, colorOpacityToString, colorResolver, resolveBreakpoints, colorableShadows, directionMap, directionSize, variantMatcher, variantParentMatcher, hasParseableColor } from '@unocss/preset-mini/utils';
 import { isString, warnOnce } from '@unocss/core';
+import { h, globalKeywords, makeGlobalStaticRules, positionMap, parseColor, colorToString, colorOpacityToString, colorResolver, resolveBreakpoints, colorableShadows, directionMap, directionSize, variantMatcher, variantParentMatcher, hasParseableColor } from '@unocss/preset-mini/utils';
 import * as _ from '@unocss/preset-mini/rules';
 import { varEmpty, borderStyles, transformBase, boxShadowsBase, ringBase } from '@unocss/preset-mini/rules';
 import { theme as theme$1 } from '@unocss/preset-mini/theme';
@@ -35,9 +35,11 @@ const animations = [
     return { animation: h.bracket.cssvar(name) };
   }, { autocomplete: "animate-$animation.keyframes" }],
   [/^animate-name-(.+)/, ([, d]) => ({ "animation-name": h.bracket.cssvar(d) ?? d })],
+  // timings
   [/^animate-duration-(.+)$/, ([, d], { theme }) => ({ "animation-duration": theme.duration?.[d || "DEFAULT"] ?? h.bracket.cssvar.time(d) }), { autocomplete: ["animate-duration", "animate-duration-$duration"] }],
   [/^animate-delay-(.+)$/, ([, d], { theme }) => ({ "animation-delay": theme.duration?.[d || "DEFAULT"] ?? h.bracket.cssvar.time(d) }), { autocomplete: ["animate-delay", "animate-delay-$duration"] }],
   [/^animate-ease(?:-(.+))?$/, ([, d], { theme }) => ({ "animation-timing-function": theme.easing?.[d || "DEFAULT"] ?? h.bracket.cssvar(d) }), { autocomplete: ["animate-ease", "animate-ease-$easing"] }],
+  // fill mode
   [
     /^animate-(fill-mode-|fill-|mode-)?(.+)$/,
     ([, t, d]) => ["none", "forwards", "backwards", "both", ...[t ? globalKeywords : []]].includes(d) ? { "animation-fill-mode": d } : void 0,
@@ -49,6 +51,7 @@ const animations = [
       ]
     }
   ],
+  // direction
   [
     /^animate-(direction-)?(.+)$/,
     ([, t, d]) => ["normal", "reverse", "alternate", "alternate-reverse", ...[t ? globalKeywords : []]].includes(d) ? { "animation-direction": d } : void 0,
@@ -60,6 +63,7 @@ const animations = [
       ]
     }
   ],
+  // others
   [/^animate-(?:iteration-count-|iteration-|count-)(.+)$/, ([, d]) => ({ "animation-iteration-count": h.bracket.cssvar(d) ?? d.replace(/\-/g, ",") }), { autocomplete: ["animate-(iteration|count|iteration-count)", "animate-(iteration|count|iteration-count)-<num>"] }],
   [
     /^animate-(play-state-|play-|state-)?(.+)$/,
@@ -141,6 +145,7 @@ const backgroundStyles = [
     if (bgPositionRE.test(d) && h.bracketOfPosition(d) != null)
       return { "background-position": h.bracketOfPosition(d).split(" ").map((e) => h.position.fraction.auto.px.cssvar(e) ?? e).join(" ") };
   }],
+  // gradients
   [/^bg-gradient-(.+)$/, ([, d]) => ({ "--un-gradient": h.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>"]
   }],
@@ -150,9 +155,11 @@ const backgroundStyles = [
   [/^(?:bg-gradient-)?(to)-(.+)$/, bgGradientColorResolver()],
   [/^(?:bg-gradient-)?(from|via|to)-op(?:acity)?-?(.+)$/, ([, position, opacity]) => ({ [`--un-${position}-opacity`]: h.bracket.percent(opacity) })],
   [/^(from|via|to)-([\d\.]+)%$/, bgGradientPositionResolver()],
+  // images
   [/^bg-gradient-((?:repeating-)?(?:linear|radial|conic))$/, ([, s]) => ({
     "background-image": `${s}-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))))`
   }), { autocomplete: ["bg-gradient-repeating", "bg-gradient-(linear|radial|conic)", "bg-gradient-repeating-(linear|radial|conic)"] }],
+  // ignore any center position
   [/^bg-gradient-to-([rltb]{1,2})$/, ([, d]) => {
     if (d in positionMap) {
       return {
@@ -175,12 +182,15 @@ const backgroundStyles = [
   ["box-decoration-slice", { "box-decoration-break": "slice" }],
   ["box-decoration-clone", { "box-decoration-break": "clone" }],
   ...makeGlobalStaticRules("box-decoration", "box-decoration-break"),
+  // size
   ["bg-auto", { "background-size": "auto" }],
   ["bg-cover", { "background-size": "cover" }],
   ["bg-contain", { "background-size": "contain" }],
+  // attachments
   ["bg-fixed", { "background-attachment": "fixed" }],
   ["bg-local", { "background-attachment": "local" }],
   ["bg-scroll", { "background-attachment": "scroll" }],
+  // clips
   ["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" }],
@@ -189,7 +199,10 @@ const backgroundStyles = [
     "-webkit-background-clip": keyword,
     "background-clip": keyword
   }]),
+  // positions
+  // skip 1 & 2 letters shortcut
   [/^bg-([-\w]{3,})$/, ([, s]) => ({ "background-position": positionMap[s] })],
+  // repeats
   ["bg-repeat", { "background-repeat": "repeat" }],
   ["bg-no-repeat", { "background-repeat": "no-repeat" }],
   ["bg-repeat-x", { "background-repeat": "repeat-x" }],
@@ -197,6 +210,7 @@ const backgroundStyles = [
   ["bg-repeat-round", { "background-repeat": "round" }],
   ["bg-repeat-space", { "background-repeat": "space" }],
   ...makeGlobalStaticRules("bg-repeat", "background-repeat"),
+  // origins
   ["bg-origin-border", { "background-origin": "border-box" }],
   ["bg-origin-padding", { "background-origin": "padding-box" }],
   ["bg-origin-content", { "background-origin": "content-box" }],
@@ -218,6 +232,7 @@ const listStyles = {
   "upper-latin": "upper-latin"
 };
 const listStyle = [
+  // base
   [/^list-(.+?)(?:-(outside|inside))?$/, ([, alias, position]) => {
     const style = listStyles[alias];
     if (style) {
@@ -230,9 +245,11 @@ const listStyle = [
       return { "list-style-type": style };
     }
   }, { autocomplete: [`list-(${Object.keys(listStyles).join("|")})`, `list-(${Object.keys(listStyles).join("|")})-(outside|inside)`] }],
+  // styles
   ["list-outside", { "list-style-position": "outside" }],
   ["list-inside", { "list-style-position": "inside" }],
   ["list-none", { "list-style-type": "none" }],
+  // image
   [/^list-image-(.+)$/, ([, d]) => {
     if (/^\[url\(.+\)\]$/.test(d))
       return { "list-style-image": h.bracket(d) };
@@ -281,6 +298,7 @@ const scrollBehaviors = [
 
 const columns = [
   [/^columns-(.+)$/, ([, v]) => ({ columns: h.bracket.global.number.auto.numberWithUnit(v) }), { autocomplete: "columns-<num>" }],
+  // break before
   ["break-before-auto", { "break-before": "auto" }],
   ["break-before-avoid", { "break-before": "avoid" }],
   ["break-before-all", { "break-before": "all" }],
@@ -290,11 +308,13 @@ const columns = [
   ["break-before-right", { "break-before": "right" }],
   ["break-before-column", { "break-before": "column" }],
   ...makeGlobalStaticRules("break-before"),
+  // break inside
   ["break-inside-auto", { "break-inside": "auto" }],
   ["break-inside-avoid", { "break-inside": "avoid" }],
   ["break-inside-avoid-page", { "break-inside": "avoid-page" }],
   ["break-inside-avoid-column", { "break-inside": "avoid-column" }],
   ...makeGlobalStaticRules("break-inside"),
+  // break after
   ["break-after-auto", { "break-after": "auto" }],
   ["break-after-avoid", { "break-after": "avoid" }],
   ["break-after-all", { "break-after": "all" }],
@@ -438,9 +458,11 @@ function dropShadowResolver([, s], { theme }) {
   }
 }
 const filters = [
+  // filters
   [/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || h.bracket.cssvar.px(s)), { autocomplete: ["(backdrop|filter)-blur-$blur", "blur-$blur", "filter-blur"] }],
   [/^(?:(backdrop-)|filter-)?brightness-(.+)$/, toFilter("brightness", (s) => h.bracket.cssvar.percent(s)), { autocomplete: ["(backdrop|filter)-brightness-<percent>", "brightness-<percent>"] }],
   [/^(?:(backdrop-)|filter-)?contrast-(.+)$/, toFilter("contrast", (s) => h.bracket.cssvar.percent(s)), { autocomplete: ["(backdrop|filter)-contrast-<percent>", "contrast-<percent>"] }],
+  // drop-shadow only on filter
   [/^(?:filter-)?drop-shadow(?:-(.+))?$/, dropShadowResolver, {
     autocomplete: [
       "filter-drop",
@@ -463,14 +485,17 @@ const filters = [
   [/^(?:(backdrop-)|filter-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault), { autocomplete: ["(backdrop|filter)-grayscale", "(backdrop|filter)-grayscale-<percent>", "grayscale-<percent>"] }],
   [/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => h.bracket.cssvar.degree(s))],
   [/^(?:(backdrop-)|filter-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault), { autocomplete: ["(backdrop|filter)-invert", "(backdrop|filter)-invert-<percent>", "invert-<percent>"] }],
+  // opacity only on backdrop-filter
   [/^(backdrop-)op(?:acity)-(.+)$/, toFilter("opacity", (s) => h.bracket.cssvar.percent(s)), { autocomplete: ["backdrop-(op|opacity)", "backdrop-(op|opacity)-<percent>"] }],
   [/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => h.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>"] }],
+  // base
   ["filter", { filter: filterProperty }],
   ["backdrop-filter", {
     "-webkit-backdrop-filter": backdropFilterProperty,
     "backdrop-filter": backdropFilterProperty
   }],
+  // nones
   ["filter-none", { filter: "none" }],
   ["backdrop-filter-none", {
     "-webkit-backdrop-filter": "none",
@@ -509,6 +534,7 @@ function handlerSpace([, d, s], { theme }) {
 }
 
 const textTransforms = [
+  // tailwind compat
   ["uppercase", { "text-transform": "uppercase" }],
   ["lowercase", { "text-transform": "lowercase" }],
   ["capitalize", { "text-transform": "capitalize" }],
@@ -568,11 +594,13 @@ const isolations = [
   ["isolation-auto", { isolation: "auto" }]
 ];
 const objectPositions = [
+  // object fit
   ["object-cover", { "object-fit": "cover" }],
   ["object-contain", { "object-fit": "contain" }],
   ["object-fill", { "object-fit": "fill" }],
   ["object-scale-down", { "object-fit": "scale-down" }],
   ["object-none", { "object-fit": "none" }],
+  // object position
   [/^object-(.+)$/, ([, d]) => {
     if (positionMap[d])
       return { "object-position": positionMap[d] };
@@ -626,6 +654,7 @@ const borderSpacingBase = {
 };
 const borderSpacingProperty = "var(--un-border-spacing-x) var(--un-border-spacing-y)";
 const tables = [
+  // displays
   ["inline-table", { display: "inline-table" }],
   ["table", { display: "table" }],
   ["table-caption", { display: "table-caption" }],
@@ -636,6 +665,7 @@ const tables = [
   ["table-header-group", { display: "table-header-group" }],
   ["table-row", { display: "table-row" }],
   ["table-row-group", { display: "table-row-group" }],
+  // layouts
   ["border-collapse", { "border-collapse": "collapse" }],
   ["border-separate", { "border-collapse": "separate" }],
   [/^border-spacing-(.+)$/, ([, s], { theme }) => {
@@ -689,14 +719,17 @@ const cssVariables = [
 ];
 
 const divides = [
+  // divides
   [/^divide-?([xy])$/, handlerDivide, { autocomplete: ["divide-(x|y|block|inline)", "divide-(x|y|block|inline)-reverse", "divide-(x|y|block|inline)-$lineWidth"] }],
   [/^divide-?([xy])-?(-?.+)$/, handlerDivide],
   [/^divide-?([xy])-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
   [/^divide-(block|inline)$/, handlerDivide],
   [/^divide-(block|inline)-(-?.+)$/, handlerDivide],
   [/^divide-(block|inline)-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
+  // color & opacity
   [/^divide-(.+)$/, colorResolver("border-color", "divide"), { autocomplete: "divide-$colors" }],
   [/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": h.bracket.percent(opacity) }), { autocomplete: ["divide-(op|opacity)", "divide-(op|opacity)-<percent>"] }],
+  // styles
   ...borderStyles.map((style) => [`divide-${style}`, { "border-style": style }])
 ];
 function handlerDivide([, d, s], { theme }) {
@@ -789,6 +822,7 @@ const scrollSnapTypeBase = {
   "--un-scroll-snap-strictness": "proximity"
 };
 const scrolls = [
+  // snap type
   [/^snap-(x|y)$/, ([, d]) => ({
     "scroll-snap-type": `${d} var(--un-scroll-snap-strictness)`
   }), { autocomplete: "snap-(x|y|both)" }],
@@ -798,12 +832,15 @@ const scrolls = [
   ["snap-mandatory", { "--un-scroll-snap-strictness": "mandatory" }],
   ["snap-proximity", { "--un-scroll-snap-strictness": "proximity" }],
   ["snap-none", { "scroll-snap-type": "none" }],
+  // snap align
   ["snap-start", { "scroll-snap-align": "start" }],
   ["snap-end", { "scroll-snap-align": "end" }],
   ["snap-center", { "scroll-snap-align": "center" }],
   ["snap-align-none", { "scroll-snap-align": "none" }],
+  // snap stop
   ["snap-normal", { "scroll-snap-stop": "normal" }],
   ["snap-always", { "scroll-snap-stop": "always" }],
+  // scroll margin
   [/^scroll-ma?()-?(-?.+)$/, directionSize("scroll-margin"), {
     autocomplete: [
       "scroll-(m|p|ma|pa|block|inline)",
@@ -816,6 +853,7 @@ const scrolls = [
   [/^scroll-m-?([rltb])-?(-?.+)$/, directionSize("scroll-margin")],
   [/^scroll-m-(block|inline)-(-?.+)$/, directionSize("scroll-margin")],
   [/^scroll-m-?([bi][se])-?(-?.+)$/, directionSize("scroll-margin")],
+  // scroll padding
   [/^scroll-pa?()-?(-?.+)$/, directionSize("scroll-padding")],
   [/^scroll-p-?([xy])-?(-?.+)$/, directionSize("scroll-padding")],
   [/^scroll-p-?([rltb])-?(-?.+)$/, directionSize("scroll-padding")],
@@ -824,6 +862,8 @@ const scrolls = [
 ];
 
 const placeholders = [
+  // The prefix `$ ` is intentional. This rule is not to be matched directly from user-generated token.
+  // See variants/placeholder.
   [/^\$ placeholder-(.+)$/, colorResolver("color", "placeholder"), { autocomplete: "placeholder-$colors" }],
   [/^\$ placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": h.bracket.percent(opacity) }), { autocomplete: ["placeholder-(op|opacity)", "placeholder-(op|opacity)-<percent>"] }]
 ];
@@ -915,6 +955,7 @@ const rules = [
   _.contents,
   placeholders,
   _.containerParent,
+  // should be the last
   _.questionMark
 ].flat(1);
 
@@ -1182,6 +1223,10 @@ const placeholderModifier = (input, { theme }) => {
     const [, pre = "", p, body] = m;
     if (hasParseableColor(body, theme) || hasOpacityValue(body)) {
       return {
+        // Append `placeholder-$ ` (with space!) to the rule to be matched.
+        // The `placeholder-` is added for placeholder variant processing, and
+        // the `$ ` is added for rule matching after `placeholder-` is removed by the variant.
+        // See rules/placeholder.
         matcher: `${pre}placeholder-$ ${p}${body}`
       };
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-wind",
-  "version": "0.55.1",
+  "version": "0.55.3",
   "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.55.1",
-    "@unocss/preset-mini": "0.55.1"
+    "@unocss/core": "0.55.3",
+    "@unocss/preset-mini": "0.55.3"
   },
   "scripts": {
     "build": "unbuild",