@monoharada/wcf-mcp 0.1.0 → 0.1.2

package/validator.mjs

@@ -3,6 +3,8 @@
  * Only includes the two functions used by the MCP server:
  *   - collectCemCustomElements
  *   - validateTextAgainstCem
+ *   - detectTokenMisuseInInlineStyles
+ *   - detectAccessibilityMisuseInMarkup
  */
 
 const GLOBAL_ATTR_ALLOW_PREFIXES = Object.freeze(['aria-', 'data-']);
@@ -25,6 +27,15 @@ const GLOBAL_ATTR_ALLOW_SET = Object.freeze(
 );
 
 const FORBIDDEN_ATTR_SET = Object.freeze(new Set(['placeholder']));
+const TOKEN_MISUSE_STYLE_PROPS = Object.freeze(new Set([
+  'color',
+  'background-color',
+  'padding',
+  'padding-top',
+  'padding-right',
+  'padding-bottom',
+  'padding-left',
+]));
 
 function isForbiddenAttr(attrName) {
   return FORBIDDEN_ATTR_SET.has(attrName.toLowerCase());
@@ -96,7 +107,29 @@ function makeRange(lineStarts, startIndex, endIndex) {
   return { start, end };
 }
 
+function normalizeStyleValue(value) {
+  return String(value ?? '').trim().toLowerCase().replace(/\s+/g, ' ');
+}
+
+function parseInlineStyleAttribute(attrChunk) {
+  const styleMatch = /\bstyle\s*=\s*("([^"]*)"|'([^']*)')/i.exec(attrChunk);
+  if (!styleMatch) return undefined;
+
+  const quoted = styleMatch[1] ?? '';
+  const styleValue = styleMatch[2] ?? styleMatch[3] ?? '';
+  if (!styleValue) return undefined;
+
+  return {
+    styleValue,
+    styleValueOffsetInAttr: styleMatch.index + quoted.indexOf(styleValue),
+  };
+}
+
 function parseAttributeNames(rawAttrs) {
+  return parseAttributes(rawAttrs).map(({ name, offset }) => ({ name, offset }));
+}
+
+function parseAttributes(rawAttrs) {
   /** @type {{ name: string, offset: number }[]} */
   const out = [];
 
@@ -121,9 +154,7 @@ function parseAttributeNames(rawAttrs) {
     }
 
     const name = rawAttrs.slice(nameStart, i);
-    if (name && !name.startsWith('${') && !name.includes('{') && !name.includes('}')) {
-      out.push({ name, offset: nameStart });
-    }
+    let value = '';
 
     while (i < len && isSpace(rawAttrs.charCodeAt(i))) i += 1;
 
@@ -135,16 +166,24 @@ function parseAttributeNames(rawAttrs) {
       const quote = rawAttrs[i];
       if (quote === '"' || quote === "'") {
         i += 1;
+        const valueStart = i;
         while (i < len && rawAttrs[i] !== quote) i += 1;
+        value = rawAttrs.slice(valueStart, i);
         if (i < len) i += 1;
       } else {
+        const valueStart = i;
         while (i < len) {
           const cc = rawAttrs[i];
           if (cc === '>' || cc === '/' || isSpace(rawAttrs.charCodeAt(i))) break;
           i += 1;
         }
+        value = rawAttrs.slice(valueStart, i);
       }
     }
+
+    if (name && !name.startsWith('${') && !name.includes('{') && !name.includes('}')) {
+      out.push({ name, offset: nameStart, value });
+    }
   }
 
   return out;
