关于css 的AST 语法树的理解

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

例子地址 https://github.com/muyiwei/postcss-plugin-test.git

 

posted @ 2019-04-14 17:16  菜鸟木易  阅读(2348)  评论(0编辑  收藏  举报