一、什么是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