AbsoluteJS

absolute/no-multi-style-objects

Disallow grouping CSS style objects in a single export; export each style separately.

StylingProblem
View on GitHub

#Rule Details

Disallows grouping multiple CSS style objects under a single export default object or a single returned object. The rule counts properties whose key ends in Style; when more than one such property shares an object, it asks you to export each style on its own.

Separate exports keep styles individually importable and tree-shakeable, make diffs smaller, and pair naturally with sort-exports. Objects with at most one *Style key, and properties with other names, are left alone.

#Examples

Incorrect
TS
export default {
	headerStyle: { color: 'red' },
	footerStyle: { color: 'blue' }
};
TS
function getStyles() {
	return { headerStyle: {}, footerStyle: {} };
}
Correct

Export each style separately

TS
export const headerStyle: CSSProperties = { color: 'red' };
export const footerStyle: CSSProperties = { color: 'blue' };
TS
export default { headerStyle: {}, version: 1 }; // only one *Style key

#Configuration

Enable this rule in your ESLint configuration:

JS
{
	rules: {
		'absolute/no-multi-style-objects': 'error'
	}
}

#When Not To Use It

If you deliberately bundle related styles into a single theme object that is consumed as a unit, this rule works against that pattern — disable it for those modules.

#Resources