PostCSSは 2013 年 9 月に誕生し、現在では多くの開発者が使用しています。もしまだPostCSSに触れたことがないのであれば、この記事が適しています。
PostCSSはCSSを変換するためのJavaScriptプラグインです。
PostCSS自体は非常に小さく、CSSパーサー、CSSノードツリーを操作するための API、リソース生成ツール（ソースマップ）、およびノードツリーを文字列化するツールのみを含んでいます。すべての魔法はプラグインを利用して実現されます。
現在、PostCSSのエコシステムには 100 種類以上のプラグインが存在しています。これらのプラグインはさまざまなことができます。例えば、lint（CSS コードをチェックするツール）、ベンダープレフィックス（ブラウザの固有の機能を使用するための接頭辞を追加する）、最新の CSS の機能を使用すること、CSS 内での統計データの提供、またはSass、Less、Stylusなどの CSS プリプロセッサの使用が挙げられます。
以下の 10 種類のプラグインを見てみましょう#
CSSを解析し、ユーザーの使用状況に基づいてベンダープレフィックスを追加します。
PostCSSプラグインで、各 **に** セレクタを追加するためのキーボード操作を利用します。
Sassのようなマークアップをコード内で使用できるプラグインです。
CSSスタイルの一貫性を保ち、誤ったCSS linterを回避するための強力で先進的なツールです。
ユーザー定義のCSS変数を静的なスタイルに変換するプラグインです。
flexbugのバグを修正するためのプラグインです。
最新のCSSの機能を使用できるプラグインです。最新のCSSの機能を現在のブラウザがサポートする機能に変換するため、特定の新機能のブラウザのサポートを待つ必要がありません。
cssstatsをサポートするプラグインです。このプラグインはcssstatsオブジェクトを返し、CSSの分析に使用することができます。
PostCSSでインライン SVG を最適化するためのプラグインです。
スタイルガイドを自動生成するプラグインです。MarkdownにCSSコメントを生成し、生成されたHTMLドキュメントに表示されます。
もし自分自身のプラグインを作成し、コミュニティに貢献したい場合は、まずガイドラインとPostCSS プラグインのボイラープレートを参照してください。
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 リポジトリからヘルプを取得できます。
最後に、心からおすすめします～#
新しい技術、ツール、フレームワークがリリースされる際には、それを使用して発展を観察することは賢明な行動です。現在、PostCSSは非常に成熟した段階にあり、仕事で使用することを強くお勧めします。なぜなら、現在広く使用されており、将来的にも大きな変化はないからです。