关于css 的AST 语法树的理解

标签：port   href   ||   result   添加   value   理解   select   sel   

css 处理插件大致分为压缩css和给css添加浏览器兼容前缀。

cssmin 可以压缩css，大致原理是将使用正则将css 中的注释和空格删除。

px2rem 插件是将css 中的px 转换为 rem，它的原理是 调用了css 的AST对象 ，css插件将css内容解析成 一个javascript对象，即css AST 抽象语法树，然后遍历语法树，将对象中的px转换为rem，然后再将对象转换为css文件。

这是一些独立的css处理插件，目前css 处理插件最火的就是postcss

postcss 只是一个平台，它只负责将css 转换成AST语法树，然后，运行postcss上的插件修改css Ast对象，最后将AST转换为css内容。

我们自己也可以编写postcss 插件，按照官方的例子：https://dockyard.com/blog/2018/02/01/writing-your-first-postcss-plugin 很快就可以实现一个简单的post css 插件

post 转换为css语法的原理是：将每一个selector 归为一块 名为rule，然后将selector 内的每一个属性归为一块,名为declaration

插件可以遍历这些属性，然后更改例子：

如果

var postcss = require(‘postcss‘)

module.exports = postcss.plugin(‘postcss-test-plugin‘, function (opts) {
  opts = opts || {}

  // Work with options here

  return function (root, result) {
      
    //遍历 所有的 rule
    root.walkRules(function(rule){
      //打印出rule 的选择器
    	console.log(rule.selector)
      
      // 遍历rule内所有的 declaration，

    	rule.walkDecls(function(decl){
         // 打印出 属性 和值    
         console.log(decl.prop+" = "+decl.value)
    	})
    })
  }
})

以一个简单的css为例

:

.item-right {
text-align: right
}

.item-left {
line-height: 24px
}

输出是：

.item-right
text-align = right
.item-left
line-height = 24px

例子地址

关于css 的AST 语法树的理解

标签：port   href   ||   result   添加   value   理解   select   sel   

原文地址：https://www.cnblogs.com/chillaxyw/p/10705929.html