eslint-plugin-th-rules 1.16.0 → 1.17.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.17.1](https://github.com/tomerh2001/eslint-plugin-th-rules/compare/v1.17.0...v1.17.1) (2026-01-05)
+
+
+### Bug Fixes
+
+* improve style file validation messages and simplify code structure ([5c165b4](https://github.com/tomerh2001/eslint-plugin-th-rules/commit/5c165b4fcbc103df752e7c56f988c725dae6a62c))
+
+# [1.17.0](https://github.com/tomerh2001/eslint-plugin-th-rules/compare/v1.16.0...v1.17.0) (2026-01-05)
+
+
+### Features
+
+* add 'styles-in-styles-file' rule to enforce React-Native styles in dedicated files ([eca8af0](https://github.com/tomerh2001/eslint-plugin-th-rules/commit/eca8af0850aa197a35fb47cf08a9f04839a6a3cb))
+
 # [1.16.0](https://github.com/tomerh2001/eslint-plugin-th-rules/compare/v1.15.6...v1.16.0) (2026-01-05)
 
 

package/README.md

@@ -14,13 +14,14 @@ This repository contains custom ESLint rules to enhance code quality and consist
 ✅ Set in the `recommended` configuration.\
 🔧 Automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/user-guide/command-line-interface#--fix).
 
-| Name                                                     | Description                                                                            | 💼                                                               | 🔧 |
-| :------------------------------------------------------- | :------------------------------------------------------------------------------------- | :--------------------------------------------------------------- | :- |
-| [no-comments](docs/rules/no-comments.md)                 | Disallow comments except for specified allowed patterns.                               | ✅ ![badge-recommended-react][] ![badge-recommended-typescript][] | 🔧 |
-| [no-default-export](docs/rules/no-default-export.md)     | Convert unnamed default exports to named default exports based on the file name.       | ✅ ![badge-recommended-react][] ![badge-recommended-typescript][] | 🔧 |
-| [no-destructuring](docs/rules/no-destructuring.md)       | Disallow destructuring that does not meet certain conditions                           | ✅ ![badge-recommended-react][] ![badge-recommended-typescript][] |    |
-| [top-level-functions](docs/rules/top-level-functions.md) | Require all top-level functions to be named/regular functions.                         | ✅ ![badge-recommended-react][] ![badge-recommended-typescript][] | 🔧 |
-| [types-in-dts](docs/rules/types-in-dts.md)               | Require TypeScript type declarations (type/interface/enum) to be placed in .d.ts files | ✅ ![badge-recommended-react][] ![badge-recommended-typescript][] |    |
+| Name                                                         | Description                                                                               | 💼                                                               | 🔧 |
+| :----------------------------------------------------------- | :---------------------------------------------------------------------------------------- | :--------------------------------------------------------------- | :- |
+| [no-comments](docs/rules/no-comments.md)                     | Disallow comments except for specified allowed patterns.                                  | ✅ ![badge-recommended-react][] ![badge-recommended-typescript][] | 🔧 |
+| [no-default-export](docs/rules/no-default-export.md)         | Convert unnamed default exports to named default exports based on the file name.          | ✅ ![badge-recommended-react][] ![badge-recommended-typescript][] | 🔧 |
+| [no-destructuring](docs/rules/no-destructuring.md)           | Disallow destructuring that does not meet certain conditions                              | ✅ ![badge-recommended-react][] ![badge-recommended-typescript][] |    |
+| [styles-in-styles-file](docs/rules/styles-in-styles-file.md) | Require React-Native StyleSheet.create(...) to be placed in a .styles.ts/.styles.tsx file | ✅ ![badge-recommended-react][] ![badge-recommended-typescript][] |    |
+| [top-level-functions](docs/rules/top-level-functions.md)     | Require all top-level functions to be named/regular functions.                            | ✅ ![badge-recommended-react][] ![badge-recommended-typescript][] | 🔧 |
+| [types-in-dts](docs/rules/types-in-dts.md)                   | Require TypeScript type declarations (type/interface/enum) to be placed in .d.ts files    | ✅ ![badge-recommended-react][] ![badge-recommended-typescript][] |    |
 
 <!-- end auto-generated rules list -->
 

package/docs/rules/styles-in-styles-file.md

@@ -0,0 +1,142 @@
+<pre>
+# Require React-Native StyleSheet.create(...) to be placed in a .styles.ts/.styles.tsx file (`th-rules/styles-in-styles-file`)
+
+💼 This rule is enabled in the following configs: ✅ `recommended`, `recommended-react`, `recommended-typescript`.
+
+<!-- end auto-generated rule header -->
+
+This rule enforces that React-Native stylesheet declarations created via `StyleSheet.create(...)` live in a dedicated styles file, typically ending with `.styles.ts` or `.styles.tsx`.
+
+In practice, this prevents implementation/component files from containing large style objects, and encourages consistent separation of concerns.
+
+## Rationale
+
+Keeping styles in dedicated files:
+- improves readability of component files by reducing visual noise,
+- encourages reuse and consistency across components,
+- makes style changes easier to review (diffs focus only on styles),
+- standardizes project structure and naming conventions.
+
+## What the rule reports
+
+The rule reports any `StyleSheet.create(...)` call in files whose names do **not** match one of the allowed suffixes (by default, `.styles.ts` and `.styles.tsx`).
+
+Optionally, it can also report `StyleSheet.compose(...)` calls.
+
+## Examples
+
+### ❌ Incorrect
+
+```ts
+// ArticleCard.tsx
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+	container: {padding: 12},
+});
+```
+
+```ts
+// AnyOtherFile.ts
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+	row: {flexDirection: 'row'},
+});
+```
+
+### ✅ Correct
+
+```ts
+// ArticleCard.styles.ts
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+	container: {padding: 12},
+});
+```
+
+```ts
+// ArticleCard.tsx
+import React from 'react';
+import {View} from 'react-native';
+import {styles} from './ArticleCard.styles';
+
+export function ArticleCard() {
+	return <View style={styles.container} />;
+}
+```
+
+### `includeCompose` example
+
+When `includeCompose: true`, the following becomes invalid outside a `.styles.ts(x)` file:
+
+```ts
+// ArticleCard.tsx
+import {StyleSheet} from 'react-native';
+
+const combined = StyleSheet.compose(
+	{padding: 12},
+	{margin: 8},
+);
+```
+
+With the same code moved to `ArticleCard.styles.ts`, it becomes valid.
+
+## Options
+
+<!-- begin auto-generated rule options list -->
+
+| Name              | Type     |
+| :---------------- | :------- |
+| `allowedSuffixes` | String[] |
+| `includeCompose`  | Boolean  |
+
+<!-- end auto-generated rule options list -->
+
+### `allowedSuffixes`
+
+An array of filename suffixes that are allowed to contain `StyleSheet.create(...)`.
+
+Default:
+- `.styles.ts`
+- `.styles.tsx`
+
+Example:
+
+```json
+{
+  "rules": {
+    "th-rules/styles-in-styles-file": ["error", {
+      "allowedSuffixes": [".styles.ts", ".styles.tsx", ".native-styles.ts"]
+    }]
+  }
+}
+```
+
+### `includeCompose`
+
+When set to `true`, the rule also enforces the file restriction for `StyleSheet.compose(...)`.
+
+Default: `false`
+
+Example:
+
+```json
+{
+  "rules": {
+    "th-rules/styles-in-styles-file": ["error", {
+      "includeCompose": true
+    }]
+  }
+}
+```
+
+## Notes
+
+- This rule only targets `StyleSheet.create(...)` (and optionally `StyleSheet.compose(...)`). It does not restrict:
+  - plain object styles (e.g., `const styles = { ... }`),
+  - other styling systems (e.g., styled-components, Tamagui, Emotion),
+  - calls to other `StyleSheet.*` helpers (e.g., `flatten`, `hairlineWidth`).
+- The rule is filename-based. If ESLint is invoked with `<input>` (stdin), the rule will treat it as not being an allowed styles file.
+</pre>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-th-rules",
-  "version": "1.16.0",
+  "version": "1.17.1",
   "description": "A List of custom ESLint rules created by Tomer Horowitz",
   "keywords": [
     "eslint",

package/src/index.js

@@ -19,6 +19,7 @@ const configs = {
 			'th-rules/no-default-export': 'error',
 			'th-rules/no-comments': 'error',
 			'th-rules/top-level-functions': 'error',
+			'th-rules/styles-in-styles-file': 'error',
 			'th-rules/types-in-dts': 'error',
 			'unicorn/prefer-module': 'warn',
 			'unicorn/filename-case': 'off',
@@ -73,6 +74,7 @@ for (const configName of Object.keys(configs)) {
 			'plugin:react/recommended',
 			'plugin:react-hooks/recommended',
 			...configs[configName].extends,
+
 		],
 		rules: {
 			...configs[configName].rules,

package/src/rules/styles-in-styles-file.js

@@ -0,0 +1,143 @@
+const meta = {
+	type: 'problem',
+	docs: {
+		description: 'Require React-Native StyleSheet.create(...) to be placed in a .styles.ts/.styles.tsx file',
+		category: 'Stylistic Issues',
+		recommended: false,
+		url: 'https://github.com/tomerh2001/eslint-plugin-th-rules/blob/main/docs/rules/styles-in-styles-file.md',
+	},
+	schema: [
+		{
+			type: 'object',
+			properties: {
+				allowedSuffixes: {
+					type: 'array',
+					items: {type: 'string', minLength: 1},
+					minItems: 1,
+				},
+				includeCompose: {type: 'boolean'},
+			},
+			additionalProperties: false,
+		},
+	],
+	messages: {
+		moveStyles:
+			'React-Native styles{{target}} must be defined in a dedicated styles file ({{suffixes}}). Current file: "{{filename}}".',
+	},
+};
+
+function create(context) {
+	const options = context.options?.[0] ?? {};
+	const allowedSuffixes = options.allowedSuffixes ?? ['.styles.ts', '.styles.tsx'];
+	const includeCompose = Boolean(options.includeCompose);
+
+	function isAllowedStyleFile(filename) {
+		if (!filename || filename === '<input>') {
+			return false;
+		}
+
+		return allowedSuffixes.some(suffix => filename.endsWith(suffix));
+	}
+
+	function isStyleSheetMemberCall(node, memberName) {
+		const callee = node?.callee;
+		if (!callee || callee.type !== 'MemberExpression') {
+			return false;
+		}
+
+		const object = callee.object;
+		const property = callee.property;
+
+		return (
+			object?.type === 'Identifier'
+			&& object.name === 'StyleSheet'
+			&& !callee.computed
+			&& property?.type === 'Identifier'
+			&& property.name === memberName
+		);
+	}
+
+	/**
+	 * Try to infer the “name” of the style object, e.g.:
+	 *   const styles = StyleSheet.create(...)      -> "styles"
+	 *   styles = StyleSheet.create(...)            -> "styles"
+	 *   exports.styles = StyleSheet.create(...)    -> "exports.styles"
+	 */
+	function getAssignmentTargetName(callNode) {
+		const p = callNode.parent;
+
+		if (p?.type === 'VariableDeclarator') {
+			const id = p.id;
+			if (id?.type === 'Identifier') {
+				return id.name;
+			}
+
+			return null;
+		}
+
+		if (p?.type === 'AssignmentExpression') {
+			const left = p.left;
+
+			if (left?.type === 'Identifier') {
+				return left.name;
+			}
+
+			if (left?.type === 'MemberExpression' && !left.computed) {
+				const object = left.object;
+				const property = left.property;
+
+				const objectName
+					= object?.type === 'Identifier'
+						? object.name
+						: (object?.type === 'ThisExpression'
+							? 'this'
+							: null);
+
+				const propertyName = property?.type === 'Identifier' ? property.name : null;
+
+				if (objectName && propertyName) {
+					return `${objectName}.${propertyName}`;
+				}
+			}
+
+			return null;
+		}
+
+		return null;
+	}
+
+	function report(node) {
+		const filename = context.getFilename();
+		if (isAllowedStyleFile(filename)) {
+			return;
+		}
+
+		const targetName = getAssignmentTargetName(node);
+		const target = targetName ? ` "${targetName}"` : '';
+
+		context.report({
+			node,
+			messageId: 'moveStyles',
+			data: {
+				filename,
+				suffixes: allowedSuffixes.join(' or '),
+				target,
+			},
+		});
+	}
+
+	return {
+		CallExpression(node) {
+			if (isStyleSheetMemberCall(node, 'create')) {
+				report(node);
+				return;
+			}
+
+			if (includeCompose && isStyleSheetMemberCall(node, 'compose')) {
+				report(node);
+			}
+		},
+	};
+}
+
+module.exports = {meta, create};

package/src/rules/types-in-dts.js

@@ -69,7 +69,6 @@ function create(context) {
 	}
 
 	return {
-
 		TSTypeAliasDeclaration(node) {
 			reportIfNotDts(node);
 		},