PostCSS 架构

PostCSS 架构的一般概述。对于希望为核心做出贡献或更好地了解该工具的每个人来说,它都很有用。

概述

本节介绍 PostCSS 背后的理念

在深入了解 PostCSS 的开发之前,让我们简单描述一下什么是 PostCSS,什么不是 PostCSS。

PostCSS

工作流

这是整个 PostCSS 工作流的高级概述

workflow

从上面的图表中可以看到,PostCSS 架构非常简单,但其中某些部分可能会被误解。

你可以看到一个名为 Parser 的部分,这个结构将在后面详细描述,现在只需把它想象成一个可以理解你的类似 CSS 的语法并创建它的对象表示形式的结构即可。

也就是说,有几种方法可以编写解析器。

让我们思考一下为什么第二种方式更适合我们的需求。

首先,因为将字符串转换为标记的步骤比解析步骤花费更多时间。我们对大型源字符串进行操作并逐个字符地处理它,这就是为什么它在性能方面非常低效,我们应该只执行一次。

但另一方面,将标记转换为 AST 的转换在逻辑上更复杂,因此通过这种分离,我们可以编写非常快速的标记器(但这有时会导致代码难以阅读)和易于阅读(但速度较慢)的解析器。

总结一下,拆分为两个步骤可以提高性能和代码可读性。

现在让我们更仔细地了解在 PostCSS 工作流中发挥主要作用的结构。

核心结构

API 参考

可以在 此处 找到更具描述性的 API 文档