PostCSS

当你需要自动为CSS添加浏览器前缀、使用未来CSS语法、实现CSS模块化或进行样式检查时，PostCSS通过JavaScript将现代CSS转换为兼容代码，依赖数百个插件完成具体任务。

核心能力：四个典型场景

PostCSS本身只是一个解析器，所有功能由插件提供。官网重点展示了四个高频用例：Autoprefixer根据Can I Use数据自动添加vendor前缀；PostCSS Preset Env基于cssdb将现代CSS（如oklch颜色）转换为目标浏览器能理解的polyfill；CSS Modules通过哈希类名解决全局命名冲突；stylelint检查CSS语法错误（如无效十六进制颜色#d3）。

• Autoprefixer: 依据Can I Use数据，按浏览器流行度和属性支持自动添加-webkit-、-ms-等前缀
• PostCSS Preset Env: 使用cssdb确定polyfill，将oklch(61% 0.2 29)转为rgb(225,65,52)
• CSS Modules: 将.name转为.Logo__name__SVK0g，避免全局污染
• stylelint: 支持最新CSS语法及SCSS，检测如a { color: #d3; }的无效十六进制

插件生态：按功能分类的数百个插件

官网子页按用途列出了插件分类，包括Control（通过postcss-plugin-context或postcss-use在CSS中显式启用插件）、Packs（如cssnano压缩、stylelint检查、postcss-preset-env转换）、Future CSS Syntax（支持color-function、gray()、hex-alpha、hsl/hwb等CSS Colors 4函数）、以及Images and Fonts、Grids、Optimizations等类别。

• Control: postcss-plugin-context限制插件作用域，postcss-use在CSS中@use autoprefixer
• Packs: cssnano优化生产环境CSS体积，oldie兼容旧IE，rucksack提供快捷属性
• Future CSS Syntax: postcss-color-function支持颜色变换函数，postcss-color-gray支持gray()，postcss-color-hex-alpha支持#rgba
• Language Extensions: postcss-apply支持自定义属性集引用，postcss-bidirection生成左右双向样式

文档与社区支持

官网提供Setup、Docs、Plugins、API四个导航入口。Docs子页包含PostCSS Architecture、插件编写指南、Runner指南等。项目由数百名开源贡献者维护，托管在GitHub，接受Open Collective捐赠。企业用户可加入赞助商列表。

• 文档: 涵盖架构说明、插件编写、自定义语法、Runner指南
• 社区: 数百名贡献者，GitHub提交PR，Open Collective接受捐赠
• 许可: MIT License，可自由使用和修改

常见问题

Q1：PostCSS的Autoprefixer如何决定添加哪些前缀？

A1：Autoprefixer使用Can I Use的数据，基于当前浏览器流行度和属性支持情况自动添加前缀。例如:fullscreen会输出:-webkit-full-screen、:-ms-fullscreen和:fullscreen。

Q2：PostCSS Preset Env如何转换未来CSS语法？

A2：它通过cssdb确定所需的polyfill，根据你指定的目标浏览器或运行时环境，将现代CSS（如oklch颜色）转换为兼容代码。例如body { color: oklch(61% 0.2 29); }会被转换为body { color: rgb(225,65,52); }。

Q3：PostCSS支持哪些CSS预处理器语法？

A3：stylelint支持最新的CSS语法以及CSS-like语法，如SCSS。此外，社区插件可扩展支持Less、Sass等。

更多同类工具与网站,可在预编译工具分类继续挑选。

信息核实于 2026年7月,具体以官网为准。