@amcss/default 插件的开发

[TickHeart]

描述

基础css的识别
基础样式的扫描器和提取器
基础样式的编译器
基础样式的生成器

目标仓库

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

截止日期

No response

其他补充

No response

[alexzhang1030]

default 插件概述

该插件独立于所有插件，core 模块强依赖于该插件，因此在某种意义上来说，这不像是一个插件，而是一个模块

请调用 transformer 模块来处理最小单元 class，例如 hover:bg-red/3

core 会在内部 new default 插件，必须使用 OOP。new default 插件时，会传入用户自定义的 preset-rules ，所以在 compile 模块中，请处理用户的 preset-rules

在 default 插件类中需要提供以下 api：

• scanner
• compiler
• generator

default 插件的注意事项

在 scanner 阶段，core 会传入 shortcuts，结构是 Record<string, string>，示例：

const shortcuts = {
  "tick-heart": "w-100 tick-basic hover:tick ..."
}

默认插件需要对 shortcuts 进行处理，并将无法处理的类返回。

默认插件在扫描 code 时需要做的工作：

• 只扫描 class="" 中的内容
• 无法处理的需要放到 unResolvedClassNames Set 中
• 举个例子，class="w-10 h-20 abc:w-10" 这里的 abc:w-10 无法处理，就需要扔进那个 set 中

默认插件在处理 shortcuts 时需要做下面的工作：

• 融合 shortcuts
• 去重 shortcuts
• 处理自己可处理的 className
• 将无法处理的 className 分割为一个 string[]，并返回

默认插件的 Scanner 返回值：

type DefaultPluginScannerReturnValue = {
  // 根据 code 处理的 amClasses，这里记得也要将 shortcuts 进行处理
  amClasses: AmClass<T>[]; 
  // 无法处理的 className，还要包含 shortcuts 中的内容
  unResolvedClassNames: Set<string>[],
}

[alexzhang1030]

@masterX89 @CoderCrush

[alexzhang1030]

Default 插件伪代码

export function createDefaultPlugin(
  preset: PresetsRules[] = [],
  shortcuts: Record<string, string> = {}
) {
  return new DefaultPlugin(preset, shortcuts);
}

type DefaultPluginScannerReturnValue = {
  // 根据 code 处理的 amClasses，这里记得也要将 shortcuts 进行处理
  amClasses: AmClass[];
  // 无法处理的 className，还要包含 shortcuts 中的内容
  unResolvedClassNames: Set<string>;
};

export class DefaultPlugin {
  constructor(
    private preset: PresetsRules[],
    private shortcuts: Record<string, string>
  ) {}
  scanner(code: string) {
    return {} as DefaultPluginScannerReturnValue;
  }

  compiler(amClass: AmClass) {
    return {} as AmNode;
  }

  generator(amNode: AmNode) {
    return "css code";
  }
}

[masterX89]

想确认一下 unResolvedClassNames 的结构，发现在 default 插件的注意事项的描述

默认插件的 Scanner 返回值：

type DefaultPluginScannerReturnValue = {
 // 根据 code 处理的 amClasses，这里记得也要将 shortcuts 进行处理
 amClasses: AmClass<T>[]; 
 // 无法处理的 className，还要包含 shortcuts 中的内容
 unResolvedClassNames: Set<string>[],
}

和伪代码的结构略有不同：unResolvedClassNames: Set<string>
预想的设计是以下哪一种呢？

• 一个 Set，元素是 string
• 一个 Array，元素是 Set（对 ts 还不是很熟，Set 是否是 一个元素为 string 的 Set？）
• 一个 Set，元素是 string[]

[alexzhang1030]

想确认一下 unResolvedClassNames 的结构，发现在 default 插件的注意事项的描述

默认插件的 Scanner 返回值：

type DefaultPluginScannerReturnValue = {
 // 根据 code 处理的 amClasses，这里记得也要将 shortcuts 进行处理
 amClasses: AmClass<T>[]; 
 // 无法处理的 className，还要包含 shortcuts 中的内容
 unResolvedClassNames: Set<string>[],
}

和伪代码的结构略有不同：unResolvedClassNames: Set<string> 预想的设计是以下哪一种呢？

• 一个 Set，元素是 string
• 一个 Array，元素是 Set（对 ts 还不是很熟，Set 是否是 一个元素为 string 的 Set？）
• 一个 Set，元素是 string []

是 Set，修改结构的时候没同步过来