PostCSS：Sassの新しいプレイ日

公開: 2022-03-11

最近、PostCSSは、Web開発のフロントエンド側を巡回するツールです。

PostCSSは、Autoprefixerの作成者であるAndreySitnikによって開発されました。 これは、JavaScriptを使用してすべてのCSSを変換するツールとして開発されたNode.jsパッケージであり、他のプロセッサーよりもはるかに高速なビルド時間を実現します。

その名前が示すように見えますが、それはポストプロセッサーではなく（プリプロセッサーでもありません）、PostCSS固有（またはより正確にはPostCSSプラグイン固有）の構文を変換するトランスパイラーです。バニラCSS。

そうは言っても、これはPostCSSと他のCSSプロセッサが連携できないことを意味するものではありません。 実際のところ、CSSの前処理/後処理の世界全体に慣れていない場合は、PostCSSをSassと一緒に使用すると、多くの頭痛の種を減らすことができます。これについては、後ほど説明します。

PostCSSは他のCSSプロセッサに代わるものではありません。 むしろ、必要なときに役立つ可能性のある別のツール、ツールセットへの別の追加としてそれを見てください。

PostCSSの概要図。

PostCSSの使用は最近指数関数的に増加し始めており、今日ではTwitter、JetBrains、Wikipediaなどの最大のテクノロジー業界の企業で使用されています。 その広範な採用と成功は、主にそのモジュール性によるものです。

プラグイン、プラグイン、プラグイン

PostCSSはすべてプラグインに関するものです。

これにより、使用するプラグインを選択し、不要な依存関係を排除し、他のプリプロセッサの基本的な特性を使用して、すばやく軽量なセットアップを実行できます。 また、効率を維持しながら、ワークフロー用にさらに高度にカスタマイズされた構造を作成できます。

この投稿の執筆時点で、PostCSSには200を超えるプラグインのリポジトリがあり、それぞれがさまざまなタスクを担当しています。 PostCSSのGitHubリポジトリでは、プラグインは「グローバルCSSの問題を解決する」、「将来のCSSを今日使用する」、「CSSの読みやすさを向上させる」、「画像とフォント」、「リンター」、「その他」に分類されています。

ただし、pluginsディレクトリには、より正確な分類があります。 それらのいくつかの機能についてより良いアイデアを得るために、自分でそこを見てみることをお勧めします。 それらは非常に広く、かなり印象的です。

最も人気のあるPostCSSプラグインであるAutoprefixerについて聞いたことがあると思います。これは、人気のあるスタンドアロンライブラリです。 2番目に人気のあるプラグインはCSSNextです。これは、ブラウザーのサポートを気にすることなく、CSSの新しいカスタムプロパティなど、現在最新のCSS構文を使用できるようにするプラグインです。

ただし、すべてのPostCSSプラグインがそれほど画期的であるわけではありません。 いくつかは、おそらく他のプロセッサですぐに使える機能を提供するだけです。 parent selectorを例にとってみましょう。 Sassを使用すると、Sassをインストールするとすぐに使用を開始できます。 PostCSSでは、 postcss-nested-ancestorsプラグインを使用する必要があります。 同じことがextendsまたはmixinsにも当てはまります。

では、PostCSSとそのプラグインを使用する利点は何ですか？ 答えは簡単です-あなたはあなた自身の戦いを選ぶことができます。 これから使用するSassの唯一の部分がparent selectorであると感じた場合は、環境にSassライブラリのインストールなどを実装してCSSをコンパイルするストレスを軽減し、を使用してプロセスを高速化できます。 PostCSSとpostcss-nested-ancestorsプラグインのみ。

これはPostCSSのユースケースの一例にすぎませんが、自分でチェックし始めると、間違いなく他の多くのユースケースに気付くでしょう。

関連： * SMACSSの探索：CSS用のスケーラブルでモジュラーなアーキテクチャ*

基本的なPostCSSの使用法

まず、PostCSSの基本をいくつか取り上げ、それが通常どのように使用されるかを見てみましょう。 PostCSSは、GulpやGruntなどのタスクランナーで使用すると非常に強力ですが、postcss-cliを使用してコマンドラインから直接使用することもできます。

簡単なユースケースの例を考えてみましょう。 フォールバックHEX値をすべてのRGBA形式の色に追加するために、postcss-color-rgba-fallbackプラグインを使用するとします。

