@open-dy/vibecoding-cli 0.0.1-beta.1

package/src/adapters/interest-card/opencard/lint-lynx-css.mjs

@@ -0,0 +1,676 @@
+#!/usr/bin/env node
+/**
+ * opencard Lynx CSS 机械禁写检查：扫 src 下 css，并对照 TSX 中 Text 的 class。
+ * 规则见 lynx-css-rules.mjs；inline style 由 eslint-plugin-opencard-taro 复用同一套规则。
+ */
+import fs from 'node:fs';
+import path from 'node:path';
+import { createRequire } from 'node:module';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import {
+  formatFinding,
+  isTextContainerDeclaration,
+  lintAtRule,
+  lintDeclaration,
+  lintSelector,
+} from './lynx-css-rules.mjs';
+
+const __dirname = path.join(process.env.VIBECODING_OPENCARD_ROOT || process.cwd(), 'scripts');
+const ROOT = path.resolve(__dirname, '..');
+const SRC = path.join(ROOT, 'src');
+const require = createRequire(path.join(ROOT, 'scripts', 'package.json'));
+
+// Keep string literals intact: comment delimiters inside quoted URLs are data.
+function scanComments(source) {
+  const chars = source.split('');
+  const errors = [];
+  let quote = '';
+  for (let i = 0; i < source.length; i += 1) {
+    if (quote) {
+      if (source[i] === '\\') i += 1;
+      else if (source[i] === quote) quote = '';
+      continue;
+    }
+    if (source[i] === '"' || source[i] === "'") {
+      quote = source[i];
+      continue;
+    }
+    if (source.slice(i, i + 2) === '*/') {
+      errors.push({ index: i, message: '孤立的 CSS 注释结束符 */；检查文件是否缺失开头。' });
+      i += 1;
+    } else if (source.slice(i, i + 2) === '/*') {
+      const end = source.indexOf('*/', i + 2);
+      if (end < 0) errors.push({ index: i, message: 'CSS 注释未闭合，缺少 */。' });
+      const stop = end < 0 ? source.length : end + 2;
+      for (let j = i; j < stop; j += 1) {
+        if (chars[j] !== '\n') chars[j] = ' ';
+      }
+      i = stop - 1;
+    }
+  }
+  return { content: chars.join(''), errors };
+}
+
+export function stripCommentsPreservingLines(source) {
+  return scanComments(source).content;
+}
+
+function lineAt(source, index) {
+  const before = source.slice(0, index);
+  return {
+    line: before.split('\n').length,
+    column: index - before.lastIndexOf('\n'),
+  };
+}
+
+
+
+function isQuote(ch) {
+  return ch === '"' || ch === "'";
+}
+
+function skipString(text, i, end) {
+  const q = text[i];
+  i += 1;
+  while (i < end) {
+    if (text[i] === '\\') {
+      i += 2;
+      continue;
+    }
+    if (text[i] === q) return i + 1;
+    i += 1;
+  }
+  return end;
+}
+
+function skipWs(text, i, end) {
+  while (i < end && /\s/.test(text[i])) i += 1;
+  return i;
+}
+
+function indexOfUnquoted(text, needle, from, end) {
+  let depth = 0;
+  for (let i = from; i < end; i += 1) {
+    const ch = text[i];
+    if (isQuote(ch)) {
+      i = skipString(text, i, end) - 1;
+      continue;
+    }
+    if (ch === '(') depth += 1;
+    else if (ch === ')') depth = Math.max(0, depth - 1);
+    else if (depth === 0 && ch === needle) return i;
+  }
+  return -1;
+}
+
+function matchingBrace(text, open, end) {
+  let depth = 0;
+  for (let i = open; i < end; i += 1) {
+    const ch = text[i];
+    if (isQuote(ch)) {
+      i = skipString(text, i, end) - 1;
+      continue;
+    }
+    if (ch === '{') depth += 1;
+    else if (ch === '}') {
+      depth -= 1;
+      if (depth === 0) return i;
+    }
+  }
+  return end - 1;
+}
+
+function makeLineAt(text) {
+  const starts = [0];
+  for (let i = 0; i < text.length; i += 1) {
+    if (text[i] === '\n') starts.push(i + 1);
+  }
+  return (index) => {
+    let lo = 0;
+    let hi = starts.length - 1;
+    while (lo < hi) {
+      const mid = (lo + hi + 1) >> 1;
+      if (starts[mid] <= index) lo = mid;
+      else hi = mid - 1;
+    }
+    return { line: lo + 1, column: index - starts[lo] + 1 };
+  };
+}
+
+function parseDecl(text) {
+  const colon = indexOfUnquoted(text, ':', 0, text.length);
+  if (colon < 0) return null;
+  const prop = text.slice(0, colon).trim();
+  const value = text.slice(colon + 1).trim();
+  if (!prop || !value) return null;
+  return { prop, value };
+}
+
+export function walkCss(source, onNode) {
+  const text = stripCommentsPreservingLines(source);
+  const locAt = makeLineAt(text);
+
+  function walk(start, end, inRule) {
+    let i = start;
+    while (i < end) {
+      i = skipWs(text, i, end);
+      if (i >= end) break;
+      if (text[i] === '}') return i + 1;
+
+      if (text[i] === '@') {
+        const atLoc = locAt(i);
+        let j = i + 1;
+        while (j < end && /[A-Za-z-]/.test(text[j])) j += 1;
+        const name = text.slice(i + 1, j);
+        j = skipWs(text, j, end);
+        const brace = indexOfUnquoted(text, '{', j, end);
+        const semi = indexOfUnquoted(text, ';', j, end);
+        const closer = indexOfUnquoted(text, '}', j, end);
+        const hasBrace =
+          brace >= 0 && (semi < 0 || brace < semi) && (closer < 0 || brace < closer);
+        const preludeEnd = hasBrace ? brace : semi >= 0 && (closer < 0 || semi < closer) ? semi : end;
+        onNode({
+          type: 'atrule',
+          name,
+          prelude: text.slice(j, preludeEnd).trim(),
+          line: atLoc.line,
+          column: atLoc.column,
+        });
+        if (hasBrace) {
+          const close = matchingBrace(text, brace, end);
+          walk(brace + 1, close, false);
+          i = close + 1;
+        } else {
+          i = preludeEnd < end ? preludeEnd + 1 : end;
+        }
+        continue;
+      }
+
+      const brace = indexOfUnquoted(text, '{', i, end);
+      const semi = indexOfUnquoted(text, ';', i, end);
+      const closer = indexOfUnquoted(text, '}', i, end);
+
+      const semiFirst =
+        inRule &&
+        semi >= 0 &&
+        (brace < 0 || semi < brace) &&
+        (closer < 0 || semi < closer);
+      if (semiFirst) {
+        const declLoc = locAt(i);
+        const decl = parseDecl(text.slice(i, semi));
+        if (decl) {
+          onNode({
+            type: 'decl',
+            prop: decl.prop,
+            value: decl.value,
+            line: declLoc.line,
+            column: declLoc.column,
+          });
+        }
+        i = semi + 1;
+        continue;
+      }
+
+      const closerFirst =
+        inRule && closer >= 0 && (brace < 0 || closer < brace) && (semi < 0 || closer < semi);
+      if (closerFirst) {
+        const leftover = text.slice(i, closer).trim();
+        if (leftover) {
+          const declLoc = locAt(i);
+          const decl = parseDecl(leftover);
+          if (decl) {
+            onNode({
+              type: 'decl',
+              prop: decl.prop,
+              value: decl.value,
+              line: declLoc.line,
+              column: declLoc.column,
+            });
+          }
+        }
+        return closer + 1;
+      }
+
+      if (brace >= 0 && (closer < 0 || brace < closer)) {
+        const selector = text.slice(i, brace).trim();
+        const selLoc = locAt(i);
+        onNode({
+          type: 'rule',
+          selector,
+          line: selLoc.line,
+          column: selLoc.column,
+        });
+        const close = matchingBrace(text, brace, end);
+        walk(brace + 1, close, true);
+        i = close + 1;
+        continue;
+      }
+
+      break;
+    }
+    return i;
+  }
+
+  walk(0, text.length, false);
+}
+
+function isAppCss(filename) {
+  const normalized = filename.replace(/\\/g, '/');
+  return normalized === 'src/app.css' || normalized.endsWith('/src/app.css');
+}
+
+function lastCompoundSelector(selector) {
+  const parts = [];
+  let current = '';
+  let depth = 0;
+  for (let i = 0; i < selector.length; i += 1) {
+    const ch = selector[i];
+    if (ch === '(') depth += 1;
+    if (ch === ')') depth = Math.max(0, depth - 1);
+    if (depth === 0 && ch === ',') {
+      parts.push(current.trim());
+      current = '';
+    } else {
+      current += ch;
+    }
+  }
+  if (current.trim()) parts.push(current.trim());
+
+  return parts.map((part) => {
+    let idx = 0;
+    for (let i = 0; i < part.length; i += 1) {
+      const ch = part[i];
+      if (ch === '(') {
+        let d = 1;
+        i += 1;
+        while (i < part.length && d > 0) {
+          if (part[i] === '(') d += 1;
+          else if (part[i] === ')') d -= 1;
+          i += 1;
+        }
+        i -= 1;
+        continue;
+      }
+      if ((ch === ' ' || ch === '>' || ch === '+' || ch === '~') && i + 1 < part.length) {
+        idx = i + 1;
+      }
+    }
+    return part.slice(idx).trim();
+  });
+}
+
+function classesInCompound(compound) {
+  const names = [];
+  const re = /\.(-?[_A-Za-z]+[_A-Za-z0-9-]*)/g;
+  let match;
+  while ((match = re.exec(compound))) names.push(match[1]);
+  return names;
+}
+
+export function lintCssText(source, { filename = 'input.css' } = {}) {
+  const allowRoot = isAppCss(filename);
+  const findings = scanComments(source).errors.map(({ index, message }) => ({
+    id: "css-comment", severity: "error", ...lineAt(source, index), message,
+  }));
+  const rules = [];
+  let currentRule = null;
+
+  walkCss(source, (node) => {
+    if (node.type === 'atrule') {
+      for (const item of lintAtRule(node.name)) {
+        findings.push({ ...item, line: node.line, column: node.column, selector: `@${node.name}` });
+      }
+      currentRule = null;
+      return;
+    }
+    if (node.type === 'rule') {
+      currentRule = {
+        selector: node.selector,
+        line: node.line,
+        column: node.column,
+        decls: [],
+      };
+      rules.push(currentRule);
+      for (const item of lintSelector(node.selector, { allowRoot })) {
+        findings.push({ ...item, line: node.line, column: node.column, selector: node.selector });
+      }
+      return;
+    }
+    if (node.type === 'decl') {
+      if (currentRule) currentRule.decls.push(node);
+      for (const item of lintDeclaration(node.prop, node.value)) {
+        findings.push({
+          ...item,
+          line: node.line,
+          column: node.column,
+          selector: currentRule?.selector,
+        });
+      }
+    }
+  });
+
+  return { findings, rules };
+}
+
+function collectStaticStrings(node, result = []) {
+  if (!node) return result;
+  if (node.type === 'StringLiteral' || (node.type === 'Literal' && typeof node.value === 'string')) {
+    result.push(node.value);
+    return result;
+  }
+  if (node.type === 'TemplateLiteral') {
+    for (const quasi of node.quasis) {
+      if (quasi.value.cooked) result.push(quasi.value.cooked);
+    }
+    for (const expression of node.expressions) collectStaticStrings(expression, result);
+    return result;
+  }
+  if (node.type === 'JSXExpressionContainer') {
+    return collectStaticStrings(node.expression, result);
+  }
+  for (const key of [
+    'left',
+    'right',
+    'argument',
+    'callee',
+    'test',
+    'consequent',
+    'alternate',
+    'object',
+    'property',
+  ]) {
+    if (node[key]) collectStaticStrings(node[key], result);
+  }
+  for (const key of ['arguments', 'elements', 'expressions']) {
+    if (Array.isArray(node[key])) {
+      for (const child of node[key]) collectStaticStrings(child, result);
+    }
+  }
+  return result;
+}
+
+function loadBabel() {
+  try {
+    const parser = require('@babel/parser');
+    const traverseMod = require('@babel/traverse');
+    const traverse = traverseMod.default ?? traverseMod;
+    return { parser, traverse };
+  } catch {
+    return null;
+  }
+}
+
+function addClassTokens(classes, chunk) {
+  for (const token of String(chunk).split(/\s+/)) {
+    if (token) classes.add(token);
+  }
+}
+
+function collectTextClassesRegex(source) {
+  const classes = new Set();
+  const tagRe = /<Text\b[\s\S]*?>/g;
+  let match;
+  while ((match = tagRe.exec(source))) {
+    const cn = /className\s*=\s*(?:\{\s*)?(["'`])([^"'`]+)\1/.exec(match[0]);
+    if (cn) addClassTokens(classes, cn[2]);
+  }
+  return classes;
+}
+
+export function collectTextClassesFromTsx(source) {
+  const babel = loadBabel();
+  if (!babel) return collectTextClassesRegex(source);
+  let ast;
+  try {
+    ast = babel.parser.parse(source, {
+      sourceType: 'module',
+      plugins: ['jsx', 'typescript'],
+    });
+  } catch {
+    return collectTextClassesRegex(source);
+  }
+  const classes = new Set();
+  babel.traverse(ast, {
+    JSXOpeningElement(pathNode) {
+      const name = pathNode.node.name;
+      if (name.type !== 'JSXIdentifier' || name.name !== 'Text') return;
+      for (const attr of pathNode.node.attributes) {
+        if (attr.type !== 'JSXAttribute' || attr.name?.name !== 'className') continue;
+        for (const chunk of collectStaticStrings(attr.value)) {
+          addClassTokens(classes, chunk);
+        }
+      }
+    },
+  });
+  return classes;
+}
+
+function listFiles(dir, test, acc = []) {
+  if (!fs.existsSync(dir)) return acc;
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const target = path.join(dir, entry.name);
+    if (entry.isDirectory()) listFiles(target, test, acc);
+    else if (test(entry.name)) acc.push(target);
+  }
+  return acc;
+}
+
+function rel(file) {
+  return path.relative(ROOT, file).replace(/\\/g, '/');
+}
+
+function lintTextContainerUsage(rules, textClasses, filename, extraFindings) {
+  if (textClasses.size === 0) return;
+  for (const rule of rules) {
+    const subjects = lastCompoundSelector(rule.selector);
+    const hitsText = subjects.some((compound) =>
+      classesInCompound(compound).some((name) => textClasses.has(name)),
+    );
+    if (!hitsText) continue;
+    for (const decl of rule.decls) {
+      if (!isTextContainerDeclaration(decl.prop, decl.value)) continue;
+      extraFindings.push({
+        id: 'text-container',
+        message: `Text 不是 Flex/Grid 容器，不要在命中 Text 的选择器上写 ${decl.prop}: ${decl.value}。多个节点的排列由外层 View 承担。`,
+        line: decl.line,
+        column: decl.column,
+        selector: rule.selector,
+        file: filename,
+      });
+    }
+  }
+}
+
+export function lintProject(srcDir = SRC) {
+  const cssFiles = listFiles(srcDir, (name) => name.endsWith('.css'));
+  const tsxFiles = listFiles(srcDir, (name) => /\.[jt]sx$/.test(name));
+  const textClasses = new Set();
+  for (const file of tsxFiles) {
+    for (const name of collectTextClassesFromTsx(fs.readFileSync(file, 'utf8'))) {
+      textClasses.add(name);
+    }
+  }
+
+  const reports = [];
+  const allRules = [];
+  for (const file of cssFiles) {
+    const filename = rel(file);
+    const { findings, rules } = lintCssText(fs.readFileSync(file, 'utf8'), { filename });
+    for (const item of findings) reports.push({ ...item, file: filename });
+    for (const rule of rules) allRules.push({ ...rule, file: filename });
+  }
+  for (const file of cssFiles) {
+    const filename = rel(file);
+    const subset = allRules.filter((rule) => rule.file === filename);
+    lintTextContainerUsage(subset, textClasses, filename, reports);
+  }
+  return reports;
+}
+
+function printReports(reports) {
+  for (const item of reports) {
+    console.error(formatFinding(item.file, item.line, item.column, item.message));
+  }
+}
+
+function assertSelfTest() {
+  const cases = [
+    {
+      css: '@media (min-width: 768px) { .a { color: red; } }',
+      id: 'forbidden-at-rule',
+    },
+    {
+      css: '.a:first-child { color: red; }',
+      id: 'structural-pseudo',
+    },
+    {
+      css: '.a::before { color: red; }',
+      id: 'pseudo-element',
+    },
+    {
+      css: ':root { --x: 1px; }',
+      file: 'src/pages/index/index.css',
+      id: 'root-selector',
+    },
+    {
+      css: ':root { --x: 1px; }',
+      file: 'src/app.css',
+      id: null,
+    },
+    {
+      css: '.a { display: inline-block; }',
+      id: 'forbidden-value',
+    },
+    {
+      css: '.a { display: flex; }',
+      id: null,
+    },
+    {
+      css: '.a { flex: 1; }',
+      id: 'flex-shorthand',
+    },
+    {
+      css: '.a { flex: 1 1 0; }',
+      id: null,
+    },
+    {
+      css: '.a { overflow-y: auto; }',
+      id: 'forbidden-value',
+    },
+    {
+      css: '.a { overflow-x: auto; }',
+      id: null,
+    },
+    {
+      css: '.a { position: sticky; }',
+      id: 'forbidden-value',
+    },
+    {
+      css: '.a { grid-column: 1 / 3; }',
+      id: 'forbidden-property',
+    },
+    {
+      css: '.a { width: calc(100% - 8px); }',
+      id: null,
+    },
+    {
+      css: '.a { border-radius: calc(8px + 2px); }',
+      id: 'calc-property',
+    },
+    {
+      css: '.a { width: min(100%, 40px); }',
+      id: 'forbidden-function',
+    },
+    {
+      css: '.a { padding-bottom: -1px; }',
+      id: 'negative-padding',
+    },
+    {
+      css: '.a { background-image: url("./x.svg"); }',
+      id: 'svg-url',
+    },
+    {
+      css: '.a { margin-left: 1in; }',
+      id: 'forbidden-unit',
+    },
+    {
+      css: '.a { animation-timing-function: steps(5); }',
+      id: 'steps-direction',
+    },
+    {
+      css: '.a { animation-timing-function: steps(5, end); }',
+      id: null,
+    },
+    {
+      css: '.a { pointer-events: none; }',
+      id: 'forbidden-property',
+    },
+    {
+      css: '/* display: inline-block; @media (min-width: 1px) {} */ .a { color: red; }',
+      id: null,
+    },
+    {
+      css: '.a { display: flex }',
+      id: null,
+    },
+    {
+      css: '.a { flex-basis: min-content; }',
+      id: 'min-content-flex-basis',
+    },
+    {
+      css: '.label:disabled { opacity: 0.5; }',
+      id: 'state-pseudo',
+    },
+    {
+      css: '.a { content: "*"; }',
+      id: 'forbidden-property',
+    },
+  ];
+
+  const failures = [];
+  for (const item of cases) {
+    const { findings } = lintCssText(item.css, { filename: item.file || 'src/pages/x.css' });
+    const hit = findings.some((f) => f.id === item.id);
+    const ok = item.id === null ? findings.length === 0 : hit;
+    if (!ok) {
+      failures.push({
+        css: item.css,
+        expected: item.id,
+        actual: findings.map((f) => f.id),
+      });
+    }
+  }
+
+  const textCss = '.option-key { display: flex; align-items: center; }';
+  const { rules } = lintCssText(textCss, { filename: 'src/pages/x.css' });
+  const extra = [];
+  lintTextContainerUsage(rules, new Set(['option-key']), 'src/pages/x.css', extra);
+  if (!extra.some((item) => item.id === 'text-container')) {
+    failures.push({ css: textCss, expected: 'text-container', actual: extra.map((f) => f.id) });
+  }
+
+  if (failures.length) {
+    console.error(`[lynx-css self-test] ${failures.length} failed`);
+    for (const fail of failures) {
+      console.error(`  expected ${fail.expected}, got ${JSON.stringify(fail.actual)}`);
+      console.error(`  css: ${fail.css}`);
+    }
+    process.exit(1);
+  }
+  console.log(`[lynx-css self-test] ${cases.length + 1} passed`);
+}
+
+export function main() {
+  if (process.argv.includes('--self-test')) {
+    assertSelfTest();
+    return;
+  }
+  const reports = lintProject();
+  if (reports.length === 0) return;
+  console.error(`ERROR: Lynx CSS lint 失败（${reports.length}）：机械禁写见 rendering.md，不要手工 grep。`);
+  printReports(reports);
+  process.exit(1);
+}
+
+const invoked = process.argv[1] && import.meta.url === pathToFileURL(path.resolve(process.argv[1])).href;
+if (invoked) main();