PostCSS 是一个允许使用 JS 插件转换样式的工具。 这些插件可以检查(lint)你的 CSS,支持 CSS Variables 和 Mixins, 编译尚未被浏览器广泛支持的先进的 CSS 语法,内联图片,以及其它很多优秀的功能。
PostCSS 在工业界被广泛地应用,其中不乏很多有名的行业领导者,如:维基百科,Twitter,阿里巴巴, JetBrains。PostCSS 的 Autoprefixer 插件是最流行的 CSS 处理工具之一。
PostCSS 接收一个 CSS 文件并提供了一个 API 来分析、修改它的规则(通过把 CSS 规则转换成一个抽象语法树的方式)。在这之后,这个 API 便可被许多插件利用来做有用的事情,比如寻错或自动添加 CSS vendor 前缀。
插件
截止到目前,PostCSS 有 200 多个插件。你可以在 插件列表 或 搜索目录 找到它们。 下方的列表是我们最喜欢的插件 - 它们很好地演示了我们可以用 PostCSS 做些什么。
如果你有任何新的想法,开发 PostCSS 插件非常简单易上手。
解决全局 CSS 的问题
- postcss-use 允许你在 CSS 里明确地设置 PostCSS 插件,并且只在当前文件执行它们。
- postcss-modules 和 react-css-modules 可以自动以组件为单位隔绝 CSS 选择器。
- postcss-autoreset 是全局样式重置的又一个选择,它更适用于分离的组件。
- postcss-initial 添加了
all: initial
的支持,重置了所有继承的样式。 - cq-prolyfill 添加了容器查询的支持,允许添加响应于父元素宽度的样式.
提前使用先进的 CSS 特性
- autoprefixer 添加了 vendor 浏览器前缀,它使用 Can I Use 上面的数据。
- postcss-preset-env 允许你使用未来的 CSS 特性。
更佳的 CSS 可读性
- precss 囊括了许多插件来支持类似 Sass 的特性,比如 CSS 变量,套嵌,mixins 等。
- postcss-sorting 给规则的内容以及@规则排序。
- postcss-utilities 囊括了最常用的简写方式和书写帮助。
- short 添加并拓展了大量的缩写属性。