postcss是一个css的转译器，它是css之用，就像babel之于js一样，它可以分析和转换css代码。同时，它还提供了一种插件机制来进行自定义转换。本节我们将通过一个自动将px转为rem的功能来入门postcss插件。postcss的原理postcss是css到css的翻译器，和babel一样，分为解析、转换、生成三个阶段。各种转换插件工作在转换阶段，基于AST进行分析和转换。css的AST比js简单很多。主要有以下几种：atrule：以@开头的规则，例如：@mediascreenand(min-width:480px){body{background-color:lightgreen;}}rule：selector开头的规则，例如：ulli{padding:5px;}decl：具体样式，如：padding:5px;是不是比js解析器的几十个AST简单多了？这些可以通过astexplorer.net可视化查看：postcss插件编写postcss插件工作在transform阶段，处理ast节点，插件的形式是这样的：constplugin=(options={})=>{return{postcssPlugin:'pluginname',Rule(node){},Declaration(node){},AtRule(node){}}}外层函数接受选项，返回一个插件对象，声明处理的监听器节点，然后在相应的监听器中写入处理逻辑。也可以这样写：module.exports=(opts={})=>{return{postcssPlugin:'pluginname',prepare(result){//这里可以放一些公共逻辑return{Declaration(node){},Rule(node){},AtRule(node){}}}}}在prepare中返回各种监听器，所以和第一种相比，优点是可以存放一些公共逻辑。然后你可以像这样运行插件：constpostcss=require('postcss');postcss([plugin({//options})]).process('a{font-size:20px;}').then(result=>{console.log(result.css);})下面写一个简单的pxtorem插件来练习。px是固定长度单位，设备视口的大小是多种多样的。如果我们想通过一套样式来适应各种设备的显示，就需要一个相对单位。常用的是rem。rem的本质是比例缩放，相对于html元素的font-size。比如html的font-size设置为100px，那么1rem就等于100px，如果后面的样式是200px，就写成2rem。这样我们只需要修改html的font-size就可以适应各种屏幕宽度的显示，具体单位会按比例缩放。我们需要根据html的font-size值将所有的px转换为rem。通常，这是手动完成的，但很麻烦。知道计算方法后，用postcss插件就可以自动完成了。接下来我们将实现postcss插件代码，实现插件的基本结构。我们只需要为Declaration处理声明监听器：constplugin=(options)=>{return{postcssPlugin:'postcss-simple-px2rem',Declaration(decl){}}}然后要做的就是将px中的转换decl样式值到rem，一个简单的常规替换就足够了：constplugin=(options)=>{constpxReg=/(\d+)px/ig;return{postcssPlugin:'postcss-simple-px2rem',Declaration(decl){decl.value=decl.value.replace(pxReg,(matchStr,num)=>{returnnum/options.base+'rem';});}}}使用字符串的replace方法进行替换。第一个参数是匹配字符串，后面的参数是组。第一组是px的值。计算px对应的rem需要1rem对应的px值，可以通过options传入。然后我们测试：postcss([plugin({base:100})]).process('a{font-size:20px;}').then(result=>{console.log(result.css);})可以看出已经正确转换了：当然，我们的插件只是一个案例，还不够完善。如果要完美，则需要更复杂的正则化。总结一下，postcss是css的转译器，就像babel是js的转译器一样，postcss的AST只有几个节点，比较简单，也可以通过astexplorer.net直观查看。postcss也提供了插件功能，可以做一些自定义的解析和转换。我们实现了一个简单的px自动转换rem插件：rem是通过比例缩放实现一组样式来适应不同设备宽度显示的解决方案。需要将px转换为rem。这个可以用postcss插件来自动完成。其实postcss插件的分析转换功能还是有很多应用的，比如切换主题颜色，从白色到黑色，可以使用postcss自动分析颜色的值，然后做转换。postcss分析转换css的能力还是很强大有用的，在业务中还有很多应用场景等着你去发现。
