PostCSS 是一个允许使用 JS 插件转换样式的工具。 这些插件可以检查(lint)你的 CSS,支持 CSS Variables 和 Mixins, 编译尚未被浏览器广泛支持的先进的 CSS 语法 (类似babel对js的处理) ,内联图片,以及其它很多优秀的功能。
PostCSS 只是一个工具,本身不会对css一顿操作,它通过插件实现各种功能,autoprefixer 就是其一。
解决全局 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 可读性
postcss-sorting 给规则的内容以及@规则排序。
- postcss-utilities 囊括了最常用的简写方式和书写帮助。
short 添加并拓展了大量的缩写属性。
图片和字体
postcss-assets 可以插入图片尺寸和内联文件。
- postcss-sprites 能生成雪碧图。
- font-magician 生成所有在 CSS 里需要的 @font-face 规则。
- postcss-inline-svg 允许你内联 SVG 并定制它的样式。
postcss-write-svg 允许你在 CSS 里写简单的 SVG。
提示器(Linters)
stylelint 是一个模块化的样式提示器。
- stylefmt 是一个能根据 stylelint 规则自动优化 CSS 格式的工具。
- doiuse 提示 CSS 的浏览器支持性,使用的数据来自于 Can I Use。
colorguard 帮助你保持一个始终如一的调色板。
其它
postcss-rtl 在单个 CSS 文件里组合了两个方向(左到右,右到左)的样式。
- cssnano 是一个模块化的 CSS 压缩器。
- lost 是一个功能强大的 calc() 栅格系统。
rtlcss 镜像翻转 CSS 样式,适用于 right-to-left 的应用场景。
语法
PostCSS 可以转化样式到任意语法,不仅仅是 CSS。 如果还没有支持你最喜欢的语法,你可以编写一个解释器以及(或者)一个 stringifier 来拓展 PostCSS。
sugarss 是一个以缩进为基础的语法,类似于 Sass 和 Stylus。
- postcss-syntax 通过文件扩展名自动切换语法。
- postcss-html 解析类 HTML 文件里