@unocss/preset-mini 0.22.5 → 0.24.0

package/dist/chunks/utilities.cjs

@@ -2,6 +2,221 @@
 
 const core = require('@unocss/core');
 
+const cssColorFunctions = ["hsl", "hsla", "hwb", "lab", "lch", "oklab", "oklch", "rgb", "rgba"];
+function hex2rgba(hex = "") {
+  const color = parseHexColor(hex);
+  if (color != null) {
+    const { components, alpha } = color;
+    if (alpha === void 0)
+      return components;
+    return [...components, alpha];
+  }
+}
+function parseCssColor(str = "") {
+  const color = parseColor$1(str);
+  if (color == null)
+    return;
+  const { type: casedType, components, alpha } = color;
+  const type = casedType.toLowerCase();
+  if (components.length === 0)
+    return;
+  if (["rgba", "hsla"].includes(type) && alpha === void 0)
+    return;
+  if (cssColorFunctions.includes(type) && components.length !== 3)
+    return;
+  return { type, components, alpha };
+}
+function colorToString(color, alphaOverride) {
+  const { components } = color;
+  let { alpha, type } = color;
+  alpha = alphaOverride ?? alpha;
+  type = type.toLowerCase();
+  if (["hsla", "hsl", "rgba", "rgb"].includes(type))
+    return `${type.replace("a", "")}a(${components.join(",")}${alpha == null ? "" : `,${alpha}`})`;
+  alpha = alpha == null ? "" : ` / ${alpha}`;
+  if (cssColorFunctions.includes(type))
+    return `${type}(${components.join(" ")}${alpha})`;
+  return `color(${type} ${components.join(" ")}${alpha})`;
+}
+function parseColor$1(str) {
+  if (!str)
+    return;
+  let color = parseHexColor(str);
+  if (color != null)
+    return color;
+  color = cssColorKeyword(str);
+  if (color != null)
+    return color;
+  color = parseCssCommaColorFunction(str);
+  if (color != null)
+    return color;
+  color = parseCssSpaceColorFunction(str);
+  if (color != null)
+    return color;
+  color = parseCssColorFunction(str);
+  if (color != null)
+    return color;
+}
+function parseHexColor(str) {
+  const [, body] = str.match(/^#?([\da-f]+)$/i) || [];
+  if (!body)
+    return;
+  switch (body.length) {
+    case 3:
+    case 4:
+      const digits = Array.from(body, (s) => Number.parseInt(s, 16)).map((n) => n << 4 | n);
+      return {
+        type: "rgb",
+        components: digits.slice(0, 3),
+        alpha: body.length === 3 ? void 0 : Math.round(digits[3] / 255 * 100) / 100
+      };
+    case 6:
+    case 8:
+      const value = Number.parseInt(body, 16);
+      return {
+        type: "rgb",
+        components: body.length === 6 ? [value >> 16 & 255, value >> 8 & 255, value & 255] : [value >> 24 & 255, value >> 16 & 255, value >> 8 & 255],
+        alpha: body.length === 6 ? void 0 : Math.round((value & 255) / 255 * 100) / 100
+      };
+  }
+}
+function cssColorKeyword(str) {
+  const color = {
+    rebeccapurple: [102, 51, 153, 1]
+  }[str];
+  if (color != null) {
+    return {
+      type: "rgb",
+      components: color.slice(0, 3),
+      alpha: color[3]
+    };
+  }
+}
+function parseCssCommaColorFunction(color) {
+  const match = color.match(/^(rgb|rgba|hsl|hsla)\((.+)\)$/i);
+  if (!match)
+    return;
+  const [, type, componentString] = match;
+  const components = getComponents(componentString, ",", 5);
+  if (components && [3, 4].includes(components.length)) {
+    return {
+      type,
+      components: components.slice(0, 3),
+      alpha: components[3]
+    };
+  }
+}
+const cssColorFunctionsRe = new RegExp(`^(${cssColorFunctions.join("|")})\\((.+)\\)$`, "i");
+function parseCssSpaceColorFunction(color) {
+  const match = color.match(cssColorFunctionsRe);
+  if (!match)
+    return;
+  const [, fn, componentString] = match;
+  const parsed = parseCssSpaceColorValues(`${fn} ${componentString}`);
+  if (parsed) {
+    const { alpha, components: [type, ...components] } = parsed;
+    return {
+      type,
+      components,
+      alpha
+    };
+  }
+}
+function parseCssColorFunction(color) {
+  const match = color.match(/^color\((.+)\)$/);
+  if (!match)
+    return;
+  const parsed = parseCssSpaceColorValues(match[1]);
+  if (parsed) {
+    const { alpha, components: [type, ...components] } = parsed;
+    return {
+      type,
+      components,
+      alpha
+    };
+  }
+}
+function parseCssSpaceColorValues(componentString) {
+  const components = getComponents(componentString);
+  if (!components)
+    return;
+  let totalComponents = components.length;
+  if (components[totalComponents - 2] === "/") {
+    return {
+      components: components.slice(0, totalComponents - 2),
+      alpha: components[totalComponents - 1]
+    };
+  }
+  if (components[totalComponents - 2] != null && (components[totalComponents - 2].endsWith("/") || components[totalComponents - 1].startsWith("/"))) {
+    const removed = components.splice(totalComponents - 2);
+    components.push(removed.join(" "));
+    --totalComponents;
+  }
+  const withAlpha = getComponents(components[totalComponents - 1], "/", 3);
+  if (!withAlpha)
+    return;
+  if (withAlpha.length === 1 || withAlpha[withAlpha.length - 1] === "")
+    return { components };
+  const alpha = withAlpha.pop();
+  components[totalComponents - 1] = withAlpha.join("/");
+  return {
+    components,
+    alpha
+  };
+}
+function getComponent(str, separator) {
+  str = str.trim();
+  if (str === "")
+    return;
+  const l = str.length;
+  let parenthesis = 0;
+  for (let i = 0; i < l; i++) {
+    switch (str[i]) {
+      case "(":
+        parenthesis++;
+        break;
+      case ")":
+        if (--parenthesis < 0)
+          return;
+        break;
+      case separator:
+        if (parenthesis === 0) {
+          const component = str.slice(0, i).trim();
+          if (component === "")
+            return;
+          return [
+            component,
+            str.slice(i + 1).trim()
+          ];
+        }
+    }
+  }
+  return [
+    str,
+    ""
+  ];
+}
+function getComponents(str, separator, limit) {
+  separator = separator ?? " ";
+  if (separator.length !== 1)
+    return;
+  limit = limit ?? 10;
+  const components = [];
+  let i = 0;
+  while (str !== "") {
+    if (++i > limit)
+      return;
+    const componentPair = getComponent(str, separator);
+    if (!componentPair)
+      return;
+    const [component, rest] = componentPair;
+    components.push(component);
+    str = rest;
+  }
+  if (components.length > 0)
+    return components;
+}
+
 const directionMap = {
   "l": ["-left"],
   "r": ["-right"],
@@ -141,7 +356,7 @@ const cssProps = [
   "clip-path",
   "clip"
 ];
-const numberWithUnitRE = /^(-?[0-9.]+)(px|pt|pc|rem|em|%|vh|vw|in|cm|mm|ex|ch|vmin|vmax)?$/i;
+const numberWithUnitRE = /^(-?[0-9.]+)(px|pt|pc|rem|em|%|vh|vw|in|cm|mm|ex|ch|vmin|vmax|rpx)?$/i;
 const numberRE = /^(-?[0-9.]+)$/i;
 const unitOnlyRE = /^(px)$/i;
 function round(n) {
@@ -212,8 +427,8 @@ function bracket(str) {
   }
 }
 function cssvar(str) {
-  if (str.startsWith("$"))
-    return `var(--${str.slice(1)})`;
+  if (str.match(/^\$\S/))
+    return `var(--${core.escapeSelector(str.slice(1))})`;
 }
 function time(str) {
   const match = str.match(/^(-?[0-9.]+)(s|ms)?$/i);
@@ -296,7 +511,7 @@ const parseColor = (body, theme) => {
       colorData = getThemeColor(theme, colors.slice(0, -1));
     } else {
       colorData = getThemeColor(theme, colors);
-      if (!colorData) {
+      if (!colorData && colors.length <= 2) {
         [, no = no] = colors;
         colorData = getThemeColor(theme, [name]);
       }
@@ -306,58 +521,66 @@ const parseColor = (body, theme) => {
     else if (no && colorData)
       color = colorData[no];
   }
-  const rgba = core.hex2rgba(color);
-  const alpha = opacity ? opacity[0] === "[" ? handler.bracket.percent(opacity) : parseFloat(opacity) / 100 : rgba?.[3];
-  const hasAlpha = alpha != null && !Number.isNaN(alpha);
-  if (rgba) {
-    if (hasAlpha) {
-      rgba[3] = typeof alpha === "string" && !alpha.includes("%") ? parseFloat(alpha) : alpha;
-    } else {
-      rgba.splice(3);
-    }
-  }
   return {
     opacity,
     name,
     no,
     color,
-    rgba,
-    alpha: hasAlpha ? alpha : void 0
+    cssColor: parseCssColor(color),
+    alpha: handler.bracket.cssvar.percent(opacity ?? "")
   };
 };
 const colorResolver = (property, varName) => ([, body], { theme }) => {
   const data = parseColor(body, theme);
   if (!data)
     return;
-  const { alpha, opacity, color, rgba } = data;
-  if (!color)
-    return;
-  if (rgba) {
+  const { alpha, color, cssColor } = data;
+  if (cssColor) {
     if (alpha != null) {
       return {
-        [property]: `rgba(${rgba.join(",")})`
+        [property]: colorToString(cssColor, alpha)
       };
     } else {
       return {
-        [`--un-${varName}-opacity`]: (opacity && handler.cssvar(opacity)) ?? 1,
-        [property]: `rgba(${rgba.join(",")},var(--un-${varName}-opacity))`
+        [`--un-${varName}-opacity`]: cssColor.alpha ?? 1,
+        [property]: colorToString(cssColor, `var(--un-${varName}-opacity)`)
       };
     }
-  } else {
+  } else if (color) {
     return {
-      [property]: color.replace("%alpha", `${alpha || 1}`)
+      [property]: color.replace("%alpha", `${alpha ?? 1}`)
     };
   }
 };
+const colorableShadows = (shadows, colorVar) => {
+  const colored = [];
+  shadows = core.toArray(shadows);
+  for (let i = 0; i < shadows.length; i++) {
+    const components = getComponents(shadows[i]);
+    if (!components)
+      return shadows;
+    const [maybeColor, ...size] = components.reverse();
+    const color = parseCssColor(maybeColor);
+    if (color == null)
+      return shadows;
+    colored.push(`${size.reverse().join(" ")} var(${colorVar}, ${colorToString(color)})`);
+  }
+  return colored;
+};
 
 exports.colorResolver = colorResolver;
+exports.colorToString = colorToString;
+exports.colorableShadows = colorableShadows;
 exports.cornerMap = cornerMap;
 exports.directionMap = directionMap;
 exports.directionSize = directionSize;
+exports.getComponents = getComponents;
 exports.h = h;
 exports.handler = handler;
+exports.hex2rgba = hex2rgba;
 exports.insetMap = insetMap;
 exports.parseColor = parseColor;
+exports.parseCssColor = parseCssColor;
 exports.positionMap = positionMap;
 exports.valueHandlers = valueHandlers;
 exports.xyzMap = xyzMap;

package/dist/chunks/utilities.mjs

@@ -1,4 +1,219 @@
-import { createValueHandler, hex2rgba } from '@unocss/core';
+import { escapeSelector, createValueHandler, toArray } from '@unocss/core';
+
+const cssColorFunctions = ["hsl", "hsla", "hwb", "lab", "lch", "oklab", "oklch", "rgb", "rgba"];
+function hex2rgba(hex = "") {
+  const color = parseHexColor(hex);
+  if (color != null) {
+    const { components, alpha } = color;
+    if (alpha === void 0)
+      return components;
+    return [...components, alpha];
+  }
+}
+function parseCssColor(str = "") {
+  const color = parseColor$1(str);
+  if (color == null)
+    return;
+  const { type: casedType, components, alpha } = color;
+  const type = casedType.toLowerCase();
+  if (components.length === 0)
+    return;
+  if (["rgba", "hsla"].includes(type) && alpha === void 0)
+    return;
+  if (cssColorFunctions.includes(type) && components.length !== 3)
+    return;
+  return { type, components, alpha };
+}
+function colorToString(color, alphaOverride) {
+  const { components } = color;
+  let { alpha, type } = color;
+  alpha = alphaOverride ?? alpha;
+  type = type.toLowerCase();
+  if (["hsla", "hsl", "rgba", "rgb"].includes(type))
+    return `${type.replace("a", "")}a(${components.join(",")}${alpha == null ? "" : `,${alpha}`})`;
+  alpha = alpha == null ? "" : ` / ${alpha}`;
+  if (cssColorFunctions.includes(type))
+    return `${type}(${components.join(" ")}${alpha})`;
+  return `color(${type} ${components.join(" ")}${alpha})`;
+}
+function parseColor$1(str) {
+  if (!str)
+    return;
+  let color = parseHexColor(str);
+  if (color != null)
+    return color;
+  color = cssColorKeyword(str);
+  if (color != null)
+    return color;
+  color = parseCssCommaColorFunction(str);
+  if (color != null)
+    return color;
+  color = parseCssSpaceColorFunction(str);
+  if (color != null)
+    return color;
+  color = parseCssColorFunction(str);
+  if (color != null)
+    return color;
+}
+function parseHexColor(str) {
+  const [, body] = str.match(/^#?([\da-f]+)$/i) || [];
+  if (!body)
+    return;
+  switch (body.length) {
+    case 3:
+    case 4:
+      const digits = Array.from(body, (s) => Number.parseInt(s, 16)).map((n) => n << 4 | n);
+      return {
+        type: "rgb",
+        components: digits.slice(0, 3),
+        alpha: body.length === 3 ? void 0 : Math.round(digits[3] / 255 * 100) / 100
+      };
+    case 6:
+    case 8:
+      const value = Number.parseInt(body, 16);
+      return {
+        type: "rgb",
+        components: body.length === 6 ? [value >> 16 & 255, value >> 8 & 255, value & 255] : [value >> 24 & 255, value >> 16 & 255, value >> 8 & 255],
+        alpha: body.length === 6 ? void 0 : Math.round((value & 255) / 255 * 100) / 100
+      };
+  }
+}
+function cssColorKeyword(str) {
+  const color = {
+    rebeccapurple: [102, 51, 153, 1]
+  }[str];
+  if (color != null) {
+    return {
+      type: "rgb",
+      components: color.slice(0, 3),
+      alpha: color[3]
+    };
+  }
+}
+function parseCssCommaColorFunction(color) {
+  const match = color.match(/^(rgb|rgba|hsl|hsla)\((.+)\)$/i);
+  if (!match)
+    return;
+  const [, type, componentString] = match;
+  const components = getComponents(componentString, ",", 5);
+  if (components && [3, 4].includes(components.length)) {
+    return {
+      type,
+      components: components.slice(0, 3),
+      alpha: components[3]
+    };
+  }
+}
+const cssColorFunctionsRe = new RegExp(`^(${cssColorFunctions.join("|")})\\((.+)\\)$`, "i");
+function parseCssSpaceColorFunction(color) {
+  const match = color.match(cssColorFunctionsRe);
+  if (!match)
+    return;
+  const [, fn, componentString] = match;
+  const parsed = parseCssSpaceColorValues(`${fn} ${componentString}`);
+  if (parsed) {
+    const { alpha, components: [type, ...components] } = parsed;
+    return {
+      type,
+      components,
+      alpha
+    };
+  }
+}
+function parseCssColorFunction(color) {
+  const match = color.match(/^color\((.+)\)$/);
+  if (!match)
+    return;
+  const parsed = parseCssSpaceColorValues(match[1]);
+  if (parsed) {
+    const { alpha, components: [type, ...components] } = parsed;
+    return {
+      type,
+      components,
+      alpha
+    };
+  }
+}
+function parseCssSpaceColorValues(componentString) {
+  const components = getComponents(componentString);
+  if (!components)
+    return;
+  let totalComponents = components.length;
+  if (components[totalComponents - 2] === "/") {
+    return {
+      components: components.slice(0, totalComponents - 2),
+      alpha: components[totalComponents - 1]
+    };
+  }
+  if (components[totalComponents - 2] != null && (components[totalComponents - 2].endsWith("/") || components[totalComponents - 1].startsWith("/"))) {
+    const removed = components.splice(totalComponents - 2);
+    components.push(removed.join(" "));
+    --totalComponents;
+  }
+  const withAlpha = getComponents(components[totalComponents - 1], "/", 3);
+  if (!withAlpha)
+    return;
+  if (withAlpha.length === 1 || withAlpha[withAlpha.length - 1] === "")
+    return { components };
+  const alpha = withAlpha.pop();
+  components[totalComponents - 1] = withAlpha.join("/");
+  return {
+    components,
+    alpha
+  };
+}
+function getComponent(str, separator) {
+  str = str.trim();
+  if (str === "")
+    return;
+  const l = str.length;
+  let parenthesis = 0;
+  for (let i = 0; i < l; i++) {
+    switch (str[i]) {
+      case "(":
+        parenthesis++;
+        break;
+      case ")":
+        if (--parenthesis < 0)
+          return;
+        break;
+      case separator:
+        if (parenthesis === 0) {
+          const component = str.slice(0, i).trim();
+          if (component === "")
+            return;
+          return [
+            component,
+            str.slice(i + 1).trim()
+          ];
+        }
+    }
+  }
+  return [
+    str,
+    ""
+  ];
+}
+function getComponents(str, separator, limit) {
+  separator = separator ?? " ";
+  if (separator.length !== 1)
+    return;
+  limit = limit ?? 10;
+  const components = [];
+  let i = 0;
+  while (str !== "") {
+    if (++i > limit)
+      return;
+    const componentPair = getComponent(str, separator);
+    if (!componentPair)
+      return;
+    const [component, rest] = componentPair;
+    components.push(component);
+    str = rest;
+  }
+  if (components.length > 0)
+    return components;
+}
 
 const directionMap = {
   "l": ["-left"],
@@ -139,7 +354,7 @@ const cssProps = [
   "clip-path",
   "clip"
 ];
-const numberWithUnitRE = /^(-?[0-9.]+)(px|pt|pc|rem|em|%|vh|vw|in|cm|mm|ex|ch|vmin|vmax)?$/i;
+const numberWithUnitRE = /^(-?[0-9.]+)(px|pt|pc|rem|em|%|vh|vw|in|cm|mm|ex|ch|vmin|vmax|rpx)?$/i;
 const numberRE = /^(-?[0-9.]+)$/i;
 const unitOnlyRE = /^(px)$/i;
 function round(n) {
@@ -210,8 +425,8 @@ function bracket(str) {
   }
 }
 function cssvar(str) {
-  if (str.startsWith("$"))
-    return `var(--${str.slice(1)})`;
+  if (str.match(/^\$\S/))
+    return `var(--${escapeSelector(str.slice(1))})`;
 }
 function time(str) {
   const match = str.match(/^(-?[0-9.]+)(s|ms)?$/i);
@@ -294,7 +509,7 @@ const parseColor = (body, theme) => {
       colorData = getThemeColor(theme, colors.slice(0, -1));
     } else {
       colorData = getThemeColor(theme, colors);
-      if (!colorData) {
+      if (!colorData && colors.length <= 2) {
         [, no = no] = colors;
         colorData = getThemeColor(theme, [name]);
       }
@@ -304,48 +519,51 @@ const parseColor = (body, theme) => {
     else if (no && colorData)
       color = colorData[no];
   }
-  const rgba = hex2rgba(color);
-  const alpha = opacity ? opacity[0] === "[" ? handler.bracket.percent(opacity) : parseFloat(opacity) / 100 : rgba?.[3];
-  const hasAlpha = alpha != null && !Number.isNaN(alpha);
-  if (rgba) {
-    if (hasAlpha) {
-      rgba[3] = typeof alpha === "string" && !alpha.includes("%") ? parseFloat(alpha) : alpha;
-    } else {
-      rgba.splice(3);
-    }
-  }
   return {
     opacity,
     name,
     no,
     color,
-    rgba,
-    alpha: hasAlpha ? alpha : void 0
+    cssColor: parseCssColor(color),
+    alpha: handler.bracket.cssvar.percent(opacity ?? "")
   };
 };
 const colorResolver = (property, varName) => ([, body], { theme }) => {
   const data = parseColor(body, theme);
   if (!data)
     return;
-  const { alpha, opacity, color, rgba } = data;
-  if (!color)
-    return;
-  if (rgba) {
+  const { alpha, color, cssColor } = data;
+  if (cssColor) {
     if (alpha != null) {
       return {
-        [property]: `rgba(${rgba.join(",")})`
+        [property]: colorToString(cssColor, alpha)
       };
     } else {
       return {
-        [`--un-${varName}-opacity`]: (opacity && handler.cssvar(opacity)) ?? 1,
-        [property]: `rgba(${rgba.join(",")},var(--un-${varName}-opacity))`
+        [`--un-${varName}-opacity`]: cssColor.alpha ?? 1,
+        [property]: colorToString(cssColor, `var(--un-${varName}-opacity)`)
       };
     }
-  } else {
+  } else if (color) {
     return {
-      [property]: color.replace("%alpha", `${alpha || 1}`)
+      [property]: color.replace("%alpha", `${alpha ?? 1}`)
     };
   }
 };
+const colorableShadows = (shadows, colorVar) => {
+  const colored = [];
+  shadows = toArray(shadows);
+  for (let i = 0; i < shadows.length; i++) {
+    const components = getComponents(shadows[i]);
+    if (!components)
+      return shadows;
+    const [maybeColor, ...size] = components.reverse();
+    const color = parseCssColor(maybeColor);
+    if (color == null)
+      return shadows;
+    colored.push(`${size.reverse().join(" ")} var(${colorVar}, ${colorToString(color)})`);
+  }
+  return colored;
+};
 
-export { cornerMap as a, directionSize as b, colorResolver as c, directionMap as d, positionMap as e, h as f, handler as h, insetMap as i, parseColor as p, valueHandlers as v, xyzMap as x };
+export { colorToString as a, cornerMap as b, colorResolver as c, directionMap as d, colorableShadows as e, directionSize as f, positionMap as g, handler as h, insetMap as i, hex2rgba as j, parseCssColor as k, getComponents as l, h as m, parseColor as p, valueHandlers as v, xyzMap as x };

package/dist/{colors-338f482c.d.ts → colors-db01a23e.d.ts}

@@ -1,4 +1,4 @@
-import { T as Theme } from './types-c14b808b';
+import { T as Theme } from './types-154878eb';
 
 declare const colors: Theme['colors'];
 

package/dist/colors.d.ts

@@ -1,2 +1,2 @@
-export { c as colors } from './colors-338f482c';
-import './types-c14b808b';
+export { c as colors } from './colors-db01a23e';
+import './types-154878eb';

package/dist/{default-17948303.d.ts → default-c46850c2.d.ts}

@@ -1,4 +1,4 @@
-import { T as Theme } from './types-c14b808b';
+import { T as Theme } from './types-154878eb';
 
 declare const theme: Theme;
 

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import { PresetOptions, Preset } from '@unocss/core';
-import { T as Theme } from './types-c14b808b';
-export { T as Theme, a as ThemeAnimation } from './types-c14b808b';
-export { t as theme } from './default-17948303';
-export { c as colors } from './colors-338f482c';
-export { p as parseColor } from './utilities-29b01158';
+import { T as Theme } from './types-154878eb';
+export { T as Theme, a as ThemeAnimation } from './types-154878eb';
+export { t as theme } from './default-c46850c2';
+export { c as colors } from './colors-db01a23e';
+export { p as parseColor } from './utilities-0dc6e82e';
 
 interface PresetMiniOptions extends PresetOptions {
     /**

package/dist/rules.cjs

@@ -17,7 +17,6 @@ exports.borders = _default.borders;
 exports.boxShadows = _default.boxShadows;
 exports.boxSizing = _default.boxSizing;
 exports.breaks = _default.breaks;
-exports.colorableShadows = _default.colorableShadows;
 exports.contents = _default.contents;
 exports.cssProperty = _default.cssProperty;
 exports.cssVariables = _default.cssVariables;