fix(miniapp): 修复 WXSS 通配符导致编译失败,并把 WXSS 校验升级为真编译
问题
- v2 设计收敛在 app.wxss 新增 `.tap-gap > * + *`。WXSS 不支持通配符 `*`,
wcc/wcsc 编译期直接报 `error at token '*'`,整个小程序编译不过。
- 更值得警惕的是当时 19 个 UI 契约守卫全绿:静态守卫刻意只扫
`miniapp/components/`(page 的 wxss 允许标签选择器,套用会误报),
app.wxss 落在扫描范围外,且判据里根本没有通配符这一项。
修复
- 移除 `.tap-gap > * + *`。复检 v2 新增的 .tap-min / .tap-gap / .focusable / .pressable
四个工具类全仓零引用(等价能力已各自写在组件样式内,如 button/index.wxss 直接用
`min-height: var(--tap-min)`),且 `.focusable:focus` / `.pressable:active` 在 view 上
不生效(小程序须用 hover-class),属"写了等于没写",故整块移除,只保留 token。
- 修掉同块注释里的嵌套 `/* */`:内层结束标记会提前终止外层注释,其后的文字会被
当成真实样式解析。该约束已写进注释,防止后人再踩。
守卫加固
- scripts/lib/wxss-selectors.mjs
* 新增 findUniversalSelectors(通配符判据,排除 `*=` 属性匹配符与注释内星号)
* 新增 findNestedComments(注释嵌套判据)
* 修 stripComments:原实现用等长空格替换,把注释内的换行也吃掉,导致报错行号
整体偏移(实测偏差 68 行);现保留换行,并在定位时跳过选择器前的注释占位空白
- ui-tests/wxss-component-selector-contracts.mjs
* 第 1 级:miniapp/components/(原判据,保留)
* 第 2 级(新增):全量 miniapp/**/*.wxss,覆盖 app.wxss 与 pages
* 第 3 级(新增):注释嵌套
* 三级各自带正/反自检样例
新增
- scripts/miniapp-compile-check.mjs:直接调用微信开发者工具内置的 wcc/wcsc 做真编译预检
(wcsc 单独调用不解析 @import 相对路径,脚本会先内联再编译)。
CI runner 无该工具时输出 SKIPPED 并退出 0;刻意不挂进 run-ui-contracts —— 一个在 CI 里
什么都不做的守卫被计入"全绿",正是本项目反复强调的假绿。CI 拦截由上面的静态守卫承担。
验证(均实际执行)
- node scripts/miniapp-compile-check.mjs → WXSS 88 个 + WXML 86 个,0 失败
- 负向注入:把 `.tap-gap > * + *` 改回去 → 预检 FAIL(exit 1),报错与用户原始报错逐字一致
`app.wxss(364:12): error at token '*'`;已还原并复测通过
- node scripts/run-ui-contracts.mjs → 20 / 20 PASS
This commit is contained in:
+19
-32
@@ -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);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -12,9 +12,16 @@
|
|||||||
import { readFileSync, readdirSync } from 'node:fs';
|
import { readFileSync, readdirSync } from 'node:fs';
|
||||||
import { join } from 'node:path';
|
import { join } from 'node:path';
|
||||||
|
|
||||||
/** 去掉注释,并用等长空白占位以保持原始字符偏移(报错行号才准) */
|
/** 去掉注释,并用等长空白占位以保持原始字符偏移(报错行号才准)
|
||||||
|
*
|
||||||
|
* ⚠️ 2026-09-23 修正:占位必须**保留换行符**。此前用 `' '.repeat(m.length)` 会把
|
||||||
|
* 多行注释内部的换行一起吞掉,导致其后所有内容的行号整体前移(实测 app.wxss
|
||||||
|
* 报 296 行、真实位置 366 行,偏差 70 行)。原守卫只扫 components/(注释较少、
|
||||||
|
* 头注释短)所以一直没暴露;一旦把范围扩到 app.wxss(36 行头注释)立刻失真。
|
||||||
|
* 行号不可信等于守卫不可用 —— 排查时根本定位不到。
|
||||||
|
*/
|
||||||
export function stripComments(src) {
|
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 与声明块内部 */
|
/** 切出所有「选择器前置文本」(`{` 之前),跳过 at-rule 与声明块内部 */
|
||||||
@@ -74,6 +81,21 @@ export function findViolations(selector) {
|
|||||||
return [...new Set(bad)];
|
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 文件内容。
|
* 检查单个 wxss 文件内容。
|
||||||
* @returns {{line:number, message:string}[]}
|
* @returns {{line:number, message:string}[]}
|
||||||
@@ -84,7 +106,7 @@ export function checkWxss(src) {
|
|||||||
for (const { text, index } of extractSelectorPreludes(clean)) {
|
for (const { text, index } of extractSelectorPreludes(clean)) {
|
||||||
for (const v of findViolations(text)) {
|
for (const v of findViolations(text)) {
|
||||||
out.push({
|
out.push({
|
||||||
line: clean.slice(0, index).split('\n').length,
|
line: lineOfSelector(clean, index, text),
|
||||||
message: `${v}(选择器原文 \`${text.trim().slice(0, 60)}\`)`,
|
message: `${v}(选择器原文 \`${text.trim().slice(0, 60)}\`)`,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -110,4 +132,111 @@ export function walkWxss(dir, out = []) {
|
|||||||
return 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 };
|
export { readFileSync };
|
||||||
|
|||||||
@@ -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✅ 全部编译通过')
|
||||||
@@ -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,
|
// [pages/index/index] Some selectors are not allowed in component wxss,
|
||||||
// including tag name selectors, ID selectors, and attribute selectors.
|
// including tag name selectors, ID selectors, and attribute selectors.
|
||||||
// (./components/recommend-card/index.wxss:1:1092)
|
// (./components/recommend-card/index.wxss:1:1092)
|
||||||
@@ -9,13 +10,36 @@
|
|||||||
// ⚠️ 作用域刻意限定 `miniapp/components/`:**page 的 wxss 允许标签选择器**,
|
// ⚠️ 作用域刻意限定 `miniapp/components/`:**page 的 wxss 允许标签选择器**,
|
||||||
// 把本规则套到 pages 上会立刻产生误报 —— 守卫一旦有假阳性就会被绕过。
|
// 把本规则套到 pages 上会立刻产生误报 —— 守卫一旦有假阳性就会被绕过。
|
||||||
//
|
//
|
||||||
// 自检:内置正向样例(合法类选择器 + 伪类 + `>` 子选择器)与反向样例
|
// ── 第 2 级:通配符 `*` —— 编译期致命(2026-09-23 新增)─────────────
|
||||||
// (标签 / ID / 属性各一),确保判据既不全哑、也不误伤。
|
// 由来:设计收敛时在 `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 assert from 'node:assert/strict'
|
||||||
import { readFileSync } from 'node:fs'
|
import { readFileSync } from 'node:fs'
|
||||||
import { relative, resolve } from 'node:path'
|
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, '..')
|
const root = resolve(import.meta.dirname, '..')
|
||||||
// WXSS_SCAN_ROOT 仅用于负向注入自证(指向临时目录),默认 miniapp/components
|
// 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)
|
const files = walkWxss(scanRoot)
|
||||||
assert.ok(files.length > 0, `未在 ${scanRoot} 下找到任何 .wxss —— 扫描清单可能失配,拒绝报绿`)
|
assert.ok(files.length > 0, `未在 ${scanRoot} 下找到任何 .wxss —— 扫描清单可能失配,拒绝报绿`)
|
||||||
|
|
||||||
@@ -67,4 +113,66 @@ assert.deepEqual(
|
|||||||
`以下组件 WXSS 使用了不允许的选择器(开发者工具会警告,样式不生效):\n${broken.join('\n')}`,
|
`以下组件 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 处)`,
|
||||||
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user