开发一个psotcss插件

git地址：开发一个psotcss插件

节点类型

postcss会将咱们的css生成ast，而后会去遍历它，在遍历的过程当中会传给咱们一些不一样类型的节点对象，咱们主要须要了解的几个类型：

• css ast主要有3种父类型

  • AtRule: @xxx的这种类型，如@screen
  • Comment: 注释
  • Rule: 普通的css规则

• 还有几个个比较重要的子类型：

  • decl： 指的是每条具体的css规则
  • rule：做用于某个选择器上的css规则集合

这是test的地方的，不熟悉ast的能够先了解一下:css ast结构

postCss操做方法

postCss为咱们提供了一些方便的操做方法
遍历

• walk: 遍历全部节点信息，不管是atRule、rule、comment的父类型，仍是rule、 decl的子类型
• walkAtRules：遍历全部的atRule
• walkComments：遍历全部的注释节点
• walkDecls：遍历因此的属性

• walkRules：遍历全部的css代码块

  root.walkDecls(decl => {
      decl.prop = decl.prop.split('').reverse().join('');
  });

postcss在遍历的过程当中，会将当前遍历的对象的cell传给回调函数，该参数是对应的rule，decl或者comment等Constructor等构造函数的实例，根据遍历的节点不一样，该实例可能会有以下属性：

• nodes: css规则的节点信息集合

  • decl: 每条css规则的节点信息

    • prop: 样式名，如width
    • value: 样式值， 如10px
• type: 类型
• source: 包括start和end的位置信息，start和end里都有line和* column表示行和列
• selector: type为rule时的选择器
• name: type为atRule时@紧接rule名，譬如@import 'xxx.css'中的import
• params: type为atRule时@紧接rule名后的值，譬如@import 'xxx.css'中的xxx.css
• text: type为comment时的注释内容

一样还有继承的一些方法，给我操做css的， 好比操做每条具体css属性的declaration：

after
before
cleanRaws
clone
cloneAfter
cloneBefore
error
next
prev
raw
remove
replaceWith
root
toString
warn

postcss plugin

postcss插件如同babel插件同样，有固定的格式

export default postcss.plugin('postcss-plugin-name', function (opts) {
  opts = opts || {};
  return function (root, result) {
    // 处理逻辑
  };
});

注册个插件名，并获取插件配置参数opts

返回值是个函数，这个函数主体是你的处理逻辑，有2个参数，一个是root，css ast的根节点。另外一个是result，返回结果对象，譬如result.css，得到处理结果的css字符串，result.message包含组件里建立的warnings和自定义信息，result.warn()创造一个warning实例并将其加入到result.message中，result.warnings()得到全部建立过的warning。

注意组件的异常信息处理，不要直接console，由于一些 postcss 处理器会过滤掉console的输出致使异常信息丢失，用node.warn或者node.error创造CssSyntaxError 实例，会自动带上源码中的位置信息帮助debug，加到异常信息队列里。

直接调用postcss下的方法

能够用postcss.parse来处理一段css文本，拿到css ast，而后进行处理，再经过调用toResult().css拿处处理后的css输出，在一些简单的处理中能够用这种方法。

写在最后：

• 想写一下的能够按照这里的指引，很详细https://github.com/postcss/postcss-plugin-boilerplate
• 这是我写的一个将px转为vw的插件vw-by-px

参考：

• http://api.postcss.org
• postcss-pixel-to-viewport