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。
- Webpack：使用
条件配置：根据环境（如开发/生产）动态加载插件。
3. 插件
PostCSS 的强大在于插件生态（https://postcss.org/plugins/）：
- 推荐入门插件：
- autoprefixer：自动添加 -webkit- 等前缀。
- postcss-preset-env：一键启用未来 CSS。
- postcss-nested：支持嵌套语法。
- postcss-mixins：支持混入。
- 插件包：cssnano（优化）、rucksack（快捷功能）。
- 插件顺序重要：导入 → 变量/嵌套 → 前缀 → 压缩。
4. SourceMap
PostCSS 原生支持 SourceMap，便于调试（映射到原始源文件）。
配置示例（在 process 时）：
constpostcss=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 开始。如果需要特定插件或代码示例，欢迎提供更多细节！
