postcss 插件（PostCSS, PostCSS 中文文档）

PostCSS 是一个允许使用 JS 插件转换样式的工具 
  
  
  
  
  
  。这些插件可以检查（lint）你的 CSS 
  
  
  
  
  
  ，支持 CSS Variables 和 Mixins 
  
  
  
  
  
  
，编译尚未被浏览器广泛支持的先进的 CSS 语法

 


 


 


 


 


 

，内联图片 
 
 
 
 
 
 ，以及其它很多优秀的功能 
  
  
  
  
  
  
。

PostCSS

中文文档：PostCSS 中文文档

英文文档：PostCSS 英文文档

Star：16.9k

微信交流群：前端攻城狮（点击加入）

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 可读性

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 文件里<style>标签中的样式 
   
   
   
   
   
   
。 postcss-markdown 解析 Markdown 文件里代码块中的样式
 

 

 

 

 

 
。 postcss-jsx 解析源文件里模板或对象字面量中的CSS
 

 

 

 

 

 

 。 postcss-styled 解析源文件里模板字面量中的CSS            。 postcss-scss 允许你使用 SCSS (但并没有将 SCSS 编译到 CSS) 

 
 

 
 

 
 

 
 

 
 

 
 
。 postcss-sass 允许你使用 Sass (但并没有将 Sass 编译到 CSS)












。 postcss-less 允许你使用 Less (但并没有将 LESS 编译到 CSS)                   。 postcss-less-engine 允许你使用 Less (并且使用真正的 Less.js 把 LESS 编译到 CSS) 
 
 
 
 
 
 
 
 
 
 
 
 
。 postcss-js 允许你在 JS 里编写样式 

 
 

 
 

 
 

 
 

 
 

 
 
，或者转换成 React 的内联样式／Radium／JSS


















。 postcss-safe-parser 查找并修复 CSS 语法错误             。 midas 将 CSS 字符串转化成高亮的 HTML 
  
 
  
 
  
 
  
 
  
 
  
 
。

文章

一些你对 PostCSS 可能产生的误解 PostCSS 究竟是什么












，是做什么的 PostCSS 指南

你可以在 awesome-postcss 列表里找到更多优秀的文章和视频












。

书籍

Alex Libby, Packt 的 网页设计之精通 PostCSS (2016年6月)

使用方法

你可以通过简单的两步便开始使用 PostCSS：

在你的构建工具中查找并添加 PostCSS 拓展 
  
  
  
  
  
  。 选择插件并将它们添加到你的 PostCSS 处理队列中 
  
  
  
  
  
  
。

CSS-in-JS

同时使用 PostCSS 与 CSS-in-JS 的最好方式是 astroturf                   ，将它的 loader 添加到 webpack.config.js 中：

module.exports = { module: { rules: [ { test: /\.css$/, use: [style-loader, postcss-loader], }, { test: /\.jsx?$/, use: [babel-loader, astroturf/loader], } ] } }

然后创建 postcss.config.js：

module.exports = { plugins: [ require(autoprefixer), require(postcss-nested) ] }

Parcel

Parcel 有内建的 PostCSS 支持 
 
 
 
 
 
 
 
 
 
 
 
 
，并已经使用 Autoprefixer 和 cssnano

 


 


 


 


 


 

。如果你想更换插件


















，请在项目根目录中创建 postcss.config.js：

module.exports = { plugins: [ require(autoprefixer), require(postcss-nested) ] }

Parcel 甚至会自动地帮你安装这些插件 
 
 
 
 
 
 。

请注意第 1 版中存在的几个问题             ，第 2 版通过 issue #2157 解决了这些问题 
   
   
   
   
   
   
。

Webpack

在 webpack.config.js 里使用 postcss-loader :

module.exports = { module: { rules: [ { test: /\.css$/, exclude: /node_modules/, use: [ { loader: style-loader, }, { loader: css-loader, options: { importLoaders: 1, } }, { loader: postcss-loader } ] } ] } }

