feat(no-unlocalized-strings): support nested classNames objects

- Add classNames to default ignore properties
- Continue up tree past non-styling properties to find parent styling property
- Support plural forms for camelCase suffixes (Colors, Styles, Icons, etc.)
- Handles patterns like: classNames={{ day: "...", cell: "..." }}

Author: swernerx

docs/rules/no-unlocalized-strings.md

@@ -138,6 +138,7 @@ Default:
 ```ts
 [
   "className",    // CSS classes - arbitrary strings, always technical
+  "classNames",   // CSS classes object (e.g., for component libraries)
   "key",          // React key prop
   "data-testid"   // DOM Testing Library standard
 ]
@@ -180,9 +181,17 @@ In addition to the explicit list, the rule automatically ignores camelCase prope
 <div className={cn("px-4 py-2", "text-white")} />
 <div className={clsx("base", condition && "extra")} />
 <div className={condition ? "class-a" : "class-b"} />
+
+// Nested classNames objects are fully supported
+<Calendar
+  classNames={{
+    day: "bg-white text-gray-900",
+    cell: "p-2 hover:bg-gray-100",
+  }}
+/>
 ```
 
-This covers common patterns in component libraries like Chakra UI, Material UI, and custom component props.
+This covers common patterns in component libraries like Chakra UI, Material UI, react-day-picker, and custom component props.
 
 **Note**: Strings inside callback functions (like `onClick`) are NOT ignored, even when `className` is present on the same element.
 

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

@@ -119,6 +119,24 @@ ruleTester.run("no-unlocalized-strings", noUnlocalizedStrings, {
     },
     // Nested function calls
     { code: '<div className={cn(baseStyles, getVariantClass("primary"))} />', filename: "test.tsx" },
+
+    // Nested objects inside styling properties (e.g., classNames prop with sub-properties)
+    {
+      code: `<DatePicker
+        calendarProps={{
+          className: "dark:bg-slate-800",
+          classNames: {
+            caption_label: "dark:text-slate-100",
+            day: "dark:text-slate--300 dark:hover:bg-slate-700",
+            nav_button: "dark:text-slate-400",
+          },
+        }}
+      />`,
+      filename: "test.tsx"
+    },
+    // Plural styling properties
+    { code: '<Calendar classNames={{ day: "bg-white", cell: "p-2" }} />', filename: "test.tsx" },
+    { code: '({ buttonColors: { primary: "#0000ff", secondary: "#cccccc" } })', filename: "test.tsx" },
     // Color properties
     { code: '<Box backgroundColor="#ff0000" />', filename: "test.tsx" },
     { code: '<Text textColor="red-500" />', filename: "test.tsx" },

src/rules/no-unlocalized-strings.ts

@@ -38,6 +38,7 @@ const DEFAULT_IGNORE_FUNCTIONS = ["require", "import"]
 const DEFAULT_IGNORE_PROPERTIES = [
   // CSS class names - accept arbitrary strings, always technical
   "className",
+  "classNames",
   // React key prop
   "key",
   // Testing ID - DOM Testing Library standard
@@ -489,7 +490,7 @@ function isErrorConstructorArgument(
 const CAMEL_CASE_PATTERN = /^[a-z]+([A-Z][a-z]+)+$/
 
 /** Technical suffixes with at least one lowercase char before (ensures prefix exists) */
-const STYLING_SUFFIX_PATTERN = /[a-z](ClassName|Class|Color|Style|Icon|Image|Size|Id)$/
+const STYLING_SUFFIX_PATTERN = /[a-z](ClassNames?|Class|Colors?|Styles?|Icons?|Images?|Sizes?|Ids?)$/
 
 /**
  * Checks if a property name is a styling/technical property.
@@ -578,18 +579,23 @@ function isTechnicalPropertyName(name: string, ignoreProperties: string[]): bool
  *   className={cn("class1", "class2")}
  *   className={cn("base", condition && "extra")}
  *   className={condition ? "a" : "b"}
+ *   classNames={{ day: "text-white", cell: "bg-gray-100" }}
  *
  * Walks up the tree looking for a JSXAttribute or Property with a styling name.
+ * Continues past non-styling properties to find parent styling properties.
  */
 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)
+    if (propName !== null && isTechnicalPropertyName(propName, ignoreProperties)) {
+      // Found a styling property - ignore this string
+      return true
     }
+    // If we found a non-styling property, continue up the tree
+    // (the property might be nested inside a styling property like classNames: { day: "..." })
 
     // Stop at function declarations/expressions (don't cross function boundaries)
     // This prevents: onClick={() => { return "Hello" }} from being ignored