PostCSS プラグイン

制御

PostCSS の魔法をより明確にするための2つの方法があります。

postcss-plugin-contextを使用して、プラグインのローカルスタイルシートコンテキストを制限します。

.css-example.is-test-for-css4-browsers {
  color: gray(255, 50%);
}
@context postcss-preset-env {
  .css-example.is-fallback-for-all-browsers {
    color: gray(255, 50%);
  }
}

または、postcss-useを使用して、CSS 内で直接プラグインを有効にします。

@use autoprefixer(browsers: ['last 2 versions']);

:fullscreen a {
  display: flex;
}

パック

• postcss-utilitiesには、@utilルールとして使用する最も一般的な mixin、ショートカット、およびヘルパーが含まれています。
• atcssには、特別な注釈コメントに従って CSS を変換するプラグインが含まれています。
• cssnanoには、本番環境で使用するために CSS サイズを最適化するプラグインが含まれています。
• oldieには、古い Internet Explorer の互換性のために CSS を変換するプラグインが含まれています。
• rucksackには、新機能とショートカットで CSS 開発をスピードアップするためのプラグインが含まれています。
• level4には、IE9 のフォールバックなしで CSS4 を記述できるプラグインのみが含まれています。
• shortは、多数のショートハンドプロパティを追加および拡張します。
• stylelintには、スタイルシートをリントするプラグインが含まれています。
• postcss-hamsterは、垂直リズム、タイポグラフィ、モジュラースケール関数に使用します。
• postcss-preset-envを使用すると、最新の CSS をほとんどのブラウザが理解できるものに変換し、ターゲットのブラウザまたはランタイム環境に基づいて必要なポリフィルを決定できます。
• postcss-ui-themeは、構文糖を提供し、テーマを変更できます。

将来の CSS 構文

• postcss-applyは、カスタムプロパティセット参照をサポートします。
• postcss-attribute-case-insensitiveは、大文字と小文字を区別しない属性をサポートします。
• postcss-bidirectionは、単一の構文で左から右および右から左のスタイルを生成します。
• postcss-color-functionは、色を変換する関数をサポートします。
• postcss-color-grayは、gray()関数をサポートします。
• postcss-color-hex-alphaは、#rrggbbaaおよび#rgba表記をサポートします。
• postcss-color-hsl：CSS Colors 4 hsl()を、より互換性のあるhsl()またはhsla()に変換します。
• postcss-color-hwbは、hwb()を広く互換性のあるrgb()に変換します。
• postcss-color-imageは、image(<color>)構文をサポートし、単色を画像として使用できるようにします。
• postcss-color-rebeccapurpleは、rebeccapurple色をサポートします。
• postcss-color-rgb：CSS Colors 4 rgb()を、より互換性のあるrgb()またはrgba()に変換します。
• postcss-conic-gradientは、conic-gradient背景をサポートします。
• postcss-custom-mediaは、メディアクエリのカスタムエイリアスをサポートします。
• postcss-custom-propertiesは、W3Cカスタムプロパティの構文を使用して、変数をサポートします。
• postcss-custom-selectorsは、セレクターにカスタムエイリアスを追加します。
• postcss-extendは、ルールとプレースホルダーに対して、仕様に近い@extendを再帰的にサポートします。
• postcss-font-format-keywordsは、@font-faceルールのformat()関数内のキーワードを広くサポートされている文字列に変換します。
• postcss-font-normalizeは、特にfont-familyのフォントを正規化します。
• postcss-font-variantは、人間が読めるfont-variantを、より広くサポートされている CSS にトランスパイルします。
• postcss-font-family-system-uiは、W3C CSS font-family: system-uiを実用的なフォントリストに変換します。
• postcss-font-displayは、font-display CSSルールを追加します。
• postcss-hostは、Shadow DOM の:hostセレクターを疑似クラスで適切に機能させます。
• postcss-initialは、initialキーワードと、継承されたスタイルをクリーンにするためのall: initialをサポートします。
• postcss-logical-propertiesは、ドキュメントの記述方向に応じて、startおよびendプロパティをleftおよびrightに変換します。
• postcss-media-minmaxは、メディアクエリに<=および=>ステートメントを追加します。
• postcss-multi-value-displayは、inline flexおよびblock flowをinline-flexおよびblockに変換します。
• postcss-pseudo-class-any-linkは、:any-link疑似クラスを追加します。
• postcss-pseudo-isは、:is()をより互換性のある CSS に変換します。
• postcss-selector-notは、CSS4 :not()を CSS3 :not()に変換します。
• postcss-selector-matchesは、CSS4 :matches()をより互換性のある CSS に変換します。
• postcss-start-to-endを使用すると、方向/物理ルールではなく、論理的なルールを通じてレイアウト（LTRまたはRTL）を制御できます。
• postcss-subgridは、CSS display: subgrid仕様の基本的なシムを提供します。
• mq4-hover-shimは、@media (hover)機能をサポートします。

