开发工具精选项目

PostCSS

通过 JavaScript 插件解析、分析和转换 CSS 的工具平台。

GitHub 访问官网

主要语言JavaScript

开源许可MIT

项目类型开发工具

维护状态活跃维护

OVERVIEW

项目概述

PostCSS 将样式解析为可遍历的抽象语法树，再由插件完成兼容性处理、未来语法转换、代码检查、优化或项目专属变换。

PostCSS 是采用 MIT 许可证的 CSS 处理工具平台，而不是一套固定语法或完整预处理器。它把输入样式解析为 Root、Rule、AtRule、Declaration、Comment 等节点组成的抽象语法树，按顺序交给插件读取或修改，最后重新生成 CSS 与 Source Map。PostCSS 核心本身不会自动添加前缀、转换未来语法或压缩代码，实际能力来自所选插件与 Runner：Autoprefixer 可依据目标浏览器补充兼容前缀，postcss-preset-env 可转换部分 CSS 草案，cssnano 可优化输出，Stylelint 也建立在 PostCSS 解析能力之上。Vite、Webpack 等工具通常会读取 PostCSS 配置，因此它经常作为现代前端样式流水线的底层基础设施。

当前稳定版v8.5.23

处理模型CSS AST + Plugins

配置核心Ordered Plugin Pipeline

FEATURES

主要特点

PostCSS 用统一的 CSS AST 和插件事件 API，把兼容性、语法转换、检查、优化与自定义工程规则组合成可配置流水线。

统一的 CSS 抽象语法树

把样式解析为 Root、Rule、AtRule、Declaration 和 Comment 等节点，插件无需自行处理原始字符串即可安全读取和修改结构。

可组合的插件流水线

项目按明确顺序组合多个单一职责插件，依次完成导入、语法转换、兼容处理、检查和优化。

广泛的插件生态

Autoprefixer、postcss-preset-env、cssnano、PostCSS Modules 等工具覆盖浏览器兼容、未来语法、压缩和模块化。

Source Map 支持

Runner 可把连续转换映射回原始样式文件，便于在浏览器开发者工具和构建错误中定位源码。

Runner 与框架无关

可通过 Vite、Webpack、Rollup、Gulp、命令行或 Node.js API 运行，同一插件配置可以融入不同工程环境。

自定义语法和解析器

除标准 CSS 外，还可选用 SCSS、SugarSS、Safe Parser 或 HTML、Markdown 等语法适配器处理特殊输入。

同步与异步插件

插件既可执行快速 AST 变换，也能异步读取外部资源；Runner 会统一等待结果并收集 Warning、Dependency 等消息。

可编写项目专属规则

团队可以创建私有插件，自动修复重复工程模式、检查禁用声明、转换设计令牌或生成兼容代码。

USE CASES

适用场景

适合需要精确控制 CSS 构建过程、使用现代语法、维护跨浏览器输出或编写专用样式转换工具的项目。

跨浏览器兼容处理

通过 Autoprefixer 根据 Browserslist 目标补充或移除前缀，避免手工维护不同浏览器声明。

渐进使用现代 CSS

使用 postcss-preset-env 等插件转换目标浏览器尚未完整支持的 CSS 草案，同时保留接近标准的作者语法。

CSS 构建优化

在生产流水线中组合去重、合并、压缩和资源处理插件，减少最终样式体积。

框架和组件库基础设施

为 Vite、Webpack、设计系统或组件库建立统一的 CSS 导入、变量、兼容性与发布处理规则。

代码质量与工程规范

解析 CSS 后发现无效模式、输出 Warning，或与 Stylelint 等工具配合执行团队样式规则。

专用 CSS 转换工具

适合开发 RTL 转换、单位替换、设计令牌编译、选择器迁移或内部兼容修复等自动化工具。

EVALUATION

优点与注意事项

技术选型不仅要看能力，也要理解它带来的团队成本。

主要优点

PostCSS 擅长的地方

核心专注于解析、AST、插件执行和输出，不强迫项目采用固定语法或设计方法
插件可以按需组合，兼容性、未来语法、检查和压缩职责边界清晰
成熟生态已成为大量前端构建工具和 CSS 工具的共同底层
统一 AST 避免每个工具重复编写 CSS 字符串解析逻辑
Source Map、Warning 和依赖消息便于与现有构建流程深度集成
既能使用公开插件，也能为项目编写小型、单一职责的私有转换

需要注意

采用前应考虑的问题

核心包本身不会转换样式

只安装 postcss 不会自动获得前缀、嵌套、压缩或未来语法能力，必须选择 Runner 和对应插件。

插件顺序会改变结果

导入、嵌套、变量、前缀和压缩的执行先后可能影响生成 CSS，配置顺序应有测试和说明，不能随意调整。

插件质量和维护状态不同

PostCSS 生态由多个独立项目组成，安装前应核对 PostCSS 版本范围、最近发布、安全记录和目标语法支持。

不是 Sass 的直接替代品

PostCSS 可以借助插件模拟部分变量、Mixin 或嵌套，但 postcss-scss 等语法包主要负责解析，并不会自动执行完整 Sass 语义。

未来语法可能发生变化

转换 CSS 草案时应选择明确 Stage，避免过早依赖尚未稳定的语义，并在浏览器原生支持后重新评估插件。

不同 Runner 的配置并不完全相同

Vite、Webpack、CLI 和直接 Node API 对文件查找、Source Map、依赖消息及配置加载方式可能有差异。

过长流水线会拖慢构建

重复解析、功能重叠或处理全部依赖目录的插件会增加开发与生产时间，应测量每项转换的实际价值。

需要管理插件供应链

每个插件都会在构建环境执行 JavaScript，团队应锁定依赖、审查来源，并避免引入无人维护或权限过大的包。

