feat(no-unlocalized-strings): auto-ignore camelCase styling properties

- ClassName, Class, Color, Style, Icon, Size, Id suffixes
- Requires valid camelCase with prefix (e.g. containerClassName, backgroundColor)

Author: swernerx

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

@@ -85,6 +85,34 @@ ruleTester.run("no-unlocalized-strings", noUnlocalizedStrings, {
     { code: '({ type: "button" })', filename: "test.tsx" },
     { code: '({ className: "my-class" })', filename: "test.tsx" },
 
+    // CSS class name properties (camelCase ending with Class or ClassName)
+    { code: '<Button containerClassName="flex items-center" />', filename: "test.tsx" },
+    { code: '<Input wrapperClassName="mt-4 mb-2" />', filename: "test.tsx" },
+    { code: '<Card headerClass="text-lg font-bold" />', filename: "test.tsx" },
+    { code: '<Modal overlayClass="bg-black opacity-50" />', filename: "test.tsx" },
+    { code: '({ buttonClassName: "px-4 py-2" })', filename: "test.tsx" },
+    { code: '({ inputClass: "border rounded" })', filename: "test.tsx" },
+    // 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" },
+    // Color properties
+    { code: '<Box backgroundColor="#ff0000" />', filename: "test.tsx" },
+    { code: '<Text textColor="red-500" />', filename: "test.tsx" },
+    { code: '<Button borderColor="gray.200" />', filename: "test.tsx" },
+    { code: '({ accentColor: "blue" })', filename: "test.tsx" },
+    // Style properties
+    { code: '<View containerStyle="flex-1" />', filename: "test.tsx" },
+    { code: '({ buttonStyle: "primary" })', filename: "test.tsx" },
+    // Icon properties
+    { code: '<Button leftIcon="arrow-left" />', filename: "test.tsx" },
+    { code: '<Alert statusIcon="warning" />', filename: "test.tsx" },
+    // Size properties
+    { code: '<Text fontSize="lg" />', filename: "test.tsx" },
+    { code: '<Avatar iconSize="24" />', filename: "test.tsx" },
+    // Id properties
+    { code: '<Section containerId="main-section" />', filename: "test.tsx" },
+    { code: '({ elementId: "header" })', filename: "test.tsx" },
+
     // Technical strings (no spaces, identifiers)
     { code: 'const x = "myIdentifier"', filename: "test.tsx" },
     { code: 'const x = "my-css-class"', filename: "test.tsx" },

src/rules/no-unlocalized-strings.ts

@@ -480,6 +480,30 @@ function isErrorConstructorArgument(
   return false
 }
 
+/** Valid camelCase: lowercase start, then (Uppercase + lowercase+) sequences */
+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|Size|Id)$/
+
+/**
+ * Checks if a property name is a styling/technical property.
+ *
+ * Matches camelCase properties ending with:
+ * - "Class" or "ClassName": containerClassName, buttonClass
+ * - "Color": backgroundColor, borderColor, textColor
+ * - "Style": containerStyle, buttonStyle
+ * - "Icon": leftIcon, statusIcon
+ * - "Size": fontSize, iconSize
+ * - "Id": containerId, elementId
+ *
+ * This covers common patterns for component libraries that accept
+ * styling/technical props which contain technical values, not user text.
+ */
+function isStylingProperty(propertyName: string): boolean {
+  return CAMEL_CASE_PATTERN.test(propertyName) && STYLING_SUFFIX_PATTERN.test(propertyName)
+}
+
 /**
  * Checks if a string is a value for an ignored property/attribute.
  */
@@ -489,17 +513,26 @@ function isIgnoredProperty(node: TSESTree.Node, ignoreProperties: string[]): boo
   // JSX attribute: <div className="..." />
   if (parent?.type === AST_NODE_TYPES.JSXAttribute) {
     if (parent.name.type === AST_NODE_TYPES.JSXIdentifier) {
-      return ignoreProperties.includes(parent.name.name)
+      const name = parent.name.name
+      if (ignoreProperties.includes(name) || isStylingProperty(name)) {
+        return true
+      }
     }
   }
 
   // Object property: { className: "..." }
   if (parent?.type === AST_NODE_TYPES.Property) {
     if (parent.key.type === AST_NODE_TYPES.Identifier) {
-      return ignoreProperties.includes(parent.key.name)
+      const name = parent.key.name
+      if (ignoreProperties.includes(name) || isStylingProperty(name)) {
+        return true
+      }
     }
     if (parent.key.type === AST_NODE_TYPES.Literal && typeof parent.key.value === "string") {
-      return ignoreProperties.includes(parent.key.value)
+      const name = parent.key.value
+      if (ignoreProperties.includes(name) || isStylingProperty(name)) {
+        return true
+      }
     }
   }