AbsoluteJS

absolute/seperate-style-files

Warn when a component file (.tsx/.jsx) contains a style object typed as CSSProperties; move it to a style file.

StylingSuggestion
View on GitHub

#Rule Details

Warns when a component file (.tsx or .jsx) declares a variable typed as CSSProperties (or React.CSSProperties). Style objects belong in their own file under a style folder, so component files stay focused on behavior and markup while styles can be shared and reviewed independently.

The rule only runs in .tsx/.jsx files and matches the annotation as a type reference — there is no raw-text fallback, so only genuinely CSSProperties-typed declarations are reported. Move the object to a co-located *.styles.ts (or .css) module and import it.

#Examples

Incorrect
TSX
// Card.tsx
const cardStyle: CSSProperties = { display: 'flex', gap: '1rem' };

const Card = () => <div style={cardStyle} />;
Correct

Styles live in a .styles.ts file

TSX
// button.styles.ts
export const buttonStyle: CSSProperties = { padding: '0.5rem 1rem' };
TSX
// Button.tsx — no CSSProperties-typed object here
const Button = () => <button style={buttonStyle}>Save</button>;

#Configuration

Enable this rule in your ESLint configuration:

JS
{
	rules: {
		'absolute/seperate-style-files': 'error'
	}
}

#When Not To Use It

Small components whose styles are never reused may not benefit from a separate file. If co-locating a single style object with its component is your convention, disable the rule.

#Resources