Check class names in conditions too

Author: fongandrew

src/rules/no-unknown-class.ts

@@ -101,6 +101,14 @@ const rule: RuleModule<'unknownClass', [PluginOptions]> = {
 			}
 		};
 
+		/** Helper to validate string literal class names */
+		const validateStringLiteral = (value: string, node: TSESTree.Node) => {
+			const classNames = value.split(/\s+/);
+			classNames.forEach((className: string) => {
+				validate(className, node);
+			});
+		};
+
 		/** Helper to validate class names in object expressions */
 		const validateObjectExpression = (objExpr: TSESTree.ObjectExpression) => {
 			objExpr.properties.forEach((prop: TSESTree.Property | TSESTree.SpreadElement) => {
@@ -115,6 +123,29 @@ const rule: RuleModule<'unknownClass', [PluginOptions]> = {
 			});
 		};
 
+		/** Helper to validate expressions that might contain class names */
+		const validateExpression = (expr: TSESTree.Expression) => {
+			switch (expr.type) {
+				case 'Literal':
+					if (typeof expr.value === 'string') {
+						validateStringLiteral(expr.value, expr);
+					}
+					break;
+				case 'ObjectExpression':
+					validateObjectExpression(expr);
+					break;
+				case 'ConditionalExpression':
+					// Handle ternary expressions: condition ? 'class1' : 'class2'
+					validateExpression(expr.consequent);
+					validateExpression(expr.alternate);
+					break;
+				case 'LogicalExpression':
+					// Handle logical expressions: condition && 'class1'
+					validateExpression(expr.right);
+					break;
+			}
+		};
+
 		return {
 			// Check JSX className attributes
 			JSXAttribute(node: TSESTree.JSXAttribute) {
@@ -123,10 +154,7 @@ const rule: RuleModule<'unknownClass', [PluginOptions]> = {
 					options.classAttributes?.includes(node.name.name)
 				) {
 					if (node.value?.type === 'Literal' && typeof node.value.value === 'string') {
-						const classNames = node.value.value.split(/\s+/);
-						classNames.forEach((className: string) => {
-							validate(className, node);
-						});
+						validateStringLiteral(node.value.value, node);
 					} else if (node.value?.type === 'JSXExpressionContainer') {
 						const expr = node.value.expression;
 						if (expr.type === 'ObjectExpression') {
@@ -143,14 +171,7 @@ const rule: RuleModule<'unknownClass', [PluginOptions]> = {
 					options.classFunctions?.includes(node.callee.name)
 				) {
 					node.arguments.forEach((arg: TSESTree.Node) => {
-						if (arg.type === 'Literal' && typeof arg.value === 'string') {
-							const classNames = arg.value.split(/\s+/);
-							classNames.forEach((className: string) => {
-								validate(className, arg);
-							});
-						} else if (arg.type === 'ObjectExpression') {
-							validateObjectExpression(arg);
-						}
+						validateExpression(arg as TSESTree.Expression);
 					});
 				}
 			},

tests/rules/no-unknown-class.test.ts

@@ -34,6 +34,11 @@ ruleTester.run('no-unknown-class', rule, {
 			code: 'clsx("container flex", "p-4")',
 			options: [{ classFunctions: ['clsx'] }],
 		},
+		// Test class utility function with valid classes in conditions
+		{
+			code: 'clsx("container", condition() ? "flex" : "p-4", otherCondition() && "btn")',
+			options: [{ classFunctions: ['clsx'] }],
+		},
 		// Test object expression with valid classes
 		{
 			code: 'clsx({ flex: true, "p-4": condition })',
@@ -73,6 +78,48 @@ ruleTester.run('no-unknown-class', rule, {
 			options: [{ classFunctions: ['clsx'] }],
 			errors: [{ messageId: 'unknownClass', data: { className: 'unknown-class' } }],
 		},
+		// Test class utility function with invalid classes in ternary if
+		{
+			code: 'clsx("container", condition() ? "flex" : "unknown-class")',
+			options: [{ classFunctions: ['clsx'] }],
+			errors: [{ messageId: 'unknownClass', data: { className: 'unknown-class' } }],
+		},
+		// Test class utility function with invalid classes in ternary then
+		{
+			code: 'clsx("container", condition() ? "unknown-class" : "flex")',
+			options: [{ classFunctions: ['clsx'] }],
+			errors: [{ messageId: 'unknownClass', data: { className: 'unknown-class' } }],
+		},
+		// Test class utility function with invalid classes in conditional && form
+		{
+			code: 'clsx("container", condition() && "unknown-class")',
+			options: [{ classFunctions: ['clsx'] }],
+			errors: [{ messageId: 'unknownClass', data: { className: 'unknown-class' } }],
+		},
+		// Test class utility function with invalid classes in multiple coniditonal && form
+		{
+			code: 'clsx("container", condition() && otherCondition() && "unknown-class")',
+			options: [{ classFunctions: ['clsx'] }],
+			errors: [{ messageId: 'unknownClass', data: { className: 'unknown-class' } }],
+		},
+		// Test class utility function with invalid classes in conditional || form
+		{
+			code: 'clsx("container", condition() || "unknown-class")',
+			options: [{ classFunctions: ['clsx'] }],
+			errors: [{ messageId: 'unknownClass', data: { className: 'unknown-class' } }],
+		},
+		// Test class utility function with invalid classes in multiple coniditonal || form
+		{
+			code: 'clsx("container", condition() || otherCondition() || "unknown-class")',
+			options: [{ classFunctions: ['clsx'] }],
+			errors: [{ messageId: 'unknownClass', data: { className: 'unknown-class' } }],
+		},
+		// Test class utility function with invalid classes in nested ternary + conditional
+		{
+			code: 'clsx("container", condition() || (otherCondition() ? "unknown-class" : "flex"))',
+			options: [{ classFunctions: ['clsx'] }],
+			errors: [{ messageId: 'unknownClass', data: { className: 'unknown-class' } }],
+		},
 		// Test object expression with invalid class
 		{
 			code: 'clsx({ "invalid-class": true })',