@unocss/preset-mini 0.23.0 → 0.24.0

package/dist/chunks/utilities.cjs

@@ -2,6 +2,7 @@
 
 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) {
@@ -11,41 +12,32 @@ function hex2rgba(hex = "") {
     return [...components, alpha];
   }
 }
-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 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 (["rgb", "hsl", "hwb", "lab", "lch", "oklab", "oklch"].includes(type) && components.length !== 3)
+  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;
@@ -65,10 +57,32 @@ function parseColor$1(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],
-    transparent: [0, 0, 0, 0]
+    rebeccapurple: [102, 51, 153, 1]
   }[str];
   if (color != null) {
     return {
@@ -78,54 +92,13 @@ function cssColorKeyword(str) {
     };
   }
 }
-function getComponent(separator, str) {
-  const component = str.trim();
-  if (component === "")
-    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 component2 = str.slice(0, i).trim();
-          if (component2 === "")
-            return;
-          return [
-            str.slice(0, i).trim(),
-            str.slice(i + 1).trim()
-          ];
-        }
-    }
-  }
-  return [
-    str.trim(),
-    ""
-  ];
-}
 function parseCssCommaColorFunction(color) {
   const match = color.match(/^(rgb|rgba|hsl|hsla)\((.+)\)$/i);
   if (!match)
     return;
   const [, type, componentString] = match;
-  const components = [];
-  let cs = componentString;
-  for (let c = 5; c > 0 && cs !== ""; --c) {
-    const componentValue = getComponent(",", cs);
-    if (!componentValue)
-      return;
-    const [component, rest] = componentValue;
-    components.push(component);
-    cs = rest;
-  }
-  if ([3, 4].includes(components.length)) {
+  const components = getComponents(componentString, ",", 5);
+  if (components && [3, 4].includes(components.length)) {
     return {
       type,
       components: components.slice(0, 3),
@@ -133,8 +106,9 @@ function parseCssCommaColorFunction(color) {
     };
   }
 }
+const cssColorFunctionsRe = new RegExp(`^(${cssColorFunctions.join("|")})\\((.+)\\)$`, "i");
 function parseCssSpaceColorFunction(color) {
-  const match = color.match(/^(rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch)\((.+)\)$/i);
+  const match = color.match(cssColorFunctionsRe);
   if (!match)
     return;
   const [, fn, componentString] = match;
@@ -163,16 +137,9 @@ function parseCssColorFunction(color) {
   }
 }
 function parseCssSpaceColorValues(componentString) {
-  let cs = componentString;
-  const components = [];
-  while (cs !== "") {
-    const cc = getComponent(" ", cs);
-    if (!cc)
-      return;
-    const [component, rest] = cc;
-    components.push(component);
-    cs = rest;
-  }
+  const components = getComponents(componentString);
+  if (!components)
+    return;
   let totalComponents = components.length;
   if (components[totalComponents - 2] === "/") {
     return {
@@ -180,21 +147,14 @@ function parseCssSpaceColorValues(componentString) {
       alpha: components[totalComponents - 1]
     };
   }
-  if (components[totalComponents - 2].endsWith("/") || components[totalComponents - 1].startsWith("/")) {
+  if (components[totalComponents - 2] != null && (components[totalComponents - 2].endsWith("/") || components[totalComponents - 1].startsWith("/"))) {
     const removed = components.splice(totalComponents - 2);
     components.push(removed.join(" "));
     --totalComponents;
   }
-  cs = components[totalComponents - 1];
-  const withAlpha = [];
-  while (cs !== "") {
-    const cc = getComponent("/", cs);
-    if (!cc)
-      return;
-    const [component, rest] = cc;
-    withAlpha.push(component);
-    cs = rest;
-  }
+  const withAlpha = getComponents(components[totalComponents - 1], "/", 3);
+  if (!withAlpha)
+    return;
   if (withAlpha.length === 1 || withAlpha[withAlpha.length - 1] === "")
     return { components };
   const alpha = withAlpha.pop();
@@ -204,6 +164,58 @@ function parseCssSpaceColorValues(componentString) {
     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"],
@@ -509,54 +521,60 @@ 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 = 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;

package/dist/chunks/utilities.mjs

@@ -1,5 +1,6 @@
-import { escapeSelector, createValueHandler } 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) {
@@ -9,41 +10,32 @@ function hex2rgba(hex = "") {
     return [...components, alpha];
   }
 }
-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 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 (["rgb", "hsl", "hwb", "lab", "lch", "oklab", "oklch"].includes(type) && components.length !== 3)
+  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;
@@ -63,10 +55,32 @@ function parseColor$1(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],
-    transparent: [0, 0, 0, 0]
+    rebeccapurple: [102, 51, 153, 1]
   }[str];
   if (color != null) {
     return {
@@ -76,54 +90,13 @@ function cssColorKeyword(str) {
     };
   }
 }
-function getComponent(separator, str) {
-  const component = str.trim();
-  if (component === "")
-    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 component2 = str.slice(0, i).trim();
-          if (component2 === "")
-            return;
-          return [
-            str.slice(0, i).trim(),
-            str.slice(i + 1).trim()
-          ];
-        }
-    }
-  }
-  return [
-    str.trim(),
-    ""
-  ];
-}
 function parseCssCommaColorFunction(color) {
   const match = color.match(/^(rgb|rgba|hsl|hsla)\((.+)\)$/i);
   if (!match)
     return;
   const [, type, componentString] = match;
-  const components = [];
-  let cs = componentString;
-  for (let c = 5; c > 0 && cs !== ""; --c) {
-    const componentValue = getComponent(",", cs);
-    if (!componentValue)
-      return;
-    const [component, rest] = componentValue;
-    components.push(component);
-    cs = rest;
-  }
-  if ([3, 4].includes(components.length)) {
+  const components = getComponents(componentString, ",", 5);
+  if (components && [3, 4].includes(components.length)) {
     return {
       type,
       components: components.slice(0, 3),
@@ -131,8 +104,9 @@ function parseCssCommaColorFunction(color) {
     };
   }
 }
+const cssColorFunctionsRe = new RegExp(`^(${cssColorFunctions.join("|")})\\((.+)\\)$`, "i");
 function parseCssSpaceColorFunction(color) {
-  const match = color.match(/^(rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch)\((.+)\)$/i);
+  const match = color.match(cssColorFunctionsRe);
   if (!match)
     return;
   const [, fn, componentString] = match;
@@ -161,16 +135,9 @@ function parseCssColorFunction(color) {
   }
 }
 function parseCssSpaceColorValues(componentString) {
-  let cs = componentString;
-  const components = [];
-  while (cs !== "") {
-    const cc = getComponent(" ", cs);
-    if (!cc)
-      return;
-    const [component, rest] = cc;
-    components.push(component);
-    cs = rest;
-  }
+  const components = getComponents(componentString);
+  if (!components)
+    return;
   let totalComponents = components.length;
   if (components[totalComponents - 2] === "/") {
     return {
@@ -178,21 +145,14 @@ function parseCssSpaceColorValues(componentString) {
       alpha: components[totalComponents - 1]
     };
   }
-  if (components[totalComponents - 2].endsWith("/") || components[totalComponents - 1].startsWith("/")) {
+  if (components[totalComponents - 2] != null && (components[totalComponents - 2].endsWith("/") || components[totalComponents - 1].startsWith("/"))) {
     const removed = components.splice(totalComponents - 2);
     components.push(removed.join(" "));
     --totalComponents;
   }
-  cs = components[totalComponents - 1];
-  const withAlpha = [];
-  while (cs !== "") {
-    const cc = getComponent("/", cs);
-    if (!cc)
-      return;
-    const [component, rest] = cc;
-    withAlpha.push(component);
-    cs = rest;
-  }
+  const withAlpha = getComponents(components[totalComponents - 1], "/", 3);
+  if (!withAlpha)
+    return;
   if (withAlpha.length === 1 || withAlpha[withAlpha.length - 1] === "")
     return { components };
   const alpha = withAlpha.pop();
@@ -202,6 +162,58 @@ function parseCssSpaceColorValues(componentString) {
     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"],
@@ -507,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, hex2rgba as f, parseCssColor as g, handler as h, insetMap as i, h as j, 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/index.d.ts

@@ -3,7 +3,7 @@ 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-8c324eff';
+export { p as parseColor } from './utilities-0dc6e82e';
 
 interface PresetMiniOptions extends PresetOptions {
     /**