这是做什么用的？

这个 SPM 插件允许你自动生成一个枚举，其中包含你的 CSS 文件中声明的所有 CSS 类。

例如，如果你正在使用 Vapor 框架和 Elementary 构建 Web 前端，那么你可以不用写成这样：

span(.class("slider round startsChecked")) {}

你可以写成这样：

span(.class(.slider, .round, .startsChecked)) {}

注意

为了让它与 Elementary 协同工作，你需要这个扩展

extension HTMLAttribute where Tag: HTMLTrait.Attributes.Global {
    static func `class`(_ values: HTMLTagClass...) -> Self {
        HTMLAttribute(name: "class", value: values.map(\.rawValue).joined(separator: " "), mergedBy: .appending(seperatedBy: " "))
    }
}

安装和使用

将此软件包作为依赖项添加到你的项目中。

let package = Package(
    dependencies: [
        .package(url: "https://github.com/maciejtrybilo/htmltagclass-plugin.git", from: "0.1.0")
    ],
)

注意：你只需要将其添加为软件包依赖项，而不是 targets 下的任何位置。

启动命令以生成代码

❯ swift package plugin generateHTMLTagClass --allow-writing-to-package-directory

你也可以使用 entr 来在每次 CSS 文件保存时自动重新生成代码，例如：

❯ find ./Public/css | grep '\.css$' | entr -r swift package plugin generateHTMLTagClass --allow-writing-to-package-directory

它是如何工作的？

该插件会查找 Public/css 目录及其所有子目录，并尝试解析出 CSS 文件中引用的所有类。然后，它会在 Sources/App 目录中创建 HTMLTagClass.swift 文件，其中包含 HTMLTagClass 枚举，例如：

enum HTMLTagClass: String {
  case slider
  case round
  case startsChecked
}

该插件尝试处理一些边缘情况，例如当类名不是有效的 Swift 标识符时，所以一个包含以下内容的 CSS 文件：

.left-panel {}
.switch {}

将会生成：

enum HTMLTagClass: String {
  case left_panel = "left-panel"
  case `switch`
}

如果你在使用过程中发现插件有任何问题，欢迎贡献其他修复！