はじめに
2024年11月26日に@eslint/cssが誕生しました。
この記事ではこのプラグイン(v0.1.0時点)で設定可能なルールを紹介します。
v0.1.0の@eslint/cssを利用するには、ESLintのv9.6.0以上でFlat Configを利用する必要があります
Rules
@eslint/cssにはno-duplicate-importsとno-empty-blocks、no-invalid-at-rules、no-invalid-propertiesの4つのルールがあります。
recommendedを設定することで、すべてのルールがerrorとして設定されます。
各ルールに細かな設定はないので特定のルールをどうしてもoffにしたい場合以外はrecommendedを利用するで問題ないと考えています。
import css from "@eslint/css";
export default [
{
files: ["**/*.css"],
language: "css/css",
...css.configs.recommended,
},
];
以後各ルールについて紹介しますが、それぞれの動作はstackbiltzで作成した検証環境を用いて確認しました。
no-duplicate-imports
@importの重複を禁止するルールです。
@import "xxx.css";
@import "yyy.css";
@import "zzz.css";
/* 🙅Invalid🙅 */
@import "xxx.css";
/* 🙅Invalid🙅 */
@import url(yyy.css);
/* 🙅Invalid🙅 */
@import url("zzz.css");
<string>だけではなく、<url>で記述されていた場合の重複も確認してくれます。
no-empty-blocks
中括弧に記述される宣言が空であることを禁止するルールです。
/* 🙅Invalid🙅 */
* {}
/* 🙅Invalid🙅 */
div {
}
/* 🙅Invalid🙅 */
#block {
}
/* 🙅Invalid🙅 */
.block {
/* comment */
}
/* 🙅Invalid🙅 */
@supports (display: grid) {
}
コメントを含めてブロック内にコンテンツの宣言がない場合にエラーとなります。
no-invalid-at-rules
無効なアットルールを宣言することを禁止するルールです。
/* 🙅Invalid🙅 */
@importt "aaa.css";
/* 🙅Invalid🙅 */
@property primary-color {
syntax: "<color>";
inherits: false;
initial-value: #f766e;
}
/* 🙅Invalid🙅 */
@property --primary-color {
syntax: "<color>";
inherits: false;
value: #f766e;
}
/* 🙅Invalid🙅 */
@property --primary-color {
syntax: #f766e;
}
- 1つ目のブロックはアットルールとして存在しない
@importtを利用している - 2つ目のブロックは
preludeの中身の#fffが<scope-start>の型に一致しない - 3つ目のブロックは
@propertyに定義されていないvalueが記述されている - 4つ目のブロックは
@propertyが持つsyntaxにCSS型以外の値を渡している
上記の理由でサンプルコードではエラーが起きています。このルールは以上の4種類のエラーを検知でき、抽象化すると以下のとおりです。
- 存在しないアットルール
- 無効な
prelude - アットルールに対する存在しないプロパティ
- アットルールのプロパティに対する無効な値
no-invalid-properties
無効なコンテンツの宣言を禁止するルールです。
/* 🙅Invalid🙅 */
main {
/* bgは存在しないプロパティ */
bg: #fff;
/* colorは<color>を値として受け取る <length>は受け取れない */
color: 14px;
}
コンテンツのキーが有効であることはもちろん、値が定められた型じゃない場合でもエラーになります。
おわりに
公式に追加されたESLintのCSSについてのプラグインを確認しました。
スペルミスやリファクタリング時の調整漏れ、誤ったCSSの記述などを正してくれる優れたプラグインだと感じました。