快速入门postcss插件:自动转换px到rem
发布网友
发布时间：2024-09-17 09:21
共1个回答
热心网友
时间：2024-09-28 04:59
PostCSS是css的transpiler（转换编译器，简称转译器），它对于css就像babel对于js一样，能够做css代码的分析和转换。同时，它也提供了插件机制来做自定义的转换。
这一节，我们通过一个px自动转rem的功能来入门一下postcss的插件。
postcss的原理postcss是css到css的转译器，它也和babel一样，分为parse、transform、generate3个阶段。各种转换插件都是工作在transform阶段，基于AST做分析和转换。
css的AST比js的简单多了，主要有这么几种：
atrule：以@开头的规则，比如：
@mediascreenand(min-width:480px){body{background-color:lightgreen;}}rule：选择器开头的规则，比如：
ulli{padding:5px;}decl：具体的样式，比如：
padding:5px;比起jsparser的那几十种AST是不是简单的多？
这些可以通过astexplorer.net来可视化的查看
postcss插件的写法postcss插件是工作在transform阶段，处理ast节点，插件的形式是这样的：
constplugin=(options={})=>{return{postcssPlugin:'插件名字',Rule(node){},Declaration(node){},AtRule(node){}}}外层函数接受options，返回一个插件的对象，声明对什么节点做处理的listener，然后在对应的listener里写处理逻辑就行。
还可以这样写：
module.exports=(opts={})=>{return{postcssPlugin:'插件名字',prepare(result){//这里可以放一些公共的逻辑return{Declaration(node){},Rule(node){},AtRule(node){}}}}}在prepare里返回各种listener，这样比起第一种来，好处是可以存放一些公共的逻辑。
然后可以这样来运行插件：
constpostcss=require('postcss');postcss([plugin({//options})]).process('a{font-size:20px;}').then(result=>{console.log(result.css);})下面我们来写一个简易的px自动转rem的插件来练练手。
实战案例需求描述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处理的listener：
constplugin=(options)=>{return{postcssPlugin:'postcss-simple-px2rem',Declaration(decl){}}}然后要做的就是把decl的样式值中的px转换为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的transpiler，就像babel是js的transpiler一样，而且postcss的AST只有几种节点，比较简单，也可以通过astexplorer.net来可视化的查看。
postcss也提供了插件功能，可以做一些自定义的分析和转换。
我们实现了简单的px自动转rem的插件：
rem是通过等比缩放的方式来达到一套样式适配不同设备宽度的显示的方案，需要做px到rem的转换，这件事可以用postcss插件来自动来做。
其实postcss插件的分析和转换功能还有很多的应用，比如切换主题色，从白到黑，完全就可以用postcss自动分析颜色的值，然后做转换。
postcss分析和转换css的能力还是很强大很有用的，有很多在业务中的应用场景等你去发掘。
