[官方解释]：
PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
借助JavaScript，PostCSS自身只包括以下4中能力：
⁃ css分析器
⁃ css节点树API
⁃ source map生成器
⁃ css节点树拼接器
关键介绍：
其实，postcss目前已经超过200+的插件，她几乎可以完成你所有和 CSS 相关的工作（包括 Sass 和 Less 这些预处理器的工作），极大的提高你处理 CSS 的效率。
有些插件可以让你使用未来的语法，允许你使用诸如颜色函数，径向渐变，自定义属性，自定义选择器，为媒体查询自定义别名以及许多其他的功能。还有一些颜色管理的插件，用来把颜色从一种格式转换到另一种格式，修改颜色的 alpha 透明度，合成颜色等。
你目前开发的项目，不论你是用css，sass，less等格式来写，你都能使用postcss，而且不会相互影响。使用了postcss之后，你会发现，你只要维护一个（postcss）版本。
PostCSS 的插件是用 JavaScript 写的，只要你有想法，有一定的 JS 基础，你就可以把你的想法用插件的形式实现出来。你不需要安装Ruby环境。而且和构建工具无缝集成。
那么构建工具webpack如何配置postcss？
从官方文档中一句话中知道:
The Autoprefixer PostCSS plugin is one of the most popular CSS processors.
那么我们现在以autoprefixer为例，把postcss的autoprefixer配置到webpack中。
直接把配置文件的源代码发此处
'use strict';
const path = require('path');
const srcPath = path.join(__dirname, '/../src');
const dfltPort = 8000;
function getDefaultModules() {
return {
preLoaders: [{
test: /\.(js|jsx)$/,
include: srcPath,
loader: 'eslint-loader'
}],
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader!postcss-loader'
},
{
test: /\.sass/,
loader: 'style-loader!css-loader!postcss-loader!sass-loader?outputStyle=expanded&indentedSyntax'
},
{
test: /\.scss/,
loader: 'style-loader!css-loader!postcss-loader!sass-loader?outputStyle=expanded'
},
{
test: /\.less/,
loader: 'style-loader!css-loader!postcss-loader!less-loader'
},
{
test: /\.styl/,
loader: 'style-loader!css-loader!postcss-loader!stylus-loader'
},
{
test: /\.(png|jpg|gif|woff|woff2)$/,
loader: 'url-loader?limit=8192'
},
{
test: /\.(mp4|ogg|svg)$/,
loader: 'file-loader'
}
]
};
}
module.exports = {
srcPath: srcPath,
publicPath: '/assets/',
port: dfltPort,
getDefaultModules: getDefaultModules,
postcss: function () {
return [
require('autoprefixer')({
browsers: ['last 2 versions', 'ie >= 8']
})
];
}
};
如何开发postcss插件呢？
其实开发插件之前，你肯定会想到api吧。那么postcss Api，非常详细的插件开发流程。
这里提供一个链接“快点我”，你可以直接在此尝试postcss强大的插件功能。
当然，做任何事情都得有原则，有规范，postcss插件开发也不例外。
- 不重复开发已有插件能力
- 插件功能单一
- 实现插件的逻辑时，尽可能使用异步流程，如：Promise, Generator, Async-await
结束语：
说了这么多，你对postcss了解了吗？
还不赶紧试试~
详情请点击官方链接
如果你觉得通过这篇文章，你知道了postcss是什么，怎么玩了，请帮忙点个赞。如果有哪里说的不对的地方，请留下贵大神指出哦。
