PostCSS 完全指南
PostCSS 是一个用 JavaScript 插件转换 CSS 样式的工具。它本身不提供具体功能，而是作为一个平台，通过插件实现各种 CSS 处理任务（如自动添加浏览器前缀、支持未来语法、优化代码等）。PostCSS 被广泛用于现代前端构建中（如 Webpack、Vite、Next.js），其生态系统超过 300 个插件，由 Google、Twitter、阿里巴巴等公司使用。
1. 功能概述
PostCSS 的核心流程：
- 解析 CSS → 抽象语法树 (AST) → 插件处理 → 生成新 CSS。
主要功能通过插件实现：
- 自动前缀：Autoprefixer（最流行插件）。
- 未来 CSS 语法：postcss-preset-env（支持嵌套、自定义媒体查询、颜色函数等）。
- 优化/压缩：cssnano。
- 变量/混入/嵌套：PreCSS 或 postcss-simple-vars、postcss-nested 等（模拟 Sass）。
- 导入/模块化：postcss-import。
- Lint 检查：stylelint。
- 其他：图片内联、RTL 支持、主题切换等。
PostCSS 不是预处理器（如 Sass），而是“后处理器”或“转换器”，它处理标准 CSS 或扩展语法，速度快、灵活。
2. 配置
PostCSS 配置通常在项目根目录的 postcss.config.js（或 .cjs）文件中：
module.exports = {
plugins: [
require('postcss-import'), // 先导入（推荐放在首位）
require('autoprefixer'), // 添加前缀
require('postcss-preset-env')({ // 未来语法
stage: 3, // 控制特性阶段
}),
require('cssnano')({ // 生产环境压缩
preset: 'default',
}),
],
};- 集成工具：
- Webpack：使用
postcss-loader。 - Vite/Next.js：内置支持，自定义配置覆盖默认。
- CLI：
npx postcss input.css -o output.css --use autoprefixer。 - 条件配置：根据环境（如开发/生产）动态加载插件。
3. 插件
PostCSS 的强大在于插件生态（https://postcss.org/plugins/）：
- 推荐入门插件：
- autoprefixer：自动添加 -webkit- 等前缀。
- postcss-preset-env：一键启用未来 CSS。
- postcss-nested：支持嵌套语法。
- postcss-mixins：支持混入。
- 插件包：cssnano（优化）、rucksack（快捷功能）。
- 插件顺序重要：导入 → 变量/嵌套 → 前缀 → 压缩。
4. SourceMap
PostCSS 原生支持 SourceMap，便于调试（映射到原始源文件）。
配置示例（在 process 时）：
const postcss = require('postcss');
postcss(plugins).process(css, {
from: 'src/app.css',
to: 'dist/app.css',
map: { inline: false }, // 生成外部 .map 文件（默认 inline）
});- 自动继承：如果输入有上一工具的 map，PostCSS 会更新它。
- 选项：
map: true：启用。inline: true：内联到 CSS（默认开发）。prev: false：忽略上一 map。- 在 loader（如 postcss-loader）中设置
sourceMap: true。
5. AST（抽象语法树）
PostCSS 将 CSS 解析成 AST（节点树），插件通过遍历/修改 AST 实现转换。
- 节点类型：Root、Rule、AtRule、Declaration、Comment 等。
- 操作 API（类似 DOM）：
root.walkRules()：遍历规则。node.append()/node.remove()：添加/删除节点。- 使用 AST Explorer（https://astexplorer.net/，选择 PostCSS）可视化 AST。
- 示例：遍历所有声明添加前缀（插件内部）。
6. 插件开发
开发 PostCSS 插件非常简单（官方推荐）。
基本模板：
module.exports = (opts = {}) => {
return {
postcssPlugin: 'my-plugin',
Once(root) { // 一次性处理
// 修改 root
},
Rule(rule) { // 处理每个规则
// ...
},
Declaration(decl) { // 处理每个声明
if (decl.prop === 'color') {
decl.value = 'red'; // 示例修改
}
},
};
};
module.exports.postcss = true; // 标记为 PostCSS 插件- 最佳实践：
- 单职责插件（避免多功能大插件）。
- README 包含输入/输出示例。
- 使用 AST Explorer 调试。
- 发布前：
npx clean-publish。 - 工具：PostCSS 插件 boilerplate（GitHub）。
7. 自定义语法
PostCSS 默认解析标准 CSS，但支持自定义语法（如 SCSS、SugarSS、HTML 中的 style）。
示例：创建 SCSS-like 语法（需 parser 和 stringifier）：
module.exports = {
parse: require('postcss-scss').parse, // 使用 postcss-scss 解析
stringify: require('postcss-scss').stringify,
};- 应用：处理 HTML 中的
<style>、JSX 中的 CSS-in-JS、Markdown 等。 - 插件示例：postcss-html（提取 HTML style）、postcss-sass。
- 难度较高，但可实现 Sass/Less 兼容或全新语法。
PostCSS 是现代 CSS 工作流的基石，推荐从 Autoprefixer + postcss-preset-env 开始。如果需要特定插件或代码示例，欢迎提供更多细节！
