// 组件 WXSS 选择器检查(lib):供 CLI 与 UI 契约门禁共用。 // // 规则来源:微信小程序**自定义组件**的 wxss 只允许类选择器。使用标签选择器(`image`/`view`…)、 // ID 选择器(`#id`)、属性选择器(`[attr]`)时开发者工具警告: // [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) // // ⚠️ 作用域:**page 的 wxss 不受此限制**(页面不是组件)。 // 对 `miniapp/pages/` 套用本规则会产生误报,故只管 `miniapp/components/`。 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) => m.replace(/[^\n]/g, ' ')); } /** 切出所有「选择器前置文本」(`{` 之前),跳过 at-rule 与声明块内部 */ export function extractSelectorPreludes(src) { const preludes = []; let depth = 0; let buf = ''; let bufStart = 0; for (let i = 0; i < src.length; i++) { const c = src[i]; if (c === '{') { if (depth === 0) preludes.push({ text: buf, index: bufStart }); depth++; buf = ''; continue; } if (c === '}') { depth = Math.max(0, depth - 1); buf = ''; continue; } if (depth === 0) { if (buf === '') bufStart = i; buf += c; } } return preludes; } /** * 检查一段选择器前置文本是否含违规成分。 * @returns {string[]} 违规描述(去重) */ export function findViolations(selector) { const bad = []; const s = selector.trim(); if (!s) return bad; if (s.startsWith('@')) return bad; // @media / @keyframes / @import 不是选择器 // 去掉伪类/伪元素及其函数括号内容,避免把 `:nth-child(2)` 里的标识符当标签 const cleaned = s.replace(/:{1,2}[a-zA-Z-]+(\([^)]*\))?/g, '').replace(/\([^)]*\)/g, ''); for (const part of cleaned.split(',')) { const token = part.trim(); if (!token) continue; const idMatch = token.match(/#[A-Za-z_][\w-]*/); if (idMatch) bad.push(`ID 选择器 \`${idMatch[0]}\``); const attrMatch = token.match(/\[[^\]]*\]/); if (attrMatch) bad.push(`属性选择器 \`${attrMatch[0]}\``); // 标签选择器:`>`/空格/`+`/`~` 之后紧跟的裸元素名 const tagMatch = token.match(/(^|[\s>+~])([a-zA-Z][\w-]*)/); if (tagMatch) bad.push(`标签选择器 \`${tagMatch[2]}\``); } 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}[]} */ export function checkWxss(src) { const clean = stripComments(src); const out = []; for (const { text, index } of extractSelectorPreludes(clean)) { for (const v of findViolations(text)) { out.push({ line: lineOfSelector(clean, index, text), message: `${v}(选择器原文 \`${text.trim().slice(0, 60)}\`)`, }); } } return out; } export function walkWxss(dir, out = []) { let entries; try { entries = readdirSync(dir, { withFileTypes: true }); } catch { return out; } for (const e of entries) { const p = join(dir, e.name); if (e.isDirectory()) { if (!['node_modules', 'miniprogram_npm'].includes(e.name)) walkWxss(p, out); } else if (e.name.endsWith('.wxss')) { out.push(p); } } 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 };