使用 UnoCSS shortcuts 简化 class

shortcuts: {
  // shortcuts to multiple utilities
  'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
  'btn-green': 'text-white bg-green-500 hover:bg-green-700',
  // single utility alias
  'red': 'text-red-100'
}

const shortcuts = <UserShortcuts>[
  [
    /^f-((c|s|e)(-(c|s|e|b))*)$/,
    ([, group1, group2, group3, group4]) => {
      const matches = [
        { prefix: "c", value: "center" },
        { prefix: "s", value: "start" },
        { prefix: "e", value: "end" },
        { prefix: "b", value: "between" }
      ];

      if (group4) {
        let style = ``;

        for (let i = 0; i < matches.length; i++) {
          if (matches[i].prefix === group2) {
            style += `flex items-${matches[i].value} content-${matches[i].value}`;
          }
        }

        for (let i = 0; i < matches.length; i++) {
          if (matches[i].prefix === group4) {
            style += ` justify-${matches[i].value}`;
          }
        }

        return style;
      } else {
        for (let i = 0; i < matches.length; i++) {
          if (matches[i].prefix === group2) {
            return `flex items-${matches[i].value} content-${matches[i].value}`;
          }
        }
      }
    }
  ]
];