chore(quality): 接入 ESLint 与 GitLab CI,开启严格未用检查,构建期设计令牌守卫
- eslint.config.mjs(flat config):react-hooks/react-refresh/tseslint;自定义 no-restricted-syntax 规则禁止 className 手拼基元类名(error 级,JSXAttribute 选择器精确限定,探针双向验证)与硬编码色值 - tsconfig:noUnusedLocals/noUnusedParameters 置 true - package.json 新增 typecheck/lint/test/verify:tokens 脚本;build 串联令牌校验(verify-tokens.sh 防止 <alpha-value> 类静默失效回归);pnpm-lock.yaml 入库供 CI --frozen-lockfile - .gitlab-ci.yml:lint/typecheck/test/build 四作业,MR 与默认分支触发,dist 产物留存一周
This commit is contained in:
Executable
+46
@@ -0,0 +1,46 @@
|
||||
#!/bin/sh
|
||||
# 设计令牌完整性守卫 —— 确认关键颜色类真的生成了 CSS。
|
||||
#
|
||||
# 背景:把商标色改为 CSS 变量时踩过一个坑 —— 变量若写成完整十六进制
|
||||
# (#9E1B1B)而非 RGB 三元组(158 27 27),Tailwind 的透明度修饰符
|
||||
# (bg-press-wash/60)会**静默不生成任何 CSS**。构建通过、类型检查通过、
|
||||
# 控制台无警告,只是样式没了。这类问题只能靠检查产物发现。
|
||||
#
|
||||
# 用法: pnpm build && sh scripts/verify-tokens.sh
|
||||
set -e
|
||||
|
||||
CSS=$(ls dist/assets/*.css 2>/dev/null | head -1)
|
||||
if [ -z "$CSS" ]; then
|
||||
echo "✗ 未找到构建产物 CSS,请先执行 pnpm build"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
fail=0
|
||||
check() {
|
||||
if grep -q -F -- "$1" "$CSS"; then
|
||||
echo " ✓ $1"
|
||||
else
|
||||
echo " ✗ $1 缺失"
|
||||
fail=1
|
||||
fi
|
||||
}
|
||||
|
||||
echo "校验设计令牌在构建产物中的存在性:"
|
||||
check '.bg-press{'
|
||||
check '.text-ink-900{'
|
||||
check '.bg-paper-50{'
|
||||
check '.border-press{'
|
||||
check 'press-wash\/60'
|
||||
check '.masthead-rule{'
|
||||
check '--press:'
|
||||
|
||||
if [ "$fail" -ne 0 ]; then
|
||||
echo ""
|
||||
echo "设计令牌校验失败。"
|
||||
echo "最常见原因:tailwind.config.js 中颜色值未写成"
|
||||
echo " 'rgb(var(--x) / <alpha-value>)'"
|
||||
echo "而写成了完整十六进制或 'var(--x)' —— 前者会丢掉透明度修饰符。"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo "设计令牌校验通过"
|
||||
Reference in New Issue
Block a user