また、1 行のコードで将来の CSS 構文を追加するには、postcss-preset-envプラグインパックを参照してください。

フォールバック

• postcss-color-rgba-fallbackは、rgba()を16進数に変換します。
• postcss-disabledは、:disabled疑似クラスが存在する場合、[disabled]属性または.disabledクラスを追加します。
• postcss-epubは、関連するプロパティに-epub-プレフィックスを追加します。
• postcss-esplitは、IE 用の 4095 を超えるセレクターを持つ CSS を分割します。
• postcss-fallbackは、重複する宣言を回避するためにfallback関数を追加します。
• postcss-filter-gradientは、古い IE 用にグラデーションフィルターを追加します。
• postcss-flexibilityは、Flexibility ポリフィルに-js-プレフィックスを追加します。
• postcss-gradient-transparency-fixは、Safari の異なる色の補間をサポートするために、グラデーションのtransparent値を変換します。
• postcss-hash-classnameは、CSS クラス名にハッシュ文字列を追加します。
• postcss-mqwidth-to-classは、最小/最大幅のメディアクエリをクラスに変換します。
• postcss-opacityは、IE8 用に不透明度フィルターを追加します。
• postcss-opacity-percentageは、CSS4 のパーセントベースのopacity値を浮動小数点値に変換します。
• postcss-page-breakは、break-プロパティにpage-break-フォールバックを追加します。
• postcss-pseudoelementsは、IE 8 の互換性のために、::セレクターを:セレクターに変換します。
• postcss-redundant-color-varsは、既知の Safari のバグを修正するために、特定の border および box-shadow 宣言にカスタムプロパティを追加します。
• postcss-replace-overflow-wrapは、overflow-wrapをword-wrapに置き換えます。
• postcss-round-subpixelsは、サブピクセル値を最も近いフルピクセルに丸めるプラグインです。
• postcss-unmqは、IE≤8 のデスクトップルールを保持しながら、メディアクエリを削除します。
• postcss-vminは、IE9 のvminユニットにvmフォールバックを生成します。
• postcss-will-changeは、will-changeプロパティの前に 3D ハックを挿入します。
• autoprefixerは、「Can I Use」のデータを使用して、ベンダープレフィックスを追加します。
• postcss-pieは、IE に最も便利な CSS3 装飾機能のいくつかを提供します。
• cssgraceは、さまざまなヘルパーを提供し、IE およびその他の古いブラウザー用に CSS 3 をトランスパイルします。
• pixremは、remユニットのピクセルフォールバックを生成します。
• postcss-fixieは、簡単で痛みのない IE ハックを追加します。
• postcss-safe-areaは、safe-area-inset env変数のブラウザーフォールバックを追加します。
• webp-in-cssは、CSS で WebP 背景画像を使用します。
• postcss-clampは、clamp()をmin/maxの組み合わせに変換します。
• postcss-spring-easingは、spring()を結果のlinear()関数に置き換え、--spring-duration CSS 変数を追加します。

また、oldieプラグインパックを参照してください。

言語拡張

