@unocss/preset-wind 0.50.6 → 0.50.8

package/README.md

@@ -2,64 +2,9 @@
 
 Tailwind / Windi CSS compact preset for [UnoCSS](https://github.com/unocss/unocss).
 
-> This preset inherits
-> - [@unocss/preset-mini](https://github.com/antfu/unocss/tree/main/packages/preset-mini)
+## Documentation
 
-## Installation
-
-```bash
-npm i -D @unocss/preset-wind
-```
-
-```ts
-import presetWind from '@unocss/preset-wind'
-
-UnoCSS({
-  presets: [
-    presetWind(),
-  ],
-})
-```
-
-## Differences from Windi CSS
-
-### `<sm` `@lg` Variants
-
-- `<sm:p-1` -> `lt-sm:p-1`
-- `@lg:p-1` -> `at-lg:p-1`
-- `>xl:p-1` -> `lg:p-1`
-
-to have more consistent naming.
-
-### Bracket Syntax Spaces
-
-This preset uses `_` instead of `,` for respecting space in bracket syntax.
-
-- `grid-cols-[1fr,10px,max-content]` -> `grid-cols-[1fr_10px_max-content]`
-
-since some CSS rules require `,` as parts of the value, e.g. `grid-cols-[repeat(3,auto)]`
-
-## Experimental Features
-
-This preset includes experimental feature that may be changed in breaking ways at any time.
-
-### Media Hover
-
-Media hover addresses the [sticky hover](https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/) problem where tapping target that includes hover style on mobile will persist that hover style until tapping elsewhere.
-
-Since the regular `:hover` style most probably used so widely, the variant uses `@hover` syntax to distinguish it from the regular `hover` pseudo.
-
-Example: `@hover-text-red`
-
-Output:
-```css
-@media (hover: hover) and (pointer: fine) {
-  .\@hover-text-red:hover {
-    --un-text-opacity: 1;
-    color: rgba(248, 113, 113, var(--un-text-opacity));
-  }
-}
-```
+Please refer to the [documentation](https://unocss.dev/presets/wind).
 
 ## License
 

package/dist/index.cjs

@@ -78,12 +78,12 @@ const animations = [
   ...utils.makeGlobalStaticRules("animate", "animation")
 ];
 
-const bgGradientToValue = (cssColor) => {
+function bgGradientToValue(cssColor) {
   if (cssColor)
     return utils.colorToString(cssColor, 0);
   return "rgba(255,255,255,0)";
-};
-const bgGradientColorValue = (mode, cssColor, color, alpha) => {
+}
+function bgGradientColorValue(mode, cssColor, color, alpha) {
   if (cssColor) {
     if (alpha != null)
       return utils.colorToString(cssColor, alpha);
@@ -91,33 +91,45 @@ const bgGradientColorValue = (mode, cssColor, color, alpha) => {
       return utils.colorToString(cssColor, `var(--un-${mode}-opacity, ${utils.colorOpacityToString(cssColor)})`);
   }
   return utils.colorToString(color, alpha);
-};
-const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
-  const data = utils.parseColor(body, theme);
-  if (!data)
-    return;
-  const { alpha, color, cssColor } = data;
-  if (!color)
-    return;
-  const colorString = bgGradientColorValue(mode, cssColor, color, alpha);
-  switch (mode) {
-    case "from":
-      return {
-        "--un-gradient-from": colorString,
-        "--un-gradient-to": bgGradientToValue(cssColor),
-        "--un-gradient-stops": "var(--un-gradient-from), var(--un-gradient-to)"
-      };
-    case "via":
-      return {
-        "--un-gradient-to": bgGradientToValue(cssColor),
-        "--un-gradient-stops": `var(--un-gradient-from), ${colorString}, var(--un-gradient-to)`
-      };
-    case "to":
-      return {
-        "--un-gradient-to": colorString
-      };
-  }
-};
+}
+function bgGradientColorResolver(mode) {
+  return ([, body], { theme }) => {
+    const data = utils.parseColor(body, theme);
+    if (!data)
+      return;
+    const { alpha, color, cssColor } = data;
+    if (!color)
+      return;
+    const colorString = bgGradientColorValue(mode, cssColor, color, alpha);
+    switch (mode) {
+      case "from":
+        return {
+          "--un-gradient-from-position": "0%",
+          "--un-gradient-from": `${colorString} var(--un-gradient-from-position)`,
+          "--un-gradient-to": `${bgGradientToValue(cssColor)} var(--un-gradient-to-position)`,
+          "--un-gradient-stops": "var(--un-gradient-from), var(--un-gradient-to)"
+        };
+      case "via":
+        return {
+          "--un-gradient-via-position": "50%",
+          "--un-gradient-to": bgGradientToValue(cssColor),
+          "--un-gradient-stops": `var(--un-gradient-from), ${colorString} var(--un-gradient-via-position), var(--un-gradient-to)`
+        };
+      case "to":
+        return {
+          "--un-gradient-to-position": "100%",
+          "--un-gradient-to": `${colorString} var(--un-gradient-to-position)`
+        };
+    }
+  };
+}
+function bgGradientPositionResolver() {
+  return ([, mode, body]) => {
+    return {
+      [`--un-gradient-${mode}-position`]: `${Number(utils.handler.bracket.cssvar.percent(body)) * 100}%`
+    };
+  };
+}
 const bgUrlRE = /^\[url\(.+\)\]$/;
 const bgLengthRE = /^\[length:.+\]$/;
 const bgPositionRE = /^\[position:.+\]$/;
@@ -140,6 +152,7 @@ const backgroundStyles = [
   [/^(?:bg-gradient-)?from-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-from-opacity": utils.handler.bracket.percent(opacity) })],
   [/^(?:bg-gradient-)?via-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-via-opacity": utils.handler.bracket.percent(opacity) })],
   [/^(?:bg-gradient-)?to-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-to-opacity": utils.handler.bracket.percent(opacity) })],
+  [/^(from|via|to)-([\d\.]+)%$/, bgGradientPositionResolver()],
   [/^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)"] }],
@@ -378,32 +391,34 @@ const backdropFilterBase = {
   "--un-backdrop-sepia": rules$1.varEmpty
 };
 const backdropFilterProperty = "var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)";
-const percentWithDefault = (str) => {
+function percentWithDefault(str) {
   let v = utils.handler.bracket.cssvar(str || "");
   if (v != null)
     return v;
   v = str ? utils.handler.percent(str) : "1";
   if (v != null && parseFloat(v) <= 1)
     return v;
-};
-const toFilter = (varName, resolver) => ([, b, s], { theme }) => {
-  const value = resolver(s, theme) ?? (s === "none" ? "0" : "");
-  if (value !== "") {
-    if (b) {
-      return {
-        [`--un-${b}${varName}`]: `${varName}(${value})`,
-        "-webkit-backdrop-filter": backdropFilterProperty,
-        "backdrop-filter": backdropFilterProperty
-      };
-    } else {
-      return {
-        [`--un-${varName}`]: `${varName}(${value})`,
-        filter: filterProperty
-      };
+}
+function toFilter(varName, resolver) {
+  return ([, b, s], { theme }) => {
+    const value = resolver(s, theme) ?? (s === "none" ? "0" : "");
+    if (value !== "") {
+      if (b) {
+        return {
+          [`--un-${b}${varName}`]: `${varName}(${value})`,
+          "-webkit-backdrop-filter": backdropFilterProperty,
+          "backdrop-filter": backdropFilterProperty
+        };
+      } else {
+        return {
+          [`--un-${varName}`]: `${varName}(${value})`,
+          filter: filterProperty
+        };
+      }
     }
-  }
-};
-const dropShadowResolver = ([, s], { theme }) => {
+  };
+}
+function dropShadowResolver([, s], { theme }) {
   let v = theme.dropShadow?.[s || "DEFAULT"];
   if (v != null) {
     const shadows = utils.colorableShadows(v, "--un-drop-shadow-color");
@@ -419,7 +434,7 @@ const dropShadowResolver = ([, s], { theme }) => {
       "filter": filterProperty
     };
   }
-};
+}
 const filters = [
   [/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || utils.handler.bracket.cssvar.px(s)), { autocomplete: ["(backdrop|filter)-blur-$blur", "blur-$blur"] }],
   [/^(?:(backdrop-)|filter-)?brightness-(.+)$/, toFilter("brightness", (s) => utils.handler.bracket.cssvar.percent(s)), { autocomplete: ["(backdrop|filter)-brightness-<percent>", "brightness-<percent>"] }],
@@ -712,6 +727,9 @@ const lineClamps = [
     "line-clamp": v
   }), { autocomplete: ["line-clamp", "line-clamp-<num>"] }],
   ...["none", ...utils.globalKeywords].map((keyword) => [`line-clamp-${keyword}`, {
+    "overflow": "visible",
+    "display": "block",
+    "-webkit-box-orient": "horizontal",
     "-webkit-line-clamp": keyword,
     "line-clamp": keyword
   }])
@@ -724,10 +742,12 @@ const fontVariantNumericBase = {
   "--un-numeric-spacing": rules$1.varEmpty,
   "--un-numeric-fraction": rules$1.varEmpty
 };
-const toEntries = (entry) => ({
-  ...entry,
-  "font-variant-numeric": "var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)"
-});
+function toEntries(entry) {
+  return {
+    ...entry,
+    "font-variant-numeric": "var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)"
+  };
+}
 const fontVariantNumeric = [
   [/^ordinal$/, () => toEntries({ "--un-ordinal": "ordinal" }), { autocomplete: "ordinal" }],
   [/^slashed-zero$/, () => toEntries({ "--un-slashed-zero": "slashed-zero" }), { autocomplete: "slashed-zero" }],
@@ -1171,19 +1191,21 @@ function hasOpacityValue(body) {
   return false;
 }
 
-const variants = (options) => [
-  placeholderModifier,
-  variantSpaceAndDivide,
-  ...variants$1.variants(options),
-  ...variantContrasts,
-  ...variantOrientations,
-  ...variantMotions,
-  ...variantCombinators,
-  ...variantColorsScheme,
-  ...variantStickyHover
-];
+function variants(options) {
+  return [
+    placeholderModifier,
+    variantSpaceAndDivide,
+    ...variants$1.variants(options),
+    ...variantContrasts,
+    ...variantOrientations,
+    ...variantMotions,
+    ...variantCombinators,
+    ...variantColorsScheme,
+    ...variantStickyHover
+  ];
+}
 
-const presetWind = (options = {}) => {
+function presetWind(options = {}) {
   options.dark = options.dark ?? "class";
   options.attributifyPseudo = options.attributifyPseudo ?? false;
   options.preflight = options.preflight ?? true;
@@ -1199,7 +1221,7 @@ const presetWind = (options = {}) => {
     preflights: options.preflight ? presetMini.normalizePreflights(presetMini.preflights, options.variablePrefix) : [],
     prefix: options.prefix
   };
-};
+}
 
 exports.colors = presetMini.colors;
 exports.preflights = presetMini.preflights;

package/dist/index.d.ts

@@ -10,10 +10,10 @@ declare const shortcuts: _unocss_core.Shortcut<_unocss_preset_mini.Theme>[];
 
 declare const theme: Theme;
 
-declare const variants: (options: PresetWindOptions) => Variant<Theme>[];
+declare function variants(options: PresetWindOptions): Variant<Theme>[];
 
 interface PresetWindOptions extends PresetMiniOptions {
 }
-declare const presetWind: (options?: PresetWindOptions) => Preset<Theme>;
+declare function presetWind(options?: PresetWindOptions): Preset<Theme>;
 
 export { PresetWindOptions, presetWind as default, presetWind, rules, shortcuts, theme, variants };

package/dist/index.mjs

@@ -75,12 +75,12 @@ const animations = [
   ...makeGlobalStaticRules("animate", "animation")
 ];
 
-const bgGradientToValue = (cssColor) => {
+function bgGradientToValue(cssColor) {
   if (cssColor)
     return colorToString(cssColor, 0);
   return "rgba(255,255,255,0)";
-};
-const bgGradientColorValue = (mode, cssColor, color, alpha) => {
+}
+function bgGradientColorValue(mode, cssColor, color, alpha) {
   if (cssColor) {
     if (alpha != null)
       return colorToString(cssColor, alpha);
@@ -88,33 +88,45 @@ const bgGradientColorValue = (mode, cssColor, color, alpha) => {
       return colorToString(cssColor, `var(--un-${mode}-opacity, ${colorOpacityToString(cssColor)})`);
   }
   return colorToString(color, alpha);
-};
-const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
-  const data = parseColor(body, theme);
-  if (!data)
-    return;
-  const { alpha, color, cssColor } = data;
-  if (!color)
-    return;
-  const colorString = bgGradientColorValue(mode, cssColor, color, alpha);
-  switch (mode) {
-    case "from":
-      return {
-        "--un-gradient-from": colorString,
-        "--un-gradient-to": bgGradientToValue(cssColor),
-        "--un-gradient-stops": "var(--un-gradient-from), var(--un-gradient-to)"
-      };
-    case "via":
-      return {
-        "--un-gradient-to": bgGradientToValue(cssColor),
-        "--un-gradient-stops": `var(--un-gradient-from), ${colorString}, var(--un-gradient-to)`
-      };
-    case "to":
-      return {
-        "--un-gradient-to": colorString
-      };
-  }
-};
+}
+function bgGradientColorResolver(mode) {
+  return ([, body], { theme }) => {
+    const data = parseColor(body, theme);
+    if (!data)
+      return;
+    const { alpha, color, cssColor } = data;
+    if (!color)
+      return;
+    const colorString = bgGradientColorValue(mode, cssColor, color, alpha);
+    switch (mode) {
+      case "from":
+        return {
+          "--un-gradient-from-position": "0%",
+          "--un-gradient-from": `${colorString} var(--un-gradient-from-position)`,
+          "--un-gradient-to": `${bgGradientToValue(cssColor)} var(--un-gradient-to-position)`,
+          "--un-gradient-stops": "var(--un-gradient-from), var(--un-gradient-to)"
+        };
+      case "via":
+        return {
+          "--un-gradient-via-position": "50%",
+          "--un-gradient-to": bgGradientToValue(cssColor),
+          "--un-gradient-stops": `var(--un-gradient-from), ${colorString} var(--un-gradient-via-position), var(--un-gradient-to)`
+        };
+      case "to":
+        return {
+          "--un-gradient-to-position": "100%",
+          "--un-gradient-to": `${colorString} var(--un-gradient-to-position)`
+        };
+    }
+  };
+}
+function bgGradientPositionResolver() {
+  return ([, mode, body]) => {
+    return {
+      [`--un-gradient-${mode}-position`]: `${Number(handler.bracket.cssvar.percent(body)) * 100}%`
+    };
+  };
+}
 const bgUrlRE = /^\[url\(.+\)\]$/;
 const bgLengthRE = /^\[length:.+\]$/;
 const bgPositionRE = /^\[position:.+\]$/;
@@ -137,6 +149,7 @@ const backgroundStyles = [
   [/^(?:bg-gradient-)?from-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-from-opacity": handler.bracket.percent(opacity) })],
   [/^(?:bg-gradient-)?via-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-via-opacity": handler.bracket.percent(opacity) })],
   [/^(?:bg-gradient-)?to-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-to-opacity": handler.bracket.percent(opacity) })],
+  [/^(from|via|to)-([\d\.]+)%$/, bgGradientPositionResolver()],
   [/^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)"] }],
@@ -375,32 +388,34 @@ const backdropFilterBase = {
   "--un-backdrop-sepia": varEmpty
 };
 const backdropFilterProperty = "var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)";
-const percentWithDefault = (str) => {
+function percentWithDefault(str) {
   let v = handler.bracket.cssvar(str || "");
   if (v != null)
     return v;
   v = str ? handler.percent(str) : "1";
   if (v != null && parseFloat(v) <= 1)
     return v;
-};
-const toFilter = (varName, resolver) => ([, b, s], { theme }) => {
-  const value = resolver(s, theme) ?? (s === "none" ? "0" : "");
-  if (value !== "") {
-    if (b) {
-      return {
-        [`--un-${b}${varName}`]: `${varName}(${value})`,
-        "-webkit-backdrop-filter": backdropFilterProperty,
-        "backdrop-filter": backdropFilterProperty
-      };
-    } else {
-      return {
-        [`--un-${varName}`]: `${varName}(${value})`,
-        filter: filterProperty
-      };
+}
+function toFilter(varName, resolver) {
+  return ([, b, s], { theme }) => {
+    const value = resolver(s, theme) ?? (s === "none" ? "0" : "");
+    if (value !== "") {
+      if (b) {
+        return {
+          [`--un-${b}${varName}`]: `${varName}(${value})`,
+          "-webkit-backdrop-filter": backdropFilterProperty,
+          "backdrop-filter": backdropFilterProperty
+        };
+      } else {
+        return {
+          [`--un-${varName}`]: `${varName}(${value})`,
+          filter: filterProperty
+        };
+      }
     }
-  }
-};
-const dropShadowResolver = ([, s], { theme }) => {
+  };
+}
+function dropShadowResolver([, s], { theme }) {
   let v = theme.dropShadow?.[s || "DEFAULT"];
   if (v != null) {
     const shadows = colorableShadows(v, "--un-drop-shadow-color");
@@ -416,7 +431,7 @@ const dropShadowResolver = ([, s], { theme }) => {
       "filter": filterProperty
     };
   }
-};
+}
 const filters = [
   [/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || handler.bracket.cssvar.px(s)), { autocomplete: ["(backdrop|filter)-blur-$blur", "blur-$blur"] }],
   [/^(?:(backdrop-)|filter-)?brightness-(.+)$/, toFilter("brightness", (s) => handler.bracket.cssvar.percent(s)), { autocomplete: ["(backdrop|filter)-brightness-<percent>", "brightness-<percent>"] }],
@@ -709,6 +724,9 @@ const lineClamps = [
     "line-clamp": v
   }), { autocomplete: ["line-clamp", "line-clamp-<num>"] }],
   ...["none", ...globalKeywords].map((keyword) => [`line-clamp-${keyword}`, {
+    "overflow": "visible",
+    "display": "block",
+    "-webkit-box-orient": "horizontal",
     "-webkit-line-clamp": keyword,
     "line-clamp": keyword
   }])
@@ -721,10 +739,12 @@ const fontVariantNumericBase = {
   "--un-numeric-spacing": varEmpty,
   "--un-numeric-fraction": varEmpty
 };
-const toEntries = (entry) => ({
-  ...entry,
-  "font-variant-numeric": "var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)"
-});
+function toEntries(entry) {
+  return {
+    ...entry,
+    "font-variant-numeric": "var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)"
+  };
+}
 const fontVariantNumeric = [
   [/^ordinal$/, () => toEntries({ "--un-ordinal": "ordinal" }), { autocomplete: "ordinal" }],
   [/^slashed-zero$/, () => toEntries({ "--un-slashed-zero": "slashed-zero" }), { autocomplete: "slashed-zero" }],
@@ -1168,19 +1188,21 @@ function hasOpacityValue(body) {
   return false;
 }
 
-const variants = (options) => [
-  placeholderModifier,
-  variantSpaceAndDivide,
-  ...variants$1(options),
-  ...variantContrasts,
-  ...variantOrientations,
-  ...variantMotions,
-  ...variantCombinators,
-  ...variantColorsScheme,
-  ...variantStickyHover
-];
+function variants(options) {
+  return [
+    placeholderModifier,
+    variantSpaceAndDivide,
+    ...variants$1(options),
+    ...variantContrasts,
+    ...variantOrientations,
+    ...variantMotions,
+    ...variantCombinators,
+    ...variantColorsScheme,
+    ...variantStickyHover
+  ];
+}
 
-const presetWind = (options = {}) => {
+function presetWind(options = {}) {
   options.dark = options.dark ?? "class";
   options.attributifyPseudo = options.attributifyPseudo ?? false;
   options.preflight = options.preflight ?? true;
@@ -1196,6 +1218,6 @@ const presetWind = (options = {}) => {
     preflights: options.preflight ? normalizePreflights(preflights, options.variablePrefix) : [],
     prefix: options.prefix
   };
-};
+}
 
 export { presetWind as default, presetWind, rules, shortcuts, theme, variants };

package/package.json

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