PostCSS： css 编程框架
问题
- 使用css预处理器前先要安装一堆依赖，比如使用 Sass 需要安装 Ruby；使用 Less 需要安装 JavaScript 相关的库
- 项目中往往只使用了预处理器的极少数功能呢，但开发者被强制安装一个庞大的预处理器，比如 Sass
- 使用预处理器编译css的速度比较慢，虽然初始的编译过程只有几秒钟，但随着项目体量的增长会对编译时间造成严重影响
解决思路
- 提供统一的css基础编程工具和框架，便于开发者快速定制各种处理器，如预处理器和后处理器
- 提供统一的css处理接口，允许开发者社区共享各种处理器代码及工具
css后处理器: 其输入的是css代码(预处理器的输入是非css语法的代码)，输出的仍是css代码，譬如常见的css代码压缩、混淆等
PostCSS
提供可定制、可复用(流式调用)的css编程框架，其本身基于javascript实现，同时允许开发者使用javascript编写CSS处理插件
- 官方站点 https://postcss.org/
- 中文学习网站 https://www.postcss.com.cn/
- 介绍 https://www.ibm.com/developerworks/cn/web/1604-postcss-css/
PostCSS 主要功能
- 将 CSS 解析成 JavaScript 可以操作的抽象语法树结构（Abstract Syntax Tree，AST）
- 然后调用插件(来自官方或社区)来处理 AST 并得到各种结果
利用官方内置的插件(如变量、mixin等)，可以很容易的实现类型scss/less之类的预处理器或相关特性
常用 插件 plugin
- 七种常用插件 https://www.zcfy.cc/article/7-postcss-plugins-to-ease-you-into-postcss-603.html
- post css and webpack
- 使用 postcss 和 cssnext 书写 css https://www.cnblogs.com/nzbin/p/5744672.html
- postcss 插件库 https://www.postcss.parts/
参考
- css预处理器和后处理器 http://www.cnblogs.com/cyn941105/p/5590239.html
- CSS预编译与PostCSS以及Webpack构建CSS综合方案 https://www.cnblogs.com/ihardcoder/p/7216345.html
- 使用postcss实现定制的预处理器 https://www.sitepoint.com/build-css-preprocessor-postcss/
扩展阅读：shiv、shim and Polyfill
- shim和polyfill有什么区别? https://www.zhihu.com/question/22129715
- Polyfills https://blog.csdn.net/wang16510/article/details/8960312
- https://blog.csdn.net/xinghuowuzhao/article/details/79170254
- HTML5 Shiv – 让该死的IE系列支持HTML5吧 http://www.cnblogs.com/yuzhongwusan/archive/2011/11/17/2252207.html
- https://www.paulirish.com/2011/the-history-of-the-html5-shiv/
- https://remysharp.com/2010/10/08/what-is-a-polyfill/
- https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
作业
在webpack中配置postcss，至少使用一个插件，如 autoprefixer
扩展阅读
https://segmentfault.com/a/1190000014782560 https://segmentfault.com/a/1190000011595620 https://www.cnblogs.com/dll-ft/p/5811639.html https://www.cnblogs.com/mengfangui/p/8932915.html