愿你坚持不懈,努力进步,进阶成自己的巨人

—— 2017.09, 写给3年后的自己

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-scsspostcss-sasspostcss-less 当和这些预处理器配合使用时需要安装的插件(作用是配合它们使用,而非做它们所做的工作)

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