Stylelint による倫理プロパティ強制は stylelint-plugin-logical-css がよさそう

投稿

CSS で倫理プロパティ、倫理値を強制する Stylelint のプラグインは複数存在しますが、左横書きコンテンツ前提であれば stylelint-plugin-logical-css(GitHub) がいい感じだったので紹介します。

バージョン 1.0.0 がリリースされたのが去年の年末（2023年12月30日）と比較的新興のプラグインで、他の著名なプラグインと比べれば利用者も少ないのですが、以下のような特徴（良い点）を持っています。

  • margin-* や width だけでなくマイナーなプロパティにも対応
  • vw → vi など単位の変換も可能
  • 任意のプロパティ、単位を除外設定できる

倫理プロパティと倫理値の一覧は MDN ページにまとまっています(developer.mozilla.org) が、contain-intrinsic-* などのマイナーなプロパティにも対応しているプラグインは他に見当たりません。

また、overflow-* の倫理プロパティはブラウザのサポートが進んでいないため（2024年5月現在は Firefox のみが対応）、現状は物理プロパティで対応せざるを得ません。他のプラグインはそもそも overflow-* に対応していないところ、本プラグインは対応したうえで以下のように除外設定ができるところに将来的な安心感があります。

{
  "rules": {
    "plugin/use-logical-properties-and-values": [
      true,
      {
        "severity": "warning",
        "ignore": ["overflow-y", "overflow-x"]
      }
    ]
  }
}

一方でこのプラグインは左横書きのコンテンツ前提の挙動をしており、--fix(stylelint.io) による自動修正では margin-left は強制的に margin-inline-start に変換されてしまいますから、右書きや縦書きコンテンツに導入するのは難しいかもしれません。他のプラグインでは設定で右書きコンテンツにも対応できるものがあるので、そのあたりは今後の機能追加に期待したいところです。