@unocss/preset-mini 0.22.6 → 0.24.1

package/dist/chunks/default3.cjs

@@ -37,12 +37,28 @@ const variantBreakpoints = (matcher, { theme }) => {
   }
 };
 
+const scopeMatcher = (strict, name, template) => {
+  const re = strict ? new RegExp(`^${name}(?:-\\[(.+?)\\])[:-]`) : new RegExp(`^${name}(?:-\\[(.+?)\\])?[:-]`);
+  return (matcher) => {
+    const match = matcher.match(re);
+    if (match) {
+      return {
+        matcher: matcher.slice(match[0].length),
+        selector: (s) => template.replace("&&-s", s).replace("&&-c", match[1] ?? "*")
+      };
+    }
+  };
+};
 const variantCombinators = [
-  variants$1.variantMatcher("all", (input) => `${input} *`),
-  variants$1.variantMatcher("children", (input) => `${input}>*`),
-  variants$1.variantMatcher("next", (input) => `${input}+*`),
-  variants$1.variantMatcher("sibling", (input) => `${input}+*`),
-  variants$1.variantMatcher("siblings", (input) => `${input}~*`),
+  scopeMatcher(false, "all", "&&-s &&-c"),
+  scopeMatcher(false, "children", "&&-s>&&-c"),
+  scopeMatcher(false, "next", "&&-s+&&-c"),
+  scopeMatcher(false, "sibling", "&&-s+&&-c"),
+  scopeMatcher(false, "siblings", "&&-s~&&-c"),
+  scopeMatcher(true, "group", "&&-c &&-s"),
+  scopeMatcher(true, "parent", "&&-c>&&-s"),
+  scopeMatcher(true, "previous", "&&-c+&&-s"),
+  scopeMatcher(true, "peer", "&&-c~&&-s"),
   variants$1.variantMatcher("svg", (input) => `${input} svg`)
 ];
 
@@ -74,6 +90,17 @@ const variantLanguageDirections = [
   variants$1.variantMatcher("ltr", (input) => `[dir="ltr"] $$ ${input}`)
 ];
 
