@unocss/preset-wind 0.22.2 → 0.22.3

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" }]
 ];
 
@@ -259,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";
@@ -301,7 +301,7 @@ const dropShadowResolver = ([, s], { theme }) => {
       }
     ];
   }
-  v = utils.handler.bracket(s);
+  v = utils.handler.bracket.cssvar(s);
   if (v != null) {
     return [
       filterBase,
@@ -313,17 +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-(.+)$/, utils.colorResolver("--un-drop-shadow-color", "drop-shadow")],
-  [/^(?:filter-)?drop-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-drop-shadow-opacity": utils.handler.bracket.percent.cssvar(opacity) })],
+  [/^(?: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,
@@ -502,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 prop = variablesAbbrMap[name];
+const cssVariables = [
+  [/^([^$]+)(?<=-)\$(.+)$/, ([, name, varname]) => {
+    const prop = variablesAbbrMap[name.slice(0, -1)];
     if (prop)
       return { [prop]: `var(--${varname})` };
-  }
-]];
+  }]
+];
 
 const divides = [
   [/^divide-?([xy])$/, handlerDivide],
@@ -539,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`;
@@ -660,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 = [
@@ -920,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)) {
@@ -936,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

@@ -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" }]
 ];
 
@@ -255,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";
@@ -297,7 +297,7 @@ const dropShadowResolver = ([, s], { theme }) => {
       }
     ];
   }
-  v = handler.bracket(s);
+  v = handler.bracket.cssvar(s);
   if (v != null) {
     return [
       filterBase,
@@ -309,17 +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-(.+)$/, colorResolver("--un-drop-shadow-color", "drop-shadow")],
-  [/^(?:filter-)?drop-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-drop-shadow-opacity": handler.bracket.percent.cssvar(opacity) })],
+  [/^(?: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,
@@ -498,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 prop = variablesAbbrMap[name];
+const cssVariables = [
+  [/^([^$]+)(?<=-)\$(.+)$/, ([, name, varname]) => {
+    const prop = variablesAbbrMap[name.slice(0, -1)];
     if (prop)
       return { [prop]: `var(--${varname})` };
-  }
-]];
+  }]
+];
 
 const divides = [
   [/^divide-?([xy])$/, handlerDivide],
@@ -535,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`;
@@ -656,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 = [
@@ -916,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)) {
@@ -932,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.2",
+  "version": "0.22.3",
   "description": "Tailwind / Windi CSS compact preset for UnoCSS",
   "keywords": [
     "unocss",
@@ -35,8 +35,8 @@
     "*.css"
   ],
   "dependencies": {
-    "@unocss/core": "0.22.2",
-    "@unocss/preset-mini": "0.22.2"
+    "@unocss/core": "0.22.3",
+    "@unocss/preset-mini": "0.22.3"
   },
   "scripts": {
     "build": "unbuild",