• postcss-aspect-ratioは、要素の寸法をアスペクト比に固定します。
• postcss-atrootは、ルールをルートノードに直接配置します。
• postcss-bem-fixは、BEM および SUIT スタイルのクラスに at-rules を追加します。
• postcss-clickを使用すると、:click疑似クラスを使用し、JavaScript で実装できます。
• postcss-compact-mqは、ビューポートの幅に基づいてメディアクエリのコンパクトな構文を提供します。
• postcss-conditionalsは、@ifステートメントを追加します。
• postcss-css-variablesは、W3C に似た構文を使用して、セレクターと at-rule の変数をサポートします。
• postcss-current-selectorは、宣言で現在のセレクターを取得します。
• postcss-define-propertyは、プロパティのショートカットを定義します。
• postcss-define-functionは、Sass @functionディレクティブを実装します。
• postcss-eachは、@eachステートメントを追加します。
• postcss-forは、@forループを追加します。
• postcss-at-rules-variablesは、@for、@each、@ifなどのカスタムプロパティのサポートを追加します。
• postcss-functionsは、JavaScript 関数の公開を有効にします。
• postcss-if-mediaは、メディアクエリを CSS ルールとプロパティ内にインライン化またはネストします。
• postcss-inline-media は、複数のメディアクエリを CSS プロパティ値にインライン化します。
• postcss-local-constants は、ローカライズされた定数のサポートを追加します。
• postcss-map は、構成マップを有効にします。
• postcss-match は、Rustスタイルのパターンマッチングのための @match を追加します。
• postcss-mixins は、スタイルシート内または JS 内で定義された、Sassよりも強力なmixinを有効にします。
• postcss-media-variables は、@media ルールで var() と calc() のサポートを追加します。
• postcss-modular-scale は、モジュラースケール ms() 関数を追加します。
• postcss-namespace は、セレクターに名前空間のプレフィックスを付加します。
• postcss-nested は、ネストされたルールをアンラップします。
• postcss-nested-props は、ネストされたプロパティをアンラップします。
• postcss-nested-vars は、ネストされた Sass スタイルの変数をサポートします。
• postcss-pseudo-class-any-button は、すべてのボタン要素をターゲットにするための :any-button 疑似クラスを追加します。
• postcss-pseudo-class-enter は、:enter を :hover および :focus に変換します。
• postcss-quantity-queries は、数量クエリを有効にします。
• postcss-ref は、別のルールからプロパティを参照します。
• postcss-reverse-media は、メディアクエリのパラメーターを反転/逆転します。
• postcss-sassy-mixins は、Sass キーワードを使用した mixin を有効にします。
• postcss-map-get は、Sass のようなマップ関数 map-get を使用する機能を追加します。
• postcss-simple-extend は、Sass の @extend のように、サイレントクラスの軽量な拡張を行います。
• postcss-simple-vars は、Sass スタイルの変数をサポートします。
• postcss-strip-units は、プロパティ値から単位を削除します。
• postcss-vertical-rhythm は、font-size と line-height に基づいた垂直リズム単位を追加します。
• postcss-vertical-rhythm-function は、ユニットに依存せず、ビルド時にフォントサイズを計算できない状況で機能する垂直リズム vr() 関数を追加します。
• postcss-responsive-properties は、レスポンシブなプロパティ値を記述できるようにします。
• postcss-text-remove-gap は、行の高さとグリフ自体に追加された余分なスペースによって、テキスト文字列の前後のスペースを削除します。
• postcss-closest は、現在のセレクターの最も近い一致部分を変更するプラグインです。
• csstyle は、スタイルにコンポーネントワークフローを追加します。
• postcss-percentage は、Sass のような percentage() 関数をサポートします。
• postcss-custom-css-units は、カスタム CSS 単位を定義し、それらを CSS 変数に変換します。
• postcss-easy-z は、z-index 間の関係を宣言することで、z-index を整理できるようにします。
• @csstools/postcss-design-tokens は、CSS からデザイントークンをインポートして使用できるようにします。

色