然后创建 postcss.config.js:

module.exports = { plugins: [ require(autoprefixer), require(postcss-nested) ] }

Gulp

使用 gulp-postcss 和 gulp-sourcemaps.

gulp.task(css, () => { const postcss = require(gulp-postcss) const sourcemaps = require(gulp-sourcemaps) return gulp.src(src/**/*.css) .pipe( sourcemaps.init() ) .pipe( postcss([ require(postcss-nested), require(autoprefixer) ]) ) .pipe( sourcemaps.write(.) ) .pipe( gulp.dest(build/) ) })

npm run / CLI

如果需要在你的命令行界面或 npm 脚本里使用 PostCSS 
  
 
  
 
  
 
  
 
  
 
  
 
，你可以使用 postcss-cli
 

 

 

 

 

 
。

postcss --use autoprefixer -c options.json -o main.css css/*.css

浏览器

如果你想编译浏览器里的 CSS 字符串（例如像 CodePen 一样的在线编辑器）












，

只需使用 Browserify 或 webpack
 

 

 

 

 

 

 。它们会把 PostCSS 和插件文件打包进一个独立文件            。

如果想要在 React 内联样式／JSS／Radium／其它 CSS-in-JS 里使用 PostCSS 
  
  
  
  
  
  ，

你可以用 postcss-js 然后转换样式对象 

 
 

 
 

 
 

 
 

 
 

 
 
。 var postcss = require(postcss-js) var prefixer = postcss.sync([ require(autoprefixer) ]) prefixer({ display: flex }) //=> { display: [-webkit-box, -webkit-flex, -ms-flexbox, flex] }

运行器

Grunt: grunt-postcss HTML: posthtml-postcss Stylus: poststylus Rollup: rollup-plugin-postcss Brunch: postcss-brunch Broccoli: broccoli-postcss Meteor: postcss ENB: enb-postcss Taskr: taskr-postcss Start: start-postcss Connect/Express: postcss-middleware

JS API

对于其它的应用环境 
  
  
  
  
  
  
，你可以使用 JS API：

const postcssNested = require(postcss-nested) const autoprefixer = require(autoprefixer) const postcss = require(postcss) const fs = require(fs) fs.readFile(src/app.css, (err, css) => { postcss([postcssNested, autoprefixer]) .process(css, { from: src/app.css, to: dest/app.css }) .then(result => { fs.writeFile(dest/app.css, result.css) if ( result.map ) fs.writeFile(dest/app.css.map, result.map) }) })

阅读 PostCSS API 文档 获取更多有关 JS API 的信息.

所有的 PostCSS 运行器应当通过 PostCSS 运行器指南












。

配置选项

绝大多数 PostCSS 运行器接受两个参数：

一个包含所需插件的数组 一个配置选项的对象

常见的选项：

syntax: 一个提供了语法解释器和 stringifier 的对象                   。 parser: 一个特殊的语法解释器（例如 SCSS） 
 
 
 
 
 
 
 
 
 
 
 
 
。 stringifier: 一个特殊的语法 output 生成器（例如 Midas）


















。 map: source map 选项. from: input 文件名称（大多数运行器自动设置了这个）             。 to: output 文件名称（大多数运行器自动设置了这个） 
  
 
  
 
  
 
  
 
  
 
  
 
。

Atom

language-postcss 添加了 PostCSS 和 SugarSS 代码高亮












。 source-preview-postcss 在一个独立窗口里实时预览生成的 CSS 
  
  
  
  
  
  。

Sublime Text

Syntax-highlighting-for-PostCSS 添加了 PostCSS 代码高亮 
  
  
  
  
  
  
。

Vim

postcss.vim 添加了 PostCSS 代码高亮

 


 


 


 


 


 

。

WebStorm

自 WebStorm 2016.3 开始

 


 


 


 


 


 

，提供了 内建的 PostCSS 支持 
 
 
 
 
 
 。