PostCSS

postcss提供了CSS代码的编译功能；postcss-cli允许我们在命令行进行编译；而我们大多数情况是在webpack中搭配使用postcss，此时需要额外安装postcss-loader。

除了命令行传参，我们还可以使用postcss.config.js写入配置信息。

类似babel，默认情况下编译前后代码格式一样，我们需要使用插件来指定转化功能。

plugins

autoprefixer

这是最常见的PostCSS插件，能够给CSS规则添加各种前缀从而兼容不同浏览器。

/* 源文件 */
::placeholder {
  color: gray;
}

/* 编译后文件 */
::-moz-placeholder {
  color: gray;
}
:-ms-input-placeholder {
  color: gray;
}
::placeholder {
  color: gray;
}

使用的方式也很简单，这里以webpack中使用为例子。

// webpack.config.js
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader", "postcss-loader"] // 在最后面加上了postcss-loader
            }
        ]
    },
}

// postcss.config.js
const autoprefixer = require('autoprefixer')

module.exports = {
    plugins: [
        autoprefixer, // 或 autoprefixer()
    ]
}

postcss-preset-env

该插件通过垫片（poyfills）让我们能在浏览器使用还没有成为规范的属性。

// postcss.config.js
const env = require('postcss-preset-env')
const autoprefixer = require('autoprefixer')

module.exports = {
    plugins: [
        autoprefixer,
        env({ stage: 0 })
    ]
}

postcss-modules

该插件能实现类名的转化，从而避免类名的重复。

/* 源文件 */
.name {
  color: gray;
}

/* 编译后文件 */
.Logo__name__SVK0g {
  color: gray;
}

编译的同时会生成一个json文件记录前后类名的对应关系，以方便我们合理地引入类名。