• postcss-ase-colors は、ASE パレットファイルから読み取った値で色名を置き換えます。
• postcss-brand-colors は、brand-colors モジュールに会社のブランドカラーを挿入します。
• postcss-color-alpha は、#hex.a、black(alpha) および white(alpha) を rgba() に変換します。
• postcss-color-hcl は、hcl(H, C, L) および hcl(H, C, L, alpha) を #rgb および rgba() に変換します。
• postcss-color-hexa は、hexa(hex, alpha) を rgba 形式に変換します。
• postcss-color-mix は、2つの色を混ぜ合わせます。
• postcss-color-palette は、CSS 2 の色のキーワードをカスタムパレットに変換します。
• postcss-color-pantone は、パントンの色を RGB に変換します。
• postcss-color-scale は、カラースケール cs() 関数を追加します。
• postcss-color-short は、省略形の色の宣言を追加します。
• postcss-color-yiq は、YIQ カラースペースを使用して前景色を設定します。
• postcss-colorblind は、色覚異常をシミュレートするためにフィルターを使用して色を変換します。
• postcss-contrast は、background-color をチェックし、白または黒のどちらかを返します。
• postcss-dark-theme-class は、カスタムスイッチャーでダークまたはライトテーマを強制します。
• postcss-theme-colors は、カラーグループを使用してダークテーマとライトテーマを追加します。
• postcss-hexrgba は、省略形の hex rgba(hex, alpha) メソッドを追加します。
• postcss-rgb-plz は、3桁または6桁の16進数値を rgb に変換します。
• postcss-rgba-hex は、rgba 値を hex アナログに変換します。
• postcss-shades-of-gray は、グレースケールの色をグレイパレットに合わせて一貫性を保つのに役立ちます。
• colorguard は、一貫性のあるカラーパレットを維持するのに役立ちます。
• postcss-get-color は、画像から主要な色を取得します。
• postcss-randomcolor は、ランダムな色を使用する関数をサポートします。

画像とフォント

• avif-in-css は、CSS の背景で AVIF 画像形式を使用します。
• postcss-assets は、URL を簡略化し、画像寸法を挿入し、ファイルをインライン化できるようにします。
• postcss-assets-rebase は、url() からアセットをリベースします。
• postcss-at2x は、at-2x キーワードを使用して Retina 背景画像を処理します。
• postcss-background-image-auto-size は、background-image の width および height の CSS ルールを自動的に生成します。
• postcss-border-9-patch は、カスタムルールを介して、9パッチのようなボーダースタイルを生成します。
• postcss-cachebuster は、画像とフォントにバージョンパラメーターを追加します。
• postcss-copy-assets は、相対的な url() で参照されるアセットをビルドディレクトリにコピーします。
• postcss-data-packer は、埋め込まれた Base64 データを別のファイルに移動します。
• postcss-easysprites は、image.png#hash とアスペクト比 (@2x) に基づいて、画像をスプライトに結合します。
• postcss-icon-blender は、80,000を超える無料のオープンソースアイコンからカスタム SVG アイコンセットを作成します。
• postcss-image-set は、image-set() の最初の画像を使用して background-image を追加します。
• postcss-image-inliner は、ローカルおよびリモートの画像をインライン化します。
• postcss-instagram は、filter に Instagram フィルターを追加します。
• postcss-filter-tint は、画像などの要素にティントフィルターを追加します。
• postcss-foft-classes は、より良いフォント読み込み戦略のために、Web フォントを使用するブロックに保護クラスを追加します。
• postcss-font-awesome は、font-awesome Unicode コードへの簡単なショートカットを追加します。
• postcss-font-pack は、フォント宣言を簡素化し、構成されたフォントパックと一致することを確認します。
• postcss-fontsize は、rem 単位の font-size および line-height を px フォールバックで生成します。
• postcss-fontpath は、異なるブラウザー用のフォントリンクを追加します。
• postcss-font-grabber は、@font-face のリモートフォントを取得し、それらをダウンロードして CSS を更新します。
• postcss-lazyimagecss は、画像の幅と高さを自動的に追加します。
• postcss-lazysprite は、画像のディレクトリからスプライトを生成します。
• postcss-placehold は、プレースホルダー画像を簡単にドロップできるようにします。
• postcss-resemble-image は、元の画像に大まかに似たグラデーションフォールバックを提供します。
• postcss-resolve-urls は、url() で参照される相対 URL を解決します。
• postcss-responsive-images は、画像をレスポンシブにするためのスタイルシートを追加します。
• postcss-sprites は、スタイルシートから CSS スプライトを生成します。
• postcss-svg は、インライン SVG を CSS に挿入し、その色を管理できるようにします。
• postcss-svg-fallback は、CSS の SVG を IE 8 用の PNG ファイルに変換します。
• postcss-svgo は、SVGO を通してインライン SVG を処理します。
• postcss-unicode-characters は、unicode-range ディスクリプターを簡単に記述できるようにします。
• postcss-url は、url() をリベースまたはインライン化します。
• postcss-urlrebase は、url() を指定されたルート URL にリベースします。
• postcss-urlrev は、MD5 ハッシュ文字列を url() に追加します。
• postcss-write-svg は、CSS にインライン SVG を書き込みます。
• postcss-inline-svg は、SVG 画像をインライン化し、そのスタイルをカスタマイズします。
• webpcss は、WebP をサポートするブラウザー用に WebP 画像の URL を追加します。
• webp-in-css は、CSS の背景で WebP 画像形式を使用します。

