PostCSS

元信息

• 目标：理解用 JS 插件处理 CSS 的思路——CSS 先解析为 AST 再由插件流式加工，预处理器/后处理器皆可由此定制；能在 webpack 中配置 postcss 插件
• 关键概念：PostCSS、AST、插件、后处理器、预处理器、autoprefixer
• 关联阶段：cp3
• 常见误区：以为 PostCSS 是又一种预处理器语言（它是 CSS→AST→CSS 的 JS 处理框架，语法由插件决定）；以为预处理器与后处理器是一回事（输入不同：前者吃非 CSS 语法，后者吃 CSS）；以为必须装完整 Sass/Less 才能用变量（PostCSS 插件即可轻量实现）

问题

• 使用css预处理器前先要安装一堆依赖，比如早期的 Sass 需要安装 Ruby 环境（后来才有了纯 JS/Dart 实现）；使用 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/
  • https://mp.weixin.qq.com/s/tVqa5Gz-dM5KWFT1lPgtpQ

PostCSS 主要功能

• 将 CSS 解析成 JavaScript 可以操作的抽象语法树结构（Abstract Syntax Tree，AST）
• 然后调用插件(来自官方或社区)来处理 AST 并得到各种结果

利用社区插件（如 postcss-simple-vars、postcss-mixins 等），可以很容易地组合出类似 scss/less 的预处理特性

常用 插件 plugin

• 七种常用插件 https://www.zcfy.cc/article/7-postcss-plugins-to-ease-you-into-postcss-603.html
• post css and webpack
  • https://blog.csdn.net/xiaotuni/article/details/78014852
  • https://www.webpackjs.com/loaders/postcss-loader/
• 使用 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