import presetWeapp from "unocss-preset-weapp";
import {
  extractorAttributify,
  transformerClass,
} from "unocss-preset-weapp/transformer";

const { presetWeappAttributify, transformerAttributify } =
  extractorAttributify();

export default {
  presets: [
    presetWeapp({
      whRpx: true,
    }),
    presetWeappAttributify(),
  ],
  shortcuts: [
    {
      "border-base": "border border-gray-500_10",
      "flex-col-center": "flex flex-col justify-center items-center",
      "flex-row-center": "flex flex-row justify-center items-center",
      "flex-col": "flex flex-col",
      "flex-row": "flex flex-row",
    },
  ],
  theme: {
    colors: {
      blue: {
        DEFAULT: "#0094ff",
      },
      red: {
        DEFAULT: "#f63a36",
      },
      yellow: {
        DEFAULT: "#F2A817",
      },
    },
  },
  rules: [
    [
      /^main-text-(\d+)$/,
      ([, d]) => ({
        "font-size": `${d}rpx`,
        "font-weight": 800,
        color: "#000",
        "line-height": `1.4em`,
      }),
    ],
    [
      /^sub-text-(\d+)$/,
      ([, d]) => ({
        "font-size": `${d}rpx`,
        "font-weight": 500,
        color: "#333",
        "line-height": `1.4em`,
      }),
    ],
    [
      /^second-text-(\d+)$/,
      ([, d]) => ({
        "font-size": `${d}rpx`,
        "font-weight": 500,
        color: "#999",
        "line-height": `1.4em`,
      }),
    ],
    [
      "card",
      {
        "background-color": "white",
        "box-shadow": "0rpx 8rpx 26rpx -4rpx rgba(210,210,210,0.5)",
        "border-radius": "16rpx",
      },
    ],
    [
      "shadow-main",
      {
        "box-shadow": "0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.1)",
      },
    ],
    [
      /^show-line$/,
      ([, d]) => ({
        overflow: "hidden",
        "white-space": "nowrap",
        "text-overflow": "ellipsis",
      }),
    ],
    [
      /^show-line-(\d+)$/,
      ([, d]) => ({
        display: "-webkit-box !important",
        overflow: "hidden",
        "text-overflow": "ellipsis !important",
        "word-break": "break-all",
        "-webkit-line-clamp": d,
        "-webkit-box-orient": "vertical !important",
      }),
    ],
  ],

  transformers: [transformerAttributify(), transformerClass()],
};