PostCSS起源於 2013 年 9 月，發展到現在，已經有很多開發者在工作中使用它。如果你尚未接觸過PostCSS，這篇文章正適合你。
PostCSS是一個使用JavaScript插件來轉換CSS的工具。
PostCSS本身很小，其只包含CSS解析器，操作CSS節點樹的 API，資源生成器（譯者注 1：原文是 source map），以及一個節點樹字符串化工具。所有的黑魔法都是通過利用插件實現的。
截止目前，PostCSS的生態圈內已經擁有超過 100 種插件。這些插件可以做太多的事情，比如lint（譯者注 2：一種用來檢測 CSS 代碼的工具），添加vendor prefixes（譯者注 3：添加瀏覽器內核前綴，可以使用瀏覽器的一些獨有特性），允許使用最新的 CSS 特性，在你的CSS裡提供統計數據，或者是允許你使用Sass，Less或是Stylus等CSS預處理器。
讓我們看看以下十種插件#
根據用戶的使用場景來解析CSS和添加vendor prefixes（前文注 2）。
一種利用鍵盤操作為每個 **添加選擇器的PostCSS** 插件。
一個允許你在代碼中使用類似Sass標記的插件。
一種強大的，先進的可以使你在CSS樣式中保持一致性，避免錯誤的CSS linter工具。
一種將用戶自定義CSS變量（CSS variables）轉化為靜態樣式的插件。
一種用於修復flexbug的 bug 的插件。
一種可以讓你使用CSS最新特性的插件。它通過將最新的CSS特性轉變為現階段瀏覽器所兼容的特性，這樣你不用再等待瀏覽器對某一特定新特性的支持。
一種支持cssstats的插件。這個插件將會返回一個cssstatus對象，這樣你可以使用它來進行CSS分析。
優化在PostCSS中內聯 SVG。
一種可以自動生成風格指導的插件。將會在Markdown中生成CSS註釋，並在生成的HTML文檔中顯示。
如果你想編寫自己的插件，並希望將其貢獻給社區的話，請確保你是先看過guidelines這篇文檔還有PostCSS Plugin Boilerplate這篇官方文檔。
在你的工作中使用PostCSS#
PostCSS是用JavaScript所編寫的，這使得我們在Grunt，Gulp或Webpack等常用的前端構建工具中使用它變得非常方便。
下面是我們使用Autoprefixer插件的示例。
npm install autoprefixer --save-dev
Gulp
如果你使用Gulp，那麼你需要安裝gulp-postcss。
npm install --save-dev gulp-postcss
gulp.task('autoprefixer', function () {
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
return gulp.src('./src/*.css')
.pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
.pipe(gulp.dest('./dest'));
});
Grunt
如果你使用Grunt，那麼你需要安裝grunt-postcss。
npm install grunt-postcss --save-dev
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
map: true,
processors: [
require('autoprefixer')({
browsers: ['last 2 versions']
})
]
},
dist: {
src: 'css/*.css'
}
}
});
grunt.registerTask('default', ['postcss:dist']);
};
Webpack
如果你使用Webpack，那麼你需要安裝postcss-loader。
npm install postcss-loader --save-dev
var autoprefixer = require('autoprefixer');
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: function () {
return [autoprefixer];
}
}
關於怎麼整合PostCSS，你可以從這裡PostCSS repo獲取到幫助。
最後最後的誠心安利～#
在有些時候，在新技術，新工具，新框架發布的時候，去使用並觀察其發展趨勢無疑是一種明智的行為。現在，PostCSS已經發展到一個相當成熟的階段，我強烈建議你在你的工作中使用它。因為它現在已經在工程中被廣泛的使用，同時在未來一段時間內它不會發生太大的變化。