@rdna/radiants 0.1.1 → 0.1.3

package/eslint/rules/no-hardcoded-motion.mjs

@@ -0,0 +1,133 @@
+/**
+ * rdna/no-hardcoded-motion
+ * Bans arbitrary duration/easing values in className and style props.
+ * Use RDNA motion tokens (duration-instant, duration-fast, duration-base,
+ * duration-moderate, duration-slow, ease-standard) instead.
+ */
+import { motion } from '../contract.mjs';
+import {
+  getClassNameStrings,
+  getObjectPropertyKey,
+  getStaticStringValue,
+  getStyleObjectExpression,
+  isDynamicTemplateLiteral,
+  isInsideClassNameAttribute,
+  ARBITRARY_DURATION_CLASS,
+  ARBITRARY_EASING_CLASS,
+} from '../utils.mjs';
+
+const motionStyleProps = new Set([
+  'transition',
+  'transitionDuration',
+  'transitionTimingFunction',
+  'animation',
+  'animationDuration',
+  'animationTimingFunction',
+]);
+
+// Detects hardcoded duration values: 200ms, 0.3s, 150ms, etc.
+const HARDCODED_DURATION_RE = /\d+\.?\d*m?s\b/;
+// Detects hardcoded easing values: ease, ease-in, ease-out, ease-in-out, linear, cubic-bezier(...)
+const HARDCODED_EASING_RE = /\b(?:ease-in-out|ease-in|ease-out|ease|linear)\b|cubic-bezier\s*\(/;
+const classEasingSuggestion = motion.allowedEasings.join(', ');
+const cssEasingSuggestion = motion.easingTokens.join(', ');
+const durationSuggestion = motion.durationTokens.join(', ');
+const styleSuggestion = [durationSuggestion, cssEasingSuggestion].filter(Boolean).join('; ');
+
+/**
+ * Check if a style string contains hardcoded motion values after stripping
+ * approved var() token references. This prevents false negatives where a
+ * mixed shorthand like "opacity 200ms var(--ease-standard)" contains both
+ * tokenized and hardcoded values.
+ */
+function containsHardcodedMotion(str) {
+  const stripped = str.replace(/var\([^)]+\)/g, '');
+  return HARDCODED_DURATION_RE.test(stripped) || HARDCODED_EASING_RE.test(stripped);
+}
+
+const rule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Ban arbitrary duration/easing values; require RDNA motion tokens',
+    },
+    messages: {
+      arbitraryDuration:
+        `Arbitrary duration "{{raw}}" in className. Use an RDNA duration token (${durationSuggestion}).`,
+      arbitraryEasing:
+        `Arbitrary easing "{{raw}}" in className. Use an RDNA easing token (${classEasingSuggestion}).`,
+      hardcodedMotionStyle:
+        `Hardcoded motion value in style prop ({{prop}}). Use RDNA motion tokens/vars: ${styleSuggestion}.`,
+    },
+    schema: [],
+  },
+
+  create(context) {
+    return {
+      JSXAttribute(node) {
+        if (node.name.name === 'className') checkClassName(context, node.value);
+        if (node.name.name === 'style') checkStyleObject(context, node.value);
+      },
+      CallExpression(node) {
+        if (!isInsideClassNameAttribute(node)) checkClassName(context, node);
+      },
+    };
+  },
+};
+
+function checkClassName(context, valueNode) {
+  if (!valueNode) return;
+  const strings = getClassNameStrings(valueNode);
+  for (const { value, node } of strings) {
+    ARBITRARY_DURATION_CLASS.lastIndex = 0;
+    let match;
+    while ((match = ARBITRARY_DURATION_CLASS.exec(value)) !== null) {
+      context.report({
+        node,
+        messageId: 'arbitraryDuration',
+        data: { raw: match[0] },
+      });
+    }
+
+    ARBITRARY_EASING_CLASS.lastIndex = 0;
+    while ((match = ARBITRARY_EASING_CLASS.exec(value)) !== null) {
+      context.report({
+        node,
+        messageId: 'arbitraryEasing',
+        data: { raw: match[0] },
+      });
+    }
+  }
+}
+
+function checkStyleObject(context, valueNode) {
+  const expr = getStyleObjectExpression(valueNode);
+  if (!expr) return;
+
+  for (const prop of expr.properties) {
+    const key = getObjectPropertyKey(prop);
+    if (!motionStyleProps.has(key)) continue;
+
+    const val = prop.value;
+    const staticString = getStaticStringValue(val);
+    if (staticString !== null) {
+      if (!containsHardcodedMotion(staticString)) continue;
+      context.report({
+        node: val,
+        messageId: 'hardcodedMotionStyle',
+        data: { prop: key },
+      });
+      continue;
+    }
+
+    if (isDynamicTemplateLiteral(val)) {
+      context.report({
+        node: val,
+        messageId: 'hardcodedMotionStyle',
+        data: { prop: key },
+      });
+    }
+  }
+}
+
+export default rule;

