PostCSS

PostCSS

---

什么是postcss
postcss 一种对css编译的工具，类似babel对js的处理。它主要依赖插件来进行操作。当你需要某些功能的时候，只需配置相应的插件即可。它有非常丰富的插件，可以涵盖你的开发过程的各个方面。即使没有满足你需要的插件，你也完全可以使用 JavaScript 来开发自己的插件就可以了。

它可以作为一款 CSS 前置处理器( preprocessor ) 使用, 就像 Sass 和 Less 等一样，使用 postcss-simple-vars, postcss-mixins, postcss-nested, postcss-sass-extend 等插件来实现 Sass 提供的 变量， mixin，选择器嵌套，extend 等功能。如果你不想自己配置，也可以使用一款已经打包好这些功能， 语法与 Sass 相似的插件precss 来实现preprocessor。

PostCSS 一般不单独使用，而是与已有的构建工具进行集成。PostCSS 与主流的构建工具，如 Webpack、Grunt 和 Gulp 都可以进行集成。完成集成之后，选择满足功能需求的 PostCSS 插件并进行配置。
它也可以作为一款 后处理器 (post processor)来使用，配合插件，满足你的需求：

针对浏览器兼容：

如果你想使用未来的 CSS 特性那你可以使用cssnext ；

Autoprefixer，它根据 Can I use… Support tables for HTML5, CSS3, etc 上的数据给属性添加相对应的浏览器前缀。

对老版本的浏览器没有的属性，有postcss-color-rgba-fallback, postcss-will-change等插件对其回退；

针对 CSS 优化

合并媒体查询(media query)有 css-mqpacker 插件；

删掉空格分号，最小化 CSS 文件，有cssnano插件；

提高开发效率

模块化 CSS 有 postcss-import 插件通过@import整合所有模块；

简写 CSS 属性，比如margin-left写作ml, 有postcss-crip插件；

引入第三方字体，postcss-font-magician 插件可以只指定font-family即可，@font-face的代码由插件完成；

生成各种方向的图形， 有postcss-triangle插件生成三角形， postcss-circle生成圆形

生成网格系统，有lost 插件

通过 PostCSS 强大的插件体系，可以对 CSS 进行各种不同的转换和处理，从而尽可能的把繁琐复杂的工作交由程序去处理，而把开发人员解放出来。

postcss在webpack当中的配置

var path = require('path');
 
module.exports = {
 context: path.join(__dirname, 'app'),
 entry: './app',
 output: {
   path: path.join(__dirname, 'dist'),
   filename: 'bundle.js'
 },
 module: {
   loaders: [
     {
       test:   /\.css$/,
       loader: "style-loader!css-loader!postcss-loader"
     }
   ]
 },
 postcss: function () {
   return [require('autoprefixer')];
 }
}

postcss插件参考

postcss-modules and react-css-modules automatically isolate selectors within components.
postcss-autoreset is an alternative to using a global reset that is better for isolatable components.
postcss-initial adds all: initial support, which resets all inherited styles.
autoprefixer adds vendor prefixes, using data from Can I Use.
postcss-preset-env allows you to use future CSS features today.
precss contains plugins for Sass-like features, like variables, nesting, and mixins.
postcss-assets inserts image dimensions and inlines files.
postcss-sprites generates image sprites.
postcss-inline-svg allows you to inline SVG and customize its styles.
postcss-write-svg allows you to write simple SVG directly in your CSS.
postcss-syntax switch syntax automatically by file extensions.
postcss-html parsing styles in