Mechanize UI color token enforcement check

オープン
#578 コメント 1 件 リアクション 0 件 担当者 1 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@ArthurArthurArthur0817 がすでに取り組んでいます。

2026年11月4日 から。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
68/100
issue の種類
機能追加
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
css, python, shell
領域
testing, tooling

調査の方向性

Start by reading scripts/test.sh and the project’s CSS token guidance to understand how checks are run and which token-definition blocks are exempt. Add the checker at scripts/check-css-tokens.py and cover it in tests/scripts/test_check_css_tokens.py; run the unit tests and bash scripts/test.sh. Done means hardcoded colors outside exempt blocks are reported with file and line, while permitted tokens, comments, and strings do not cause false positives.

索引モデルが issue の本文から書いたものです。

説明

Summary

Adds an automated CSS color token enforcement tool in scripts/check-css-tokens.py to mechanize stylesheet color rules and prevent interface styles from hardcoding literal color values (Hex/RGB/HSL).

Motivation & Context

As described in the "Strengthening skills: code checking and progressive review" section of subsequent contribution directions, project guidelines require UI colors to use CSS tokens (var(--...)) to maintain consistency across themes (light/dark modes). However, this rule is not yet mechanized and relies entirely on manual code reviews. This creates unnecessary review overhead and allows hardcoded colors—such as fixed hex values failing on light backgrounds—to slip into the codebase.

Changes
  1. Add checker script (scripts/check-css-tokens.py):
    • Scans CSS files under web/.
    • Excludes :root and theme-specific token definition blocks, then checks remaining CSS rules for hardcoded literal color values (#hex, rgb(), rgba(), hsl(), etc.).
    • Reports exact file paths, line numbers, and offending values upon detecting violations, exiting with a non-zero status code (1).
  2. Integrate into local test gates:
    • Adds the checker to scripts/test.sh so style rules are validated automatically during the test run.
  3. Add test coverage (tests/scripts/test_check_css_tokens.py):
    • Implements unit tests for the script covering valid var(--...) usage, permitted comments/strings, and interception of prohibited literal color formats to ensure zero false positives and reliable detection.
Testing
  • Script unit tests pass: python3 -m unittest tests/scripts/test_check_css_tokens.py (or pytest tests/scripts/test_check_css_tokens.py).
  • Full local test suite passes with no regressions: bash scripts/test.sh.
  • Intentionally introduced #ff0000 into web/styles.css to verify that the script pinpoints the offending line and halts the build.
主要言語
Rust
スター
223
フォーク
148
平均マージ
1日 11時間
マージ済み PR(30日)
224

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

sysprog21/codetrial のほかの issue

sysprog21/codetrial の issue をすべて見る

似ている issue

Rust の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。