@rdna/radiants 0.1.1 → 0.1.3

package/eslint/rdna-disable-comment-utils.mjs

@@ -0,0 +1,271 @@
+const RDNA_RULE_RE = /\brdna\/[a-z0-9-]+\b/g;
+const DISABLE_DIRECTIVE_RE = /\beslint-disable(?:(-next-line)|(-line))?\b/;
+const FIELD_RE = /(^|\s)(reason|owner|expires|issue):/gm;
+const OWNER_RE = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+const ISSUE_RE = /^(?:DNA-\d+|https:\/\/\S+)$/;
+
+export const REQUIRED_EXCEPTION_FIELDS = ['reason', 'owner', 'expires', 'issue'];
+
+export function parseRdnaDisableComment(rawText) {
+  const text = normalizeCommentText(rawText);
+  const directiveMatch = text.match(DISABLE_DIRECTIVE_RE);
+  if (!directiveMatch) return null;
+  if (directiveMatch.index !== 0) return null;
+
+  const kind = directiveMatch[1]
+    ? 'disable-next-line'
+    : directiveMatch[2]
+      ? 'disable-line'
+      : 'disable';
+
+  const afterDirective = text.slice(directiveMatch.index + directiveMatch[0].length).trim();
+  const metadataIndex = afterDirective.indexOf('--');
+  const ruleSegment = metadataIndex >= 0 ? afterDirective.slice(0, metadataIndex).trim() : afterDirective;
+  const metadataText = metadataIndex >= 0 ? afterDirective.slice(metadataIndex + 2).trim() : '';
+  const rdnaRules = [...new Set(ruleSegment.match(RDNA_RULE_RE) ?? [])];
+
+  if (rdnaRules.length === 0) return null;
+
+  return {
+    kind,
+    rdnaRules,
+    metadataText,
+    text,
+  };
+}
+
+export function parseExceptionMetadata(metadataText) {
+  const fields = new Map();
+  const matches = [...metadataText.matchAll(FIELD_RE)];
+
+  for (let index = 0; index < matches.length; index += 1) {
+    const match = matches[index];
+    const nextMatch = matches[index + 1];
+    const field = match[2];
+    const valueStart = match.index + match[0].length;
+    const valueEnd = nextMatch ? nextMatch.index : metadataText.length;
+    const value = metadataText.slice(valueStart, valueEnd).trim();
+    fields.set(field, value);
+  }
+
+  return fields;
+}
+
+export function validateExceptionMetadata(metadataText, options = {}) {
+  const fields = parseExceptionMetadata(metadataText);
+  const missing = REQUIRED_EXCEPTION_FIELDS.filter(field => !fields.has(field));
+  const malformed = [];
+  let expired = null;
+  let today = getTodayIsoUtc(options.today);
+
+  if (missing.length > 0) {
+    return { fields, missing, malformed, expired, today };
+  }
+
+  if (!fields.get('reason')) {
+    malformed.push('reason');
+  }
+
+  if (!OWNER_RE.test(fields.get('owner'))) {
+    malformed.push('owner');
+  }
+
+  const expires = fields.get('expires');
+  if (!isValidIsoDate(expires)) {
+    malformed.push('expires');
+  } else if (expires < today) {
+    expired = expires;
+  }
+
+  if (!ISSUE_RE.test(fields.get('issue'))) {
+    malformed.push('issue');
+  }
+
+  return { fields, missing, malformed, expired, today };
+}
+
+export function extractAddedRdnaDisableCommentsFromDiff(diffText) {
+  const additions = [];
+  const lines = diffText.split('\n');
+  let filePath = null;
+  let nextNewLine = null;
+  let activeBlockComment = null;
+
+  function flushActiveBlockComment() {
+    if (!activeBlockComment) return;
+
+    const parsed = parseRdnaDisableComment(activeBlockComment.lines.join('\n'));
+    if (parsed) {
+      additions.push({
+        filePath: activeBlockComment.filePath,
+        line: activeBlockComment.line,
+        kind: parsed.kind,
+        rdnaRules: parsed.rdnaRules,
+        text: parsed.text,
+      });
+    }
+
+    activeBlockComment = null;
+  }
+
+  function pushParsedAddition(parsed, line) {
+    additions.push({
+      filePath,
+      line,
+      kind: parsed.kind,
+      rdnaRules: parsed.rdnaRules,
+      text: parsed.text,
+    });
+  }
+
+  function handleAddedLine(addedText, line) {
+    if (activeBlockComment) {
+      if (activeBlockComment.mode === 'existing-block') {
+        if (isStarPrefixedCommentLine(addedText)) {
+          activeBlockComment.lines.push(addedText);
+          return;
+        }
+
+        flushActiveBlockComment();
+      } else {
+        activeBlockComment.lines.push(addedText);
+        if (addedText.includes('*/')) {
+          flushActiveBlockComment();
+        }
+        return;
+      }
+    }
+
+    const parsed = parseRdnaDisableCommentFromSourceLine(addedText);
+    if (parsed) {
+      pushParsedAddition(parsed, line);
+      return;
+    }
+
+    if (addedText.trim().startsWith('/*') && !addedText.includes('*/')) {
+      activeBlockComment = {
+        filePath,
+        line,
+        lines: [addedText],
+        mode: 'new-block',
+      };
+      return;
+    }
+
+    if (isStarPrefixedDisableDirectiveLine(addedText)) {
+      activeBlockComment = {
+        filePath,
+        line,
+        lines: [addedText],
+        mode: 'existing-block',
+      };
+    }
+  }
+
+  for (const line of lines) {
+    if (line.startsWith('+++ b/')) {
+      flushActiveBlockComment();
+      filePath = line.slice(6);
+      continue;
+    }
+
+    if (line.startsWith('@@')) {
+      flushActiveBlockComment();
+      const match = line.match(/\+(\d+)(?:,\d+)?/);
+      nextNewLine = match ? Number.parseInt(match[1], 10) : null;
+      continue;
+    }
+
+    if (nextNewLine === null || !filePath) {
+      continue;
+    }
+
+    if (line.startsWith('+') && !line.startsWith('+++')) {
+      const addedText = line.slice(1);
+      handleAddedLine(addedText, nextNewLine);
+      nextNewLine += 1;
+      continue;
+    }
+
+    if (activeBlockComment) {
+      flushActiveBlockComment();
+    }
+
+    if (line.startsWith('-') && !line.startsWith('---')) {
+      continue;
+    }
+
+    if (!line.startsWith('\\')) {
+      nextNewLine += 1;
+    }
+  }
+
+  flushActiveBlockComment();
+
+  return additions;
+}
+
+export function normalizeCommentText(rawText) {
+  let text = rawText.trim();
+
+  if (text.startsWith('//')) {
+    return text.replace(/^\/\/\s?/, '').trim();
+  }
+
+  if (text.startsWith('/*')) {
+    text = text.replace(/^\/\*\s?/, '').replace(/\*\/$/, '').trim();
+  }
+
+  return text
+    .split('\n')
+    .map(line => line.replace(/^\s*\*\s?/, '').trimEnd())
+    .join('\n')
+    .trim();
+}
+
+function parseRdnaDisableCommentFromSourceLine(rawLine) {
+  const trimmed = rawLine.trim();
+  if (trimmed.startsWith('//') || trimmed.startsWith('/*')) {
+    return parseRdnaDisableComment(trimmed);
+  }
+
+  const inlineLineComment = rawLine.match(/(?:^|\s)(\/\/\s*eslint-disable(?:-next-line|-line)?[\s\S]*)$/);
+  if (inlineLineComment) {
+    return parseRdnaDisableComment(inlineLineComment[1].trim());
+  }
+
+  const inlineBlockComment = rawLine.match(/(?:^|\s)(\/\*\s*eslint-disable(?:-next-line|-line)?[\s\S]*\*\/)\s*$/);
+  if (inlineBlockComment) {
+    return parseRdnaDisableComment(inlineBlockComment[1].trim());
+  }
+
+  return null;
+}
+
+function isStarPrefixedCommentLine(rawLine) {
+  return /^\s*\*/.test(rawLine);
+}
+
+function isStarPrefixedDisableDirectiveLine(rawLine) {
+  return /^\s*\*\s*eslint-disable(?:(?:-next-line)|(?:-line))?\b/.test(rawLine);
+}
+
+function getTodayIsoUtc(todayOverride) {
+  if (todayOverride) return todayOverride;
+  return new Date().toISOString().slice(0, 10);
+}
+
+function isValidIsoDate(value) {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+    return false;
+  }
+
+  const [year, month, day] = value.split('-').map(Number);
+  const date = new Date(Date.UTC(year, month - 1, day));
+
+  return (
+    date.getUTCFullYear() === year &&
+    date.getUTCMonth() === month - 1 &&
+    date.getUTCDate() === day
+  );
+}

