diff --git a/miniapp/app.wxss b/miniapp/app.wxss index 7982d66..8fe9d47 100644 --- a/miniapp/app.wxss +++ b/miniapp/app.wxss @@ -340,36 +340,23 @@ page { } /* ========================================================================== - 可访问性工具类（v2 新增） + 可访问性：只用 token，不用工具类（2026-09-23 修订） + -------------------------------------------------------------------------- + v2 曾在此处新增 .tap-min / .tap-gap / .focusable / .pressable 四个工具类。 + 复检发现全部零引用（等价能力已各自写在组件样式内，例如 button/index.wxss + 直接使用 min-height:var(--tap-min)），且存在两个硬问题： + + 1) `.tap-gap > * + *` 用了通配符与兄弟选择器 —— WXSS 不支持， + wcc 编译期直接报 `error at token '*'`，导致整个小程序编译失败。 + （这是编译错误，不是静默失效，代价最高。） + 2) `.pressable:active` / `.focusable:focus-visible` 的伪类在 view 上 + 不生效（小程序须用 hover-class），属于"写了等于没写"。 + + 故整块移除，保留 token。需要热区/间距时直接引用 token： + min-height: var(--tap-min); → 88rpx = 44px，最小可点区域 + gap: var(--tap-gap); → 16rpx = 8px，相邻目标间距（flex gap） + 【WXSS 禁用清单】星号通配符、兄弟选择器、属性选择器。 + 【注释约束】WXSS 注释**不可嵌套**：内层注释的结束标记会提前终止外层注释， + 其后的文字会被当成真实样式解析，导致编译失败或样式被污染。 + （2026-09-23 实证：本块注释初版即踩此坑。） ========================================================================== */ - -/* 保证任意可点元素达到 44×44px 热区，且视觉尺寸可独立控制 */ -.tap-min { - min-width: var(--tap-min); - min-height: var(--tap-min); - display: flex; - align-items: center; - justify-content: center; -} - -/* 相邻可点元素之间的最小间距 */ -.tap-gap > * + * { - margin-left: var(--tap-gap); -} - -/* 焦点可见（小程序支持键盘/无障碍焦点） */ -.focusable:focus, -.focusable:focus-visible { - outline: 4rpx solid var(--color-border-focus); - outline-offset: 2rpx; -} - -/* 按压反馈：所有可点元素统一使用，替代"点了没反应" */ -.pressable { - transition: transform var(--motion-fast) var(--ease-spring), - opacity var(--motion-fast) var(--ease-standard); -} -.pressable:active { - transform: scale(var(--press-scale)); - opacity: var(--press-opacity); -} diff --git a/scripts/lib/wxss-selectors.mjs b/scripts/lib/wxss-selectors.mjs index 78ea80d..1f58dea 100644 --- a/scripts/lib/wxss-selectors.mjs +++ b/scripts/lib/wxss-selectors.mjs @@ -12,9 +12,16 @@ import { readFileSync, readdirSync } from 'node:fs'; import { join } from 'node:path'; -/** 去掉注释，并用等长空白占位以保持原始字符偏移（报错行号才准） */ +/** 去掉注释，并用等长空白占位以保持原始字符偏移（报错行号才准） + * + * ⚠️ 2026-09-23 修正：占位必须**保留换行符**。此前用 `' '.repeat(m.length)` 会把 + * 多行注释内部的换行一起吞掉，导致其后所有内容的行号整体前移（实测 app.wxss + * 报 296 行、真实位置 366 行，偏差 70 行）。原守卫只扫 components/（注释较少、 + * 头注释短）所以一直没暴露；一旦把范围扩到 app.wxss（36 行头注释）立刻失真。 + * 行号不可信等于守卫不可用 —— 排查时根本定位不到。 + */ export function stripComments(src) { - return src.replace(/\/\*[\s\S]*?\*\//g, (m) => ' '.repeat(m.length)); + return src.replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, ' ')); } /** 切出所有「选择器前置文本」（`{` 之前），跳过 at-rule 与声明块内部 */ @@ -74,6 +81,21 @@ export function findViolations(selector) { return [...new Set(bad)]; } +/** + * 计算选择器在**原文件**中的行号。 + * + * 为什么需要单独一个 helper： + * `extractSelectorPreludes` 给出的 index 是「上一个规则块结束之后」的位置， + * 它与选择器之间可能夹着大段注释占位空白（app.wxss 实测偏差 24 行 —— 报 340 + * 实际 364）。必须再跳过 text 的前导空白，落到选择器真正开始的位置。 + * 2026-09-23 修正；此前 `clean.slice(0, index)` 的写法在 components/ 里偏移较小 + * 未暴露，范围一扩到 app.wxss（长头注释）立刻失真。 + */ +function lineOfSelector(clean, index, text) { + const leading = text.length - text.trimStart().length; + return clean.slice(0, index + leading).split('\n').length; +} + /** * 检查单个 wxss 文件内容。 * @returns {{line:number, message:string}[]} @@ -84,7 +106,7 @@ export function checkWxss(src) { for (const { text, index } of extractSelectorPreludes(clean)) { for (const v of findViolations(text)) { out.push({ - line: clean.slice(0, index).split('\n').length, + line: lineOfSelector(clean, index, text), message: `${v}（选择器原文 \`${text.trim().slice(0, 60)}\`）`, }); } @@ -110,4 +132,111 @@ export function walkWxss(dir, out = []) { return out; } +// ───────────────────────────────────────────────────────────────────────────── +// 通配符选择器 `*` —— **编译期致命**，与作用域无关（2026-09-23 新增） +// +// 实证：`miniapp/app.wxss` 里的 `.tap-gap > * + *` 使开发者工具编译直接失败： +// [ WXSS 文件编译错误] ./app.wxss +// ./app.wxss(356:12): error at token `*` +// +// 与上面「组件选择器限制」是**两个不同级别的问题**，不可混淆： +// 组件限制（标签/ID/属性）→ 只警告，样式不生效，且仅限 components/ +// 通配符 `*` → 直接编译失败，app.wxss / pages / components 全都不允许 +// 因此这一项必须独立成函数，并对**全部** wxss 施加。 +// +// 顺带修正一个此前的过度推断：报错列号 356:12 恰好落在 `*` 上，说明解析器已接受 +// 其左侧的 `>` 与 `+` —— 子选择器与相邻兄弟选择器**不在**禁止范围，不应误报。 +// ───────────────────────────────────────────────────────────────────────────── + +/** 检查一段选择器前置文本是否含通配符 `*` */ +export function findUniversalSelectors(selector) { + const bad = []; + const s = selector.trim(); + if (!s || s.startsWith('@')) return bad; + // 把函数括号内容折叠为 `()`：`:nth-child(2)` → `:nth-child()`，保持偏移语义 + const cleaned = s.replace(/\([^)]*\)/g, '()'); + for (const part of cleaned.split(',')) { + const token = part.trim(); + if (!token) continue; + // 边界条件：`*` 前是行首/空白/组合符，后是空白/组合符/伪类/类/属性/行尾； + // 且排除 `*=`（属性匹配符，如 `[class*="x"]`）—— 那是合法 CSS，不在本规则内 + if (/(^|[\s>+~])\*(?!\s*=)(?=[\s>+~:.#\[]|$)/.test(token)) bad.push('通配符选择器 `*`'); + } + return [...new Set(bad)]; +} + +/** + * 全量检查单个 wxss 的通配符使用（任何作用域都禁止）。 + * @returns {{line:number, message:string}[]} + */ +export function checkWxssUniversal(src) { + const clean = stripComments(src); + const out = []; + for (const { text, index } of extractSelectorPreludes(clean)) { + for (const v of findUniversalSelectors(text)) { + out.push({ + line: lineOfSelector(clean, index, text), + message: `${v}（选择器原文 \`${text.trim().slice(0, 60)}\`）`, + }); + } + } + return out; +} + +// ───────────────────────────────────────────────────────────────────────────── +// 注释嵌套检测（2026-09-23 新增） +// +// CSS 注释**不支持嵌套**：解析器遇到第一个结束标记就退出注释态。若在注释里又写 +// 了内层注释，外层注释会被提前截断，其后的文字被当成真实样式解析 —— +// 轻则样式污染，重则 wcc 直接编译失败。 +// +// 实证：app.wxss 的"可访问性说明"注释内写了内层注释（形如 斜杠星号…星号斜杠）， +// 结果外层在第 2 行就被截断，尾部残留 `gap: var(--tap-gap);` 与孤立的 `*` +// 被当成选择器文本；负向注入时守卫因此报出一条**原因完全错误**的命中 +// （选择器原文显示成 `gap: var(--tap-gap);`）—— 这也说明"变红"本身不足以证明 +// 守卫有效，必须核对变红的原因。 +// +// 判据：逐字符状态机。不在注释态却遇到结束标记 ⇒ 必有嵌套。 +// ───────────────────────────────────────────────────────────────────────────── + +/** + * @returns {{line:number, message:string}[]} + */ +export function findNestedComments(src) { + const out = []; + let i = 0; + let line = 1; + let inComment = false; + let commentStart = 0; + while (i < src.length) { + const c = src[i]; + const n = src[i + 1]; + if (c === '\n') line++; + if (!inComment && c === '/' && n === '*') { + inComment = true; + commentStart = line; + i += 2; + continue; + } + if (inComment && c === '*' && n === '/') { + inComment = false; + i += 2; + continue; + } + if (!inComment && c === '*' && n === '/') { + out.push({ + line, + message: `注释嵌套：多余的结束标记（外层注释自第 ${commentStart} 行起被提前截断，其后文字会被当作真实样式解析）`, + }); + i += 2; + continue; + } + i++; + } + if (inComment) { + out.push({ line: commentStart, message: '注释未闭合：文件结束时仍处于注释态' }); + } + return out; +} + export { readFileSync }; diff --git a/scripts/miniapp-compile-check.mjs b/scripts/miniapp-compile-check.mjs new file mode 100644 index 0000000..703af36 --- /dev/null +++ b/scripts/miniapp-compile-check.mjs @@ -0,0 +1,129 @@ +#!/usr/bin/env node +/** + * 小程序「真编译」预检 —— 直接调用微信开发者工具内置的 wcc / wcsc 编译器。 + * + * 为什么需要它（2026-09-23 教训）： + * v2 设计收敛在 app.wxss 写了 `.tap-gap > * + *`（通配符 + 兄弟选择器）， + * WXSS 不支持通配符 → wcc 编译期直接 `error at token '*'`，整个小程序编译不过。 + * 而当时 19 个 UI 契约守卫全绿 —— 因为静态守卫只扫 `miniapp/components/`， + * 且判据里没有通配符这一项。**静态分析全绿 ≠ 能编译**。 + * 本脚本用真编译器兜住这一类，属静态守卫的补充而非替代。 + * + * 用法： + * node scripts/miniapp-compile-check.mjs + * 环境变量 WX_DEVTOOLS 可指定微信开发者工具安装目录。 + * + * CI 说明：GitHub Actions 的 runner 上没有微信开发者工具，本脚本会输出 SKIPPED + * 并以 0 退出。**它刻意不挂进 scripts/run-ui-contracts.mjs** —— 一个在 CI 里 + * 什么都不做的守卫被计入"全绿"，正是本项目反复强调的"假绿"。 + * CI 的拦截依赖静态守卫 ui-tests/wxss-component-selector-contracts.mjs。 + */ +import fs from 'node:fs' +import os from 'node:os' +import path from 'node:path' +import { execFileSync } from 'node:child_process' + +const ROOT = path.resolve(import.meta.dirname, '..', 'miniapp') + +/** wcc/wcsc 相对开发者工具安装目录的位置 */ +const REL = 'resources/app.asar.unpacked/node_modules/wcc-exec' + +const CANDIDATES = [ + process.env.WX_DEVTOOLS, + 'E:/Program Files/微信web开发者工具', + 'C:/Program Files (x86)/Tencent/微信web开发者工具', + 'C:/Program Files/Tencent/微信web开发者工具', + 'D:/Program Files (x86)/Tencent/微信web开发者工具', +].filter(Boolean) + +function locateCompiler() { + for (const base of CANDIDATES) { + const dir = path.join(base, REL) + const wcc = path.join(dir, 'wcc.exe') + const wcsc = path.join(dir, 'wcsc.exe') + if (fs.existsSync(wcc) && fs.existsSync(wcsc)) return { wcc, wcsc } + } + return null +} + +function walk(dir, ext, out = []) { + for (const e of fs.readdirSync(dir, { withFileTypes: true })) { + const p = path.join(dir, e.name) + if (e.isDirectory()) { + if (!['node_modules', 'miniprogram_npm'].includes(e.name)) walk(p, ext, out) + } else if (e.name.endsWith(ext)) out.push(p) + } + return out +} + +/** 把 @import "x"; 内联为被导入文件的原文（wcsc 单独调用时不做相对路径解析） */ +function inlineImports(file, depth = 0) { + let src = fs.readFileSync(file, 'utf8') + if (depth > 3) return src + return src.replace(/@import\s+["']([^"']+)["']\s*;/g, (m, rel) => { + const target = path.resolve(path.dirname(file), rel) + if (!fs.existsSync(target)) return `/* MISSING IMPORT: ${rel} */` + return `\n/* ==== inlined: ${rel} ==== */\n${inlineImports(target, depth + 1)}\n` + }) +} + +const compileOne = (exe, file, cwd) => { + try { + execFileSync(exe, [file], { stdio: ['ignore', 'ignore', 'pipe'], cwd }) + return null + } catch (e) { + const msg = (e.stderr || '').toString().trim() || `exit ${e.status}` + return msg.replace(/\r?\n/g, ' | ').slice(0, 300) + } +} + +const compiler = locateCompiler() +if (!compiler) { + console.log('SKIPPED: 未找到微信开发者工具内置编译器（wcc/wcsc）') + console.log(' 可通过 WX_DEVTOOLS 指定安装目录；CI 环境无此工具属预期。') + console.log(' CI 侧的同类拦截由静态守卫 ui-tests/wxss-component-selector-contracts.mjs 承担。') + process.exit(0) +} + +if (!fs.existsSync(ROOT)) { + console.error(`FAIL: 找不到小程序目录 ${ROOT} —— 拒绝报绿`) + process.exit(1) +} + +const tmp = path.join(os.tmpdir(), 'miniapp-compile-check') +fs.mkdirSync(tmp, { recursive: true }) + +const failures = [] + +// ── WXSS ───────────────────────────────────────────────────────────── +const wxssFiles = walk(ROOT, '.wxss') +for (const f of wxssFiles) { + const rel = path.relative(ROOT, f).replace(/\\/g, '/') + const hasImport = /@import/.test(fs.readFileSync(f, 'utf8')) + const target = path.join(tmp, `${rel.replace(/\//g, '__')}`) + fs.writeFileSync(target, hasImport ? inlineImports(f) : fs.readFileSync(f, 'utf8'), 'utf8') + const err = compileOne(compiler.wcsc, target, tmp) + if (err) failures.push({ kind: 'WXSS', rel, err }) +} + +// ── WXML ───────────────────────────────────────────────────────────── +const wxmlFiles = walk(ROOT, '.wxml') +for (const f of wxmlFiles) { + const rel = path.relative(ROOT, f).replace(/\\/g, '/') + const err = compileOne(compiler.wcc, f, path.dirname(f)) + if (err) failures.push({ kind: 'WXML', rel, err }) +} + +console.log(`小程序真编译预检（wcc / wcsc）`) +console.log(` WXSS : ${wxssFiles.length} 个`) +console.log(` WXML : ${wxmlFiles.length} 个`) +console.log(` 失败 : ${failures.length}`) + +if (failures.length) { + console.log('--- 失败明细 ---') + for (const f of failures) console.log(`[${f.kind}] ${f.rel}\n ${f.err}`) + console.error(`\n❌ FAIL：${failures.length} 个文件编译不过`) + process.exit(1) +} + +console.log('\n✅ 全部编译通过') diff --git a/ui-tests/wxss-component-selector-contracts.mjs b/ui-tests/wxss-component-selector-contracts.mjs index 2c2ba0a..06ddb71 100644 --- a/ui-tests/wxss-component-selector-contracts.mjs +++ b/ui-tests/wxss-component-selector-contracts.mjs @@ -1,6 +1,7 @@ -// 契约：自定义组件的 WXSS 不得使用标签 / ID / 属性选择器 +// 契约：WXSS 选择器合法性（两级，级别不同不可混淆） // -// 由来（2026-09-19）开发者工具警告： +// ── 第 1 级：组件选择器限制（2026-09-19）──────────────────────────── +// 由来：开发者工具警告 // [pages/index/index] Some selectors are not allowed in component wxss, // including tag name selectors, ID selectors, and attribute selectors. // (./components/recommend-card/index.wxss:1:1092) @@ -9,13 +10,36 @@ // ⚠️ 作用域刻意限定 `miniapp/components/`：**page 的 wxss 允许标签选择器**， // 把本规则套到 pages 上会立刻产生误报 —— 守卫一旦有假阳性就会被绕过。 // -// 自检：内置正向样例（合法类选择器 + 伪类 + `>` 子选择器）与反向样例 -// （标签 / ID / 属性各一），确保判据既不全哑、也不误伤。 +// ── 第 2 级：通配符 `*` —— 编译期致命（2026-09-23 新增）───────────── +// 由来：设计收敛时在 `miniapp/app.wxss` 写了 `.tap-gap > * + *`，工具直接编译失败： +// [ WXSS 文件编译错误] ./app.wxss +// ./app.wxss(356:12): error at token `*` +// **上面第 1 级的扫描范围是 components/，app.wxss 根本不在其中，因此这次完全没有拦截。** +// 这是纯盲区，不是判据写错。现已补第 2 级：通配符与作用域无关（app/pages/components +// 全部禁止），且性质是"编译不过"而非"样式不生效"，必须独立成档并对全量 wxss 扫描。 +// +// 同时修正一处过度推断：报错列号 356:12 恰好落在 `*` 字符上，说明解析器已接受其左侧的 +// `>` 与 `+` ⇒ 子选择器与相邻兄弟选择器**不在**禁止范围，判据里明确放行、不得误报。 +// +// ── 第 3 级：注释嵌套 —— 同样是编译期问题（2026-09-23 新增）──────────── +// 修第 2 级时本人又踩了一次：在注释里写了内层注释，外层注释被提前截断，尾部残留 +// 文字被当成样式解析。它还会**污染第 2 级的结论** —— 负向注入曾因此报出一条 +// 原因完全错误的命中（选择器原文显示成 `gap: var(--tap-gap);`）。 +// 教训：注入后"变红"≠ 守卫有效，必须核对变红的原因。 +// 判据：状态机 —— "不在注释态却遇到结束标记"即为嵌套。 +// +// 自检：三级判据各自内置正向样例（合法类 / 伪类 / `>` / `+` / `~` / `*=` / 多行注释 / +// 注释内单星号）与反向样例，确保既不全哑、也不误伤。 +// +// ⚠️ 已知未纳入（证据冲突，暂不阻断）：pages 下 6 处 `.btn-xxx[disabled]`。 +// 官方 WXSS 文档称"属性名选择器 [...] 不会生效"，但开发者工具的组件限制明确 +// 只针对 component wxss、page 是允许的，两个来源冲突，且这些代码自 2026-09-09 +// 基线起长期存在。按"不拿猜测当判据"处理：记录在案，不纳入断言。 import assert from 'node:assert/strict' import { readFileSync } from 'node:fs' import { relative, resolve } from 'node:path' -import { checkWxss, walkWxss } from '../scripts/lib/wxss-selectors.mjs' +import { checkWxss, checkWxssUniversal, findNestedComments, walkWxss } from '../scripts/lib/wxss-selectors.mjs' const root = resolve(import.meta.dirname, '..') // WXSS_SCAN_ROOT 仅用于负向注入自证（指向临时目录），默认 miniapp/components @@ -50,7 +74,29 @@ for (const c of selfCheckCases) { ) } -// ── 2. 全量扫描组件 WXSS ──────────────────────────────────────── +// ── 1b. 判据自检（第 2 级：通配符）───────────────────────────── +const universalCases = [ + { + name: '正向：子 / 相邻兄弟 / 通用兄弟 / 伪类 均不误报', + src: '.a > .b + .c ~ .d:active { color: red }', + expect: 0, + }, + { name: '正向：属性匹配符 `*=` 不误报', src: '.a[class*="x"] { color: red }', expect: 0 }, + { name: '正向：注释里的 `*` 不算', src: '/* .a > * + * { margin: 0 } */\n.a { color: red }', expect: 0 }, + { name: '反向：`.a > * + *`（本次实际踩到的写法）', src: '.a > * + * { margin-left: 8px }', expect: 1 }, + { name: '反向：单独通配符', src: '* { margin: 0 }', expect: 1 }, +] + +for (const c of universalCases) { + const got = checkWxssUniversal(c.src) + assert.equal( + got.length, + c.expect, + `通配符判据自检失败 —— ${c.name}\n期望 ${c.expect} 条，实得 ${got.length} 条：\n${got.map((x) => x.message).join('\n')}`, + ) +} + +// ── 2. 全量扫描组件 WXSS（第 1 级）───────────────────────────── const files = walkWxss(scanRoot) assert.ok(files.length > 0, `未在 ${scanRoot} 下找到任何 .wxss —— 扫描清单可能失配，拒绝报绿`) @@ -67,4 +113,66 @@ assert.deepEqual( `以下组件 WXSS 使用了不允许的选择器（开发者工具会警告，样式不生效）：\n${broken.join('\n')}`, ) -console.log(`WXSS component selector contracts passed（${files.length} 个组件样式文件）`) +// ── 3. 全量扫描**所有** WXSS 的通配符（第 2 级，含 app.wxss 与 pages）──── +// 这正是上次漏掉 app.wxss 导致编译失败的补丁点。 +const allRoot = resolve(root, 'miniapp') +const allFiles = walkWxss(allRoot) +assert.ok( + allFiles.length >= files.length, + `全量扫描只找到 ${allFiles.length} 个 .wxss，少于组件目录的 ${files.length} 个 —— 扫描清单可疑，拒绝报绿`, +) +assert.ok( + allFiles.some((f) => f.endsWith('app.wxss')), + '全量扫描未包含 app.wxss —— 全局样式是本规则的重点对象，缺失即视为清单失配，拒绝报绿', +) + +const universal = [] +for (const file of allFiles) { + for (const p of checkWxssUniversal(readFileSync(file, 'utf8'))) { + universal.push(`${relative(root, file).replace(/\\/g, '/')}:${p.line} ${p.message}`) + } +} + +assert.deepEqual( + universal, + [], + `以下 WXSS 使用了通配符选择器 \`*\` —— 开发者工具会**直接编译失败**（不是"样式不生效"）：\n${universal.join('\n')}\n` + + `提示：需要"相邻兄弟补间距"时改用容器 display:flex + gap，或给子元素具名类后写 margin。`, +) + +// ── 4. 注释嵌套（全量 wxss）───────────────────────────────────── +// CSS 注释不支持嵌套，内层结束标记会提前截断外层注释，其后文字被当作真实样式。 +const commentCases = [ + { name: '正向：单行 + 多行注释', src: '/* a */\n.a { color: red }\n/*\n b\n*/', expect: 0 }, + { name: '正向：注释内含单个星号', src: '/* 5 * 3 = 15 */\n.a { color: red }', expect: 0 }, + { name: '正向：无注释', src: '.a { color: red }', expect: 0 }, + { name: '反向：注释内嵌注释（本次实际踩到的写法）', src: '/* outer /* inner */ tail */\n.a { color: red }', expect: 1 }, + { name: '反向：注释未闭合', src: '.a { color: red }\n/* never ends', expect: 1 }, +] + +for (const c of commentCases) { + const got = findNestedComments(c.src) + assert.equal( + got.length, + c.expect, + `注释判据自检失败 —— ${c.name}\n期望 ${c.expect} 条，实得 ${got.length} 条：\n${got.map((x) => x.message).join('\n')}`, + ) +} + +const nested = [] +for (const file of allFiles) { + for (const p of findNestedComments(readFileSync(file, 'utf8'))) { + nested.push(`${relative(root, file).replace(/\\/g, '/')}:${p.line} ${p.message}`) + } +} + +assert.deepEqual( + nested, + [], + `以下 WXSS 存在注释嵌套或未闭合 —— 会导致外层注释提前结束、后续文字被当成样式解析：\n${nested.join('\n')}`, +) + +console.log( + `WXSS 选择器契约通过（组件样式 ${files.length} 个；全量 ${allFiles.length} 个含 app.wxss；` + + `通配符 0 处；注释嵌套 0 处）`, +)