@amcss/transformer 模块

[TickHeart]

描述

此函数为将普通css模块转换为AmNode 接受w-10 w-[10px]等参数

目标仓库

https://github.com/developer-plus/amcss

截止日期

No response

其他补充

No response

[alexzhang1030]

transformer 模块需要做的事情：

需要处理最小单元的 className。
外部插件在需要时，会调用 transformer 模块的函数。也就是下文中的 compilePureClassName 来获取该 ClassName 对应的数据

需要实现的规则

• w: width
• h: height
• font: font-weight font-size font-family
• text: color text-align text-decoration
• flex: flex flex-direction flex-wrap flex-flow
• justify-xx: justify-content-xx
• items-xx: items-xx
• bg: background-color background-image background-position background-size background-repeat background-attachment
• border: border-width border-style border-color border-radius
• grid: grid-area grid-column grid-row grid-template-areas grid-template-columns grid-template-rows
• 常见的伪类，例如 hover:

具体实现的语法，需要参考 Tailwind.css 中的语法
必须实现插值语法，也就是 w-[100px] 这种

需要实现的 api

• isValidClassName: 根据传入的 className，判断是否可以处理
• compilePureClassName: 根据传入的 className，返回处理的结果

类型

type CompilePureClassName = (className: string) => TransformerReturnValue | null

TransformerReturnValue 类型

type TransformerReturnValue = {
  attrs: Record<string, string>
}

[alexzhang1030]

@LoTwT @zgsgs

[LoTwT]

transformer 职责梳理

已确认

从形如 hover:bg-red/1 的 classStr 中提取

• 伪类 ( pseudo )：hover ，注：可以同时有多个伪类
• 核心的 cssStr ( pure ) ：bg-red
• 后缀 ( suffix )：1

提取失败时，返回 null

已被确认

暂不考虑

1. unocss custom variants 的 rules 转换需要完成吗，如果需要，是由 transformer 完成吗

todo

1. 提取 classStr 内容时，更准确的正则，更合理的流程方案
2. 校验提取内容的更准确正则
3. 数据结构的设计、联调

[TickHeart]

希望后续将一下功能考虑进去

1. 为识别过的className打上标记，证明其类型

   例如：

   hover:bg-red

   {
     "pseudo": [
         "hover",
      ],
     "pure": "bg-red",
     "flag": "flag1" // 标记,
   }

   hover:bg-red/1

   {
     "pseudo": [
        "hover",
     ],
    "pure": "bg-red",
    "flag": "flag2" // 标记
    "suffix": "1",
   }

   bg-red

   {
     "pure": "bg-red",
      "flag": "flag3" // 标记
   }

2. 标记其是否是插值类型

   hover:w-[100px]

   {
     "pseudo": [
        "hover",
      ],
     "pure": "w-[100px]",
     "flag": "flag1" // 标记,
     isAnyValue: true, // 是否是插值类型
     value: "100px"
   }

[TickHeart]

希望再提供一个字段

"bg-red"

{
 "className": "bg-red"
}

就是抄一遍传来的字符串