package/eslint/rules/no-broad-rdna-disables.mjs

@@ -0,0 +1,44 @@
+/**
+ * rdna/no-broad-rdna-disables
+ * Only allow eslint-disable-next-line for rdna/* rules.
+ */
+import { parseRdnaDisableComment } from '../rdna-disable-comment-utils.mjs';
+
+const rule = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Ban broad or same-line eslint-disable comments for rdna/* rules; only eslint-disable-next-line is allowed',
+    },
+    messages: {
+      broadDisable:
+        'RDNA rules may only be disabled with eslint-disable-next-line. {{kind}} is not allowed for {{rules}}.',
+    },
+    schema: [],
+  },
+
+  create(context) {
+    return {
+      Program() {
+        const sourceCode = context.sourceCode || context.getSourceCode();
+        const comments = sourceCode.getAllComments();
+
+        for (const comment of comments) {
+          const parsed = parseRdnaDisableComment(comment.value);
+          if (!parsed || parsed.kind === 'disable-next-line') continue;
+
+          context.report({
+            loc: comment.loc,
+            messageId: 'broadDisable',
+            data: {
+              kind: `eslint-${parsed.kind}`,
+              rules: parsed.rdnaRules.join(', '),
+            },
+          });
+        }
+      },
+    };
+  },
+};
+
+export default rule;

package/eslint/rules/no-clipped-shadow.mjs

@@ -0,0 +1,213 @@
+/**
+ * rdna/no-clipped-shadow
+ *
+ * Flags RDNA shadow tokens (shadow-resting, shadow-raised, etc.) when used on
+ * or inside pixel-cornered elements (pixel-rounded-* or pixel-corners).
+ * clip-path clips box-shadow — use pixel-shadow-* (filter: drop-shadow) instead.
+ *
+ * Checks two cases:
+ *   1. Same-element: className has both pixel-rounded-* or pixel-corners and shadow-*
+ *   2. Ancestor: className has shadow-* and a JSX ancestor has pixel-rounded-* or pixel-corners
+ */
+import {
+  getClassNameStrings,
+  isInsideClassNameAttribute,
+} from '../utils.mjs';
+import { pixelCorners } from '../contract.mjs';
+
+const pixelCornerPattern = pixelCorners.triggerClasses
+  .map((name) => name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+  .join('|');
+const PIXEL_CORNER_RE = pixelCornerPattern
+  ? new RegExp(`(?:^|\\s)(?:[\\w-]+:)*(?:${pixelCornerPattern})(?:\\s|$)`)
+  : /$a/;
+const PIXEL_CORNER_TOKEN_RE = pixelCornerPattern
+  ? new RegExp(`(?:^|\\s)((?:[\\w-]+:)*(?:${pixelCornerPattern}))(?=\\s|$)`)
+  : /$a/;
+
+// RDNA shadow tokens that use box-shadow (get clipped by clip-path)
+// Excludes: pixel-shadow-* (correct), shadow-none, shadow-inner, arbitrary shadow-[...]
+const CLIPPABLE_SHADOW_RE = /(?:^|\s)((?:[\w-]+:)*shadow-(?:surface|resting|lifted|raised|floating|focused|glow-(?:success|error|info)))(?:\s|$)/g;
+
+const rule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Ban box-shadow tokens on pixel-cornered elements (pixel-rounded-*/pixel-corners); use pixel-shadow-* (filter: drop-shadow) instead',
+    },
+    messages: {
+      clippedShadowSameElement:
+        '"{{shadow}}" will be clipped by clip-path on this element ({{corner}}). Use {{suggestion}} instead.',
+      clippedShadowAncestor:
+        '"{{shadow}}" will be clipped by an ancestor\'s clip-path ({{corner}}). Use {{suggestion}} instead, or move the shadow outside the clipped container.',
+    },
+    schema: [],
+  },
+
+  create(context) {
+    return {
+      JSXAttribute(node) {
+        if (node.name.name !== 'className') return;
+        checkElement(context, node);
+      },
+      CallExpression(node) {
+        if (!isInsideClassNameAttribute(node)) {
+          checkCallExpression(context, node);
+        }
+      },
+    };
+  },
+};
+
+/**
+ * Check a className JSX attribute for same-element and ancestor clipping.
+ */
+function checkElement(context, attrNode) {
+  const strings = getClassNameStrings(attrNode.value);
+  const fullClassName = strings.map((s) => s.value).join(' ');
+
+  // Find all clippable shadows in this element's className
+  const shadows = extractClippableShadows(fullClassName);
+  if (shadows.length === 0) return;
+
+  // (data-no-clip opt-out removed — no longer needed with pixel-corners opt-in migration)
+
+  // Case 1: Same-element — this element has both pixel-rounded-* or pixel-corners and shadow-*
+  const hasPixelCorner = PIXEL_CORNER_RE.test(fullClassName);
+  const cornerMatch = hasPixelCorner ? extractPixelCorner(fullClassName) : null;
+
+  if (hasPixelCorner) {
+    for (const shadow of shadows) {
+      const reportNode = findStringNode(strings, shadow.raw) ?? attrNode;
+      context.report({
+        node: reportNode,
+        messageId: 'clippedShadowSameElement',
+        data: {
+          shadow: shadow.raw,
+          corner: cornerMatch,
+          suggestion: getSuggestion(shadow.token),
+        },
+      });
+    }
+    return; // Same-element already reported — no need to check ancestors
+  }
+
+  // Case 2: Ancestor — walk up JSX tree looking for pixel-cornered parent
+  const ancestorCorner = findAncestorPixelCorner(attrNode);
+  if (ancestorCorner) {
+    for (const shadow of shadows) {
+      const reportNode = findStringNode(strings, shadow.raw) ?? attrNode;
+      context.report({
+        node: reportNode,
+        messageId: 'clippedShadowAncestor',
+        data: {
+          shadow: shadow.raw,
+          corner: ancestorCorner,
+          suggestion: getSuggestion(shadow.token),
+        },
+      });
+    }
+  }
+}
+
+/**
+ * Check CVA / cn / clsx calls that aren't inside a className attribute.
+ */
+function checkCallExpression(context, node) {
+  const strings = getClassNameStrings(node);
+  const fullClassName = strings.map((s) => s.value).join(' ');
+
+  const shadows = extractClippableShadows(fullClassName);
+  if (shadows.length === 0) return;
+
+  const hasPixelCorner = PIXEL_CORNER_RE.test(fullClassName);
+  const cornerMatch = hasPixelCorner ? extractPixelCorner(fullClassName) : null;
+
+  if (hasPixelCorner) {
+    for (const shadow of shadows) {
+      const reportNode = findStringNode(strings, shadow.raw) ?? node;
+      context.report({
+        node: reportNode,
+        messageId: 'clippedShadowSameElement',
+        data: {
+          shadow: shadow.raw,
+          corner: cornerMatch,
+          suggestion: getSuggestion(shadow.token),
+        },
+      });
+    }
+  }
+}
+
+/**
+ * Extract all clippable shadow classes from a className string.
+ */
+function extractClippableShadows(className) {
+  const results = [];
+  CLIPPABLE_SHADOW_RE.lastIndex = 0;
+  let match;
+  while ((match = CLIPPABLE_SHADOW_RE.exec(className)) !== null) {
+    const raw = match[1].trim();
+    // Strip modifier prefixes to get the base token
+    const token = raw.replace(/^(?:[\w-]+:)+/, '');
+    results.push({ raw, token });
+  }
+  return results;
+}
+
+/**
+ * Find the AST node containing a specific class string (for precise reporting).
+ */
+function findStringNode(strings, target) {
+  for (const { value, node } of strings) {
+    if (value.includes(target)) return node;
+  }
+  return null;
+}
+
+/**
+ * Walk up the JSX ancestor chain looking for a pixel-cornered element.
+ * Returns the matched pixel-rounded-* or pixel-corners class name, or null.
+ */
+function findAncestorPixelCorner(attrNode) {
+  let current = attrNode.parent; // JSXOpeningElement
+  if (current) current = current.parent; // JSXElement
+
+  while (current) {
+    if (current.type === 'JSXElement') {
+      const opening = current.openingElement;
+      const classAttr = opening.attributes?.find(
+        (a) => a.type === 'JSXAttribute' && a.name?.name === 'className',
+      );
+      if (classAttr) {
+        const strings = getClassNameStrings(classAttr.value);
+        const combined = strings.map((s) => s.value).join(' ');
+
+        if (PIXEL_CORNER_RE.test(combined)) {
+          return extractPixelCorner(combined);
+        }
+      }
+    }
+    current = current.parent;
+  }
+  return null;
+}
+
+/**
+ * Extract the triggering pixel-corner class without modifier prefixes.
+ */
+function extractPixelCorner(className) {
+  const match = className.match(PIXEL_CORNER_TOKEN_RE);
+  if (!match?.[1]) return null;
+  return match[1].replace(/^(?:[\w-]+:)+/, '');
+}
+
+/**
+ * Get the migration suggestion for a shadow token.
+ */
+function getSuggestion(token) {
+  return pixelCorners.shadowMigrationMap[token] ?? `pixel-shadow equivalent or filter: drop-shadow()`;
+}
+
+export default rule;