使用 UnoCSS shortcuts 简化 class

UnoCSS 确实简化了不少样式书写、也降低了 CSS 打包体积，提升了样式使用率。但样式太多的话，class 也写得多，比较费眼。所幸，UnoCSS 提供了 shortcuts 来简化 class，并且可以通过 js 来控制样式的输出，灵活度非常高。

shortcuts 与 rules 不同的是，rules 只可以写 CSS 属性/值，shortcuts 是提高 rules 的利用率，且降低写太多重复的 class。

shortcuts 有动态和静态，我推荐多用动态的。我就直接丢上官方文档给出的静态 shortcuts 例子：

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'
}

下面是我写的动态 shortcuts，目的是简化 flex、items-xxx、content-xxx、justify-xxx 的使用：

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

      let style = ``;

      let corr = matches.find(ele => ele.prefix === g2);
      style += `flex items-${corr.value} content-${corr.value}`;

      if (g4) {
        corr = matches.find(ele => ele.prefix === g4);
        style += ` justify-${corr.value}`;
      }
      return style;
    }
  ]
];

动态 shortcuts 包含多个数组元素，元素包含两个子元素。第一个元素是正则表达式；第二个是正则表达式匹配的结果。正则表达式匹配至少一个组，比如我写的正则表达式可视化图：

这个正则表达式匹配了四个组，shortcuts 获取匹配的值与正则表达式匹配的组是一一对应的关系。我需要的是 组2 和 组4。下面是使用案例，在 class 中写 f-c-s 就可以用上 flex 相关的样式：