フロントエンド開発でCSSのコンパイルや最適化を効率化したいと考えている方に、PreprosとPostCSSを組み合わせた開発環境の構築方法を解説します。コマンドライン不要で、GUIから直感的に操作できるのがPreprosの強みです。

    Preprosとは

    Preprosは、フロントエンド開発用のGUIビルドツールです。
    買い切り型（$29／無料でも使えます）で、以下の機能を提供します：

    主な特徴

    • プリプロセッサの自動コンパイル

      • HTML: Pug、Haml、Slim、Markdown
      • CSS: Sass、Less、Stylus、Tailwindcss
      • JS: Babel、CoffeeScript、バンドル機能

    • ファイル監視と自動リロード

      • ファイルを編集すると自動的にコンパイル
      • ブラウザの自動リフレッシュ

    • 外部サーバー対応

      • XAMPP、MAMP、WordPressなどへのプロキシ機能

    • 柔軟な出力設定

      • 個別ファイルごとに出力先を指定
      • 相対パス指定やパスの置換が可能

    公式サイト: https://prepros.io

    基本的な使い方

    1. プロジェクトの追加・設定

    フォルダをPreprosのウィンドウにドラッグ&ドロップするだけでプロジェクトが追加されます。
    Preprosは優れたデフォルト設定を持っているため、すぐに使い始められます。細かいカスタマイズは「Project Settings」から行います。

    2. 出力オプションの設定

    個別ファイルの出力先

    ファイルオプションサイドバーで出力パスをクリックして設定します。

    全ファイルの出力設定

    「Project Settings → File Type」から一括設定が可能です。

    Suffix（サフィックス）

    • デフォルト: -dist
    • 変更例: .min や .compiled

    Output Extension（拡張子変更）

    • 例: .pug → .php

    PostCSSとの連携

    PreprosはPostCSSとの連携が可能で、強力なCSS最適化が実現できます。

    パッケージのインストール

    「Packages」タブから以下をインストール：

    • postcss-cli v10.1
    • postcss-preset-env
    • css-declaration-sorter
    • postcss-discard-duplicates
    • postcss-merge-rules
    • postcss-combine-duplicated-selectors

    カスタムコマンドの設定

    ≡ → Project Settings → CSS Tools → CSS → Tasks で以下を追加：

    postcss {{input}} -o {{output}}

    ⚠️ 重要: postcss-cli v11では構文が変更されているため、v10.1を使用してください。v11では上記コマンドが動作しません。

    postcss.config.jsの作成

    プロジェクトルートに postcss.config.js を作成：

    module.exports = {
  plugins: {
    'postcss-preset-env': { stage: 3 },    // 最新CSS機能を古いブラウザ用に変換（ポリフィル）
    'css-declaration-sorter': { order: 'concentric-css' },           // CSSプロパティをソート
    'postcss-discard-duplicates': {},                           // 重複したルールセットを削除
    'postcss-merge-rules': {},                                // 同じセレクタのルールをマージ
    'postcss-combine-duplicated-selectors': {},                         // 重複セレクタを統合
  }
}

    css-declaration-sorterのソート順

    • 'alphabetical' - アルファベット順
    • 'smacss' - SMACSS方式
    • 'concentric-css' - 外側から内側へ（おすすめ）

    おすすめのプラグイン構成

    重複削除系

    postcss-discard-duplicates
    完全に重複したルールセットを削除します。

    postcss-merge-rules
    同じセレクタのルールをマージします。

    postcss-combine-duplicated-selectors
    さらに強力な重複削除を提供します。

    最適化系

    postcss-preset-env
    最新のCSS機能を古いブラウザでも動作するコードに変換します。

    • CSSネスト記法の展開
    • :is(), :where() の互換コード生成
    • 最新カラー関数の変換
    • Custom Propertiesのフォールバック

    メディアクエリの整理

    postcss-sort-media-queriesを使用すると、メディアクエリをモバイルファースト順に整理できます。ただし、元の記述順を保ちたい場合はコメントアウトしておくのがおすすめです。

    // 'postcss-sort-media-queries': {},  // 必要に応じて有効化

    その他のプラグイン

    • postcss-nested - Sassライクなネスト
    • postcss-custom-media - メディアクエリを変数化
    • postcss-mixins - mixin機能
    • postcss-discard-comments - コメント削除
    • postcss-normalize-whitespace - 不要な空白削除

    Preprosのデフォルト機能で十分なもの

    以下はPreprosに標準搭載されているため、別途インストール不要です：

    • Autoprefixer - ベンダープレフィックスの自動追加
    • Minify - CSS圧縮

    トラブルシューティング

    postcss-cli v11でエラーが出る場合

    症状

    Input Error: You must pass a valid list of files to parse

    原因
    postcss-cli v11では構文が変更され、Preprosの {{output}} プレースホルダーと互換性がありません。

    解決方法

    1. Packagesタブで postcss-cli をクリック
    2. Versionドロップダウンから 10.1.0 を選択
    3. Installをクリック
    4. コマンドを確認: postcss {{input}} -o {{output}}

    まとめ

    PreprosとPostCSSを組み合わせることで、以下のメリットが得られます：

    ✅ コマンドライン不要のGUI環境
    ✅ 自動コンパイル＆ブラウザリロード
    ✅ CSSの重複削除と最適化
    ✅ プロパティの自動ソート
    ✅ 最新CSS機能のブラウザ互換性確保

    この構成を使えば、効率的で保守性の高いCSS開発が実現できます。ぜひお試しください！

    参考リンク