QUICK START

快速开始

在 Vite 项目中添加 PostCSS 配置和 postcss-preset-env，让现有构建流程自动处理 CSS。

1创建 Vite 项目并安装 PostCSS

bash

npm create vite@latest postcss-app -- --template vanilla-ts
cd postcss-app
npm install
npm install -D postcss postcss-preset-env

2配置插件流水线

javascript

import postcssPresetEnv from "postcss-preset-env";

export default {
  plugins: [
    postcssPresetEnv({
      stage: 2,
    }),
  ],
};

3编写接近标准的现代 CSS

css

@custom-media --tablet (width >= 48rem);

:root {
  --brand: #dd3a0a;
  --surface: #ffffff;
  --text: #0f172a;
}

.card {
  width: min(32rem, 100%);
  padding: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: 1rem;
  background: var(--surface);
  color: var(--text);

  & h1 {
    color: var(--brand);
  }

  @media (--tablet) {
    padding: 2rem;
  }
}

4让 Vite 自动处理样式

typescript

import "./style.css";

document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
  <main class="card">
    <h1>PostCSS</h1>
    <p>使用插件组合自己的 CSS 构建流程。</p>
  </main>
`;

5通过 Node.js API 执行转换

javascript

import postcss from "postcss";
import postcssPresetEnv from "postcss-preset-env";

const input = ".button { appearance: none; }";

const result = await postcss([
  postcssPresetEnv({ stage: 2 }),
]).process(input, {
  from: "src/button.css",
  to: "dist/button.css",
  map: { inline: false },
});

console.log(result.css);
for (const warning of result.warnings()) {
  console.warn(warning.toString());
}

6创建一个最小自定义插件

javascript

export default function disallowImportant() {
  return {
    postcssPlugin: "disallow-important",
    Declaration(decl, { result }) {
      if (decl.important) {
        result.warn("Avoid !important", { node: decl });
      }
    },
  };
}

disallowImportant.postcss = true;

7运行开发与生产构建

bash

npm run dev
npm run build
npm run preview

下一步：PostCSS 核心不会独立完成任何业务转换，也不包含命令行工具。只安装真正需要的插件，固定插件顺序和目标浏览器，并在升级后比较生成 CSS 与 Source Map。

ALTERNATIVES

类似项目

这些工具都能扩展 CSS 作者体验或构建过程，但 PostCSS 更像可编程转换平台，而不是一套固定的样式语言。

CSS Modules

让 CSS 类名和动画名称默认拥有局部作用域的模块化方案。

查看项目

Sass

拥有变量、嵌套、Mixin、函数和模块系统的成熟 CSS 预处理语言。

查看项目

Lightning CSS

以 Rust 编写的高性能 CSS Parser、Transformer、Bundler 和 Minifier。

访问官网

COMPARISON

PostCSS vs Sass

PostCSS 和 Sass 都能参与 CSS 构建，但定位不同。PostCSS 是由项目选择插件组成的 JavaScript 转换平台，可以处理标准 CSS、兼容性、检查和优化；Sass 是具有变量、Mixin、函数、控制指令和模块系统的完整预处理语言，由编译器把 SCSS 或缩进语法转换成 CSS。

比较维度	PostCSS	Sass
产品定位	CSS AST、插件 API 与可组合处理流水线	完整的 CSS 预处理语言与编译器
作者语法	默认处理 CSS，额外语法由插件或 Parser 决定	SCSS 或缩进式 Sass 语法
能力来源	按需安装并排序多个独立插件	变量、Mixin、函数、循环和模块等由语言统一提供
浏览器兼容	常搭配 Autoprefixer、preset-env 和 Browserslist	通常编译语言特性，前缀仍会再交给 PostCSS 处理
扩展方式	使用 JavaScript 编写 AST 插件和自定义语法	使用 Sass 函数、Mixin、模块及编译器 API
配置复杂度	灵活但需选择插件、顺序与 Runner	核心语义统一，主要配置编译选项与导入路径
组合使用	可在 Sass 编译后继续处理 CSS	常作为 PostCSS 流水线的上游预处理步骤
更适合	现代 CSS 转换、兼容优化和专用工程自动化	依赖 Mixin、函数和成熟预处理语言的大型样式代码库

如何选择

如果需求是按目标浏览器添加兼容处理、逐步采用 CSS 草案、压缩输出或编写项目专属转换，PostCSS 更合适；如果团队需要稳定统一的变量、Mixin、函数、循环和模块语言，Sass 更直接。两者并不互斥，常见方案是先用 Sass 生成 CSS，再用 PostCSS 完成 Autoprefixer、检查和生产优化。

VERIFICATION

资料核验

版本、维护信息与本页采用的官方资料来源。

最后核验2026 年 7 月 27 日

核验版本PostCSS v8.5.23

内容维护Docs100 编辑整理

项目维护状态活跃维护

本页依据 PostCSS 官方网站、架构文档、插件与自定义插件指南，以及官方源码仓库整理。版本通过 npm 官方 Registry 核验；快速开始采用 Vite 自动读取 PostCSS 配置的工作流，并明确 PostCSS 核心不包含固定转换或 CLI。

维护状态核验2026 年 7 月 26 日 · 最近可见代码活动：2026 年 7 月 24 日

官方仓库未归档，核验时最近可见的代码活动日期为 2026 年 7 月 24 日。该状态表示项目近期仍有公开维护活动，不代表固定发布频率或长期支持承诺。

查看官方仓库

官方来源4 项

PostCSS 官方网站PostCSS

PostCSS DocumentationPostCSS

Writing a PostCSS PluginPostCSS

PostCSS 官方源码仓库postcss · GitHub