グリッド

• postcss-grid は、セマンティックグリッドシステムを追加します。
• postcss-grid-kiss は、ASCII アートのグリッドを CSS Grid レイアウトに変換します。
• postcss-grid-system は、固定列幅に基づいてグリッドを作成します。
• postcss-grid-fluid は、流動的なグリッドを作成します。
• postcss-layout は、いくつかの一般的な CSS レイアウトパターンとグリッドシステムのプラグインです。
• postcss-maze は、あらゆるデザインパターンに適合するモバイルファーストのセマンティックレスポンシブグリッドです。
• postcss-neat は、セマンティックで流動的なグリッドフレームワークです。
• postcss-oldschool-grid は、折り返し列とパディングガターを備えたグリッドシステムです。
• postcss-simple-grid は、1行でグリッドを作成します。
• lost は、Jeet の作成者による機能豊富な calc() グリッドシステムです。

最適化

• postcss-calc は、calc() を値に縮小します（式に同じ単位が含まれる場合）。
• postcss-remove-nested-calc は、IE 11 の互換性のために calc(100vw - calc(20% - 10px)) を calc(100vw - (20% - 10px)) に変換します。
• postcss-class-name-shortener は、Web サイトのパフォーマンスを最適化するために CSS クラス名を短縮します。
• postcss-combine-duplicated-selectors は、同一のセレクターを自動的に結合します。
• postcss-filter-mq は、一致するメディアクエリまたは一致しないメディアクエリをすべてフィルタリングします。
• postcss-import は、@import ルールで参照されるスタイルシートをインライン化します。
• postcss-nested-import は、ネストされたルールブロック内の @import ルールで参照されるスタイルシートをインライン化します。
• postcss-partial-import は、標準のインポートと Sass のようなパーシャルをインライン化します。
• postcss-reference は、Less の @import をエミュレートします。
• postcss-remove-root は、スタイルシートから :root のすべてのインスタンスを削除します。
• postcss-single-charset は、ファイルの先頭に @charset ルールが 1 つだけ存在することを保証します。
• postcss-zindex は、正の z-index 値をリベースします。
• postcss-unprefix は、レガシー CSS のベンダープレフィックスを削除します。
• css-byebye は、不要な CSS ルールを削除します。
• css-mqpacker は、一致する CSS メディアクエリを 1 つのステートメントに結合します。
• stylehacks は、ブラウザのサポートに基づいて CSS ハックを削除します。
• postcss-mq-optimize は、無効なメディアクエリまたはその式を削除します。
• postcss-uncss は、スタイルシートから未使用の CSS を削除します。
• postcss-html-filter は、提供された HTML に適用されない CSS をフィルタリングします。
• postcss-no-important は、!important 宣言を削除します。
• postcss-deep-scopable は、Vue.js のための統合されたディープスコープスタイルを提供します。
• postcss-deadcss は、スタイルシート内のデッド CSS を見つけるのに役立ちます。
• postcss-variable-compress は、CSS 変数を圧縮してスペースを節約します。

