TIL: AST Patterns for Detecting Inline Styles

· ast, react, uilint

Spent the afternoon diving into how to reliably detect inline styles in AI-generated React components.

The trick is walking the JSX AST and looking for style attributes that contain object expressions. Straightforward for direct declarations, trickier when styles are computed.

// Easy to detect
<div style={{ marginTop: 10 }} />

// Harder - need data flow analysis
const s = { marginTop: 10 };
<div style={s} />

For v1, I’m handling the easy cases. The computed case can wait.