All files / packages/sds-customization-compliance/src/checks shared-hook-routing.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4x
 
4x
9x
9x
4x
 
 
 
 
 
 
 
 
5x
5x
 
5x
5x
5x
5x
 
5x
7x
7x
7x
 
 
7x
5x
5x
7x
7x
2x
1x
 
 
3x
 
 
 
5x
5x
 
 
 
 
 
 
 
 
 
 
 
/**
 * Compliance row: canonical color-hook routing via shared tokens.
 *
 * Informational breakdown of how canonical color hooks are theme-wired:
 * through a shared `--slds-s-*` hook, a direct `--slds-g-*` global token,
 * or a literal value. Covers both base canonical hooks
 * (`--slds-c-{C}-color-{cat}`) and carveout state hooks
 * (`--slds-c-{C}-color-{cat}-{state}`) — both are part of the customer-
 * facing API surface and should route through the same layers.
 */
 
import type { ComplianceCheck, ComplianceRow } from '../types.js';
import { classifyHook } from './helpers/classifyHook.js';
import { resolveHookPrefix } from './helpers/resolveHookPrefix.js';
import { hookDefsFromThemeData, NOT_MIGRATED_DETAIL } from './helpers/themeDataAccess.js';
 
const LABEL = 'Canonical color-hook routing via shared tokens (informational)';
 
export const sharedHookRouting: ComplianceCheck = (input): ComplianceRow => {
  const { componentName: name, themeData } = input;
  if (!themeData) {
    return {
      id: 'shared-hook-routing',
      label: LABEL,
      status: 'info',
      count: 0,
      detail: NOT_MIGRATED_DETAIL,
    };
  }
 
  const hookPrefix = `--slds-c-${resolveHookPrefix(name)}-`;
  const defs = hookDefsFromThemeData(themeData);
 
  let viaShared = 0;
  let viaGlobal = 0;
  let viaLiteral = 0;
  const seen = new Set<string>();
 
  for (const d of defs) {
    Iif (!d.prop?.startsWith(hookPrefix)) continue;
    const cls = classifyHook(d.prop, name);
    Iif (!cls.isColor || (cls.classification !== 'canonical' && cls.classification !== 'canonical-state')) {
      continue;
    }
    if (seen.has(d.prop)) continue;
    seen.add(d.prop);
    const raw = String(d.rawValue ?? '').trim();
    const inner = raw.match(/var\(\s*(--slds-[a-z0-9-]+)/);
    if (inner) {
      if (inner[1].startsWith('--slds-s-')) viaShared += 1;
      else if (inner[1].startsWith('--slds-g-')) viaGlobal += 1;
      else EviaLiteral += 1;
    } else {
      viaLiteral += 1;
    }
  }
 
  const routingTotal = viaShared + viaGlobal + viaLiteral;
  return {
    id: 'shared-hook-routing',
    label: LABEL,
    status: 'info',
    count: 0,
    detail:
      routingTotal === 0
        ? 'No canonical color hooks (base or state) are defined on this component — nothing to route.'
        : `Of ${routingTotal} canonical color hook${routingTotal === 1 ? '' : 's'} (base + state): ${viaShared} route through a shared \`--slds-s-*\` token, ${viaGlobal} through a global \`--slds-g-*\` token, ${viaLiteral} resolve to a literal or other source. Shared-token routing lets multiple components move together when a shared token is rebranded.`,
  };
};