@@ -176,13 +215,13 @@ export function validateTextAgainstCem({
 
     const tagOffset = m.index + 1;
     const attrChunk = String(m[2] ?? '');
+    const rawAttrsStart = m.index + 1 + tag.length;
 
     const attrNames = parseAttributeNames(attrChunk);
     for (const { name, offset } of attrNames) {
       const attrName = name.toLowerCase();
       if (!isForbiddenAttr(attrName)) continue;
 
-      const rawAttrsStart = m.index + 1 + tag.length;
       const startIndex = rawAttrsStart + offset;
       const endIndex = startIndex + attrName.length;
       const range = makeRange(lineStarts, startIndex, endIndex);
@@ -220,7 +259,6 @@ export function validateTextAgainstCem({
       if (shouldSkipAttr(attrName)) continue;
       if (meta.attributes.has(attrName)) continue;
 
-      const rawAttrsStart = m.index + 1 + tag.length;
       const startIndex = rawAttrsStart + offset;
       const endIndex = startIndex + attrName.length;
       const range = makeRange(lineStarts, startIndex, endIndex);
@@ -238,3 +276,134 @@ export function validateTextAgainstCem({
 
   return diagnostics;
 }
+
+/**
+ * @param {{
+ *   filePath?: string;
+ *   text: string;
+ *   valueToToken?: Map<string, string>;
+ *   severity?: string;
+ * }} params
+ */
+export function detectTokenMisuseInInlineStyles({
+  filePath = '<input>',
+  text,
+  valueToToken = new Map(),
+  severity = 'warning',
+}) {
+  const diagnostics = [];
+  if (!(valueToToken instanceof Map) || valueToToken.size === 0) return diagnostics;
+
+  const lineStarts = computeLineIndex(text);
+  const tagRe = /<([a-z][a-z0-9-]*)\b([^<>]*?)>/gi;
+  let m;
+
+  while ((m = tagRe.exec(text))) {
+    const tag = String(m[1] ?? '').toLowerCase();
+    const attrChunk = String(m[2] ?? '');
+    const inlineStyle = parseInlineStyleAttribute(attrChunk);
+    if (!inlineStyle) continue;
+
+    const { styleValue, styleValueOffsetInAttr } = inlineStyle;
+    const rawAttrsStart = m.index + 1 + tag.length;
+
+    const declarationRe = /([a-z-]+)\s*:\s*([^;]+)/gi;
+    let d;
+    while ((d = declarationRe.exec(styleValue))) {
+      const prop = String(d[1] ?? '').trim().toLowerCase();
+      if (!TOKEN_MISUSE_STYLE_PROPS.has(prop)) continue;
+
+      const valueRaw = String(d[2] ?? '').trim();
+      if (!valueRaw || /^var\(/i.test(valueRaw)) continue;
+
+      const normalizedValue = normalizeStyleValue(valueRaw);
+      const cssVariable = valueToToken.get(normalizedValue);
+      if (!cssVariable) continue;
+
+      const valueOffsetInDecl = d[0].indexOf(d[2]);
+      const valueOffsetInStyle = d.index + Math.max(0, valueOffsetInDecl);
+      const startIndex = rawAttrsStart + styleValueOffsetInAttr + valueOffsetInStyle;
+      const endIndex = startIndex + d[2].length;
+      const range = makeRange(lineStarts, startIndex, endIndex);
+
+      diagnostics.push({
+        file: filePath,
+        range,
+        severity,
+        code: 'tokenMisuse',
+        message: `Use var(${cssVariable}) instead of ${valueRaw} for ${prop}`,
+        tagName: tag,
+        attrName: 'style',
+        hint: `Replace ${prop}: ${valueRaw} with ${prop}: var(${cssVariable})`,
+      });
+    }
+  }
+
+  return diagnostics;
+}
+
+/**
+ * @param {{
+ *   filePath?: string;
+ *   text: string;
+ *   severity?: string;
+ * }} params
+ */
+export function detectAccessibilityMisuseInMarkup({
+  filePath = '<input>',
+  text,
+  severity = 'warning',
+}) {
+  const diagnostics = [];
+  const lineStarts = computeLineIndex(text);
+  const tagRe = /<([a-z][a-z0-9-]*)\b([^<>]*?)>/gi;
+  let m;
+
+  while ((m = tagRe.exec(text))) {
+    const tag = String(m[1] ?? '').toLowerCase();
+    const attrChunk = String(m[2] ?? '');
+    const rawAttrsStart = m.index + 1 + tag.length;
+
+    const attrNames = parseAttributeNames(attrChunk);
+    for (const { name, offset } of attrNames) {
+      const attrName = String(name ?? '').toLowerCase();
+      if (attrName !== 'aria-live') continue;
+
+      const startIndex = rawAttrsStart + offset;
+      const endIndex = startIndex + attrName.length;
+      const range = makeRange(lineStarts, startIndex, endIndex);
+      diagnostics.push({
+        file: filePath,
+        range,
+        severity,
+        code: 'ariaLiveNotRecommended',
+        message: 'Avoid aria-live in component markup; use static text with aria-describedby instead.',
+        tagName: tag,
+        attrName: 'aria-live',
+        hint: 'Remove aria-live and connect error/support text via aria-describedby.',
+      });
+    }
+
+    const roleAttr = parseAttributes(attrChunk).find(({ name }) => String(name ?? '').toLowerCase() === 'role');
+    const roleValue = String(roleAttr?.value ?? '').trim().toLowerCase();
+    if (roleAttr && roleValue === 'alert') {
+      const attrName = 'role';
+      const roleOffsetInChunk = roleAttr.offset;
+      const startIndex = rawAttrsStart + roleOffsetInChunk;
+      const endIndex = startIndex + attrName.length;
+      const range = makeRange(lineStarts, startIndex, endIndex);
+      diagnostics.push({
+        file: filePath,
+        range,
+        severity,
+        code: 'roleAlertNotRecommended',
+        message: 'Avoid role=\"alert\" in component markup; prefer static error text and aria-describedby.',
+        tagName: tag,
+        attrName,
+        hint: 'Replace role=\"alert\" with non-live text associated to the control.',
+      });
+    }
+  }
+
+  return diagnostics;
+}