连 Postcss 官推都转发的代替品 peacecss 究竟有多强？

原文作者：伊撒尔

原文地址：https://zhuanlan.zhihu.com/p/472891208

原文标题：peacecss：postcss 的替代品

github地址：https://github.com/yisar/peacecss

halo 大家好，俺是 132，今天带来闭关的第二个 parser，专门用来替代 postcss 的

前景

随着 esbuild、swc 等库的流行，前端已经进入了靠静态语言提升性能的小时代，大家趋之若鹜开始 rewritten in rust get rid of js

毕业后，我一直在做小程序工具链，其中小程序编译器中的三种类型的文件，js，wxml，wxss，其中 js 可以用 esbuild 解决，其他两种文件的解析打包则需要使用 native 语言重写

其中，wxml 是使用 rust 写了一个 parser，它会将 wxml 编译为 fre 的 JSX

GitHub - yisar/wxml: wxml parser rust implement

而 wxss 的解析，我必须依赖 postcss，因为小程序的 wxss 中的 rpx 等 feature 都不是标准，只能手动 postcss 修改……

于是我使用 golang 写了一个 postcss 的替代品：peacecss

peacecss

之所以叫这个名字，是因为我在写这个 parser 的时候，刚好是俄乌战争，群里都炸了，推特也炸了，其实战争的起因我们可以评头论足，但是战争的局势往往会失控……

但是无论如何，当我想要给新轮子起名字的时候，脑子里不断回荡着“peace”，希望双方保持克制，不要关上和平大门！

peacecss 是我专门用 go 写的用来替代 postcss 的 parser，它和 wxml parser 不同，它使用的是纯字节码的解析……这样以来性能会好很多

package main

import (
 "fmt"
 "github.com/yisar/peacecss"
)

func main() {
 parser := nextcss.NewParser()

 ast := parser.Parse([]byte(".a{color:#fff;}"))
 
 ast.Walk(func (node *peacecss.CSSDefinition){
  fmt.Printf("%v", node)
  
  node.Selector.Selector = ".b"
 
  fmt.Printf("%v", node)
 })

 output:= ast.Minisize()

 fmt.Printf("%s", output.String())
 
}

就是上面这样使用啦！可以看到基本上和 JavaScript 的 API 差不多啦！下一篇文章我会写一个 rpx 的插件咯

cssnext playground

总的来说，peacecss 真的可以完全替代 postcss，而且现在就可以直接用起来啦！

Why not Rust？

为什么不使用 rust，是因为 rust 的语言特性，也就是所有权，生命周期，类型，不可变，基本上可以说限制死了，在 rust 端很难实现一棵可变的树，也很难实现类似的插件系统和 API

但是 go 则完全不同，它拥有 GC 还有和 JavaScript 几乎一模一样的内存规则，是用来 port 的绝佳选择

我们使用 postcss 其实并不在意它的 minisize 等能力，重点还是在于 AST 这颗可变的树

这棵树是一棵引用树，如果有十个插件，则这十个插件需要共享这颗树的引用，透传，修改

只有这样才能保证性能和 API 的友好程度

恰恰 rust 是做不到的，在 rust 中，写 parser 更多地使用红绿树这种结构，它是不断 clone 一棵红树，而不是直接修改绿树，这对插件系统来说是个致命的打击……

Is Rust the future of frontend?

先说答案，我觉得不是，至少不只是

就 postcss 这种场景，其实才是 JavaScript 中的主流，所以其实更多的时候 go 会 rust 更好

但是如果你不需要借助引用办事，就写个开箱即用的轮子，rust 也是不错的，比如我写的 wxml-parser

对于 css 来说，如果你不需要修改 AST，也可以直接用 parcel-css，也是极好的

不过，未来肯定是各种语言互相串联绑定是一定的了，rust，go，c，zig，dart，c++……总有它们适合的领域，比如 zig 用来做交叉编译也很方便

没必要讨论谁是未来，它们都是！

总结

最后放个 github 链接：https://github.com/yisar/peacecss

欢迎食用和 star 啦！下一篇文章俺会实现几个插件的插件

与此同时，也希望 peacecss 这个名字可以让俄乌冲突缓解，朝着好的方向发展