[Stylelint] PostCSS,Sassで定義したmixinを使用することを強制する

はじめに

PostCSSやSCSSを使用して開発するときに、mixinを使って共通のCSSスタイルを繰り返し使用したい時などがあるかと思います。
例えば下記のベンダープレフィック付きのtransformのような場合です。

// mixinの定義
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.class { 
  @include transform(rotate(30deg));  // mixinの使用
}

このようなmixinを定義したとき、プロジェクト全体でmixinを介してtransformを使用するコーディングルールにしたくなると思います。今回はそれを実現する方法を紹介します。

結論、Stylelintの"property-disallowed-list"を使用する

Stylelintのproperty-disallowed-listを使用することで特定のプロパティの使用を禁止することが出来ます。

このルールでmixinを介して指定する必要のあるプロパティを禁止しつつ、lintのエラーメッセージをカスタマイズしてmixinを使用するよう促します。

{
  "rules": {
    "property-disallowed-list": ["transform", {
      "message": "mixinを使用してください。"
    }]
  }
}

おわりに

非常に薄い内容の記事になってしまい恐縮ですが、私がmixinを使用するよう強制するルールを使いたい時すぐにStylelintのproperty-disallowed-listを使用する発想に至れなかったため、同じような人の役に立てればと思い記事にしてみました。

おかしな点があればご指摘いただけますと幸いです、最後まで読んでいただきありがとうございました！