@unocss/preset-mini 0.22.6 → 0.24.1

package/dist/chunks/utilities.mjs

@@ -1,4 +1,219 @@
-import { escapeSelector, 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) {
@@ -304,48 +519,50 @@ 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], " ", 6);
+    if (!components || components.length < 3)
+      return shadows;
+    const color = parseCssColor(components.pop());
+    if (color == null)
+      return shadows;
+    colored.push(`${components.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/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 {
     /**

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;

package/dist/rules.d.ts

@@ -56,7 +56,6 @@ declare const shadowBase: {
     '--un-shadow-inset': string;
     '--un-shadow': string;
 };
-declare const colorableShadows: (shadows: string | string[], colorVar: string) => string[];
 declare const boxShadows: Rule<Theme>[];
 
 declare const sizes: Rule<Theme>[];
@@ -97,4 +96,4 @@ declare const cssProperty: Rule[];
 
 declare const textDecorations: Rule[];
 
-export { alignments, appearance, appearances, aspectRatio, bgColors, borders, boxShadows, boxSizing, breaks, colorableShadows, contents, cssProperty, cssVariables, cursors, displays, flex, floats, fontSmoothings, fontStyles, fonts, gaps, grids, insets, justifies, margins, opacity, orders, outline, overflows, paddings, placements, pointerEvents, positions, questionMark, resizes, rings, rules, shadowBase, sizes, svgUtilities, tabSizes, textAligns, textColors, textDecorations, textIndents, textOverflows, textShadows, textStrokes, textTransforms, transforms, transitions, userSelects, varEmpty, verticalAligns, whitespaces, willChange, zIndexes };
+export { alignments, appearance, appearances, aspectRatio, bgColors, borders, boxShadows, boxSizing, breaks, contents, cssProperty, cssVariables, cursors, displays, flex, floats, fontSmoothings, fontStyles, fonts, gaps, grids, insets, justifies, margins, opacity, orders, outline, overflows, paddings, placements, pointerEvents, positions, questionMark, resizes, rings, rules, shadowBase, sizes, svgUtilities, tabSizes, textAligns, textColors, textDecorations, textIndents, textOverflows, textShadows, textStrokes, textTransforms, transforms, transitions, userSelects, varEmpty, verticalAligns, whitespaces, willChange, zIndexes };

package/dist/rules.mjs

@@ -1,3 +1,3 @@
-export { l as alignments, a as appearance, I as appearances, D as aspectRatio, e as bgColors, b as borders, B as boxShadows, s as boxSizing, P as breaks, A as colorableShadows, O as contents, a1 as cssProperty, a0 as cssVariables, J as cursors, H as displays, f as flex, q as floats, T as fontSmoothings, S as fontStyles, X as fonts, g as gaps, h as grids, n as insets, j as justifies, F as margins, c as opacity, k as orders, o as outline, i as overflows, E as paddings, m as placements, K as pointerEvents, p as positions, u as questionMark, L as resizes, x as rings, r as rules, y as shadowBase, C as sizes, U as svgUtilities, Y as tabSizes, t as textAligns, d as textColors, a2 as textDecorations, Z as textIndents, Q as textOverflows, $ as textShadows, _ as textStrokes, R as textTransforms, V as transforms, W as transitions, M as userSelects, G as varEmpty, v as verticalAligns, N as whitespaces, w as willChange, z as zIndexes } from './chunks/default2.mjs';
+export { l as alignments, a as appearance, H as appearances, C as aspectRatio, e as bgColors, b as borders, A as boxShadows, s as boxSizing, O as breaks, N as contents, a0 as cssProperty, $ as cssVariables, I as cursors, G as displays, f as flex, q as floats, S as fontSmoothings, R as fontStyles, W as fonts, g as gaps, h as grids, n as insets, j as justifies, E as margins, c as opacity, k as orders, o as outline, i as overflows, D as paddings, m as placements, J as pointerEvents, p as positions, u as questionMark, K as resizes, x as rings, r as rules, y as shadowBase, B as sizes, T as svgUtilities, X as tabSizes, t as textAligns, d as textColors, a1 as textDecorations, Y as textIndents, P as textOverflows, _ as textShadows, Z as textStrokes, Q as textTransforms, U as transforms, V as transitions, L as userSelects, F as varEmpty, v as verticalAligns, M as whitespaces, w as willChange, z as zIndexes } from './chunks/default2.mjs';
 import './chunks/utilities.mjs';
 import '@unocss/core';

package/dist/{utilities-8c324eff.d.ts → utilities-0dc6e82e.d.ts}

@@ -36,20 +36,21 @@ declare const parseColor: (body: string, theme: Theme) => ParsedColorValue | und
  *
  * @example Resolving 'red-100' from theme:
  * colorResolver('background-color', 'background')('', 'red-100')
- * return { '--un-background-opacity': '1', 'background-color': 'rgba(254,226,226,var(--un-bg-opacity))' }
+ * return { '--un-background-opacity': '1', 'background-color': 'rgb(254,226,226,var(--un-bg-opacity))' }
  *
  * @example Resolving 'red-100/20' from theme:
  * colorResolver('background-color', 'background')('', 'red-100/20')
- * return { 'background-color': 'rgba(204,251,241,0.22)' }
+ * return { 'background-color': 'rgb(204,251,241,0.22)' }
  *
  * @example Resolving 'hex-124':
  * colorResolver('color', 'text')('', 'hex-124')
- * return { '--un-text-opacity': '1', 'color': 'rgba(17,34,68,var(--un-text-opacity))' }
+ * return { '--un-text-opacity': '1', 'color': 'rgb(17,34,68,var(--un-text-opacity))' }
  *
  * @param {string} property - Property for the css value to be created.
  * @param {string} varName - Base name for the opacity variable.
  * @return {DynamicMatcher}  {@link DynamicMatcher} object.
  */
 declare const colorResolver: (property: string, varName: string) => DynamicMatcher;
+declare const colorableShadows: (shadows: string | string[], colorVar: string) => string[];
 
-export { colorResolver as c, directionSize as d, parseColor as p };
+export { colorableShadows as a, colorResolver as c, directionSize as d, parseColor as p };

package/dist/utils.cjs

@@ -9,13 +9,18 @@ require('@unocss/core');
 
 
 exports.colorResolver = utilities.colorResolver;
+exports.colorToString = utilities.colorToString;
+exports.colorableShadows = utilities.colorableShadows;
 exports.cornerMap = utilities.cornerMap;
 exports.directionMap = utilities.directionMap;
 exports.directionSize = utilities.directionSize;
+exports.getComponents = utilities.getComponents;
 exports.h = utilities.h;
 exports.handler = utilities.handler;
+exports.hex2rgba = utilities.hex2rgba;
 exports.insetMap = utilities.insetMap;
 exports.parseColor = utilities.parseColor;
+exports.parseCssColor = utilities.parseCssColor;
 exports.positionMap = utilities.positionMap;
 exports.valueHandlers = utilities.valueHandlers;
 exports.xyzMap = utilities.xyzMap;

package/dist/utils.d.ts

@@ -1,8 +1,13 @@
 import * as _unocss_core from '@unocss/core';
-import { VariantHandler } from '@unocss/core';
-export { c as colorResolver, d as directionSize, p as parseColor } from './utilities-8c324eff';
+import { RGBAColorValue, CSSColorValue, VariantHandler } from '@unocss/core';
+export { c as colorResolver, a as colorableShadows, d as directionSize, p as parseColor } from './utilities-0dc6e82e';
 import './types-154878eb';
 
+declare function hex2rgba(hex?: string): RGBAColorValue | undefined;
+declare function parseCssColor(str?: string): CSSColorValue | undefined;
+declare function colorToString(color: CSSColorValue, alphaOverride?: string | number): string;
+declare function getComponents(str: string, separator?: string, limit?: number): string[] | undefined;
+
 declare const directionMap: Record<string, string[]>;
 declare const insetMap: Record<string, string[]>;
 declare const cornerMap: Record<string, string[]>;
@@ -60,4 +65,4 @@ declare const h: _unocss_core.ValueHandler<"number" | "auto" | "numberWithUnit"
 declare const variantMatcher: (name: string, selector?: ((input: string) => string | undefined) | undefined) => (input: string) => VariantHandler | undefined;
 declare const variantParentMatcher: (name: string, parent: string) => (input: string) => VariantHandler | undefined;
 
-export { cornerMap, directionMap, h, handler, insetMap, positionMap, handlers as valueHandlers, variantMatcher, variantParentMatcher, xyzMap };
+export { colorToString, cornerMap, directionMap, getComponents, h, handler, hex2rgba, insetMap, parseCssColor, positionMap, handlers as valueHandlers, variantMatcher, variantParentMatcher, xyzMap };

package/dist/utils.mjs

@@ -1,3 +1,3 @@
-export { c as colorResolver, a as cornerMap, d as directionMap, b as directionSize, f as h, h as handler, i as insetMap, p as parseColor, e as positionMap, v as valueHandlers, x as xyzMap } from './chunks/utilities.mjs';
+export { c as colorResolver, a as colorToString, e as colorableShadows, b as cornerMap, d as directionMap, f as directionSize, l as getComponents, m as h, h as handler, j as hex2rgba, i as insetMap, p as parseColor, k as parseCssColor, g as positionMap, v as valueHandlers, x as xyzMap } from './chunks/utilities.mjs';
 export { v as variantMatcher, a as variantParentMatcher } from './chunks/variants.mjs';
 import '@unocss/core';

package/dist/variants.cjs

@@ -14,6 +14,7 @@ exports.variantColorsMediaOrClass = _default.variantColorsMediaOrClass;
 exports.variantCombinators = _default.variantCombinators;
 exports.variantImportant = _default.variantImportant;
 exports.variantLanguageDirections = _default.variantLanguageDirections;
+exports.variantLayer = _default.variantLayer;
 exports.variantMotions = _default.variantMotions;
 exports.variantNegative = _default.variantNegative;
 exports.variantOrientations = _default.variantOrientations;

package/dist/variants.d.ts

@@ -3,7 +3,7 @@ import { T as Theme } from './types-154878eb';
 import { PresetMiniOptions } from './index';
 import './default-c46850c2';
 import './colors-db01a23e';
-import './utilities-8c324eff';
+import './utilities-0dc6e82e';
 
 declare const variantBreakpoints: Variant<Theme>;
 
@@ -19,6 +19,7 @@ declare const variants: (options: PresetMiniOptions) => Variant<Theme>[];
 
 declare const variantLanguageDirections: Variant[];
 
+declare const variantLayer: Variant;
 declare const variantImportant: Variant;
 declare const variantNegative: Variant;
 
@@ -28,4 +29,4 @@ declare const variantPseudoClassFunctions: VariantObject;
 declare const variantTaggedPseudoClasses: (options?: PresetMiniOptions) => VariantObject[];
 declare const partClasses: VariantObject;
 
-export { partClasses, variantBreakpoints, variantColorsMediaOrClass, variantCombinators, variantImportant, variantLanguageDirections, variantMotions, variantNegative, variantOrientations, variantPrint, variantPseudoClassFunctions, variantPseudoClasses, variantPseudoElements, variantTaggedPseudoClasses, variants };
+export { partClasses, variantBreakpoints, variantColorsMediaOrClass, variantCombinators, variantImportant, variantLanguageDirections, variantLayer, variantMotions, variantNegative, variantOrientations, variantPrint, variantPseudoClassFunctions, variantPseudoClasses, variantPseudoElements, variantTaggedPseudoClasses, variants };

package/dist/variants.mjs

@@ -1,3 +1,3 @@
-export { p as partClasses, a as variantBreakpoints, f as variantColorsMediaOrClass, b as variantCombinators, h as variantImportant, g as variantLanguageDirections, c as variantMotions, i as variantNegative, d as variantOrientations, e as variantPrint, l as variantPseudoClassFunctions, k as variantPseudoClasses, j as variantPseudoElements, m as variantTaggedPseudoClasses, v as variants } from './chunks/default3.mjs';
+export { p as partClasses, a as variantBreakpoints, f as variantColorsMediaOrClass, b as variantCombinators, i as variantImportant, g as variantLanguageDirections, h as variantLayer, c as variantMotions, j as variantNegative, d as variantOrientations, e as variantPrint, m as variantPseudoClassFunctions, l as variantPseudoClasses, k as variantPseudoElements, n as variantTaggedPseudoClasses, v as variants } from './chunks/default3.mjs';
 import './chunks/variants.mjs';
 import '@unocss/core';

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@unocss/preset-mini",
-  "version": "0.22.6",
+  "version": "0.24.1",
   "description": "The minimal preset for UnoCSS",
   "keywords": [
     "unocss",
     "unocss-preset"
   ],
-  "homepage": "https://github.com/antfu/unocss/tree/main/packages/preset-mini#readme",
+  "homepage": "https://github.com/unocss/unocss/tree/main/packages/preset-mini#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-mini"
   },
   "funding": "https://github.com/sponsors/antfu",
@@ -61,7 +61,7 @@
     "*.css"
   ],
   "dependencies": {
-    "@unocss/core": "0.22.6"
+    "@unocss/core": "0.24.1"
   },
   "scripts": {
     "build": "unbuild",