@unocss/inspector 0.54.2 → 0.55.0

package/dist/index.mjs

@@ -1,12 +1,978 @@
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import sirv from 'sirv';
+import { escapeSelector, createValueHandler, isString, escapeRegExp, CountableSet, BetterMap } from '@unocss/core';
 import gzipSize from 'gzip-size';
 
 const SKIP_START_COMMENT = "@unocss-skip-start";
 const SKIP_END_COMMENT = "@unocss-skip-end";
 const SKIP_COMMENT_RE = new RegExp(`(//\\s*?${SKIP_START_COMMENT}\\s*?|\\/\\*\\s*?${SKIP_START_COMMENT}\\s*?\\*\\/|<!--\\s*?${SKIP_START_COMMENT}\\s*?-->)[\\s\\S]*?(//\\s*?${SKIP_END_COMMENT}\\s*?|\\/\\*\\s*?${SKIP_END_COMMENT}\\s*?\\*\\/|<!--\\s*?${SKIP_END_COMMENT}\\s*?-->)`, "g");
 
+const basePositionMap = [
+  "top",
+  "top center",
+  "top left",
+  "top right",
+  "bottom",
+  "bottom center",
+  "bottom left",
+  "bottom right",
+  "left",
+  "left center",
+  "left top",
+  "left bottom",
+  "right",
+  "right center",
+  "right top",
+  "right bottom",
+  "center",
+  "center top",
+  "center bottom",
+  "center left",
+  "center right",
+  "center center"
+];
+Object.assign(
+  {},
+  ...basePositionMap.map((p) => ({ [p.replace(/ /, "-")]: p })),
+  ...basePositionMap.map((p) => ({ [p.replace(/\b(\w)\w+/g, "$1").replace(/ /, "")]: p }))
+);
+const globalKeywords = [
+  "inherit",
+  "initial",
+  "revert",
+  "revert-layer",
+  "unset"
+];
+
+const numberWithUnitRE = /^(-?\d*(?:\.\d+)?)(px|pt|pc|%|r?(?:em|ex|lh|cap|ch|ic)|(?:[sld]?v|cq)(?:[whib]|min|max)|in|cm|mm|rpx)?$/i;
+const numberRE = /^(-?\d*(?:\.\d+)?)$/i;
+const unitOnlyRE = /^(px)$/i;
+
+const cssProps = [
+  "color",
+  "border-color",
+  "background-color",
+  "flex-grow",
+  "flex",
+  "flex-shrink",
+  "caret-color",
+  "font",
+  "gap",
+  "opacity",
+  "visibility",
+  "z-index",
+  "font-weight",
+  "zoom",
+  "text-shadow",
+  "transform",
+  "box-shadow",
+  "background-position",
+  "left",
+  "right",
+  "top",
+  "bottom",
+  "object-position",
+  "max-height",
+  "min-height",
+  "max-width",
+  "min-width",
+  "height",
+  "width",
+  "border-width",
+  "margin",
+  "padding",
+  "outline-width",
+  "outline-offset",
+  "font-size",
+  "line-height",
+  "text-indent",
+  "vertical-align",
+  "border-spacing",
+  "letter-spacing",
+  "word-spacing",
+  "stroke",
+  "filter",
+  "backdrop-filter",
+  "fill",
+  "mask",
+  "mask-size",
+  "mask-border",
+  "clip-path",
+  "clip",
+  "border-radius"
+];
+function round(n) {
+  return n.toFixed(10).replace(/\.0+$/, "").replace(/(\.\d+?)0+$/, "$1");
+}
+function numberWithUnit(str) {
+  const match = str.match(numberWithUnitRE);
+  if (!match)
+    return;
+  const [, n, unit] = match;
+  const num = Number.parseFloat(n);
+  if (unit && !Number.isNaN(num))
+    return `${round(num)}${unit}`;
+}
+function auto(str) {
+  if (str === "auto" || str === "a")
+    return "auto";
+}
+function rem(str) {
+  if (str.match(unitOnlyRE))
+    return `1${str}`;
+  const match = str.match(numberWithUnitRE);
+  if (!match)
+    return;
+  const [, n, unit] = match;
+  const num = Number.parseFloat(n);
+  if (!Number.isNaN(num)) {
+    if (num === 0)
+      return "0";
+    return unit ? `${round(num)}${unit}` : `${round(num / 4)}rem`;
+  }
+}
+function px(str) {
+  if (str.match(unitOnlyRE))
+    return `1${str}`;
+  const match = str.match(numberWithUnitRE);
+  if (!match)
+    return;
+  const [, n, unit] = match;
+  const num = Number.parseFloat(n);
+  if (!Number.isNaN(num)) {
+    if (num === 0)
+      return "0";
+    return unit ? `${round(num)}${unit}` : `${round(num)}px`;
+  }
+}
+function number(str) {
+  if (!numberRE.test(str))
+    return;
+  const num = Number.parseFloat(str);
+  if (!Number.isNaN(num))
+    return round(num);
+}
+function percent(str) {
+  if (str.endsWith("%"))
+    str = str.slice(0, -1);
+  if (!numberRE.test(str))
+    return;
+  const num = Number.parseFloat(str);
+  if (!Number.isNaN(num))
+    return `${round(num / 100)}`;
+}
+function fraction(str) {
+  if (str === "full")
+    return "100%";
+  const [left, right] = str.split("/");
+  const num = Number.parseFloat(left) / Number.parseFloat(right);
+  if (!Number.isNaN(num)) {
+    if (num === 0)
+      return "0";
+    return `${round(num * 100)}%`;
+  }
+}
+const bracketTypeRe = /^\[(color|length|position|quoted|string):/i;
+function bracketWithType(str, requiredType) {
+  if (str && str.startsWith("[") && str.endsWith("]")) {
+    let base;
+    let hintedType;
+    const match = str.match(bracketTypeRe);
+    if (!match) {
+      base = str.slice(1, -1);
+    } else {
+      if (!requiredType)
+        hintedType = match[1];
+      base = str.slice(match[0].length, -1);
+    }
+    if (!base)
+      return;
+    if (base === '=""')
+      return;
+    if (base.startsWith("--"))
+      base = `var(${base})`;
+    let curly = 0;
+    for (const i of base) {
+      if (i === "[") {
+        curly += 1;
+      } else if (i === "]") {
+        curly -= 1;
+        if (curly < 0)
+          return;
+      }
+    }
+    if (curly)
+      return;
+    switch (hintedType) {
+      case "string":
+        return base.replace(/(^|[^\\])_/g, "$1 ").replace(/\\_/g, "_");
+      case "quoted":
+        return base.replace(/(^|[^\\])_/g, "$1 ").replace(/\\_/g, "_").replace(/(["\\])/g, "\\$1").replace(/^(.+)$/, '"$1"');
+    }
+    return base.replace(/(url\(.*?\))/g, (v) => v.replace(/_/g, "\\_")).replace(/(^|[^\\])_/g, "$1 ").replace(/\\_/g, "_").replace(/(?:calc|clamp|max|min)\((.*)/g, (match2) => {
+      const vars = [];
+      return match2.replace(/var\((--.+?)[,)]/g, (match3, g1) => {
+        vars.push(g1);
+        return match3.replace(g1, "--un-calc");
+      }).replace(/(-?\d*\.?\d(?!\b-\d.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, "$1 $2 ").replace(/--un-calc/g, () => vars.shift());
+    });
+  }
+}
+function bracket(str) {
+  return bracketWithType(str);
+}
+function bracketOfColor(str) {
+  return bracketWithType(str, "color");
+}
+function bracketOfLength(str) {
+  return bracketWithType(str, "length");
+}
+function bracketOfPosition(str) {
+  return bracketWithType(str, "position");
+}
+function cssvar(str) {
+  if (str.match(/^\$[^\s'"`;{}]/))
+    return `var(--${escapeSelector(str.slice(1))})`;
+}
+function time(str) {
+  const match = str.match(/^(-?[0-9.]+)(s|ms)?$/i);
+  if (!match)
+    return;
+  const [, n, unit] = match;
+  const num = Number.parseFloat(n);
+  if (!Number.isNaN(num)) {
+    if (num === 0 && !unit)
+      return "0s";
+    return unit ? `${round(num)}${unit}` : `${round(num)}ms`;
+  }
+}
+function degree(str) {
+  const match = str.match(/^(-?[0-9.]+)(deg|rad|grad|turn)?$/i);
+  if (!match)
+    return;
+  const [, n, unit] = match;
+  const num = Number.parseFloat(n);
+  if (!Number.isNaN(num)) {
+    if (num === 0)
+      return "0";
+    return unit ? `${round(num)}${unit}` : `${round(num)}deg`;
+  }
+}
+function global(str) {
+  if (globalKeywords.includes(str))
+    return str;
+}
+function properties(str) {
+  if (str.split(",").every((prop) => cssProps.includes(prop)))
+    return str;
+}
+function position(str) {
+  if (["top", "left", "right", "bottom", "center"].includes(str))
+    return str;
+}
+
+const valueHandlers = {
+  __proto__: null,
+  numberWithUnit: numberWithUnit,
+  auto: auto,
+  rem: rem,
+  px: px,
+  number: number,
+  percent: percent,
+  fraction: fraction,
+  bracket: bracket,
+  bracketOfColor: bracketOfColor,
+  bracketOfLength: bracketOfLength,
+  bracketOfPosition: bracketOfPosition,
+  cssvar: cssvar,
+  time: time,
+  degree: degree,
+  global: global,
+  properties: properties,
+  position: position
+};
+
+const handler = createValueHandler(valueHandlers);
+const h = handler;
+
+function getThemeColor(theme, colors) {
+  let obj = theme.colors;
+  let index = -1;
+  for (const c of colors) {
+    index += 1;
+    if (obj && typeof obj !== "string") {
+      const camel = colors.slice(index).join("-").replace(/(-[a-z])/g, (n) => n.slice(1).toUpperCase());
+      if (obj[camel])
+        return obj[camel];
+      if (obj[c]) {
+        obj = obj[c];
+        continue;
+      }
+    }
+    return void 0;
+  }
+  return obj;
+}
+function splitShorthand(body, type) {
+  const split = body.split(/(?:\/|:)/);
+  if (split[0] === `[${type}`) {
+    return [
+      split.slice(0, 2).join(":"),
+      split[2]
+    ];
+  }
+  return split;
+}
+function parseColor$1(body, theme) {
+  const [main, opacity] = splitShorthand(body, "color");
+  const colors = main.replace(/([a-z])([0-9])/g, "$1-$2").split(/-/g);
+  const [name] = colors;
+  if (!name)
+    return;
+  let color;
+  const bracket = h.bracketOfColor(main);
+  const bracketOrMain = bracket || main;
+  if (h.numberWithUnit(bracketOrMain))
+    return;
+  if (bracketOrMain.match(/^#[\da-fA-F]+/g))
+    color = bracketOrMain;
+  else if (bracketOrMain.match(/^hex-[\da-fA-F]+/g))
+    color = `#${bracketOrMain.slice(4)}`;
+  else if (main.startsWith("$"))
+    color = h.cssvar(main);
+  color = color || bracket;
+  if (!color) {
+    const colorData = getThemeColor(theme, [main]);
+    if (typeof colorData === "string")
+      color = colorData;
+  }
+  let no = "DEFAULT";
+  if (!color) {
+    let colorData;
+    const [scale] = colors.slice(-1);
+    if (scale.match(/^\d+$/)) {
+      no = scale;
+      colorData = getThemeColor(theme, colors.slice(0, -1));
+      if (!colorData || typeof colorData === "string")
+        color = void 0;
+      else
+        color = colorData[no];
+    } else {
+      colorData = getThemeColor(theme, colors);
+      if (!colorData && colors.length <= 2) {
+        [, no = no] = colors;
+        colorData = getThemeColor(theme, [name]);
+      }
+      if (typeof colorData === "string")
+        color = colorData;
+      else if (no && colorData)
+        color = colorData[no];
+    }
+  }
+  return {
+    opacity,
+    name,
+    no,
+    color,
+    cssColor: parseCssColor(color),
+    alpha: h.bracket.cssvar.percent(opacity ?? "")
+  };
+}
+function getComponent(str, open, close, separators) {
+  if (str === "")
+    return;
+  if (isString(separators))
+    separators = [separators];
+  if (separators.length === 0)
+    return;
+  const l = str.length;
+  let parenthesis = 0;
+  for (let i = 0; i < l; i++) {
+    switch (str[i]) {
+      case open:
+        parenthesis++;
+        break;
+      case close:
+        if (--parenthesis < 0)
+          return;
+        break;
+      default:
+        for (const separator of separators) {
+          const separatorLength = separator.length;
+          if (separatorLength && separator === str.slice(i, i + separatorLength) && parenthesis === 0) {
+            if (i === 0 || i === l - separatorLength)
+              return;
+            return [
+              str.slice(0, i),
+              str.slice(i + separatorLength)
+            ];
+          }
+        }
+    }
+  }
+  return [
+    str,
+    ""
+  ];
+}
+function getComponents(str, separators, limit) {
+  limit = limit ?? 10;
+  const components = [];
+  let i = 0;
+  while (str !== "") {
+    if (++i > limit)
+      return;
+    const componentPair = getComponent(str, "(", ")", separators);
+    if (!componentPair)
+      return;
+    const [component, rest] = componentPair;
+    components.push(component);
+    str = rest;
+  }
+  if (components.length > 0)
+    return components;
+}
+
+const cssColorFunctions = ["hsl", "hsla", "hwb", "lab", "lch", "oklab", "oklch", "rgb", "rgba"];
+const alphaPlaceholders = ["%alpha", "<alpha-value>"];
+new RegExp(alphaPlaceholders.map((v) => escapeRegExp(v)).join("|"));
+function parseCssColor(str = "") {
+  const color = parseColor(str);
+  if (color == null || color === false)
+    return;
+  const { type: casedType, components, alpha } = color;
+  const type = casedType.toLowerCase();
+  if (components.length === 0)
+    return;
+  if (["rgba", "hsla"].includes(type) && alpha == null)
+    return;
+  if (cssColorFunctions.includes(type) && ![1, 3].includes(components.length))
+    return;
+  return {
+    type,
+    components: components.map((c) => typeof c === "string" ? c.trim() : c),
+    alpha: typeof alpha === "string" ? alpha.trim() : alpha
+  };
+}
+function parseColor(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) {
+    if ([3, 4].includes(components.length)) {
+      return {
+        type,
+        components: components.slice(0, 3),
+        alpha: components[3]
+      };
+    } else if (components.length !== 1) {
+      return false;
+    }
+  }
+}
+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], "/", 2);
+  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
+  };
+}
+
+const staticUtilities = {
+  "box-border": "boxSizing",
+  "box-content": "boxSizing",
+  "b": "border",
+  "border": "border",
+  "rounded": "border",
+  "block": "display",
+  "inline-block": "display",
+  "inline": "display",
+  "flex": "display",
+  "inline-flex": "display",
+  "table": "display",
+  "table-caption": "display",
+  "table-cell": "display",
+  "table-column": "display",
+  "table-column-group": "display",
+  "table-footer-group": "display",
+  "table-header-group": "display",
+  "table-row-group": "display",
+  "table-row": "display",
+  "flow-root": "display",
+  "grid": "display",
+  "inline-grid": "display",
+  "contents": "display",
+  "hidden": "display",
+  "float-right": "float",
+  "float-left": "float",
+  "float-none": "float",
+  "clear-left": "clear",
+  "clear-right": "clear",
+  "clear-both": "clear",
+  "clear-none": "clear",
+  "object-contain": "objectFit",
+  "object-cover": "objectFit",
+  "object-fill": "objectFit",
+  "object-none": "objectFit",
+  "object-scale-down": "objectFit",
+  "overflow-auto": "overflow",
+  "overflow-hidden": "overflow",
+  "overflow-visible": "overflow",
+  "overflow-scroll": "overflow",
+  "overflow-x-auto": "overflow",
+  "overflow-y-auto": "overflow",
+  "overflow-x-hidden": "overflow",
+  "overflow-y-hidden": "overflow",
+  "overflow-x-visible": "overflow",
+  "overflow-y-visible": "overflow",
+  "overflow-x-scroll": "overflow",
+  "overflow-y-scroll": "overflow",
+  "of-auto": "overflow",
+  "of-hidden": "overflow",
+  "of-visible": "overflow",
+  "of-scroll": "overflow",
+  "of-x-auto": "overflow",
+  "of-y-auto": "overflow",
+  "of-x-hidden": "overflow",
+  "of-y-hidden": "overflow",
+  "of-x-visible": "overflow",
+  "of-y-visible": "overflow",
+  "of-x-scroll": "overflow",
+  "of-y-scroll": "overflow",
+  "overscroll-auto": "overscrollBehavior",
+  "overscroll-contain": "overscrollBehavior",
+  "overscroll-none": "overscrollBehavior",
+  "overscroll-y-auto": "overscrollBehavior",
+  "overscroll-y-contain": "overscrollBehavior",
+  "overscroll-y-none": "overscrollBehavior",
+  "overscroll-x-auto": "overscrollBehavior",
+  "overscroll-x-contain": "overscrollBehavior",
+  "overscroll-x-none": "overscrollBehavior",
+  "static": "position",
+  "fixed": "position",
+  "absolute": "position",
+  "relative": "position",
+  "sticky": "position",
+  "visible": "visibility",
+  "invisible": "visibility",
+  "flex-row": "flex",
+  "flex-row-reverse": "flex",
+  "flex-col": "flex",
+  "flex-col-reverse": "flex",
+  "flex-wrap": "flex",
+  "flex-wrap-reverse": "flex",
+  "flex-nowrap": "flex",
+  "col-auto": "grid",
+  "row-auto": "grid",
+  "grid-flow-row": "grid",
+  "grid-flow-col": "grid",
+  "grid-flow-row-dense": "grid",
+  "grid-flow-col-dense": "grid",
+  "justify-start": "justifyContent",
+  "justify-end": "justifyContent",
+  "justify-center": "justifyContent",
+  "justify-between": "justifyContent",
+  "justify-around": "justifyContent",
+  "justify-evenly": "justifyContent",
+  "justify-items-auto": "justifyItems",
+  "justify-items-start": "justifyItems",
+  "justify-items-end": "justifyItems",
+  "justify-items-center": "justifyItems",
+  "justify-items-stretch": "justifyItems",
+  "justify-self-auto": "justifySelf",
+  "justify-self-start": "justifySelf",
+  "justify-self-end": "justifySelf",
+  "justify-self-center": "justifySelf",
+  "justify-self-stretch": "justifySelf",
+  "content-center": "alignContent",
+  "content-start": "alignContent",
+  "content-end": "alignContent",
+  "content-between": "alignContent",
+  "content-around": "alignContent",
+  "content-evenly": "alignContent",
+  "items-start": "alignItems",
+  "items-end": "alignItems",
+  "items-center": "alignItems",
+  "items-baseline": "alignItems",
+  "items-stretch": "alignItems",
+  "self-auto": "alignSelf",
+  "self-start": "alignSelf",
+  "self-end": "alignSelf",
+  "self-center": "alignSelf",
+  "self-stretch": "alignSelf",
+  "place-content-center": "placeContent",
+  "place-content-start": "placeContent",
+  "place-content-end": "placeContent",
+  "place-content-between": "placeContent",
+  "place-content-around": "placeContent",
+  "place-content-evenly": "placeContent",
+  "place-content-stretch": "placeContent",
+  "place-items-auto": "placeItems",
+  "place-items-start": "placeItems",
+  "place-items-end": "placeItems",
+  "place-items-center": "placeItems",
+  "place-items-stretch": "placeItems",
+  "place-self-auto": "placeSelf",
+  "place-self-start": "placeSelf",
+  "place-self-end": "placeSelf",
+  "place-self-center": "placeSelf",
+  "place-self-stretch": "placeSelf",
+  "antialiased": "fontSmoothing",
+  "subpixel-antialiased": "font",
+  "italic": "font",
+  "not-italic": "font",
+  "normal-nums": "font",
+  "ordinal": "font",
+  "slashed-zero": "font",
+  "lining-nums": "font",
+  "oldstyle-nums": "font",
+  "proportional-nums": "font",
+  "tabular-nums": "font",
+  "diagonal-fractions": "font",
+  "stacked-fractions": "font",
+  "list-inside": "listStylePosition",
+  "list-outside": "listStylePosition",
+  "text-left": "textAlign",
+  "text-center": "textAlign",
+  "text-right": "textAlign",
+  "text-justify": "textAlign",
+  "underline": "textDecoration",
+  "line-through": "textDecoration",
+  "no-underline": "textDecoration",
+  "uppercase": "textTransform",
+  "lowercase": "textTransform",
+  "capitalize": "textTransform",
+  "normal-case": "textTransform",
+  "truncate": "textOverflow",
+  "overflow-ellipsis": "textOverflow",
+  "overflow-clip": "textOverflow",
+  "align-baseline": "verticalAlign",
+  "align-top": "verticalAlign",
+  "align-middle": "verticalAlign",
+  "align-bottom": "verticalAlign",
+  "align-text-top": "verticalAlign",
+  "align-text-bottom": "verticalAlign",
+  "whitespace-normal": "whitespace",
+  "whitespace-nowrap": "whitespace",
+  "whitespace-pre": "whitespace",
+  "whitespace-pre-line": "whitespace",
+  "whitespace-pre-wrap": "whitespace",
+  "ws-normal": "whitespace",
+  "ws-nowrap": "whitespace",
+  "ws-pre": "whitespace",
+  "ws-pre-line": "whitespace",
+  "ws-pre-wrap": "whitespace",
+  "break-normal": "wordBreak",
+  "break-words": "wordBreak",
+  "break-all": "wordBreak",
+  "bg-fixed": "background",
+  "bg-local": "background",
+  "bg-scroll": "background",
+  "bg-clip-border": "background",
+  "bg-clip-padding": "background",
+  "bg-clip-content": "background",
+  "bg-clip-text": "background",
+  "bg-repeat": "background",
+  "bg-no-repeat": "background",
+  "bg-repeat-x": "background",
+  "bg-repeat-y": "background",
+  "bg-repeat-round": "background",
+  "bg-repeat-space": "background",
+  "border-solid": "border",
+  "border-dashed": "border",
+  "border-dotted": "border",
+  "border-double": "border",
+  "border-none": "border",
+  "border-collapse": "border",
+  "border-separate": "border",
+  "table-auto": "table",
+  "table-fixed": "table",
+  "transform": "transform",
+  "transform-gpu": "transform",
+  "transform-none": "transform",
+  "appearance-none": "appearance",
+  "pointer-events-none": "pointerEvents",
+  "pointer-events-auto": "pointerEvents",
+  "resize-none": "resize",
+  "resize-y": "resize",
+  "resize-x": "resize",
+  "resize": "resize",
+  "select-none": "userSelect",
+  "select-text": "userSelect",
+  "select-all": "userSelect",
+  "select-auto": "userSelect",
+  "fill-current": "fill",
+  "stroke-current": "stroke",
+  "sr-only": "accessibility",
+  "not-sr-only": "accessibility",
+  "filter": "filter",
+  "invert": "filter"
+};
+const dynamicUtilities = {
+  container: "container",
+  space: "space",
+  divide: "divide",
+  bg: "background",
+  from: "gradientColor",
+  via: "gradientColor",
+  to: "gradientColor",
+  border: "border",
+  b: "border",
+  rounded: "borderRadius",
+  cursor: "cursor",
+  flex: "flex",
+  shrink: "flex",
+  order: "order",
+  font: "font",
+  h: "size",
+  leading: "lineHeight",
+  list: "listStyleType",
+  m: "margin",
+  my: "margin",
+  mx: "margin",
+  mt: "margin",
+  mr: "margin",
+  mb: "margin",
+  ml: "margin",
+  min: "size",
+  max: "size",
+  object: "objectPosition",
+  op: "opacity",
+  opacity: "opacity",
+  outline: "outline",
+  p: "padding",
+  py: "padding",
+  px: "padding",
+  pt: "padding",
+  pr: "padding",
+  pb: "padding",
+  pl: "padding",
+  placeholder: "placeholder",
+  inset: "inset",
+  top: "position",
+  right: "position",
+  bottom: "position",
+  left: "position",
+  shadow: "boxShadow",
+  ring: "ring",
+  fill: "fill",
+  stroke: "stroke",
+  text: "text",
+  tracking: "letterSpacing",
+  w: "size",
+  z: "zIndex",
+  gap: "gap",
+  auto: "grid",
+  grid: "grid",
+  col: "grid",
+  row: "grid",
+  origin: "transform",
+  scale: "transform",
+  rotate: "transform",
+  translate: "transform",
+  skew: "transform",
+  transition: "animation",
+  ease: "animation",
+  duration: "animation",
+  delay: "animation",
+  animate: "animation",
+  filter: "filter",
+  backdrop: "filter",
+  invert: "filter"
+};
+
+function getSelectorCategory(selector) {
+  return staticUtilities[selector] || Object.entries(dynamicUtilities).find(([name]) => new RegExp(`^${name}+(-.+|[0-9]+)$`).test(selector))?.[1];
+}
+
+const ignoredColors = [
+  "transparent",
+  "current",
+  "currentColor",
+  "inherit",
+  "initial",
+  "unset",
+  "none"
+];
+function uniq(array) {
+  return [...new Set(array)];
+}
+async function analyzer(modules, ctx) {
+  const matched = [];
+  const colors = [];
+  const tokensInfo = /* @__PURE__ */ new Map();
+  await Promise.all(modules.map(async (code, id) => {
+    const result = await ctx.uno.generate(code, { id, extendedInfo: true, preflights: false });
+    for (const [key, value] of result.matched.entries()) {
+      const prev = tokensInfo.get(key);
+      tokensInfo.set(key, {
+        data: value.data,
+        count: prev?.modules?.length ? value.count + prev.count : value.count,
+        modules: uniq([...prev?.modules || [], id])
+      });
+    }
+  }));
+  for (const [rawSelector, { data, count, modules: _modules }] of tokensInfo.entries()) {
+    const ruleContext = data[data.length - 1][5];
+    const ruleMeta = data[data.length - 1][4];
+    const baseSelector = ruleContext?.currentSelector;
+    const variants = ruleContext?.variants?.map((v) => v.name).filter(Boolean);
+    const layer = ruleMeta?.layer || "default";
+    if (baseSelector) {
+      const category = layer !== "default" ? layer : getSelectorCategory(baseSelector);
+      const body = baseSelector.replace(/^ring-offset|outline-solid|outline-dotted/, "head").replace(/^\w+-/, "");
+      const parsedColor = parseColor$1(body, ctx.uno.config.theme);
+      if (parsedColor?.color && !ignoredColors.includes(parsedColor?.color)) {
+        const existing = colors.find((c) => c.name === parsedColor.name && c.no === parsedColor.no);
+        if (existing) {
+          existing.count += count;
+          existing.modules = uniq([...existing.modules, ..._modules]);
+        } else {
+          colors.push({
+            name: parsedColor.name,
+            no: parsedColor.no,
+            color: parsedColor.color,
+            count,
+            modules: _modules
+          });
+        }
+      }
+      if (category) {
+        matched.push({
+          name: rawSelector,
+          rawSelector,
+          baseSelector,
+          category,
+          variants,
+          count,
+          ruleMeta,
+          modules: _modules
+        });
+        continue;
+      }
+    }
+    matched.push({
+      name: rawSelector,
+      rawSelector,
+      category: "other",
+      count,
+      modules: _modules
+    });
+  }
+  return {
+    matched,
+    colors
+  };
+}
+
 const _dirname = typeof __dirname !== "undefined" ? __dirname : dirname(fileURLToPath(import.meta.url));
 function UnocssInspector(ctx) {
   async function configureServer(server) {
@@ -40,10 +1006,13 @@ function UnocssInspector(ctx) {
           res.end();
           return;
         }
-        const result = await ctx.uno.generate(code.replace(SKIP_COMMENT_RE, ""), { id, preflights: false });
+        const tokens = new CountableSet();
+        await ctx.uno.applyExtractors(code.replace(SKIP_COMMENT_RE, ""), id, tokens);
+        const result = await ctx.uno.generate(tokens, { id, extendedInfo: true, preflights: false });
+        const analyzed = await analyzer(new BetterMap([[id, code]]), ctx);
         const mod = {
           ...result,
-          matched: Array.from(result.matched),
+          ...analyzed,
           gzipSize: await gzipSize(result.css),
           code,
           id
@@ -68,10 +1037,12 @@ function UnocssInspector(ctx) {
         return;
       }
       if (req.url.startsWith("/overview")) {
-        const result = await ctx.uno.generate(ctx.tokens);
+        const result = await ctx.uno.generate(ctx.tokens, { preflights: false });
+        const analyzed = await analyzer(ctx.modules, ctx);
         const mod = {
           ...result,
-          matched: Array.from(result.matched),
+          colors: analyzed.colors.map((s) => ({ ...s, modules: [...s.modules] })),
+          matched: analyzed.matched.map((s) => ({ ...s, modules: [...s.modules] })),
           gzipSize: await gzipSize(result.css)
         };
         res.setHeader("Content-Type", "application/json");