后处理器介绍
后处理器的概念
前面我们学习了 CSS 预处理器，CSS 预处理器（Sass、Less、Stylus）为我们提供了一套特殊的语法，让我们可以以编程的方式（变量、嵌套、内置函数、自定义函数、流程控制）来书写 CSS 样式。因此我们在学习 CSS 预处理器的时候，主要就是学习它们的语法。
CSS 后处理器不会提供专门的语法，它是在原生的 CSS 代码的基础上面做处理，常见的处理工作如下：
-
兼容性处理：自动添加浏览器前缀（如 –webkit-、-moz– 和 –ms-）以确保跨浏览器兼容性。这种后处理器的一个典型例子是 autoprefixer。
-
代码优化与压缩：移除多余的空格、注释和未使用的规则，以减小 CSS 文件的大小。例如，cssnano 是一个流行的 CSS 压缩工具。
-
功能增强：添加新的 CSS 特性，使开发者能够使用尚未在所有浏览器中实现的 CSS 功能。例如，PostCSS 是一个强大的 CSS 后处理器，提供了很多插件来扩展 CSS 的功能。
-
代码检查与规范：检查 CSS 代码的质量，以确保代码符合特定的编码规范和最佳实践。例如，stylelint 是一个强大的 CSS 检查工具，可以帮助你发现和修复潜在的问题。
后处理器实际上是有非常非常多的，autoprefixer、cssnano、stylelint 像这些工具都算是在对原生 CSS 做后处理工作。
这里就会涉及到一个问题，能够对 CSS 做后处理的工具（后处理器）非常非常多，此时就会存在我要将原生的 CSS 先放入到 A 工具进行处理，处理完成后放入到 B 工具进行处理，之后在 C、D、E、F…. 这种手动操作显然是比较费时费力的，我们期望有一种工具，能够自动化的完成这些后处理工作，这个工具就是 PostCSS。
PostCSS 是一个使用 JavaScript 编写的 CSS 后处理器，它更像是一个平台，类似于 Babel，它本身是不做什么具体的事情，它只负责一件事情，将原生 CSS 转换为 CSS 的抽象语法树（CSS AST），之后的事情就完全交给其他的插件。目前整个 PostCSS 插件生态有 200+ 的插件，每个插件可以帮助我们处理一种 CSS 后处理场景。
你可以在官网：www.postcss.parts/ 看到 PostCSS 里面所有的插件。
学习 PostCSS 其实主要就是学习里面常用的插件：
- autoprefixer：自动为 CSS 中的属性添加浏览器前缀，以确保跨浏览器兼容性。
- cssnext：使开发者能够使用尚未在所有浏览器中实现的 CSS 特性，如自定义属性（变量）、颜色函数等。
- cssnano：优化并压缩 CSS 代码，以减小文件大小。
- postcss-import：在一个 CSS 文件中导入其他 CSS 文件，实现 CSS 代码的模块化。
- postcss-nested：支持 CSS 规则的嵌套，使 CSS 代码更加组织化和易于维护。
- postcss-custom-properties：支持使用原生 CSS 变量（自定义属性）。
- stylelint：CSS 代码检查工具，旨在帮助开发者发现和修复潜在的 CSS 代码问题。
PostCSS 快速上手
首先创建一个项目目录 postcss-demo，使用 pnpm init 进行初始化，之后安装 postcss 依赖：
pnpm add postcss autoprefixer -D
接下来在 src 创建一个 index.css，书写测试的 CSS 代码：
body {
background-color: beige;
font-size: 16px;
}
.box1 {
transform: translate(100px);
}
接下来我们要对上面的代码进行后处理，创建一个 index.js，代码如下：
// 读取 CSS 文件
// 使用 PostCSS 来对读取的 CSS 文件做后处理
const fs = require("fs"); // 负责处理和文件读取相关的事情
const postcss = require("postcss");
// 引入插件，该插件负责为 CSS 代码添加浏览器前缀
const autoprefixer = require("autoprefixer");
const style = fs.readFileSync("src/index.css", "utf8");
postcss([autoprefixer({
overrideBrowserslist: "last 10 versions"
})])
.process(style, { from: undefined })
.then((res) => {
console.log(res.css);
});
在上面的 JS 代码中，我们首先读取了 index.css 里面的 CSS 代码，然后通过 postcss 来做后处理器，注意postcss 本身不做任何事情，它只负责将原生的 CSS 代码转为 CSS AST，具体的事情需要插件来完成。
上面的代码我们配置了 autoprefixer 这个插件，负责为 CSS 添加浏览器前缀。
原文链接：https://juejin.cn/post/7353561676090671119 作者：buibui
