AbsoluteJS

absolute/inline-style-limit

Disallow inline style objects with too many keys and encourage extracting them.

StylingSuggestion
View on GitHub

#Rule Details

Flags inline style={{ ... }} objects on JSX elements once they exceed maxKeys properties (default 3). A handful of properties inline is convenient; a large style object inline hurts readability, allocates a fresh object on every render, and is better lifted into a named constant or a dedicated style file.

Only literal style objects are inspected. Spread elements do not count toward the key total, and style={someVariable} is ignored entirely, so already-extracted styles never trip the rule.

#Examples

Incorrect
TSX
// 4 keys exceeds the default limit of 3
const Box = () => (
	<div style={{ color: 'red', fontSize: 14, margin: 4, padding: 8 }} />
);

Stricter limit

TSX
// With { maxKeys: 2 } — 3 keys exceeds 2
const Box = () => <div style={{ color: 'red', fontSize: 14, margin: 4 }} />;
Correct
TSX
// Exactly at the default limit of 3 keys
const Badge = () => <span style={{ color: 'red', fontSize: 14, margin: 4 }} />;

Extract once it grows

TSX
// Extracted to a named style object
const cardStyle: CSSProperties = {
	background: 'white',
	borderRadius: 8,
	boxShadow: '0 1px 2px rgba(0,0,0,0.1)',
	padding: 16
};

const Card = () => <div style={cardStyle} />;
TSX
const Spread = () => <div style={{ ...base, color: 'red' }} />; // spreads are not counted

#Options

This rule accepts the following options:

OptionTypeDefaultDescription
maxKeysnumber3Maximum number of keys allowed in an inline style object before it must be extracted. May be passed as a bare number (["warn", 5]) or an object ({ maxKeys: 5 }).
JS
{
	rules: {
		// Allow up to 5 inline keys before requiring extraction
		'absolute/inline-style-limit': ['warn', { maxKeys: 5 }]
		// shorthand form: ['warn', 5]
	}
}

#When Not To Use It

If your team prefers fully inline styling (for example a utility-first or styled-system approach where inline objects are intentional), this rule will fight that convention — leave it off or raise maxKeys substantially.

#Resources