CSS: StylelintでCSS変数で定義しているデザイントークンの利用を強制するメモ📝

Tailwind CSSのメリットとしてtailwind.config.jsでデザイントークンを定義し、それをユーティリティクラスとして提供して利用することでルールに基づいた値でスタイリングできるというものがあると思います。

Tailwindでは、ユーティリティクラスで使用できる値をあらかじめ定義できるようになっています。これによって、ルールに基づいた値だけを使ってスタイリングできるようになっています。 Tailwind CSS実践入門 第1章 ユーティリティファーストとは何か ──従来の課題を解決する大胆なアプローチ | gihyo.jp

CSS変数を使って管理する際にもこのような制約をつけられないかと思い調べたところ、

developer.mozilla.org

Stylelintのdeclaration-property-value-allowed-listを使ってプロパティ単位に設定できる値を制限することで一定デザイントークンへの準拠を静的解析で強制することができそうに思ったのでやり方をメモ📝

stylelint.io

例えば以下のようにcolorのデザイントークンをCSS変数で管理していたといます。

:root {
  --black: #0a0a0a;
  --grey: #7a7a7a;
  --white: #fff;
  --primary: #00d1b2;
  --danger: #f14668;
}

しかし、何もしないと以下のような任意の色の利用を防ぐにはコードレビュー等で注意するしかありません。

.sample-selector {
  color: #000 /* `var(--black)`を使って欲しい */
}

Stylelintのdeclaration-property-value-allowed-listを使うとプロパティ毎に許可する値を指定できるので、これをエラーにすることができます👮

declaration-property-value-allowed-list Specify a list of allowed property and value pairs within declarations. declaration-property-value-allowed-list | Stylelint

以下のように設定するとcolorを持つプロパティ(color, background-color等)でCSS変数の利用(varが含まれる)を強制することができます。

module.exports = {
  extends: ["stylelint-config-standard"],
  rules: {
    // デザイントークンで管理しているものは変数の利用を強制する
    "declaration-property-value-allowed-list": {
      "/color/": ["/var/", "unset", "initial", "inherit"],
    },
  },
};

以下のようにStyllelintによる静的解析でエラーになります。

2:8  ✖  Unexpected value "#000" for property "color"  declaration-property-value-allowed-list