PostCSS

PostCSS 一种用javascript编写的css解析器，利用parser转换为css tree及用stringifier将css tree 装换 value的过程。

基本原理：

主要包含四个属性：

• raws: 包含一些节点的辅助信息
• type: 节点类型(root, atrule, rule, decl, or comment)
• nodes: 子节点
• source: 输入信息

同步API

var root  = postcss.parse(css, { from: 'a.css' });
root.source.input.from //=> '/home/ai/a.css'

异步API

var fs = require('fs');
var css = fs.readFileSync('./src/app.css', 'utf-8');

postcss([ require('autoprefixer'), require('cssnano') ])
    .process(css, {
        map: { inline: false }, // envoke map init
        from: 'src/app.css',
        to: 'app.css' })
    .then(function (result) {
        fs.writeFileSync('app.css', result.css);
        if ( result.map ) {
            fs.writeFileSync('app.css.map', result.map);
        }
    });

// 同步API
postcss([autoprefixer, cssnext]).process(css).css;

// 异步API
postcss([autoprefixer, cssnext])
    .preocess(css, {
        from: 'src/app.css',
        to: 'app.css'
    })
    .then(function(result){
        result.css
    })

其他：

上面的解释可以发现，postcss并不是一个Preprocessors(Sass、Less)，因为Preprocessors需要开发人员去学习相应的语法，比如sass里面的变量及mixin等语法，也可以直接书写在scss文件里面。而它却不是。