package/eslint/rules/no-hardcoded-spacing.mjs

@@ -0,0 +1,116 @@
+/**
+ * rdna/no-hardcoded-spacing
+ * Bans arbitrary bracket spacing values in Tailwind classes and inline styles.
+ * Standard Tailwind scale utilities (mt-3, px-4, gap-2) are ALLOWED.
+ * Only arbitrary values like p-[12px], gap-[13px], mx-[5%] are banned.
+ * v1 intentionally excludes width/height and positioning utilities.
+ */
+import {
+  getClassNameStrings,
+  getObjectPropertyKey,
+  getStaticStringValue,
+  getStyleObjectExpression,
+  isAllowedCssVar,
+  isDynamicTemplateLiteral,
+  isInsideClassNameAttribute,
+  ARBITRARY_SPACING_CLASS,
+} from '../utils.mjs';
+
+// Style properties that represent spacing
+const spacingStyleProps = new Set([
+  'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
+  'paddingInline', 'paddingBlock', 'paddingInlineStart', 'paddingInlineEnd',
+  'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
+  'marginInline', 'marginBlock', 'marginInlineStart', 'marginInlineEnd',
+  'gap', 'rowGap', 'columnGap',
+]);
+
+const rule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Ban arbitrary spacing bracket values; allow standard Tailwind scale utilities',
+    },
+    messages: {
+      arbitrarySpacing:
+        'Arbitrary spacing value "{{raw}}". Use a standard Tailwind spacing utility (e.g. p-4, gap-2) instead of bracket values.',
+      hardcodedSpacingStyle:
+        'Hardcoded spacing in style prop ({{prop}}). Use CSS variable or Tailwind class instead.',
+    },
+    schema: [],
+  },
+
+  create(context) {
+    return {
+      JSXAttribute(node) {
+        if (node.name.name === 'className') {
+          checkClassName(context, node.value);
+        }
+        if (node.name.name === 'style') {
+          checkStyleObject(context, node.value);
+        }
+      },
+      CallExpression(node) {
+        if (!isInsideClassNameAttribute(node)) checkClassName(context, node);
+      },
+    };
+  },
+};
+
+function checkClassName(context, valueNode) {
+  if (!valueNode) return;
+  const strings = getClassNameStrings(valueNode);
+  for (const { value, node } of strings) {
+    ARBITRARY_SPACING_CLASS.lastIndex = 0;
+    let match;
+    while ((match = ARBITRARY_SPACING_CLASS.exec(value)) !== null) {
+      context.report({
+        node,
+        messageId: 'arbitrarySpacing',
+        data: { raw: match[0] },
+      });
+    }
+  }
+}
+
+function checkStyleObject(context, valueNode) {
+  const expr = getStyleObjectExpression(valueNode);
+  if (!expr) return;
+
+  for (const prop of expr.properties) {
+    const key = getObjectPropertyKey(prop);
+    if (!spacingStyleProps.has(key)) continue;
+
+    const val = prop.value;
+    // Ban numeric literals (e.g. padding: 12) and hardcoded strings (e.g. gap: "13px")
+    if (val.type === 'Literal' && typeof val.value === 'number') {
+      context.report({
+        node: val,
+        messageId: 'hardcodedSpacingStyle',
+        data: { prop: key },
+      });
+      continue;
+    }
+
+    const staticString = getStaticStringValue(val);
+    if (staticString !== null) {
+      if (isAllowedCssVar(staticString)) continue;
+      context.report({
+        node: val,
+        messageId: 'hardcodedSpacingStyle',
+        data: { prop: key },
+      });
+      continue;
+    }
+
+    if (isDynamicTemplateLiteral(val)) {
+      context.report({
+        node: val,
+        messageId: 'hardcodedSpacingStyle',
+        data: { prop: key },
+      });
+    }
+  }
+}
+
+export default rule;

