shangfangjian
e6373d3c9a
- 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 产物留存一周
47 lines
1.3 KiB
Bash
Executable File
47 lines
1.3 KiB
Bash
Executable File
#!/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 "设计令牌校验通过"
|