Convention: per-key `["--var" as string]` cast vs. `as React.CSSProperties` for CSS-variable style props

[yigitdot]

Background

The codebase passes CSS custom properties through React's style prop using a per-key cast pattern:

style={{
  ["--reveal-delay" as string]: `${delay}ms`,
}}

Used 9 times across 6 files: components/ui/ComparisonRow.tsx:16, components/ui/MethodRow.tsx:15, components/ui/FaqItem.tsx:27, components/site/Close.tsx:28,39,49, components/site/Comparison.tsx:28,43,59. Zero occurrences of as React.CSSProperties or as CSSProperties.

The alternative

An automated reviewer raised this in #47 (#47 (comment)): cast the whole style object instead.

style={{
  "--reveal-delay": `${delay}ms`,
} as React.CSSProperties}

Trade-offs

	Per-key (current)	as React.CSSProperties
Surgical — only the unknown key is widened	yes	no — silences typos on every key
Verbosity (multiple CSS vars)	one cast per var	one cast for the object
Existing usage in this repo	9×	0×
Requires React import	no	yes

Why not in #47

#47 introduces one new --wordmark-h cast matching the established pattern. Switching styles in just that one spot would diverge from immediate neighbors (Close.tsx:39, 49). The right place to evaluate is a sweep across all 9 sites.

Decision needed

• Keep per-key ["--var" as string] as the convention (current de facto).
• Migrate all 9 sites to } as React.CSSProperties and document in AGENTS.md.
• Other (typed helper, or module augmentation extending CSSProperties with known custom properties for compile-time safety).