PostCSS学习总结

一、什么是PostCSS

根据官方介绍，PostCSS是这么一个东西：

PostCSS是一个用JS插件转换样式的工具，这些插件可以检查CSS代码、支持变量和mixin，转换未来的CSS语法、内联图片等等

而简而言之，PostCSS其实就是CSS界的babel，PostCSS自身做的事情就两件：
1）把源码（或者满足特定条件的扩展语法）解析为AST，并提供遍历访问、节点操作接口
2）将AST输出为代码字符串
用一张图来描述，就是：

通过插件系统的层层作用，我们就可以得到符合我们预期的最终可运行的CSS代码

二、用法

1、在工程中使用

我们可以这么使用PostCSS：
1）首先，将PostCSS添加进构建工具中
2）然后，选择合适的插件，然后添加到PostCSS的处理过程中
以webpack为例，我们可以使用postcss-loader：
在webpack.config.js中：

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1
                        }
                    },
                    { loader: 'postcss-loader' }
                ]
            }
        ]
    }
}

然后，为PostCSS添加插件，需要新建postcss.config.js配置文件，如：

module.exports = {
    plugins: [
        require('precss'),
        require('autoprefixer')
    ]
}

2、CLI方式

我们也可以在cli中使用postcss，做法是安装postcss-cli：

postcss --use autoprefixer -c options.json -o main.css css/*.css

3、JS API

当然，我们在特定环境下，还可以使用JS API来使用PostCSS，示例如下：

const fs = require('fs')
const postcss = require('postcss')
const precss = require('precss')
const autoprefixer = require('autoprefixer')

fs.readFile('src/app.css', (err, css) => {
    postcss([precss, autoprefixer])
        .process(css, {
            from: 'src/app.css',
            to: 'dest/app.css'
        })
        .then(result => {
            fs.writeFile('dest/app.css', result.css)
            if (result.map) {
                fs.writeFile('dest/app.css.map', result.map)
            }
        })
})

三、常用插件

目前，PostCSS有200+个插件，常见的插件有：

1、解决全局CSS问题的

postcss-use 允许我们明确在CSS内指明哪些文件可以让PostCSS生效
postcss-modules 实现CSS Modules（打乱选择器命名，并通过JSON映射表来处理目标代码到源代码的映射的一种CSS命名冲突解决方案）
postcss-autoreset 对于孤立组件而言，是一种替代全局css reset的更好的方案

2、使用未来的CSS特性

autoprefixer 自动添加vendor前缀（使用caniuse.com的数据）
postcss-cssnext 让我们现在就可以使用CSS的未来特性
postcss-image-set-polyfill 为所有的浏览器模拟image-set函数的逻辑

3、更好的CSS可读性

precss 包含了一系列类sass特性的插件，如变量、嵌套、mixin等
postcss-sorting 对CSS规则里的各条属性进行排序，使之变得整齐易读
postcss-utilities 包含了大部分通用的快捷代码、帮助类

4、语法

PostCSS可以转换任意语法的样式，不仅仅是CSS。如果尚未支持我们最喜欢用的语法，那么我们也可以写一个解析器、字符串化器扩展到PostCSS中，以下是一些已有的此类插件：

sugarss 一种基于缩进的语法（类似Sass、Stylus）
postcss-html 允许我们在HTML、Markdown、Vue Component里写样式（样式可以得到转换）
postcss-scss、postcss-sass、postcss-less 当和这些预处理器配合使用时需要安装的插件（作用是配合它们使用，而非做它们所做的工作）

更多的插件介绍，可以查阅官方说明https://github.com/postcss/postcss