@unocss/preset-wind 0.22.1 → 0.22.5

package/dist/index.cjs

@@ -26,17 +26,17 @@ ${constructCSS({ animation: `${name}` })}`;
 ${constructCSS(Object.assign({ animation: `${name} ${duration} ${timing} infinite` }, props))}`;
     }
   }],
-  [/^animate-(?:duration-)?(.+)$/, ([, d]) => ({ "animation-duration": utils.handler.bracket.time(d) })],
-  [/^animate-delay-(.+)$/, ([, d]) => ({ "animation-delay": utils.handler.bracket.time(d) })],
+  [/^animate-(?:duration-)?(.+)$/, ([, d]) => ({ "animation-duration": utils.handler.bracket.cssvar.time(d) })],
+  [/^animate-delay-(.+)$/, ([, d]) => ({ "animation-delay": utils.handler.bracket.cssvar.time(d) })],
   [/^animate-(?:fill-)?mode-(forwards|backwards|both|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-fill-mode": d })],
   ["animate-mode-none", { "animation-fill-mode": "none" }],
   ["animate-fill-mode-none", { "animation-fill-mode": "none" }],
   [/^animate-(?:direction-)?(reverse|alternate|alternate-reverse|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-direction": d })],
   ["animate-normal", { "animation-direction": "normal" }],
   ["animate-direction-normal", { "animation-direction": "normal" }],
-  [/^animate-(?:iteration-)?count-(.+)$/, ([, d]) => ({ "animation-iteration-count": utils.handler.bracket(d) ?? d.replace(/\-/g, ",") })],
+  [/^animate-(?:iteration-)?count-(.+)$/, ([, d]) => ({ "animation-iteration-count": utils.handler.bracket.cssvar(d) ?? d.replace(/\-/g, ",") })],
   [/^animate-name-(.+)/, ([, d]) => ({ "animation-name": d })],
-  [/^animate-play(?:-state)?-(paused|running|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-play-state": d })],
+  [/^animate-play-(?:state-)?(paused|running|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-play-state": d })],
   ["animate-none", { animation: "none" }]
 ];
 
@@ -175,7 +175,7 @@ const scrollBehaviors = [
 ];
 
 const columns = [
-  [/^columns-(.+)$/, ([, v]) => ({ column: utils.handler.bracket.global.number.auto.numberWithUnit(v) })],
+  [/^columns-(.+)$/, ([, v]) => ({ columns: utils.handler.bracket.global.number.auto.numberWithUnit(v) })],
   ["break-before-auto", { "break-before": "auto" }],
   ["break-before-avoid", { "break-before": "avoid" }],
   ["break-before-all", { "break-before": "all" }],
@@ -237,7 +237,6 @@ const filterBase = {
   "--un-brightness": rules$1.varEmpty,
   "--un-contrast": rules$1.varEmpty,
   "--un-drop-shadow": rules$1.varEmpty,
-  "--un-drop-shadow-colored": rules$1.varEmpty,
   "--un-grayscale": rules$1.varEmpty,
   "--un-hue-rotate": rules$1.varEmpty,
   "--un-invert": rules$1.varEmpty,
@@ -260,7 +259,7 @@ const backdropFilterBase = {
   [core.CONTROL_SHORTCUT_NO_MERGE]: ""
 };
 const percentWithDefault = (str) => {
-  let v = utils.handler.bracket(str || "");
+  let v = utils.handler.bracket.cssvar(str || "");
   if (v != null)
     return v;
   v = str ? utils.handler.percent(str) : "1";
@@ -293,18 +292,16 @@ const toFilter = (varName, resolver) => ([, b, s], { theme }) => {
 const dropShadowResolver = ([, s], { theme }) => {
   let v = theme.dropShadow?.[s || "DEFAULT"];
   if (v != null) {
-    const shadow = core.toArray(v);
-    const colored = shadow.map((s2) => s2.replace(/\s\S+$/, " var(--un-drop-shadow-color)"));
+    const shadows = rules$1.colorableShadows(v, "--un-drop-shadow-color");
     return [
       filterBase,
       {
-        "--un-drop-shadow": `drop-shadow(${shadow.join(") drop-shadow(")})`,
-        "--un-drop-shadow-colored": `drop-shadow(${colored.join(") drop-shadow(")})`,
+        "--un-drop-shadow": `drop-shadow(${shadows.join(") drop-shadow(")})`,
         "filter": "var(--un-filter)"
       }
     ];
   }
-  v = utils.handler.bracket(s);
+  v = utils.handler.bracket.cssvar(s);
   if (v != null) {
     return [
       filterBase,
@@ -316,25 +313,17 @@ const dropShadowResolver = ([, s], { theme }) => {
   }
 };
 const filters = [
-  [/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || utils.handler.bracket.px(s))],
-  [/^(?:(backdrop-)|filter-)?brightness-(.+)$/, toFilter("brightness", (s) => utils.handler.bracket.percent(s))],
-  [/^(?:(backdrop-)|filter-)?contrast-(.+)$/, toFilter("contrast", (s) => utils.handler.bracket.percent(s))],
+  [/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || utils.handler.bracket.cssvar.px(s))],
+  [/^(?:(backdrop-)|filter-)?brightness-(.+)$/, toFilter("brightness", (s) => utils.handler.bracket.cssvar.percent(s))],
+  [/^(?:(backdrop-)|filter-)?contrast-(.+)$/, toFilter("contrast", (s) => utils.handler.bracket.cssvar.percent(s))],
   [/^(?:filter-)?drop-shadow(?:-(.+))?$/, dropShadowResolver],
-  [/^(?:filter-)?drop-shadow-color-(.+)$/, (m, ctx) => {
-    const color = utils.colorResolver("--un-drop-shadow-color", "drop-shadow")(m, ctx);
-    if (color) {
-      return {
-        ...color,
-        "--un-drop-shadow": "var(--un-drop-shadow-colored)"
-      };
-    }
-  }],
-  [/^(?:filter-)?drop-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-drop-shadow-opacity": utils.handler.bracket.percent.cssvar(opacity) })],
+  [/^(?: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)],
-  [/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => utils.handler.bracket.degree(s))],
+  [/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => utils.handler.bracket.cssvar.degree(s))],
   [/^(?:(backdrop-)|filter-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault)],
-  [/^(backdrop-)opacity-(.+)$/, toFilter("opacity", (s) => utils.handler.bracket.percent(s))],
-  [/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => utils.handler.bracket.percent(s))],
+  [/^(backdrop-)opacity-(.+)$/, toFilter("opacity", (s) => utils.handler.bracket.cssvar.percent(s))],
+  [/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => utils.handler.bracket.cssvar.percent(s))],
   [/^(?:(backdrop-)|filter-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault)],
   [/^filter$/, () => [
     filterBase,
@@ -513,26 +502,27 @@ const tables = [
 ];
 
 const variablesAbbrMap = {
-  "write": "writing-mode",
-  "write-orient": "text-orientation",
   "bg-blend": "background-blend-mode",
   "bg-clip": "-webkit-background-clip",
   "bg-gradient": "linear-gradient",
-  "bg-origin-border": "background-origin",
+  "bg-image": "background-image",
+  "bg-origin": "background-origin",
   "bg-position": "background-position",
   "bg-repeat": "background-repeat",
   "bg-size": "background-size",
   "mix-blend": "mix-blend-mode",
-  "animate-speed": "animation-speed"
+  "object": "object-fit",
+  "object-position": "object-position",
+  "write": "writing-mode",
+  "write-orient": "text-orientation"
 };
-const cssVariables = [[
-  /^(.+)-\$(.+)$/,
-  ([, name, varname]) => {
+const cssVariables = [
+  [/^(.+?)-\$(.+)$/, ([, name, varname]) => {
     const prop = variablesAbbrMap[name];
     if (prop)
       return { [prop]: `var(--${varname})` };
-  }
-]];
+  }]
+];
 
 const divides = [
   [/^divide-?([xy])$/, handlerDivide],
@@ -550,7 +540,7 @@ const divides = [
   ["divide-none", { "border-style": "none" }]
 ];
 function handlerDivide([, d, s = "1"]) {
-  const v = utils.handler.bracket.px(s);
+  const v = utils.handler.bracket.cssvar.px(s);
   if (v != null) {
     const results = utils.directionMap[d].map((item) => {
       const key = `border${item}-width`;
@@ -671,7 +661,7 @@ const scrolls = [
 
 const placeholders = [
   [/^\$ placeholder-(.+)$/, utils.colorResolver("color", "placeholder")],
-  [/^\$ placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": utils.handler.bracket.percent.cssvar(opacity) })]
+  [/^\$ placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": utils.handler.bracket.percent(opacity) })]
 ];
 
 const rules = [
@@ -931,7 +921,7 @@ const variantSpaceAndDivide = (matcher) => {
 };
 
 const placeholderModifier = (input, { theme }) => {
-  const m = input.match(/^(.*)\b(placeholder-)(.+?)$/);
+  const m = input.match(/^(.*)\b(placeholder-)(.+)$/);
   if (m) {
     const [, pre = "", p, body] = m;
     if (hasColorValue(body, theme) || hasOpacityValue(body)) {
@@ -947,7 +937,7 @@ function hasColorValue(body, theme) {
 function hasOpacityValue(body) {
   const match = body.match(/^op(?:acity)?-?(.+)$/);
   if (match && match[1] != null)
-    return utils.handler.bracket.percent.cssvar(match[1]) != null;
+    return utils.handler.bracket.percent(match[1]) != null;
   return false;
 }
 

package/dist/index.mjs

@@ -2,7 +2,7 @@ import { variants } from '@unocss/preset-mini/variants';
 import { toArray, CONTROL_SHORTCUT_NO_MERGE } from '@unocss/core';
 import { theme as theme$1 } from '@unocss/preset-mini/theme';
 export { colors } from '@unocss/preset-mini';
-import { varEmpty, cssVariables as cssVariables$1, 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, fontStyles, textColors, textDecorations, fontSmoothings, tabSizes, textStrokes, textShadows, opacity, boxShadows, outline, rings, transitions, willChange, contents, questionMark } from '@unocss/preset-mini/rules';
+import { varEmpty, colorableShadows, 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, fontStyles, textColors, textDecorations, fontSmoothings, tabSizes, textStrokes, textShadows, opacity, boxShadows, outline, rings, transitions, willChange, contents, questionMark } from '@unocss/preset-mini/rules';
 import { handler, positionMap, parseColor, colorResolver, directionSize, directionMap, variantMatcher, variantParentMatcher } from '@unocss/preset-mini/utils';
 
 const animations = [
@@ -22,17 +22,17 @@ ${constructCSS({ animation: `${name}` })}`;
 ${constructCSS(Object.assign({ animation: `${name} ${duration} ${timing} infinite` }, props))}`;
     }
   }],
-  [/^animate-(?:duration-)?(.+)$/, ([, d]) => ({ "animation-duration": handler.bracket.time(d) })],
-  [/^animate-delay-(.+)$/, ([, d]) => ({ "animation-delay": handler.bracket.time(d) })],
+  [/^animate-(?:duration-)?(.+)$/, ([, d]) => ({ "animation-duration": handler.bracket.cssvar.time(d) })],
+  [/^animate-delay-(.+)$/, ([, d]) => ({ "animation-delay": handler.bracket.cssvar.time(d) })],
   [/^animate-(?:fill-)?mode-(forwards|backwards|both|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-fill-mode": d })],
   ["animate-mode-none", { "animation-fill-mode": "none" }],
   ["animate-fill-mode-none", { "animation-fill-mode": "none" }],
   [/^animate-(?:direction-)?(reverse|alternate|alternate-reverse|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-direction": d })],
   ["animate-normal", { "animation-direction": "normal" }],
   ["animate-direction-normal", { "animation-direction": "normal" }],
-  [/^animate-(?:iteration-)?count-(.+)$/, ([, d]) => ({ "animation-iteration-count": handler.bracket(d) ?? d.replace(/\-/g, ",") })],
+  [/^animate-(?:iteration-)?count-(.+)$/, ([, d]) => ({ "animation-iteration-count": handler.bracket.cssvar(d) ?? d.replace(/\-/g, ",") })],
   [/^animate-name-(.+)/, ([, d]) => ({ "animation-name": d })],
-  [/^animate-play(?:-state)?-(paused|running|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-play-state": d })],
+  [/^animate-play-(?:state-)?(paused|running|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-play-state": d })],
   ["animate-none", { animation: "none" }]
 ];
 
@@ -171,7 +171,7 @@ const scrollBehaviors = [
 ];
 
 const columns = [
-  [/^columns-(.+)$/, ([, v]) => ({ column: handler.bracket.global.number.auto.numberWithUnit(v) })],
+  [/^columns-(.+)$/, ([, v]) => ({ columns: handler.bracket.global.number.auto.numberWithUnit(v) })],
   ["break-before-auto", { "break-before": "auto" }],
   ["break-before-avoid", { "break-before": "avoid" }],
   ["break-before-all", { "break-before": "all" }],
@@ -233,7 +233,6 @@ const filterBase = {
   "--un-brightness": varEmpty,
   "--un-contrast": varEmpty,
   "--un-drop-shadow": varEmpty,
-  "--un-drop-shadow-colored": varEmpty,
   "--un-grayscale": varEmpty,
   "--un-hue-rotate": varEmpty,
   "--un-invert": varEmpty,
@@ -256,7 +255,7 @@ const backdropFilterBase = {
   [CONTROL_SHORTCUT_NO_MERGE]: ""
 };
 const percentWithDefault = (str) => {
-  let v = handler.bracket(str || "");
+  let v = handler.bracket.cssvar(str || "");
   if (v != null)
     return v;
   v = str ? handler.percent(str) : "1";
@@ -289,18 +288,16 @@ const toFilter = (varName, resolver) => ([, b, s], { theme }) => {
 const dropShadowResolver = ([, s], { theme }) => {
   let v = theme.dropShadow?.[s || "DEFAULT"];
   if (v != null) {
-    const shadow = toArray(v);
-    const colored = shadow.map((s2) => s2.replace(/\s\S+$/, " var(--un-drop-shadow-color)"));
+    const shadows = colorableShadows(v, "--un-drop-shadow-color");
     return [
       filterBase,
       {
-        "--un-drop-shadow": `drop-shadow(${shadow.join(") drop-shadow(")})`,
-        "--un-drop-shadow-colored": `drop-shadow(${colored.join(") drop-shadow(")})`,
+        "--un-drop-shadow": `drop-shadow(${shadows.join(") drop-shadow(")})`,
         "filter": "var(--un-filter)"
       }
     ];
   }
-  v = handler.bracket(s);
+  v = handler.bracket.cssvar(s);
   if (v != null) {
     return [
       filterBase,
@@ -312,25 +309,17 @@ const dropShadowResolver = ([, s], { theme }) => {
   }
 };
 const filters = [
-  [/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || handler.bracket.px(s))],
-  [/^(?:(backdrop-)|filter-)?brightness-(.+)$/, toFilter("brightness", (s) => handler.bracket.percent(s))],
-  [/^(?:(backdrop-)|filter-)?contrast-(.+)$/, toFilter("contrast", (s) => handler.bracket.percent(s))],
+  [/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || handler.bracket.cssvar.px(s))],
+  [/^(?:(backdrop-)|filter-)?brightness-(.+)$/, toFilter("brightness", (s) => handler.bracket.cssvar.percent(s))],
+  [/^(?:(backdrop-)|filter-)?contrast-(.+)$/, toFilter("contrast", (s) => handler.bracket.cssvar.percent(s))],
   [/^(?:filter-)?drop-shadow(?:-(.+))?$/, dropShadowResolver],
-  [/^(?:filter-)?drop-shadow-color-(.+)$/, (m, ctx) => {
-    const color = colorResolver("--un-drop-shadow-color", "drop-shadow")(m, ctx);
-    if (color) {
-      return {
-        ...color,
-        "--un-drop-shadow": "var(--un-drop-shadow-colored)"
-      };
-    }
-  }],
-  [/^(?:filter-)?drop-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-drop-shadow-opacity": handler.bracket.percent.cssvar(opacity) })],
+  [/^(?: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)],
-  [/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => handler.bracket.degree(s))],
+  [/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => handler.bracket.cssvar.degree(s))],
   [/^(?:(backdrop-)|filter-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault)],
-  [/^(backdrop-)opacity-(.+)$/, toFilter("opacity", (s) => handler.bracket.percent(s))],
-  [/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => handler.bracket.percent(s))],
+  [/^(backdrop-)opacity-(.+)$/, toFilter("opacity", (s) => handler.bracket.cssvar.percent(s))],
+  [/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => handler.bracket.cssvar.percent(s))],
   [/^(?:(backdrop-)|filter-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault)],
   [/^filter$/, () => [
     filterBase,
@@ -509,26 +498,27 @@ const tables = [
 ];
 
 const variablesAbbrMap = {
-  "write": "writing-mode",
-  "write-orient": "text-orientation",
   "bg-blend": "background-blend-mode",
   "bg-clip": "-webkit-background-clip",
   "bg-gradient": "linear-gradient",
-  "bg-origin-border": "background-origin",
+  "bg-image": "background-image",
+  "bg-origin": "background-origin",
   "bg-position": "background-position",
   "bg-repeat": "background-repeat",
   "bg-size": "background-size",
   "mix-blend": "mix-blend-mode",
-  "animate-speed": "animation-speed"
+  "object": "object-fit",
+  "object-position": "object-position",
+  "write": "writing-mode",
+  "write-orient": "text-orientation"
 };
-const cssVariables = [[
-  /^(.+)-\$(.+)$/,
-  ([, name, varname]) => {
+const cssVariables = [
+  [/^(.+?)-\$(.+)$/, ([, name, varname]) => {
     const prop = variablesAbbrMap[name];
     if (prop)
       return { [prop]: `var(--${varname})` };
-  }
-]];
+  }]
+];
 
 const divides = [
   [/^divide-?([xy])$/, handlerDivide],
@@ -546,7 +536,7 @@ const divides = [
   ["divide-none", { "border-style": "none" }]
 ];
 function handlerDivide([, d, s = "1"]) {
-  const v = handler.bracket.px(s);
+  const v = handler.bracket.cssvar.px(s);
   if (v != null) {
     const results = directionMap[d].map((item) => {
       const key = `border${item}-width`;
@@ -667,7 +657,7 @@ const scrolls = [
 
 const placeholders = [
   [/^\$ placeholder-(.+)$/, colorResolver("color", "placeholder")],
-  [/^\$ placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": handler.bracket.percent.cssvar(opacity) })]
+  [/^\$ placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": handler.bracket.percent(opacity) })]
 ];
 
 const rules = [
@@ -927,7 +917,7 @@ const variantSpaceAndDivide = (matcher) => {
 };
 
 const placeholderModifier = (input, { theme }) => {
-  const m = input.match(/^(.*)\b(placeholder-)(.+?)$/);
+  const m = input.match(/^(.*)\b(placeholder-)(.+)$/);
   if (m) {
     const [, pre = "", p, body] = m;
     if (hasColorValue(body, theme) || hasOpacityValue(body)) {
@@ -943,7 +933,7 @@ function hasColorValue(body, theme) {
 function hasOpacityValue(body) {
   const match = body.match(/^op(?:acity)?-?(.+)$/);
   if (match && match[1] != null)
-    return handler.bracket.percent.cssvar(match[1]) != null;
+    return handler.bracket.percent(match[1]) != null;
   return false;
 }
 

package/package.json

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