+const variantLayer = {
+  match(matcher) {
+    const match = matcher.match(/layer-([\d\w]+)[:-]/);
+    if (match) {
+      return {
+        matcher: matcher.slice(match[0].length),
+        layer: match[1]
+      };
+    }
+  }
+};
 const variantImportant = {
   match(matcher) {
     if (matcher.startsWith("!")) {
@@ -170,6 +197,10 @@ const PartClassesRE = /(part-\[(.+)]:)(.+)/;
 const PseudoElementsRE = new RegExp(`^(${PseudoElementsStr})[:-]`);
 const PseudoClassesRE = new RegExp(`^(${PseudoClassesStr})[:-]`);
 const PseudoClassFunctionsRE = new RegExp(`^(${PseudoClassFunctionsStr})-(${PseudoClassesStr})[:-]`);
+const sortValue = (pseudo) => {
+  if (pseudo === "active")
+    return 1;
+};
 const taggedPseudoClassMatcher = (tag, parent, combinator) => {
   const re = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))[:-]`);
   const rawRe = new RegExp(`^${core.escapeRegExp(parent)}:`);
@@ -180,8 +211,9 @@ const taggedPseudoClassMatcher = (tag, parent, combinator) => {
       if (match[2])
         pseudo = `:${match[2]}(${pseudo})`;
       return {
-        matcher: input.slice(match[1].length + tag.length + 2),
-        selector: (s) => rawRe.test(s) ? s.replace(rawRe, `${parent}${pseudo}:`) : `${parent}${pseudo}${combinator}${s}`
+        matcher: input.slice(match[0].length),
+        selector: (s) => rawRe.test(s) ? s.replace(rawRe, `${parent}${pseudo}:`) : `${parent}${pseudo}${combinator}${s}`,
+        sort: sortValue(match[3])
       };
     }
   };
@@ -191,7 +223,7 @@ const variantPseudoElements = (input) => {
   if (match) {
     const pseudo = PseudoElements[match[1]] || `::${match[1]}`;
     return {
-      matcher: input.slice(match[1].length + 1),
+      matcher: input.slice(match[0].length),
       selector: (s) => `${s}${pseudo}`
     };
   }
@@ -202,8 +234,9 @@ const variantPseudoClasses = {
     if (match) {
       const pseudo = PseudoClasses[match[1]] || `:${match[1]}`;
       return {
-        matcher: input.slice(match[1].length + 1),
-        selector: (s) => `${s}${pseudo}`
+        matcher: input.slice(match[0].length),
+        selector: (s) => `${s}${pseudo}`,
+        sort: sortValue(match[1])
       };
     }
   },
@@ -216,7 +249,7 @@ const variantPseudoClassFunctions = {
       const fn = match[1];
       const pseudo = PseudoClasses[match[2]] || `:${match[2]}`;
       return {
-        matcher: input.slice(match[1].length + match[2].length + 2),
+        matcher: input.slice(match[0].length),
         selector: (s) => `${s}:${fn}(${pseudo})`
       };
     }
@@ -233,6 +266,14 @@ const variantTaggedPseudoClasses = (options = {}) => {
     {
       match: taggedPseudoClassMatcher("peer", attributify ? '[peer=""]' : ".peer", "~"),
       multiPass: true
+    },
+    {
+      match: taggedPseudoClassMatcher("parent", attributify ? '[parent=""]' : ".parent", ">"),
+      multiPass: true
+    },
+    {
+      match: taggedPseudoClassMatcher("previous", attributify ? '[previous=""]' : ".previous", "+"),
+      multiPass: true
     }
   ];
 };
@@ -251,6 +292,7 @@ const partClasses = {
 };
 
 const variants = (options) => [
+  variantLayer,
   variantNegative,
   variantImportant,
   variantPrint,
@@ -273,6 +315,7 @@ exports.variantColorsMediaOrClass = variantColorsMediaOrClass;
 exports.variantCombinators = variantCombinators;
 exports.variantImportant = variantImportant;
 exports.variantLanguageDirections = variantLanguageDirections;
+exports.variantLayer = variantLayer;
 exports.variantMotions = variantMotions;
 exports.variantNegative = variantNegative;
 exports.variantOrientations = variantOrientations;

package/dist/chunks/default3.mjs

@@ -35,12 +35,28 @@ const variantBreakpoints = (matcher, { theme }) => {
   }
 };
 
+const scopeMatcher = (strict, name, template) => {
+  const re = strict ? new RegExp(`^${name}(?:-\\[(.+?)\\])[:-]`) : new RegExp(`^${name}(?:-\\[(.+?)\\])?[:-]`);
+  return (matcher) => {
+    const match = matcher.match(re);
+    if (match) {
+      return {
+        matcher: matcher.slice(match[0].length),
+        selector: (s) => template.replace("&&-s", s).replace("&&-c", match[1] ?? "*")
+      };
+    }
+  };
+};
 const variantCombinators = [
-  variantMatcher("all", (input) => `${input} *`),
-  variantMatcher("children", (input) => `${input}>*`),
-  variantMatcher("next", (input) => `${input}+*`),
-  variantMatcher("sibling", (input) => `${input}+*`),
-  variantMatcher("siblings", (input) => `${input}~*`),
+  scopeMatcher(false, "all", "&&-s &&-c"),
+  scopeMatcher(false, "children", "&&-s>&&-c"),
+  scopeMatcher(false, "next", "&&-s+&&-c"),
+  scopeMatcher(false, "sibling", "&&-s+&&-c"),
+  scopeMatcher(false, "siblings", "&&-s~&&-c"),
+  scopeMatcher(true, "group", "&&-c &&-s"),
+  scopeMatcher(true, "parent", "&&-c>&&-s"),
+  scopeMatcher(true, "previous", "&&-c+&&-s"),
+  scopeMatcher(true, "peer", "&&-c~&&-s"),
   variantMatcher("svg", (input) => `${input} svg`)
 ];
 
@@ -72,6 +88,17 @@ const variantLanguageDirections = [
   variantMatcher("ltr", (input) => `[dir="ltr"] $$ ${input}`)
 ];
 
+const variantLayer = {
+  match(matcher) {
+    const match = matcher.match(/layer-([\d\w]+)[:-]/);
+    if (match) {
+      return {
+        matcher: matcher.slice(match[0].length),
+        layer: match[1]
+      };
+    }
+  }
+};
 const variantImportant = {
   match(matcher) {
     if (matcher.startsWith("!")) {
@@ -168,6 +195,10 @@ const PartClassesRE = /(part-\[(.+)]:)(.+)/;
 const PseudoElementsRE = new RegExp(`^(${PseudoElementsStr})[:-]`);
 const PseudoClassesRE = new RegExp(`^(${PseudoClassesStr})[:-]`);
 const PseudoClassFunctionsRE = new RegExp(`^(${PseudoClassFunctionsStr})-(${PseudoClassesStr})[:-]`);
+const sortValue = (pseudo) => {
+  if (pseudo === "active")
+    return 1;
+};
 const taggedPseudoClassMatcher = (tag, parent, combinator) => {
   const re = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))[:-]`);
   const rawRe = new RegExp(`^${escapeRegExp(parent)}:`);
@@ -178,8 +209,9 @@ const taggedPseudoClassMatcher = (tag, parent, combinator) => {
       if (match[2])
         pseudo = `:${match[2]}(${pseudo})`;
       return {
-        matcher: input.slice(match[1].length + tag.length + 2),
-        selector: (s) => rawRe.test(s) ? s.replace(rawRe, `${parent}${pseudo}:`) : `${parent}${pseudo}${combinator}${s}`
+        matcher: input.slice(match[0].length),
+        selector: (s) => rawRe.test(s) ? s.replace(rawRe, `${parent}${pseudo}:`) : `${parent}${pseudo}${combinator}${s}`,
+        sort: sortValue(match[3])
       };
     }
   };
