PostCSSで入れ子を実現できるプラグイン「postcss-nesting」使用時に起きる問題と解決法

web制作

cssのポストプロセッサPostCSSは使用したい機能だけを利用してcssを加工するツールです。非常にたくさんのプラグインが存在しその種類によってはSASSの機能を再現することが可能です。SASSでは非常に使用頻度が高い入れ子表記を実現可能にするプラグインpostcss-nestingを使用時にちょっと気になる問題があったのでその問題と解決策を紹介します。

目次
  1. 問題１） Sassの&（アンパサド）のように親要素の名前をclass名に出力することはできない。よってBEMの時によく使う子要素の命名tipsが使用できない。
  2. ■解決方法
  3. 問題２）出力されたソースのインデントが気持ち悪い
  4. ■解決策

問題１） Sassの&（アンパサド）のように親要素の名前をclass名に出力することはできない。よってBEMの時によく使う子要素の命名tipsが使用できない。

.button {

    // 本来なら .button__textと出力してほしいがこれは意図したとおりにならない
    &__text {
        color: black;
    }
}

■解決方法

postcss-nestingではなく類似プラグインpostcss-nestedを使う

問題２）出力されたソースのインデントが気持ち悪い

例）

  • 入力元ファイル
.foo {

  .bar {
    font-size: 2rem;
  }

  &__fuz {
    font-size: 2rem;
  }
}
  • 出力ファイル
.foo .bar {
    font-size: 2rem;
  }

  .foo__fuz {
    font-size: 2rem;
  }

■解決策

stylelintを導入して別スクリプトで整形する。

stylelint-config-standardを設定ファイルとしてstylelintコマンドを–fixオプション付きで使用するとインデントが消えます。（stylelint-config-recommendedだとこうはなりません）

他にもstylelint-config-primerというgituhubのcssコーディング規約がありこちらもインデントを消すことができます。

さらにstylelintで順番を入れ替えると良いです。並べ替えにはstylelintのプラグインstylelint-config-recess-orderを使うのがおすすめです。

※recessとはTwitter社が公開していたcssを整形するツール「RECESS」の事を指す
※RECESSのように並べ替えて整形しますよということ
※RECESSは今はアーカイブに変わっている（現役ではない）