#490 [Stylelint] disallowed-listを指定する時は回答を用意する

[tak-dcxi]

変更内容

• 既存の packages/@d-zero/stylelint-config/values.js にメッセージを追加
• v- 単位を禁止して sv dv lvを利用するように強制
  • v- 単位はアプリ内ブラウザで挙動に差異があるため

オプション

追加で以下の2点を導入しています。取り込むも取り込まないのも自由

• display の単一構文を禁止（ボックスモデルの理解を深める、inline-blockなどがになっているなどの理由）
• z-index は全て変数管理

以下は自分のz-indexの管理を引用したもの

/* ======================================================
//
//  MARK: 　z-index
//  サイト全体で使用する `z-index` の定義を行います。
//
//  `z-index`は原則的には次のように管理します。
//  - その`z-index`が絶対的なもの(固定配置のコンテンツやドロワーなどの重ね順など)か相対的なもの(コンポーネントルートを基準とした重ね順など)かに分ける
//  - 絶対的な`z-index`は 10 の倍数で グローバル変数で管理する。
//  - 相対的な`z-index`は原則的に`z-index`は使わずに DOM の順番で制御する。指定する必要がある場合は 1(前面) か -1(背面) のみ使用する。
//  - コンポーネント同士の衝動を防ぐために相対的な`z-index`を含むコンポーネントの body には`isolation:isolate`を指定してスタッキングコンテキストを生成しておく。
//  - モーダルやローディングなどの絶対表面に出す必要がある要素には`z-index:calc(infinity)`を指定する
//
//  ルールを厳守するため、`z-index: 1` `z-index: -1` も含めてグローバル変数で定義されたカスタムプロパティのみをLintを使用し縛るようにします。
//
// ====================================================== */
@property --stack-top {
  syntax: '<integer>';
  inherits: false;
  initial-value: calc(infinity);
}

@property --stack-skip-link {
  syntax: '<integer>';
  inherits: false;
  initial-value: 30;
}

@property --stack-header {
  syntax: '<integer>';
  inherits: false;
  initial-value: 20;
}

@property --stack-footer {
  syntax: '<integer>';
  inherits: false;
  initial-value: 10;
}

@property --stack-forwards {
  syntax: '<integer>';
  inherits: false;
  initial-value: 1;
}

@property --stack-backwards {
  syntax: '<integer>';
  inherits: false;
  initial-value: -1;
}

[dz-furukawa]

オプションを含めた各変更点について、「なぜ禁止なのか」「代わりに何を使うべきか」が明示的に示されており、開発者体験の向上に繋がる適切な改善だと思います。Approveいたします。

[arktds]

@tak-dcxi
プルリクありがとうございます！
また、「2値構文」から「複数キーワード構文」への変更も確認できました👍

z-indexの変数管理とcontentプロパティの値は議論が必要かなと思い、ひとまず保留させてください。
以下、転載します。

z-index の変数管理

z-index の変数管理は賛同しますが、（warning ではあるものの）ガイドラインとして適用するには事前周知・議論が必要かなと思いました！

content プロパティの値

return `Unicode値 "${value}" を直接指定せず、代わりに命名されたエンティティ（例: ©）またはCSS変数を使用してください。`;

これって CSS で Unicode 指定はやめようという主張ですよね？
例ではありますが、© のようなエンティティは（文字コード周りの特別な理由を除いて）使用しないことになっているので、何かしらリライトしたほうがよいかなと思いました！
https://guidelines.d-zero.co.jp/html/style.html#%E6%96%87%E5%AD%97%E5%8F%82%E7%85%A7

[arktds]

@tak-dcxi
お待たせしました！
z-index の件はそのまま採用させてください。
content の件はメッセージを次に変更をお願いいたします🙏

return `Unicode値 "${value}" を指定せず、表示したいテキストをそのまま指定してください。`;

[tak-dcxi]

@tak-dcxi お待たせしました！ z-index の件はそのまま採用させてください。 content の件はメッセージを次に変更をお願いいたします🙏

return `Unicode値 "${value}" を指定せず、表示したいテキストをそのまま指定してください。`;

対応しました。