PostCSS一、PostCSS 是什么？ PostCSS 将 CSS 转换为 JavaScript 可以操作的数据结构

一、PostCSS 是什么？

PostCSS 将 CSS 转换为 JavaScript 可以操作的数据结构。这些数据可以由插件理解和转换，然后处理成各种需要的格式。

接收一个 CSS 文件并提供了一个 API 来分析、修改它的规则（通过把 CSS 规则转换成一个抽象语法树的方式）。在这之后，这个 API 便可被许多插件利用来做有用的事情，比如寻错或自动添加 CSS vendor 前缀。

二、有什么用？

可以检查（lint）你的 CSS
支持 CSS Variables 和 Mixins
编译尚未被浏览器广泛支持的先进的 CSS 语法
内联图片
模块化css
css in js
...

三、webpack 中怎么使用 PostCSS

依赖于 node.js
引入 postcss

npm install postcss -D
npm install postcss-loader -D

引入一些需要的插件

# eg：添加浏览器前缀的插件
npm install autoprefixer -D

webpack 配置 loader（ps：可以直接在配置loader的地方配置options，也可以添加postcss.config.js配置文件配置options）

{
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      plugins: [
        // autoprefixer插件：添加了 vendor 浏览器前缀，它使用 Can I Use 上面的数据。
        autoprefixer({
          // 适配99%的浏览器，最新两个版本
          overrideBrowserslist: ['> 1%', 'last 2 versions', 'not ie <= 8'],
        }),
      ]
    },
  },
};

四、常见 PostCSS 插件

autoprefixer: 给css属性添加兼容性前缀
postcss-import: 合并样式
cssnano: 压缩css代码
postcss-preset-env: 允许你使用一些新的的css特性

五、自定义一个 PostCSS 插件

Root：PostCss处理过的Css，整个处理过程基本上都在围绕着Root。Commont，AtRule，Rule都是它的子节点。
AtRule：为带@标识的部分，name为标识名称，params为标识参数。nodes为内部包含的其他子节点，可以是Commont，AtRule，Rule，这让我们可以自定义更多的规则
Rule：选择器样式部分，一个选择器代表一个Rule，选择器对应的样式列表nodes为Declaration构造函数
Declaration：为CSS样式属性，prop为样式属性，value为样式值。可给Rule手动添加样式属性，也可以修改prop，value。

module.exports = (opts = { }) => {
   // 此处可对插件配置opts进行处理
   return {
     postcssPlugin: 'postcss-test', // 插件名字，以postcss-开头
     Once (root, postcss) {
       // 此处root即为转换后的AST，此方法转换一次css将调用一次
     },
    Declaration (decl, postcss) {
       // postcss遍历css样式时调用，在这里可以快速获得type为decl的节点(请参考第二节的AST对象)
    },
   
    Declaration: {
      color(decl, postcss) {
          // 可以进一步获得decl节点指定的属性值，这里是获得属性为color的值
          // 下面的内容是把字体颜色替换了
          if (decl.value === 'white') {
              decl.value = 'green'
          }
          if (decl.value === 'red') {
              decl.value = 'yellow'
          }
       }
    },
    Comment (comment, postcss) {
       // 可以快速访问AST注释节点（type为comment）
    },
   
    AtRule(atRule, postcss) {
       // 可以快速访问css如@media，@import等@定义的节点（type为atRule）
    }
  }
}
module.exports.postcss = true

将插件使用到 postcss 配置中？

plugins: [
  // autoprefixer插件：添加了 vendor 浏览器前缀，它使用 Can I Use 上面的数据。
  autoprefixer({
  // 适配99%的浏览器，最新两个版本
    overrideBrowserslist: ['> 1%', 'last 2 versions', 'not ie <= 8'],
  }),
  // 这里的url是自定义的插件的路径，{}是传入插件的参数
  require('../src/tools/test-plugin')({})
]