使用unocss进行css原子化开发

主要利用unocss的preset，制定自定义rule，配合正则表达式实现简单类名

1 设置flex属性

import type {
    Preset } from 'unocss

const directionAbbr = {
   
  col: 'column',
  colr: 'column-reverse',
  row: 'row',
  rowr: 'row-reverse',
}
//主轴方向
const justifyAbbr = {
   
  center: 'center',
  start: 'flex-start',
  end: 'flex-end',
  between: 'space-between',
  around: 'space-around',
  evenly: 'space-evenly',
}

//交叉轴方向
const alignAbbr = {
   
  center: 'center',
  start: 'flex-start',
  end: 'flex-end',
  baseline: 'baseline'
}

export function presetFlex( config?: {
     prefix?:string } ):Preset {
   
	const _config = {
    prefix: config?.prefix || 'sm' }
	const direction = Reflect.ownKeys(directionAbbr).join('|')
  	const justify = Reflect.ownKeys(justifyAbbr).join('|')
  	const align = Reflect.ownKeys(alignAbbr).join('|')
	
	const reg1 = new RegExp(
		`^${
     _config.prefix}-flex-(${
     direction})$`	
	)
	const reg2 = new RegExp(
		`^${
     _config.prefix}-flex-(${
     direction})-(${
     justify})-(${
     align