モジュール式ミニファイア cssnano のプラグインも参照してください。

ショートカット

• postcss-alias は、プロパティの短いエイリアスを作成します。
• postcss-alias-atrules は、@規則の短いエイリアスを作成します。
• postcss-all-link-colors は、リンク関連の疑似クラスの色を挿入します。
• postcss-border は、border プロパティ内のすべてのボーダーの幅と色の短縮形を追加します。
• postcss-border-shortcut は、border タイプが明示されていない場合にデフォルト値を割り当てる PostCSS プラグインです。
• postcss-button は、ボタンを作成します。
• postcss-center は、要素を中央に配置します。
• postcss-circle は、色付きの円を挿入します。
• postcss-clearfix は、clear 宣言に fix および fix-legacy プロパティを追加します。
• postcss-crip は、記述するのが面倒な Crips のための短縮プロパティです。
• postcss-default-unit は、数値 CSS プロパティにデフォルト単位を追加します。
• postcss-easings は、easings.net のイージング名を cubic-bezier() 関数に置き換えます。
• postcss-filter は、白黒フィルターの短縮形を追加します。
• postcss-focus は、すべての :hover に :focus セレクタを追加します。
• postcss-generate-preset は、ルールをすばやく生成できます。繰り返しユーティリティの作成に役立ちます。
• postcss-hidden は、要素を簡単に非表示にする方法を提供します。
• postcss-input-style は、入力のクロスブラウザスタイル設定のための新しい疑似要素を追加します。
• postcss-nested-ancestors は、ネストされた CSS で任意の親/祖先セレクタを参照します。
• postcss-parent-selector は、すべてのルールの先頭に親セレクタを追加します。
• postcss-position は、position 属性の短縮宣言を追加します。
• postcss-property-lookup は、変数なしでプロパティ値を参照できるようにします。
• postcss-range-value は、2 つの画面サイズ間の最大値と最小値を持つ範囲値を設定します。
• postcss-responsive-type は、画面サイズに応じて font-size を変更します。
• postcss-scrib は、プロパティまたは値に対して独自のエイリアス/ショートカットを定義します。
• postcss-short-font-size は、font-size を拡張して、行の高さを 2 番目の値として定義します。
• postcss-short-position は、position を拡張して、エッジを追加の値として定義します。
• postcss-short-spacing は、margin および padding を拡張して、エッジを省略できるようにします。
• postcss-short-text は、いくつかのテキスト関連プロパティの text ショートカットプロパティを追加します。
• postcss-size は、幅と高さを 1 つの宣言で設定する size ショートカットを追加します。
• postcss-speech-bubble は、わずか数行の CSS でさまざまな種類の吹き出しを追加します。
• postcss-transform-shortcut は、CSS で transform プロパティの短縮形を使用できるようにします。
• postcss-triangle は、三角形を作成します。
• postcss-typescale は、タイポグラフィスケールに基づいてタイプを設定します。
• postcss-verthorz は、垂直および水平の間隔宣言を追加します。
• font-magician は、CSS で必要なすべての @font-face ルールを生成します。
• postcss-animation は、animate.css から @keyframes を追加する PostCSS プラグインです。
• postcss-magic-animations は、Magic Animations から @keyframes を追加する PostCSS プラグインです。

その他