package/eslint/rules/no-hardcoded-typography.mjs

@@ -0,0 +1,124 @@
+/**
+ * rdna/no-hardcoded-typography
+ * Bans arbitrary font sizes and font weights.
+ * Allows only RDNA token-mapped text-* and font-* classes.
+ */
+import { typography } from '../contract.mjs';
+import {
+  getClassNameStrings,
+  getObjectPropertyKey,
+  getStaticStringValue,
+  getStyleObjectExpression,
+  isAllowedCssVar,
+  isDynamicTemplateLiteral,
+  isInsideClassNameAttribute,
+  ARBITRARY_FONT_WEIGHT_CLASS,
+  ARBITRARY_TEXT_SIZE_CLASS,
+} from '../utils.mjs';
+
+const sizeSuggestion = typography.validSizes.join(', ');
+const weightSuggestion = typography.validWeights.join(', ');
+
+const rule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Ban arbitrary font sizes/weights; require RDNA typography tokens',
+    },
+    messages: {
+      arbitraryTextSize:
+        `Arbitrary font size "{{raw}}". Use an RDNA text size: ${sizeSuggestion}.`,
+      arbitraryFontWeight:
+        `Arbitrary font weight "{{raw}}". Use a standard weight: ${weightSuggestion}.`,
+      hardcodedTypographyStyle:
+        'Hardcoded typography value in style prop. Use CSS variable: var(--font-size-*) or var(--font-weight-*).',
+    },
+    schema: [],
+  },
+
+  create(context) {
+    return {
+      JSXAttribute(node) {
+        if (node.name.name === 'className') checkClassName(context, node.value);
+        if (node.name.name === 'style') checkStyleObject(context, node.value);
+      },
+      CallExpression(node) {
+        if (!isInsideClassNameAttribute(node)) checkClassName(context, node);
+      },
+    };
+  },
+};
+
+function checkClassName(context, valueNode) {
+  if (!valueNode) return;
+
+  const strings = getClassNameStrings(valueNode);
+  for (const { value, node } of strings) {
+    // Check arbitrary text sizes: text-[44px], hover:text-[1.1rem]
+    const sizeRegex = ARBITRARY_TEXT_SIZE_CLASS;
+    sizeRegex.lastIndex = 0;
+    let match;
+    while ((match = sizeRegex.exec(value)) !== null) {
+      context.report({
+        node,
+        messageId: 'arbitraryTextSize',
+        data: { raw: match[0] },
+      });
+    }
+
+    // Check arbitrary font weights: font-[450], dark:font-[700]
+    const weightRegex = ARBITRARY_FONT_WEIGHT_CLASS;
+    weightRegex.lastIndex = 0;
+    while ((match = weightRegex.exec(value)) !== null) {
+      context.report({
+        node,
+        messageId: 'arbitraryFontWeight',
+        data: { raw: match[0] },
+      });
+    }
+  }
+}
+
+function checkStyleObject(context, valueNode) {
+  const expr = getStyleObjectExpression(valueNode);
+  if (!expr) return;
+
+  for (const prop of expr.properties) {
+    const key = getObjectPropertyKey(prop);
+    const val = prop.value;
+
+    if (key === 'fontSize') {
+      if (val.type === 'Literal' && typeof val.value === 'number') {
+        context.report({ node: val, messageId: 'hardcodedTypographyStyle' });
+        continue;
+      }
+      const staticString = getStaticStringValue(val);
+      if (staticString !== null) {
+        if (isAllowedCssVar(staticString, 'font-size-')) continue;
+        context.report({ node: val, messageId: 'hardcodedTypographyStyle' });
+        continue;
+      }
+      if (isDynamicTemplateLiteral(val)) {
+        context.report({ node: val, messageId: 'hardcodedTypographyStyle' });
+      }
+    }
+
+    if (key === 'fontWeight') {
+      if (val.type === 'Literal' && typeof val.value === 'number') {
+        context.report({ node: val, messageId: 'hardcodedTypographyStyle' });
+        continue;
+      }
+      const staticString = getStaticStringValue(val);
+      if (staticString !== null) {
+        if (isAllowedCssVar(staticString, 'font-weight-')) continue;
+        context.report({ node: val, messageId: 'hardcodedTypographyStyle' });
+        continue;
+      }
+      if (isDynamicTemplateLiteral(val)) {
+        context.report({ node: val, messageId: 'hardcodedTypographyStyle' });
+      }
+    }
+  }
+}
+
+export default rule;

