@unocss/preset-wind 0.22.5 → 0.24.0

package/README.md

@@ -1,6 +1,6 @@
 # @unocss/preset-wind
 
-Tailwind / Windi CSS compact preset for UnoCSS, [UnoCSS](https://github.com/antfu/unocss).
+Tailwind / Windi CSS compact preset for UnoCSS, [UnoCSS](https://github.com/unocss/unocss).
 
 ## Installation
 

package/dist/index.cjs

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const variants = require('@unocss/preset-mini/variants');
 const core = require('@unocss/core');
 const theme$1 = require('@unocss/preset-mini/theme');
 const presetMini = require('@unocss/preset-mini');
 const rules$1 = require('@unocss/preset-mini/rules');
 const utils = require('@unocss/preset-mini/utils');
+const variants$1 = require('@unocss/preset-mini/variants');
 
 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" }]
 ];
 
@@ -44,15 +42,15 @@ const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
   const data = utils.parseColor(body, theme);
   if (!data)
     return;
-  const { alpha, color, rgba } = data;
+  const { alpha, color, cssColor } = data;
   if (!color)
     return;
   let colorString = color;
-  if (rgba) {
+  if (cssColor) {
     if (alpha != null)
-      colorString = `rgba(${rgba.join(",")})`;
+      colorString = utils.colorToString(cssColor, alpha);
     else
-      colorString = `rgba(${rgba.join(",")}, var(--un-${mode}-opacity, 1))`;
+      colorString = utils.colorToString(cssColor, `var(--un-${mode}-opacity, ${cssColor.alpha ?? 1})`);
   }
   switch (mode) {
     case "from":
@@ -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,
@@ -292,7 +290,7 @@ const toFilter = (varName, resolver) => ([, b, s], { theme }) => {
 const dropShadowResolver = ([, s], { theme }) => {
   let v = theme.dropShadow?.[s || "DEFAULT"];
   if (v != null) {
-    const shadows = rules$1.colorableShadows(v, "--un-drop-shadow-color");
+    const shadows = utils.colorableShadows(v, "--un-drop-shadow-color");
     return [
       filterBase,
       {
@@ -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]) => {
+  [/^(.+?)-(\$.+)$/, ([, 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
+      ];
+    }
   }
 }
 
@@ -748,6 +748,10 @@ const rules = [
   rules$1.questionMark
 ].flat(1);
 
+const shortcuts = [
+  ...containerShortcuts
+];
+
 const theme = {
   ...theme$1.theme,
   animation: {
@@ -941,6 +945,13 @@ function hasOpacityValue(body) {
   return false;
 }
 
+const variants = (options) => [
+  placeholderModifier,
+  variantSpaceAndDivide,
+  ...variants$1.variants(options),
+  ...variantColorsScheme
+];
+
 const presetWind = (options = {}) => {
   options.dark = options.dark ?? "class";
   options.attributifyPseudo = options.attributifyPseudo ?? false;
@@ -948,15 +959,8 @@ const presetWind = (options = {}) => {
     name: "@unocss/preset-wind",
     theme,
     rules,
-    shortcuts: [
-      ...containerShortcuts
-    ],
-    variants: [
-      placeholderModifier,
-      variantSpaceAndDivide,
-      ...variants.variants(options),
-      ...variantColorsScheme
-    ],
+    shortcuts,
+    variants: variants(options),
     options
   };
 };
@@ -964,4 +968,7 @@ const presetWind = (options = {}) => {
 exports.colors = presetMini.colors;
 exports["default"] = presetWind;
 exports.presetWind = presetWind;
+exports.rules = rules;
+exports.shortcuts = shortcuts;
 exports.theme = theme;
+exports.variants = variants;

package/dist/index.d.ts

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

package/dist/index.mjs

@@ -1,12 +1,12 @@
-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, 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 { 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 { handler, positionMap, parseColor, colorToString, colorResolver, colorableShadows, directionMap, directionSize, variantMatcher, variantParentMatcher } from '@unocss/preset-mini/utils';
+import { variants as variants$1 } from '@unocss/preset-mini/variants';
 
 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" }]
 ];
 
@@ -40,15 +38,15 @@ const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
   const data = parseColor(body, theme);
   if (!data)
     return;
-  const { alpha, color, rgba } = data;
+  const { alpha, color, cssColor } = data;
   if (!color)
     return;
   let colorString = color;
-  if (rgba) {
+  if (cssColor) {
     if (alpha != null)
-      colorString = `rgba(${rgba.join(",")})`;
+      colorString = colorToString(cssColor, alpha);
     else
-      colorString = `rgba(${rgba.join(",")}, var(--un-${mode}-opacity, 1))`;
+      colorString = colorToString(cssColor, `var(--un-${mode}-opacity, ${cssColor.alpha ?? 1})`);
   }
   switch (mode) {
     case "from":
@@ -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]) => {
+  [/^(.+?)-(\$.+)$/, ([, 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
+      ];
+    }
   }
 }
 
@@ -744,6 +744,10 @@ const rules = [
   questionMark
 ].flat(1);
 
+const shortcuts = [
+  ...containerShortcuts
+];
+
 const theme = {
   ...theme$1,
   animation: {
@@ -937,6 +941,13 @@ function hasOpacityValue(body) {
   return false;
 }
 
+const variants = (options) => [
+  placeholderModifier,
+  variantSpaceAndDivide,
+  ...variants$1(options),
+  ...variantColorsScheme
+];
+
 const presetWind = (options = {}) => {
   options.dark = options.dark ?? "class";
   options.attributifyPseudo = options.attributifyPseudo ?? false;
@@ -944,17 +955,10 @@ const presetWind = (options = {}) => {
     name: "@unocss/preset-wind",
     theme,
     rules,
-    shortcuts: [
-      ...containerShortcuts
-    ],
-    variants: [
-      placeholderModifier,
-      variantSpaceAndDivide,
-      ...variants(options),
-      ...variantColorsScheme
-    ],
+    shortcuts,
+    variants: variants(options),
     options
   };
 };
 
-export { presetWind as default, presetWind, theme };
+export { presetWind as default, presetWind, rules, shortcuts, theme, variants };

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@unocss/preset-wind",
-  "version": "0.22.5",
+  "version": "0.24.0",
   "description": "Tailwind / Windi CSS compact preset for UnoCSS",
   "keywords": [
     "unocss",
     "unocss-preset"
   ],
-  "homepage": "https://github.com/antfu/unocss/tree/main/packages/preset-wind#readme",
+  "homepage": "https://github.com/unocss/unocss/tree/main/packages/preset-wind#readme",
   "bugs": {
-    "url": "https://github.com/antfu/unocss/issues"
+    "url": "https://github.com/unocss/unocss/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/antfu/unocss.git",
+    "url": "git+https://github.com/unocss/unocss.git",
     "directory": "packages/preset-wind"
   },
   "funding": "https://github.com/sponsors/antfu",
@@ -35,8 +35,8 @@
     "*.css"
   ],
   "dependencies": {
-    "@unocss/core": "0.22.5",
-    "@unocss/preset-mini": "0.22.5"
+    "@unocss/core": "0.24.0",
+    "@unocss/preset-mini": "0.24.0"
   },
   "scripts": {
     "build": "unbuild",