@unocss/preset-wind 0.22.4 → 0.23.0

package/dist/index.cjs

@@ -10,7 +10,7 @@ const rules$1 = require('@unocss/preset-mini/rules');
 const utils = require('@unocss/preset-mini/utils');
 
 const animations = [
-  [/^keyframes-(.+)$/, ([, name], { theme, constructCSS }) => {
+  [/^(?:animate-)?keyframes-(.+)$/, ([, name], { theme, constructCSS }) => {
     const kf = theme.animation?.keyframes?.[name];
     if (kf)
       return `@keyframes ${name}${kf}
@@ -25,18 +25,16 @@ ${constructCSS({ animation: `${name}` })}`;
       return `@keyframes ${name}${kf}
 ${constructCSS(Object.assign({ animation: `${name} ${duration} ${timing} infinite` }, props))}`;
     }
+    return { animation: utils.handler.bracket.cssvar(name) };
   }],
-  [/^animate-(?:duration-)?(.+)$/, ([, d]) => ({ "animation-duration": utils.handler.bracket.cssvar.time(d) })],
+  [/^animate-name-(.+)/, ([, d]) => ({ "animation-name": utils.handler.bracket.cssvar(d) ?? 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.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-ease(?:-(.+))?$/, ([, d], { theme }) => ({ "animation-timing-function": theme.easing?.[d || "DEFAULT"] ?? utils.handler.bracket.cssvar(d) })],
+  [/^animate-(?:fill-|mode-|fill-mode-)?(none|forwards|backwards|both|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-fill-mode": d })],
+  [/^animate-(?:direction-)?(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-direction": d })],
+  [/^animate-(?:iteration-|count-|iteration-count-)(.+)$/, ([, d]) => ({ "animation-iteration-count": utils.handler.bracket.cssvar(d) ?? d.replace(/\-/g, ",") })],
+  [/^animate-(?:play-|state-|play-state-)?(paused|running|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-play-state": d })],
   ["animate-none", { animation: "none" }]
 ];
 
@@ -267,8 +265,8 @@ const percentWithDefault = (str) => {
     return v;
 };
 const toFilter = (varName, resolver) => ([, b, s], { theme }) => {
-  const value = resolver(s, theme);
-  if (value != null && value !== "") {
+  const value = resolver(s, theme) ?? (s === "none" ? "0" : "");
+  if (value !== "") {
     if (b) {
       return [
         backdropFilterBase,
@@ -340,12 +338,7 @@ const filters = [
   ["backdrop-filter-none", {
     "-webkit-backdrop-filter": "none",
     "backdrop-filter": "none"
-  }],
-  [/^(?:filter-)?(blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|saturate|sepia)-none$/, ([, s]) => ({ filter: `${s}(0)` })],
-  [/^backdrop-(blur|brightness|contrast|grayscale|hue-rotate|invert|opacity|saturate|sepia)-none$/, ([, s]) => ({
-    "-webkit-backdrop-filter": `${s}(0)`,
-    "backdrop-filter": `${s}(0)`
-  })]
+  }]
 ];
 
 const spaces = [
@@ -354,17 +347,20 @@ const spaces = [
   [/^space-(block|inline)-(-?.+)$/, handlerSpace],
   [/^space-(block|inline)-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })]
 ];
-function handlerSpace(match) {
-  const [, direction] = match;
-  const results = utils.directionSize("margin")(match)?.map((item) => {
-    const value = item[0].endsWith("right") || item[0].endsWith("bottom") ? `calc(${item[1]} * var(--un-space-${direction}-reverse))` : `calc(${item[1]} * calc(1 - var(--un-space-${direction}-reverse)))`;
-    return [item[0], value];
-  });
-  if (results) {
-    return [
-      [`--un-space-${direction}-reverse`, 0],
-      ...results
-    ];
+function handlerSpace([, d, s = "1"]) {
+  const v = utils.handler.bracket.cssvar.auto.fraction.rem(s);
+  if (v != null) {
+    const results = utils.directionMap[d].map((item) => {
+      const key = `margin${item}`;
+      const value = item.endsWith("right") || item.endsWith("bottom") ? `calc(${v} * var(--un-space-${d}-reverse))` : `calc(${v} * calc(1 - var(--un-space-${d}-reverse)))`;
+      return [key, value];
+    });
+    if (results) {
+      return [
+        [`--un-space-${d}-reverse`, 0],
+        ...results
+      ];
+    }
   }
 }
 
@@ -517,10 +513,10 @@ const variablesAbbrMap = {
   "write-orient": "text-orientation"
 };
 const cssVariables = [
-  [/^([^$]+)(?<=-)\$(.+)$/, ([, name, varname]) => {
-    const prop = variablesAbbrMap[name.slice(0, -1)];
+  [/^(.+?)-(\$.+)$/, ([, name, varname]) => {
+    const prop = variablesAbbrMap[name];
     if (prop)
-      return { [prop]: `var(--${varname})` };
+      return { [prop]: utils.handler.cssvar(varname) };
   }]
 ];
 
@@ -547,8 +543,12 @@ function handlerDivide([, d, s = "1"]) {
       const value = item.endsWith("right") || item.endsWith("bottom") ? `calc(${v} * var(--un-divide-${d}-reverse))` : `calc(${v} * calc(1 - var(--un-divide-${d}-reverse)))`;
       return [key, value];
     });
-    if (results)
-      return [[`--un-divide-${d}-reverse`, 0], ...results];
+    if (results) {
+      return [
+        [`--un-divide-${d}-reverse`, 0],
+        ...results
+      ];
+    }
   }
 }
 

package/dist/index.mjs

@@ -3,10 +3,10 @@ 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, 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';
+import { handler, positionMap, parseColor, colorResolver, directionMap, directionSize, variantMatcher, variantParentMatcher } from '@unocss/preset-mini/utils';
 
 const animations = [
-  [/^keyframes-(.+)$/, ([, name], { theme, constructCSS }) => {
+  [/^(?:animate-)?keyframes-(.+)$/, ([, name], { theme, constructCSS }) => {
     const kf = theme.animation?.keyframes?.[name];
     if (kf)
       return `@keyframes ${name}${kf}
@@ -21,18 +21,16 @@ ${constructCSS({ animation: `${name}` })}`;
       return `@keyframes ${name}${kf}
 ${constructCSS(Object.assign({ animation: `${name} ${duration} ${timing} infinite` }, props))}`;
     }
+    return { animation: handler.bracket.cssvar(name) };
   }],
-  [/^animate-(?:duration-)?(.+)$/, ([, d]) => ({ "animation-duration": handler.bracket.cssvar.time(d) })],
+  [/^animate-name-(.+)/, ([, d]) => ({ "animation-name": handler.bracket.cssvar(d) ?? 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.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-ease(?:-(.+))?$/, ([, d], { theme }) => ({ "animation-timing-function": theme.easing?.[d || "DEFAULT"] ?? handler.bracket.cssvar(d) })],
+  [/^animate-(?:fill-|mode-|fill-mode-)?(none|forwards|backwards|both|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-fill-mode": d })],
+  [/^animate-(?:direction-)?(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-direction": d })],
+  [/^animate-(?:iteration-|count-|iteration-count-)(.+)$/, ([, d]) => ({ "animation-iteration-count": handler.bracket.cssvar(d) ?? d.replace(/\-/g, ",") })],
+  [/^animate-(?:play-|state-|play-state-)?(paused|running|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-play-state": d })],
   ["animate-none", { animation: "none" }]
 ];
 
@@ -263,8 +261,8 @@ const percentWithDefault = (str) => {
     return v;
 };
 const toFilter = (varName, resolver) => ([, b, s], { theme }) => {
-  const value = resolver(s, theme);
-  if (value != null && value !== "") {
+  const value = resolver(s, theme) ?? (s === "none" ? "0" : "");
+  if (value !== "") {
     if (b) {
       return [
         backdropFilterBase,
@@ -336,12 +334,7 @@ const filters = [
   ["backdrop-filter-none", {
     "-webkit-backdrop-filter": "none",
     "backdrop-filter": "none"
-  }],
-  [/^(?:filter-)?(blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|saturate|sepia)-none$/, ([, s]) => ({ filter: `${s}(0)` })],
-  [/^backdrop-(blur|brightness|contrast|grayscale|hue-rotate|invert|opacity|saturate|sepia)-none$/, ([, s]) => ({
-    "-webkit-backdrop-filter": `${s}(0)`,
-    "backdrop-filter": `${s}(0)`
-  })]
+  }]
 ];
 
 const spaces = [
@@ -350,17 +343,20 @@ const spaces = [
   [/^space-(block|inline)-(-?.+)$/, handlerSpace],
   [/^space-(block|inline)-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })]
 ];
-function handlerSpace(match) {
-  const [, direction] = match;
-  const results = directionSize("margin")(match)?.map((item) => {
-    const value = item[0].endsWith("right") || item[0].endsWith("bottom") ? `calc(${item[1]} * var(--un-space-${direction}-reverse))` : `calc(${item[1]} * calc(1 - var(--un-space-${direction}-reverse)))`;
-    return [item[0], value];
-  });
-  if (results) {
-    return [
-      [`--un-space-${direction}-reverse`, 0],
-      ...results
-    ];
+function handlerSpace([, d, s = "1"]) {
+  const v = handler.bracket.cssvar.auto.fraction.rem(s);
+  if (v != null) {
+    const results = directionMap[d].map((item) => {
+      const key = `margin${item}`;
+      const value = item.endsWith("right") || item.endsWith("bottom") ? `calc(${v} * var(--un-space-${d}-reverse))` : `calc(${v} * calc(1 - var(--un-space-${d}-reverse)))`;
+      return [key, value];
+    });
+    if (results) {
+      return [
+        [`--un-space-${d}-reverse`, 0],
+        ...results
+      ];
+    }
   }
 }
 
@@ -513,10 +509,10 @@ const variablesAbbrMap = {
   "write-orient": "text-orientation"
 };
 const cssVariables = [
-  [/^([^$]+)(?<=-)\$(.+)$/, ([, name, varname]) => {
-    const prop = variablesAbbrMap[name.slice(0, -1)];
+  [/^(.+?)-(\$.+)$/, ([, name, varname]) => {
+    const prop = variablesAbbrMap[name];
     if (prop)
-      return { [prop]: `var(--${varname})` };
+      return { [prop]: handler.cssvar(varname) };
   }]
 ];
 
@@ -543,8 +539,12 @@ function handlerDivide([, d, s = "1"]) {
       const value = item.endsWith("right") || item.endsWith("bottom") ? `calc(${v} * var(--un-divide-${d}-reverse))` : `calc(${v} * calc(1 - var(--un-divide-${d}-reverse)))`;
       return [key, value];
     });
-    if (results)
-      return [[`--un-divide-${d}-reverse`, 0], ...results];
+    if (results) {
+      return [
+        [`--un-divide-${d}-reverse`, 0],
+        ...results
+      ];
+    }
   }
 }
 

package/package.json

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