• [postcss-add-root-selector] は、すべてのルールをカスタムセレクタでインテリジェントにラップします。
• postcss-alter-property-value は、ルールベースの構成から CSS 宣言を変更します。
• postcss-attribute-selector-prefix は、属性セレクタにプレフィックスを追加します。
• [postcss-auto-rem] は、設定なしでピクセル単位を rem にコンパイルします。
• postcss-autoreset は、リセットスタイルを自動的に追加します。
• postcss-bem-to-js は、BEM スタイルの CSS 用の JavaScript 定義ファイルを作成します。
• postcss-bom は、ファイルに UTF-8 BOM を追加します。
• postcss-blurry-gradient-workaround は、明示的なエンドストップが多すぎるぼやけた CSS グラデーションを修正します。
• postcss-camelcaser は、セレクタを CamelCase に変換します。
• postcss-class-prefix は、クラスセレクタにプレフィックス/名前空間を追加します。
• postcss-classes-to-mixins は、クラスを Sass、Less、Stylus の mixin に変換します。
• postcss-currency は、通貨名を記号に置き換えます。
• postcss-d-ts は、使用されている CSS クラスと ID から TypeScript の import 用の .d.ts 宣言を生成します。
• postcss-eol は、ファイルの EOL を置き換えます。
• postcss-extract-value は、CSS プロパティから値を抽出し、変数に入れます。
• postcss-fakeid は、#foo ID を属性セレクタ [id="foo"] に変換します。
• postcss-filter-stream は、PostCSS プラグインで処理したくないファイル/フォルダをブラックリストに登録します。
• postcss-flexbox は、CSS3 Flexbox を理解して使い始めるための簡単な方法です。
• postcss-flexbox-reset は、レスポンシブレイアウトでの問題を回避するために Flexbox をリセットします。
• postcss-flexboxfixer は、レガシー CSS での -webkit- のみの flexbox のプレフィックスを削除します。
• postcss-flexbugs-fixes は、既知のいくつかの flexbox バグ を修正します。
• postcss-gradientfixer は、レガシー CSS での -webkit- のみのグラデーションのプレフィックスを削除します。
• postcss-grid-reset は、レスポンシブレイアウトでの問題を回避するために CSS Grid をリセットします。
• postcss-hash は、キャッシュバスティングのために出力ファイル名をハッシュアルゴリズムに置き換えます。
• postcss-ie8 は、IE8 でサポートされていないプロパティとメディアクエリを削除します。
• postcss-increase-specificity は、セレクタの特異性を高めます。
• postcss-inline-rtl は、CSS を右から左に変換しますが、インライン (必要なものだけを追加) で変換します。
• postcss-join-transitions は、競合する transition 宣言を結合します。
• postcss-letter-tracking は、文字間隔を改善するために、相対的な Photoshop 互換のレタートラッキングを生成します。
• postcss-light-text は、明るいテキスト用に -webkit- アンチエイリアシングを追加します。
• postcss-modules は、CSS Modules をどこでも使用できるようにします。
• postcss-momentum-scrolling は、iOS でのオーバーフローを持つ要素に、慣性スクロール動作 (-webkit-overflow-scrolling:touch) を追加します。
• postcss-mq-keyframes は、メディアクエリ内のアニメーションキーフレームをファイルの末尾に移動します。
• postcss-mq-last は、メディアクエリのルールをファイルの末尾に移動することで優先順位を与えます。
• postcss-node-modules-replacer は、node_modules を含むパスを ~ に置き換えます。
• postcss-plugin-namespace は、すべてのルールに CSS セレクタを追加し、CSS ファイルが他の要素に影響を与えないようにします。
• postcss-prefix-hover は、:hover を含むすべてのセレクタにプレフィックスを追加します。
• postcss-pseudo-content-insert は、:before および :after に content: '' がない場合に追加します。
• postcss-pseudo-element-cases は、.style::BEFORE を .style::before に、またはその逆に変換します。
• postcss-pseudo-element-colons は、.style:before を .style::before に、またはその逆に変換します。
• postcss-pseudo-elements-content は、:before-c および :after-c に content: '' を追加します。
• postcss-pxtorem は、ピクセル単位を rem に変換します。
• postcss-raw は、@raw アットルール内のノードが他のプラグインによって変更されないように保護します。
• postcss-remove-prefixes は、ベンダープレフィックスを削除します。
• postcss-rtlcss は、1 つの CSS ファイルで左から右および右から左のルールを作成します。
• postcss-safe-important は、スタイルの宣言に !important を安全に追加します。
• postcss-sanitize は、ルールを使用してプロパティと値を削除します。
• postcss-scopify は、各セレクタにユーザー入力のスコープを追加します。
• postcss-select は、セレクタリストに基づいてルールを選択します。
• postcss-selector-prefixer は、CSS セレクタにプレフィックスを追加します。
• postcss-shorthand-expand は、ショートハンドプロパティを展開します。
• postcss-simple-trig は、三角関数 (sin/cos/tan) を計算します。
• postcss-sorting は、指定された順序でルールコンテンツをソートします。
• postcss-sort-media-queries は、モバイルファーストまたはデスクトップファーストの方法で CSS メディアクエリを結合およびソートします。
• postcss-style-guide は、スタイルガイドを自動的に生成します。
• css-declaration-sorter は、特定の順序で CSS 宣言を高速かつ自動的にソートします。
• perfectionist は、記述の悪い CSS をフォーマットし、「きれいな」結果をレンダリングします。
• rtlcss は、右から左のロケール用にスタイルをミラーリングします。
• stylefmt は、stylelint とうまく連携する最新の CSS フォーマッタです。
• postcss-autocorrect は、タイプミスを修正し、コンソールで通知します。
• postcss-px-to-viewport は、px 単位からビューポート単位 (vw, vh, vmin, vmax) を生成します。
• postcss-viewport-height-correction は、100vh がモバイルブラウザの画面に収まらないという一般的な問題を解決します。
• postcss-unit-processor は、CSS 単位の柔軟な処理を行います。
• postcss-rem-to-px は、rem 値を px 値に変換します。
• postcss-design-tokens は、CSS 内で JS または JSON で表現されたデザイントークンを取得する機能を提供します。
• postcss-pixel-to-remvw は、px を rem と vw の両方に変換し、どちらか一方にも変換します。
• postcss-easy-import は、追加機能を使用して @import ルールコンテンツをインライン化します。
• postcss-plugin-ignore-file は、トップコメント /* @ignore */ を持つファイルを無視します。

