PostCSS完全指南：功能/配置/插件/SourceMap/AST/插件开发/自定义语法

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）文件中：

javascript 复制代码

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 时）：

javascript 复制代码

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 插件非常简单（官方推荐）。

基本模板：

javascript 复制代码

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）：

javascript 复制代码

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 开始。如果需要特定插件或代码示例，欢迎提供更多细节！