package/eslint/rules/no-mixed-style-authority.mjs

@@ -0,0 +1,304 @@
+/**
+ * rdna/no-mixed-style-authority
+ * Flags components that mix local semantic color utilities (bg-surface-*, text-content-*,
+ * border-edge-*, etc.) with data-variant/data-slot hooks that the theme CSS also targets.
+ *
+ * When theme CSS targets [data-variant="X"], the component should not also hardcode
+ * semantic color utilities — that creates two competing sources of truth for color.
+ *
+ * Uses generated contract data by default. Rule options may still override the
+ * theme-owned variants list for targeted tests or local experimentation.
+ */
+import { components, themeVariants } from '../contract.mjs';
+import { getClassNameStrings, getStaticStringValue } from '../utils.mjs';
+
+// Ported from scripts/audit-style-authority.mjs
+const SEMANTIC_COLOR_UTILITY_RE = /\b(?:!|[a-z-]+:)*?(?:bg|text|border)-(?:surface|content|action|edge|status)-[a-z0-9-]+\b/;
+
+export function deriveThemeOwnedVariants(
+  contractComponents = components,
+  contractThemeVariants = themeVariants,
+  overrideVariants,
+) {
+  const defaultThemeOwnedVariants = new Set([
+    ...(contractThemeVariants ?? []),
+    ...Object.values(contractComponents ?? {}).flatMap((component) =>
+      component.styleOwnership?.flatMap((owner) => owner.themeOwned) ?? [],
+    ),
+  ]);
+
+  return new Set(overrideVariants ?? [...defaultThemeOwnedVariants]);
+}
+
+const rule = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Ban mixing local semantic color utilities with theme-targeted data-variant hooks',
+    },
+    messages: {
+      mixedAuthority:
+        'Mixed style authority: semantic color utilities are used alongside data-variant="{{variant}}" which is already styled by theme CSS. Move color to the theme layer or remove the variant hook.',
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          themeVariants: {
+            type: 'array',
+            items: { type: 'string' },
+            description: 'Variant values targeted by theme CSS selectors',
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+  },
+
+  create(context) {
+    const options = context.options[0] || {};
+    const themeOwnedVariants = deriveThemeOwnedVariants(
+      components,
+      themeVariants,
+      options.themeVariants,
+    );
+    if (themeOwnedVariants.size === 0) return {};
+
+    // Track identifiers that resolve to cva itself or to simple cva wrappers.
+    const cvaFactoryCandidates = new Map();
+    const cvaIdentifiersWithColors = new Set();
+    const variantBuilderCandidates = [];
+
+    // Track import aliases like `import { cva as makeVariants } from '...'`
+    const cvaImportAliases = new Set();
+
+    // Track per-file: variant usage nodes and semantic color presence
+    const variantNodes = new Map(); // variant -> Set of JSXOpeningElement nodes
+    const elementsWithSemanticColors = new Set(); // JSXOpeningElement nodes
+    const classNameValueNodes = new Map(); // JSXOpeningElement -> JSXAttribute value node
+
+    return {
+      ImportDeclaration(node) {
+        const source = node.source && node.source.value;
+        if (source !== 'class-variance-authority' && source !== 'cva') return;
+
+        for (const spec of node.specifiers) {
+          if (
+            spec.type === 'ImportSpecifier' &&
+            spec.imported.name === 'cva' &&
+            spec.local.name !== 'cva'
+          ) {
+            cvaImportAliases.add(spec.local.name);
+          }
+        }
+      },
+
+      VariableDeclarator(node) {
+        if (node.id.type !== 'Identifier' || !node.init) return;
+
+        cvaFactoryCandidates.set(node.id.name, node.init);
+
+        if (node.init.type === 'CallExpression') {
+          variantBuilderCandidates.push({
+            init: node.init,
+            name: node.id.name,
+          });
+        }
+      },
+
+      FunctionDeclaration(node) {
+        if (!node.id?.name) return;
+        cvaFactoryCandidates.set(node.id.name, node);
+      },
+
+      JSXAttribute(node) {
+        const openingEl = node.parent;
+        if (!openingEl || openingEl.type !== 'JSXOpeningElement') return;
+
+        // Track data-variant attributes
+        if (node.name.type === 'JSXIdentifier' && node.name.name === 'data-variant') {
+          const variant = getStaticStringValue(node.value);
+          if (variant && themeOwnedVariants.has(variant)) {
+            if (!variantNodes.has(variant)) variantNodes.set(variant, new Set());
+            variantNodes.get(variant).add(openingEl);
+          }
+        }
+
+        // Track className with semantic color utilities (direct or via cva identifier)
+        if (node.name.name === 'className' && node.value) {
+          classNameValueNodes.set(openingEl, node.value);
+
+          // Direct: className="bg-page ..."
+          const strings = getClassNameStrings(node.value);
+          for (const { value } of strings) {
+            if (SEMANTIC_COLOR_UTILITY_RE.test(value)) {
+              elementsWithSemanticColors.add(openingEl);
+              break;
+            }
+          }
+
+          // Indirect: className={cvaResult()} or className={cvaResult({ ... })}
+          if (!elementsWithSemanticColors.has(openingEl)) {
+            if (referencesCvaWithColors(node.value, cvaIdentifiersWithColors)) {
+              elementsWithSemanticColors.add(openingEl);
+            }
+          }
+        }
+      },
+
+      'Program:exit'() {
+        const cvaFactories = resolveCvaFactoryIdentifiers(cvaFactoryCandidates, cvaImportAliases);
+
+        for (const candidate of variantBuilderCandidates) {
+          if (!isKnownCvaFactoryCall(candidate.init, cvaFactories)) continue;
+
+          for (const arg of candidate.init.arguments) {
+            const strings = getClassNameStrings(arg);
+            for (const { value } of strings) {
+              if (SEMANTIC_COLOR_UTILITY_RE.test(value)) {
+                cvaIdentifiersWithColors.add(candidate.name);
+                break;
+              }
+            }
+
+            if (cvaIdentifiersWithColors.has(candidate.name)) break;
+          }
+        }
+
+        for (const [openingEl, valueNode] of classNameValueNodes.entries()) {
+          if (elementsWithSemanticColors.has(openingEl)) continue;
+          if (referencesCvaWithColors(valueNode, cvaIdentifiersWithColors)) {
+            elementsWithSemanticColors.add(openingEl);
+          }
+        }
+
+        const reported = new Set();
+
+        for (const [variant, elements] of variantNodes.entries()) {
+          for (const el of elements) {
+            if (!elementsWithSemanticColors.has(el)) continue;
+            const key = `${variant}:${el.loc.start.line}`;
+            if (reported.has(key)) continue;
+            reported.add(key);
+            context.report({
+              node: el,
+              messageId: 'mixedAuthority',
+              data: { variant },
+            });
+          }
+        }
+      },
+    };
+  },
+};
+
+function resolveCvaFactoryIdentifiers(candidates, importAliases) {
+  const knownFactories = new Set(['cva']);
+  if (importAliases) {
+    for (const alias of importAliases) {
+      knownFactories.add(alias);
+    }
+  }
+  let changed = true;
+
+  while (changed) {
+    changed = false;
+    for (const [name, candidate] of candidates.entries()) {
+      if (knownFactories.has(name)) continue;
+      if (isCvaFactoryCandidate(candidate, knownFactories)) {
+        knownFactories.add(name);
+        changed = true;
+      }
+    }
+  }
+
+  return knownFactories;
+}
+
+function isCvaFactoryCandidate(candidate, knownFactories) {
+  if (!candidate) return false;
+
+  if (candidate.type === 'Identifier') {
+    return knownFactories.has(candidate.name);
+  }
+
+  if (
+    candidate.type === 'ArrowFunctionExpression' ||
+    candidate.type === 'FunctionExpression' ||
+    candidate.type === 'FunctionDeclaration'
+  ) {
+    const returnedExpr = getReturnedExpression(candidate);
+    return returnedExpr ? isKnownCvaFactoryCall(returnedExpr, knownFactories) : false;
+  }
+
+  return false;
+}
+
+function getReturnedExpression(fnNode) {
+  if (fnNode.body.type !== 'BlockStatement') {
+    return fnNode.body;
+  }
+
+  for (const statement of fnNode.body.body) {
+    if (statement.type === 'ReturnStatement') {
+      return statement.argument;
+    }
+  }
+
+  return null;
+}
+
+function isKnownCvaFactoryCall(node, knownFactories) {
+  if (node?.type !== 'CallExpression') return false;
+  return node.callee.type === 'Identifier' && knownFactories.has(node.callee.name);
+}
+
+/**
+ * Check if a className value node references a cva-bound identifier that
+ * contains semantic colors. Handles patterns like:
+ *   className={triggerVariants()}
+ *   className={faceVariants({ variant: "secondary" })}
+ */
+function referencesCvaWithColors(valueNode, cvaIdentifiers) {
+  if (!valueNode) return false;
+  if (valueNode.type === 'JSXExpressionContainer') {
+    return referencesCvaWithColors(valueNode.expression, cvaIdentifiers);
+  }
+  if (valueNode.type === 'CallExpression') {
+    const callee = valueNode.callee;
+    if (callee.type === 'Identifier' && cvaIdentifiers.has(callee.name)) {
+      return true;
+    }
+
+    for (const arg of valueNode.arguments) {
+      if (referencesCvaWithColors(arg, cvaIdentifiers)) {
+        return true;
+      }
+    }
+  }
+  if (valueNode.type === 'LogicalExpression') {
+    return (
+      referencesCvaWithColors(valueNode.left, cvaIdentifiers) ||
+      referencesCvaWithColors(valueNode.right, cvaIdentifiers)
+    );
+  }
+  if (valueNode.type === 'ConditionalExpression') {
+    return (
+      referencesCvaWithColors(valueNode.consequent, cvaIdentifiers) ||
+      referencesCvaWithColors(valueNode.alternate, cvaIdentifiers)
+    );
+  }
+  if (valueNode.type === 'ArrayExpression') {
+    return valueNode.elements.some(element =>
+      element ? referencesCvaWithColors(element, cvaIdentifiers) : false
+    );
+  }
+  if (valueNode.type === 'SequenceExpression') {
+    return valueNode.expressions.some(expression =>
+      referencesCvaWithColors(expression, cvaIdentifiers)
+    );
+  }
+  return false;
+}
+
+export default rule;