PostCSS初步接触

官网 github

PostCSS

PostCSS提供了一种方式，用js代码来处理css。其强大之处是不断发展的插件。PostCSS负责把CSS代码解析成JavaScript可以处理的抽象语法树结构（Abstract Syntax Tree,AST)，再调用插件来处理。插件基于AST,进行各种各样的处理。PostCSS能执行的任务非常多，同时涵盖传统意义上的预处理和后处理。

因此，不能简单地将PostCSS简单地定义为CSS预处理或后处理。

那么什么是预处理和后处理？
预处理是广义来说，目标格式为CSS的预处理器就是CSS预处理器。侠义是以最终生成CSS文件为目的的领域特定语言。如SASS，LESS，Stylus。
后处理是对CSS进行处理，并最终生成CSS的预处理器。它属于广义上的 CSS 预处理器。如CSS压缩工具clean-css。

PostCSS一般不单独使用，结合已有的构建工具进行集成。Webpack、Gulp、Grunt都行。在webpack中，使用postcss-loader进行插件处理。在下面的webpack.config.js代码中postcss-oader用来对.css文件进行处理，并添加在style-loader和css-loader之后。通过一个额外的postcss方法来返回所需要使用的PostCSS插件。require(‘autoprefixer’)的作用是加载Autoprefixer插件。

var path = require('path');
module.exports = {
 context: path.join(__dirname,'app'),
 entry: './index.js',
 output: {
  path: path.join(__dirname,'dist'),
  filename: 'bundle.js'
 },
 module: {
  loaders:[
   {
    test: /\.css$/,
    use: [
     'style-loader',
     'css-loader',
     'postcss-loader'
    ]
   },
   postcss:function(){
    return [require('autoprefixer')];
   }
  ]
 }
}

常用插件

Autoprefixer——-添加浏览器前缀！开发人员在编写 CSS 时只需要使用 CSS 规范中的标准属性名即可。
cssnext———–允许使用CSS将来版本中可能会加入的新特性。cssnext可以翻译成当前可用的语法。

开发插件

每个插件其实是一个js方法，都是一个NodeJS的模块。使用postcss的plugin方法来定义一个新的插件。
插件需要一个名称，一般是以postcsss-开头；插件还需要一个初始化方法，该方法的参数是插件所支持的配置选项，而返回值是另一个方法，用来进行实际的处理。

var postcss = require('postcss');
module.exports = postcss.plugin('postcss-checkcolor',function(options)){
 return function(css,result){
  css.walkDecls('color',function(decl){//使用css对象的walkDecl方法遍历color属性
   if(decl.calue == 'black'){
    result.warn('No black color.',{decl:decl});
   }
  });
 }
}

插件一般使用不同的方法来改变css样式规则。