NPMでpostcss 、 postcss-cli 、 postcss-color-rgba-fallbackをインストールしたら、次のコマンドを実行する必要があります。

 postcss --use postcss-color-rgba-fallback -o src/css/all.css dist/css/all.css

この命令では、PostCSSにpostcss-color-rgba-fallbackプラグインを使用し、 src/css/all.css内にあるCSSを処理して、 dist/css/all.cssに出力するように指示しています。

OK、それは簡単でした。 それでは、もっと複雑な例を見てみましょう。

タスクランナーとSassとともにPostCSSを使用する

PostCSSは、ワークフローにかなり簡単に組み込むことができます。 すでに述べたように、Grunt、Gulp、Webpackなどのタスクランナーと完全に統合されており、NPMスクリプトでも使用できます。 PostCSSをSassおよびGulpと一緒に使用する例は、次のコードスニペットと同じくらい簡単です。

 var gulp = require('gulp'), concatcss = require('gulp-concat-css'), sass = require('gulp-sass'), postcss = require('gulp-postcss'), cssnext = require('postcss-cssnext'); gulp.task('stylesheets', function () { return ( gulp.src('./src/css/**/*.scss') .pipe(sass.sync().on('error', sass.logError)) .pipe(concatcss('all.css')) .pipe(postcss([ cssNext() ])) .pipe(gulp.dest('./dist/css')) ) });

上記のコード例を分解してみましょう。

必要なすべてのモジュール（Gulp、Contact CSS、Sass、PostCSS、およびCSSNext）への参照を一連の変数に格納します。

次に、 stylesheetsと呼ばれる新しいGulpタスクを登録します。 このタスクは、拡張子が.scssの./src/css/にあるファイルを監視し（サブディレクトリ構造の深さに関係なく）、Sassはそれらをコンパイルし、それらすべてを単一のall.cssファイルに連結します。

all.cssファイルが生成されると、PostCSSに渡されてPostCSS（およびプラグイン）関連のすべてのコードが実際のCSSにトランスパイルされ、結果のファイルが./dist/cssに配置されます。

さて、タスクランナーとプリプロセッサを使用してPostCSSを設定するのは素晴らしいことですが、そもそもPostCSSを使用することを正当化するのに十分ですか？

Sassは安定していて成熟していて、背後に巨大なコミュニティがありますが、たとえばAutoprefixerなどのプラグインにはPostCSSを使用したい場合があります。 はい、スタンドアロンのAutoprefixerライブラリを使用できますが、AutoprefixerをPostCSSプラグインとして使用する利点は、後でワークフローにプラグインを追加して、JavaScriptライブラリの大量の依存関係を回避できることです。

このアプローチでは、プレフィックスなしのプロパティを使用し、APIから取得した値に基づいてプレフィックスを付けることもできます。たとえば、Can I Useのプロパティのように、Sassだけではほとんど実現できません。 これは、コードにプレフィックスを付けるのに最適な方法ではない可能性のある複雑なミックスインを回避しようとしている場合に非常に役立ちます。

すでにSassを使用している場合、PostCSSを現在のワークフローに統合する最も一般的な方法は、 .sassまたは.scssファイルのコンパイル済み出力をPostCSSとそのプラグインを介して渡すことです。 これにより、SassとPostCSSの両方の出力を持つ別のCSSファイルが生成されます。

タスクランナーを使用している場合、PostCSSの使用は、 .sassまたは.scssファイル（または選択したプリプロセッサーのファイル）をコンパイルした直後に、現在のタスクのパイプラインに追加するのと同じくらい簡単です。

PostCSSは他のユーザーとうまく連携し、開発者が毎日経験するいくつかの主要な問題点を緩和することができます。

