学习 PostCSS 以及使用

学习 PostCSS 以及使用

《工欲善其事，必先利其器》

一、初识 PostCSS

PostCSS 是一款 CSS 编译器；

PostCSS 是一个使用 JavaScript 工具和插件转换 CSS 代码的工具，它的主要功能其实是可以利用 JavaScript 去处理一些原生的 CSS 或者预处理器（Less、Sass）处理不了的工作。这种特性本质上，是基于 PostCSS 自身的编译能力和强大的插件系统支持的基础之上的。

例如，它能为某个 css 属性，根据项目内指定的浏览器种类和版本的 json 文件（或者 package.json 的属性），查询 caniuse 中，不同浏览器对该 CSS 属性的兼容情况，然后自动为这个属性补充不同的浏览器前缀。

再例如，px 是一个固定的长度单位，而设备视口的尺寸是各种各样的。如果我们想通过一套样式来适配各种设备的显示，就需要相对的单位，常用的是 rem。PostCSS 能依靠插件自动的，将项目内所有的 px 值，计算并改写为对应 rem 值。

除此之外还有很多很多功能，并且我们也能根据某些的特定需求，构建属于自己项目专属的功能插件。

PostCSS 利用自身的 parser 把 CSS 代码解析为抽象语法树；

编译器？抽象语法树？这不就跟针对 js 的编译器 babel 一样吗？

的确如此。

PostCSS 利用自身的 parser 把 CSS 代码解析为抽象语法树（AST），这里分为 parse、transform、generate 3个阶段。过程中，读取 postcss.config.js 配置文件的插件列表，利用插件改写 AST，最终输出改写后的 css 代码。

插件工作于 transform 阶段，基于 AST 做分析处理和转换。只不过，css 的 AST 比 JavaScript 的简单得多，没有分类成太多的规则。

（图片取自掘金-神说要有光，侵删。）

而我们也可以通过 astexplorer.net ，能可视化的查看其匹配的规则：

二、预处理器与 PostCSS 之间的关系

从前文可知，PostCSS 输入与输出的产物都是 css 文件。因此，跟那些预处理器不同，它也被称为后处理器，因为其通常再 css 处理链条的最末端。

也就是说，预处理器和 PostCSS 其实是互不影响的，无论你是否选择使用 css 预处理器，PostCSS 总是最后工作。通过一张图即可完美诠释这个过程：

（图片取自掘金-魔术师卡颂，侵删。）

三、应用一个简单的 PostCSS 插件

1. 下载工具、插件

这里我使用的包管理工具是 pnpm ，其他的下载

pnpm install postcss postcss-loader autoprefixer -D
1

2. 配置插件

这里有几种配置方法，依次介绍一下：

注意，对于没有内置 postcss 的脚手架，在配置浏览器版本时，可以直接在脚手架的配置文件里面配置（例如 vue.config.js）。
而有内置 postcss 的脚手架，在配置浏览器版本时，则需要另外在 postcss.config.js 里面配置。

• 由 Vue-cli 创建的项目，于 vue.config.js 里面配置

// vue.config.js
module.exports = {
  css: {
	loaderOptions: {
	  postcss: {
		plugins: [
		  // ...其他插件
		  "autoprefixer": {
            // 配置使用 autoprefixer
            overrideBrowserslist: [
			  "Android 4.1",
         	  "iOS 7.1",
          	  "Chrome > 31",
          	  "ff > 31",
          	  "ie >= 8"
          	  "last 2 versions", // 所有主流浏览器最近2个版本
          	] 
          }
		]
	  }
	}
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

• 由 Vite 创建的项目，是天然支持 postcss 的，使用之前只需要安装即可。因此需要在 postcss.config.js 里面配置插件，没有该文件的在项目根目录下自行创建：

// postcss.config.js
module.exports = {
  plugins: {
	// ...其他插件
    autoprefixer: {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
        'last 2 versions', // 所有主流浏览器最近2个版本
      ]
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• 手撸党选择 Webpack 创建项目的，于 webpack.config.js 里面配置 postcss，也是需要另外配置 postcss.config.js 文件：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"]
      }
    ]
  }
}
1
2
3
4
5
6
7
8
9
10
11

// postcss.config.js
module.exports = {
  plugins: {
	// ...其他插件
    autoprefixer: {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
        'last 2 versions', // 所有主流浏览器最近2个版本
      ]
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

注意：关于 overrideBrowsersList 属性，开发者可以选择与 postcss 集成到一起，也可以选择割裂开来。

如果选择割裂开来则有两种不同的配置方式，例如在根目录配置 .browserslistrc 文件；或者在 package.json 的 browserslist 选项中配置。两者作用相同，同时引用则会引发冲突导致报错，此时二选一即可。

3. 查看效果

选择一个 CSS3 的属性，先不要开启观察效果：

transiform: translateX(100px);
1

效果如下：

再开启 postcss ，然后在浏览器开发者工具中观察：

是不是很神奇？好了，今天这篇文章就到此为止辣~

感谢你的阅读，希望你的未来一片光明！

参考文献：

• 掘金 —— [ 解剖postcss —— 向前端架构师迈出一小步 ]
• 掘金 —— [ 快速入门 postcss 插件：自动转换 px 到 rem ]