PostCSS：CSS 转换工具介绍-马育民老师

# 介绍

PostCSS 是一个使用 JavaScript 插件 **转换 CSS 的工具**，**本身不做任何处理，全部能力来自插件**。

### 定位
**CSS 后处理器**，不是新语言，输入输出都是标准 CSS。Vue‑CLI、Vite、Webpack 内部默认集成 PostCSS。

# 工作原理

整体流程：**CSS源码 → 解析为AST抽象语法树 → 插件批量修改AST → AST生成CSS字符串 → 输出处理后的CSS**

```
输入CSS → Parser解析 → CSS AST → [插件1→插件2→插件3] → 修改后的AST → Stringifier生成 → 输出CSS
```
- Parser：把文本CSS转成JS可操作的树结构
- 插件：JS函数，遍历、增删改AST节点（选择器、属性、值、注释）
- Stringifier：把AST重新输出为CSS文本

> 关键点：PostCSS 操作的是**AST树**，不是字符串正则替换，解析更可靠，不会破坏注释、格式。

# 常用插件

### 1. autoprefixer（最知名）
根据 `browserslist` + caniuse 数据，自动添加浏览器私有前缀 `-webkit‑`/`‑moz‑`/`‑ms‑`，自动移除不需要的前缀。
```css
/*源码*/
.user { user-select: none; }
/*输出*/
.user { -webkit-user-select: none; user-select: none; }
```
> 现代脚手架默认自带，不需要手写前缀。依赖项目的 `browserslist` 配置。

### 2. postcss‑preset‑env
把未来的CSS新语法转成浏览器兼容CSS（CSS Next），例如嵌套、颜色函数、`@nest`。替代老的 `cssnext`。

### 3. cssnano
生产环境CSS压缩、去注释、合并规则、优化属性值，CSS生产压缩工具。

### 4. postcss‑import
解析css的`@import`，把导入文件内容直接合并进输出文件，减少网络请求。

### 5. postcss‑nested
给原生CSS增加嵌套语法，类似Sass嵌套，不用Sass也能写嵌套。
```css
.nav {
  ul { margin:0; }
}
```

### 6. postcss‑px‑to‑viewport / postcss‑pxtorem
移动端适配：`px` 单位自动转为 `vw/vh` 或者 `rem`。

### 7. stylelint
CSS代码检查，代码格式化、检测语法错误，类似ESLint for CSS。

### 8. postcss‑modules
实现CSS Modules，实现样式隔离，生成哈希类名。

# 常见误区
1. ❌ PostCSS不是预处理器
> ✔ PostCSS本身不认识嵌套、变量；要嵌套需要安装对应插件。

2. ❌ autoprefixer是PostCSS内置功能
> ✔ autoprefixer是独立插件，必须手动加入plugins数组。

3. ❌ PostCSS只能处理Sass编译后的产物
> ✔ 可以直接处理原生`.css`文件，也可以放在Sass编译**之前**处理。

4. ❌ 修改css源码字符串做替换
> ✔ PostCSS基于AST，优先操作节点，而不是正则字符串替换。

# 在构建工具中的使用
1. **Vite**：自动读取`postcss.config.js`，开箱即用，无需额外安装loader。

2. **Webpack**：使用`postcss‑loader`，放在`css‑loader`之前。
```js
// webpack module.rules
{
  test: /\.css$/,
  use: ['style-loader','css-loader','postcss-loader']
}
```

原文出处：/show_1GW3pq6XVrx9.html