import { defineConfig, presetIcons } from "unocss";
import presetWind4 from "@unocss/preset-wind4";
import presetRemToPx from "@unocss/preset-rem-to-px";

export default defineConfig({
  // preset-wind4 (Tailwind v4) 用 calc(var(--spacing) * N) 表达间距，
  // 把 --spacing 固定为 1px，配合 presetRemToPx 保持“数字 = px”的既有约定。
  theme: {
    spacing: {
      DEFAULT: "1px",
    },
  },

  presets: [
    presetRemToPx({
      baseFontSize: 4,
    }),

    presetWind4(),

    presetIcons({
      scale: 1.2,
      warn: true,
      extraProperties: {
        display: "inline-block",
        "vertical-align": "middle",
      },
    }),
  ],

  rules: [
    [
      "pb-safe",
      {
        "padding-bottom":
          "calc(env(safe-area-inset-bottom) + 26px)",
      },
    ],
  ],

  // 企业微信 / X5(TBS) 等旧内核 webview 兼容：把 preset-wind4 默认输出的现代 CSS
  // 降级为老内核也能渲染的写法，保持与旧 preset-wind 视觉一致。
  // - color-mix(..., <color> var(--un-*-opacity), transparent) → 纯色（项目未用 /alpha 透明度修饰符）
  // - calc(infinity * 1px) → 9999px（rounded-full 圆角）
  postprocess: [
    (util) => {
      for (const entry of util.entries) {
        if (typeof entry[1] !== "string") continue;
        entry[1] = entry[1]
          .replace(/color-mix\(in (?:oklab|srgb), (.+?) var\(--un-[\w-]+-opacity[^)]*\), transparent\)/g, "$1")
          .replace(/calc\(infinity \* 1px\)/g, "9999px");
      }
    },
  ],
});