分析

• postcss-bem-linter は、SUIT CSS メソッド論への準拠について CSS をリントします。
• postcss-cssstats は、CSS 統計情報を含むオブジェクトを返します。
• postcss-regexp-detect は、CSS 宣言で正規表現を検索します。
• css2modernizr は、CSS が使用するテストのみを必要とする Modernizr 設定ファイルを作成します。
• doiuse は、Can I Use のデータを使用して、ブラウザのサポートについて CSS をリントします。
• immutable-css は、クラスの変更について CSS をリントします。
• list-selectors は、コードレビューのために、CSS で使用されているセレクタをリスト化および分類します。

レポーター

• postcss-browser-reporter は、他のプラグインからの警告メッセージをブラウザに表示します。
• postcss-forced-variables は、指定されたプロパティが変数を使用していない場合に警告とエラーを提供します。
• postcss-reporter は、コンソールに他のプラグインからの警告やその他のメッセージをログに記録します。

おもしろ

• postcss-australian-stylesheets オーストラリアのスタイルシート。
• postcss-andalusian-stylesheets アンダルシアのスタイルシート。
• postcss-aze-stylesheets アゼルバイジャンのスタイルシート。
• postcss-canadian-stylesheets カナダのスタイルシート。
• postcss-chinese-stylesheets 中国のスタイルシート。
• postcss-czech-stylesheets チェコのスタイルシート。
• postcss-german-stylesheets ドイツのスタイルシート。
• postcss-italian-stylesheets イタリアのスタイルシート。
• postcss-russian-stylesheets ロシアのスタイルシート。
• postcss-swedish-stylesheets スウェーデンのスタイルシート。
• postcss-tatar-stylesheets タタールのスタイルシート
• postcss-trolling トローリングスタイルシート。
• postcss-lolcat-stylesheets ロールスピークスタイルシート。
• postcss-imperial は、長さのインペリアル単位および米国慣用単位の CSS サポートを追加します。
• postcss-russian-units は、長さのロシア単位の CSS サポートを追加します。
• postcss-pointer は、pointer: cursor を cursor: pointer に置き換えます。
• postcss-spiffing は、CSS でイギリス英語を使用できるようにします。
• postcss-spanish-stylesheets スペインのスタイルシート。
• postcss-nope は、none の代わりに nope を記述できるようにします。
• postcss-glitch は、テキストにグリッチ効果を追加します。
• postcss-khaleesi は、CSS の値とプロパティを khaleesi meme 言語に翻訳します。