后处理器介绍

后处理器的概念

前面我们学习了 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 依赖：

bash 复制代码

pnpm add postcss autoprefixer -D

接下来在 src 创建一个 index.css，书写测试的 CSS 代码：

css 复制代码

body {
    background-color: beige;
    font-size: 16px;
}

.box1 {
    transform: translate(100px);
}

接下来我们要对上面的代码进行后处理，创建一个 index.js，代码如下：

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 添加浏览器前缀。