feat(no-unlocalized-strings): support className utility functions

- Strings inside cn(), clsx(), classnames(), twMerge() etc. are now ignored
- Walks up the tree to find parent styling property (className, *Color, etc.)
- Stops at function boundaries to avoid ignoring onClick callbacks

Author: swernerx

README.md

@@ -24,6 +24,7 @@ const status: Status = "loading"                 // String literal union
 
 // ✅ Automatically ignored - styling props, constants, and numeric strings
 <Box containerClassName="flex items-center" />   // *ClassName, *Class, *Color, etc.
+<div className={clsx("px-4", "py-2")} />         // className utilities (cx, clsx, etc.)
 const STATUS_COLORS = { active: "bg-green-100" } // *_COLORS, *_CLASSES, etc.
 const price = "1,00€"                            // No letters = technical
 

docs/rules/no-unlocalized-strings.md

@@ -175,10 +175,17 @@ In addition to the explicit list, the rule automatically ignores camelCase prope
 <Box backgroundColor="#ff0000" />
 <Card backgroundImage="url(/hero.jpg)" />
 <Avatar iconSize="24" />
+
+// Also works with className utility functions (cn, clsx, classnames, etc.)
+<div className={cn("px-4 py-2", "text-white")} />
+<div className={clsx("base", condition && "extra")} />
+<div className={condition ? "class-a" : "class-b"} />
 ```
 
 This covers common patterns in component libraries like Chakra UI, Material UI, and custom component props.
 
+**Note**: Strings inside callback functions (like `onClick`) are NOT ignored, even when `className` is present on the same element.
+
 #### Auto-Detected Styling Constants
 
 UPPER_CASE constant names with styling-related suffixes are also automatically ignored:

src/rules/no-unlocalized-strings.test.ts

@@ -95,6 +95,19 @@ ruleTester.run("no-unlocalized-strings", noUnlocalizedStrings, {
     // Complex camelCase class name properties
     { code: '<Select inputElementClassName="text-sm placeholder-gray-400" />', filename: "test.tsx" },
     { code: '<DatePicker calendarPopoverClassName="shadow-lg rounded-xl" />', filename: "test.tsx" },
+
+    // Strings inside className utility functions (cn, clsx, classnames, etc.)
+    { code: '<div className={cn("px-4 py-2", "text-white")} />', filename: "test.tsx" },
+    { code: '<div className={clsx("base-class", condition && "conditional-class")} />', filename: "test.tsx" },
+    { code: '<div className={classnames("a", "b", "c")} />', filename: "test.tsx" },
+    { code: '<div className={twMerge("px-4", "px-8")} />', filename: "test.tsx" },
+    { code: '<div className={condition ? "class-a" : "class-b"} />', filename: "test.tsx" },
+    {
+      code: '<div className={cn("base", variant === "primary" ? "bg-blue-500" : "bg-gray-500")} />',
+      filename: "test.tsx"
+    },
+    // Nested function calls
+    { code: '<div className={cn(baseStyles, getVariantClass("primary"))} />', filename: "test.tsx" },
     // Color properties
     { code: '<Box backgroundColor="#ff0000" />', filename: "test.tsx" },
     { code: '<Text textColor="red-500" />', filename: "test.tsx" },
@@ -455,6 +468,18 @@ ruleTester.run("no-unlocalized-strings", noUnlocalizedStrings, {
       code: 'const STATUS_COLORS = { active: { nested: "Hello World" } }',
       filename: "test.tsx",
       errors: [{ messageId: "unlocalizedString" }]
+    },
+
+    // Strings inside callbacks should NOT be ignored (even when className is present)
+    {
+      code: '<button className="px-4" onClick={() => alert("Hello World")}>X</button>',
+      filename: "test.tsx",
+      errors: [{ messageId: "unlocalizedString" }]
+    },
+    {
+      code: '<button className={cn("px-4")} onSubmit={() => showMessage("Form submitted!")}>X</button>',
+      filename: "test.tsx",
+      errors: [{ messageId: "unlocalizedString" }]
     }
   ]
 })

src/rules/no-unlocalized-strings.ts

@@ -533,7 +533,82 @@ function isStylingConstant(variableName: string): boolean {
 }
 
 /**
- * Checks if a string is a value for an ignored property/attribute.
+ * Gets the property name if this node is (directly) a property value.
+ */
+function getPropertyName(node: TSESTree.Node): string | null {
+  const parent = node.parent
+
+  // JSX attribute: <div className="..." /> or <div className={...} />
+  if (parent?.type === AST_NODE_TYPES.JSXAttribute && parent.name.type === AST_NODE_TYPES.JSXIdentifier) {
+    return parent.name.name
+  }
+
+  // JSX expression container unwrap: className={...}
+  if (parent?.type === AST_NODE_TYPES.JSXExpressionContainer) {
+    const attr = parent.parent
+    if (attr.type === AST_NODE_TYPES.JSXAttribute && attr.name.type === AST_NODE_TYPES.JSXIdentifier) {
+      return attr.name.name
+    }
+  }
+
+  // Object property: { className: "..." }
+  if (parent?.type === AST_NODE_TYPES.Property && parent.value === node) {
+    if (parent.key.type === AST_NODE_TYPES.Identifier) {
+      return parent.key.name
+    }
+    if (parent.key.type === AST_NODE_TYPES.Literal && typeof parent.key.value === "string") {
+      return parent.key.value
+    }
+  }
+
+  return null
+}
+
+/**
+ * Checks if a property name should be ignored (styling/technical property).
+ */
+function isTechnicalPropertyName(name: string, ignoreProperties: string[]): boolean {
+  return ignoreProperties.includes(name) || isStylingProperty(name)
+}
+
+/**
+ * Checks if a string is anywhere inside the value of a styling property.
+ *
+ * This handles complex patterns like:
+ *   className={cn("class1", "class2")}
+ *   className={cn("base", condition && "extra")}
+ *   className={condition ? "a" : "b"}
+ *
+ * Walks up the tree looking for a JSXAttribute or Property with a styling name.
+ */
+function isInsideStylingPropertyValue(node: TSESTree.Node, ignoreProperties: string[]): boolean {
+  let current: TSESTree.Node | undefined = node
+
+  while (current !== undefined) {
+    // Check if current node is directly the value of a styling property
+    const propName = getPropertyName(current)
+    if (propName !== null) {
+      return isTechnicalPropertyName(propName, ignoreProperties)
+    }
+
+    // Stop at function declarations/expressions (don't cross function boundaries)
+    // This prevents: onClick={() => { return "Hello" }} from being ignored
+    if (
+      current.type === AST_NODE_TYPES.FunctionDeclaration ||
+      current.type === AST_NODE_TYPES.FunctionExpression ||
+      current.type === AST_NODE_TYPES.ArrowFunctionExpression
+    ) {
+      return false
+    }
+
+    current = current.parent ?? undefined
+  }
+
+  return false
+}
+
+/**
+ * Checks if a string is a value for an ignored property/attribute (direct value only).
  */
 function isIgnoredProperty(node: TSESTree.Node, ignoreProperties: string[]): boolean {
   const parent = node.parent
@@ -542,7 +617,7 @@ function isIgnoredProperty(node: TSESTree.Node, ignoreProperties: string[]): boo
   if (parent?.type === AST_NODE_TYPES.JSXAttribute) {
     if (parent.name.type === AST_NODE_TYPES.JSXIdentifier) {
       const name = parent.name.name
-      if (ignoreProperties.includes(name) || isStylingProperty(name)) {
+      if (isTechnicalPropertyName(name, ignoreProperties)) {
         return true
       }
     }
@@ -552,13 +627,13 @@ function isIgnoredProperty(node: TSESTree.Node, ignoreProperties: string[]): boo
   if (parent?.type === AST_NODE_TYPES.Property) {
     if (parent.key.type === AST_NODE_TYPES.Identifier) {
       const name = parent.key.name
-      if (ignoreProperties.includes(name) || isStylingProperty(name)) {
+      if (isTechnicalPropertyName(name, ignoreProperties)) {
         return true
       }
     }
     if (parent.key.type === AST_NODE_TYPES.Literal && typeof parent.key.value === "string") {
       const name = parent.key.value
-      if (ignoreProperties.includes(name) || isStylingProperty(name)) {
+      if (isTechnicalPropertyName(name, ignoreProperties)) {
         return true
       }
     }
@@ -938,11 +1013,16 @@ export const noUnlocalizedStrings = createRule<[Options], MessageId>({
         return
       }
 
-      // Value for ignored property
+      // Value for ignored property (direct)
       if (isIgnoredProperty(node, options.ignoreProperties)) {
         return
       }
 
+      // Inside a styling property value (e.g., className={cn("class1", "class2")})
+      if (isInsideStylingPropertyValue(node, options.ignoreProperties)) {
+        return
+      }
+
       // Inside a styling constant (e.g., STATUS_COLORS, BUTTON_CLASSES)
       if (isInsideStylingConstant(node)) {
         return