PostCSS（およびCSSNextやAutoprefixerなどのプラグインのいくつか）とSassが連携して動作する別の例を見てみましょう。 次のコードを使用できます。

 :root { $sass-variable: #000; --custom-property: #fff; } body { background: $sass-variable; color: var(--custom-property); &:hover { transform: scale(.75); } }

このコードスニペットには、バニラCSSとSass構文が含まれています。 この記事の執筆時点では、カスタムプロパティはまだ候補推奨（CR）ステータスであり、PostCSS用のCSSNextプラグインが機能する場所です。

このプラグインは、カスタムプロパティなどを今日のCSSに変換する役割を果たします。 Autoprefixerプラグインによって自動プレフィックスされるtransformプロパティにも同様のことが起こります。 以前に記述されたコードは、次のようになります。

 body { background: #000; color: #fff; } body:hover { -webkit-transform: scale(.75); transform: scale(.75); }

PostCSS用のプラグインのオーサリング

前述のように、PostCSSの魅力的な機能は、それが可能にするカスタマイズのレベルです。 そのオープン性のおかげで、PostCSS用に独自のカスタムプラグインを作成して特定のニーズに対応することは、JavaScriptの記述に慣れている場合はかなり簡単な作業です。

PostCSSの人々は、開始するのにかなり堅実なリストを持っています。プラグインの開発に興味がある場合は、推奨される記事とガイドを確認してください。 何かを質問したり、何かについて話し合ったりする必要があると感じた場合は、Gitterから始めるのが最適です。

PostCSSには、Twitterのフォロワーのかなり活発な基盤を持つAPIがあります。 この投稿で前述した他のコミュニティ特典とともに、これがプラグイン作成プロセスを非常に楽しくし、そのような共同作業を行うものです。

したがって、PostCSSプラグインを作成するには、Node.jsモジュールを作成する必要があります。 （通常、 node_modules/ディレクトリ内のPostCSSプラグインフォルダの前には、「postcss-」のようなプレフィックスが付いています。これは、PostCSSに依存するモジュールであることを明示するためです。）

まず、新しいプラグインモジュールのindex.jsファイルに、プラグインの処理コードのラッパーとなる次のコードを含める必要があります。

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { // Rest of code } });

プラグインにreplacecolorsという名前を付けました。 プラグインはキーワードdeepBlackTextを検索し、それを#2e2e2eカラー値に置き換えます。

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { css.walkRules(function(rule) { rule.walkDecls(function(decl, i) { var declaration = decl.value; if (declaration.indexOf('deepBlackText') !== -1) { declaration = 'color: #2e2e2e;'; } }); }); } });

前のスニペットは次のことを行いました。

  1. walkRules()を使用して、現在実行している.cssファイルにあるすべてのCSSルールを繰り返し処理しました。
  2. walkDecls()を使用して、現在の.cssファイル内にあるすべてのCSS宣言を繰り返しました。
  3. 次に、宣言を宣言変数内に格納し、文字列deepBlackTextが含まれているかどうかを確認しました。 そうであった場合は、次のCSS宣言の宣言全体を置き換えましたcolor: #2e2e2e; 。

プラグインの準備ができたら、コマンドラインから直接次のように使用できます。

 postcss --use postcss-replacecolors -o src/css/all.css dist/css/all.css

または、たとえば、次のようにGuplfileにロードされます。

 var replacecolors = require('postcss-replacecolors');

PostCSSを使用するには、現在のCSSプロセッサを捨てる必要がありますか？

まあ、それはあなたが探しているものに依存します。

SassとPostCSSの両方が同時に使用されるのはよくあることです。これは、PostCSSプラグインの機能に加えて、プリ/ポストプロセッサが提供するツールの一部を初心者が簡単に操作できるためです。 それらを並べて使用すると、現在のプロセッサ依存の実装（ Sassミックスイン、 extends 、親セレクター、プレースホルダーセレクターなど）を維持する方法を提供しながら、比較的新しい、おそらく未知のツールで事前定義されたワークフローを再構築することを回避できます。等々）。

関連：コントロールの維持：WebpackとReactのガイド、Pt。 2

PostCSSにチャンスを与える

PostCSSは、フロントエンド開発の世界で最も注目されている（まあ、一種の）新しいものです。 それ自体はプリ/ポストプロセッサではなく、挿入される環境に適応するのに十分な柔軟性があるため、広く採用されています。

PostCSSの能力の多くは、そのプラグインにあります。 あなたが探しているのがモジュール性、柔軟性、多様性であるなら、これはその仕事に適したツールです。

タスクランナーまたはバンドラーを使用している場合、現在のフローにPostCSSを追加するのは簡単なことです。 インストールおよび使用ガイドを確認してください。すでに使用しているツールと統合する簡単な方法が見つかるでしょう。

多くの開発者は、少なくとも当面の間、ここにとどまると言っています。 PostCSSは、現在のCSSの構造に大きな影響を与える可能性があり、フロントエンドWeb開発コミュニティ全体で標準の採用が大幅に増える可能性があります。

関連： Sass Mixins：スタイルシートを乾いた状態に保つ