向前端架构师迈出一小步

能是PurgeCSS实现的。

链接TailwindCSS与PurgeCSS的，则是一个postCSS插件@fullhuman/postcss-purgecss。

不仅TailwindCSS，还有很多知名项目中使用了postCSS插件。比如：

很多人在项目中使用autoprefixer插件，为css选择器增加不同的「浏览器前缀」。

在其内部会根据browserslist[1]指定浏览器版本。

再去caniuse[2]查找该浏览器版本兼容性支持情况。

最后通过postCSS的能力改写不支持的css属性。

可以看到，postCSS正越来越成为前端项目必不可少的依赖。

同时也有很多关于postCSS的误区，比如认为他是和Less、Sass一样的「css预处理器」。

本文会自底向上介绍postCSS，希望通过此文让你对这款大杀器有更深的认识。

什么是postCSS

postCSS是一款css编译器。

类比Babel家族的@babel/parser可以将js代码解析为AST(抽象语法树)，再利用众多插件(@babel/plugin-xx)的能力改写AST，最终输出改写后的js代码。

postCSS利用自身的parser可以将css代码解析为AST，再利用众多插件(上文介绍的autoprefixer就是一种)改写AST，最终输出改写后的css代码。

点有如下几种类型：

• Root：根节点，代表一个css文件
• AtRule：以@开头的申明，比如@charset "UTF-8"或@media (screen) {}
• Rule：内部包含定义的选择器，比如input, button {}
• Declaration：key-value键值对，比如color: black;
• Comment：单独的注释。selectors、at-rule的参数以及value的注释在节点的node属性内

实现一个简单的插件

接下来我们从一个插件的实现来了解开发者如何介入postCSS编译流程。

postcss-focus[4]会为所有:hover选择器增加:focus以提高键盘操作的可用性。

对于如下代码：

（编辑：南通站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!