@@ -189,7 +221,7 @@ const variantPseudoElements = (input) => {
   if (match) {
     const pseudo = PseudoElements[match[1]] || `::${match[1]}`;
     return {
-      matcher: input.slice(match[1].length + 1),
+      matcher: input.slice(match[0].length),
       selector: (s) => `${s}${pseudo}`
     };
   }
@@ -200,8 +232,9 @@ const variantPseudoClasses = {
     if (match) {
       const pseudo = PseudoClasses[match[1]] || `:${match[1]}`;
       return {
-        matcher: input.slice(match[1].length + 1),
-        selector: (s) => `${s}${pseudo}`
+        matcher: input.slice(match[0].length),
+        selector: (s) => `${s}${pseudo}`,
+        sort: sortValue(match[1])
       };
     }
   },
@@ -214,7 +247,7 @@ const variantPseudoClassFunctions = {
       const fn = match[1];
       const pseudo = PseudoClasses[match[2]] || `:${match[2]}`;
       return {
-        matcher: input.slice(match[1].length + match[2].length + 2),
+        matcher: input.slice(match[0].length),
         selector: (s) => `${s}:${fn}(${pseudo})`
       };
     }
@@ -231,6 +264,14 @@ const variantTaggedPseudoClasses = (options = {}) => {
     {
       match: taggedPseudoClassMatcher("peer", attributify ? '[peer=""]' : ".peer", "~"),
       multiPass: true
+    },
+    {
+      match: taggedPseudoClassMatcher("parent", attributify ? '[parent=""]' : ".parent", ">"),
+      multiPass: true
+    },
+    {
+      match: taggedPseudoClassMatcher("previous", attributify ? '[previous=""]' : ".previous", "+"),
+      multiPass: true
     }
   ];
 };
@@ -249,6 +290,7 @@ const partClasses = {
 };
 
 const variants = (options) => [
+  variantLayer,
   variantNegative,
   variantImportant,
   variantPrint,
@@ -265,4 +307,4 @@ const variants = (options) => [
   ...variantLanguageDirections
 ];
 
-export { variantBreakpoints as a, variantCombinators as b, variantMotions as c, variantOrientations as d, variantPrint as e, variantColorsMediaOrClass as f, variantLanguageDirections as g, variantImportant as h, variantNegative as i, variantPseudoElements as j, variantPseudoClasses as k, variantPseudoClassFunctions as l, variantTaggedPseudoClasses as m, partClasses as p, variants as v };
+export { variantBreakpoints as a, variantCombinators as b, variantMotions as c, variantOrientations as d, variantPrint as e, variantColorsMediaOrClass as f, variantLanguageDirections as g, variantLayer as h, variantImportant as i, variantNegative as j, variantPseudoElements as k, variantPseudoClasses as l, variantPseudoClassFunctions as m, variantTaggedPseudoClasses as n, partClasses as p, variants as v };

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) {
@@ -306,58 +521,65 @@ 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], " ", 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;
+};
 
 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;