feat(no-unlocalized-strings): support camelCase styling variable names

- colorClasses, buttonStyles, statusColors, etc. now auto-ignored
- Matches plural suffixes: Classes, Colors, Styles, Icons, Images, Sizes, Ids

Author: swernerx

README.md

@@ -26,7 +26,7 @@ const status: Status = "loading"                 // String literal union
 <Box containerClassName="flex items-center" />   // *ClassName, *Color, *Style, etc.
 <div className={clsx("px-4", "py-2")} />         // className utilities (clsx, cn, etc.)
 <Calendar classNames={{ day: "bg-white" }} />    // nested classNames objects
-const STATUS_COLORS = { active: "bg-green-100" } // *_COLORS, *_CLASSES, etc.
+const colorClasses = { active: "bg-green-100" }  // *Classes, *Colors, *Styles, etc.
 const price = "1,00€"                            // No letters = technical
 
 // ❌ Reported - actual user-visible text
@@ -56,7 +56,7 @@ const label = t("save")  // ❌ Not confused with Lingui
 - 🎯 Detects missing localization of user-visible text
 - 🧠 Zero-config recognition of technical strings via TypeScript types
 - 🎨 Auto-ignores styling props (`*ClassName`, `*Color`, `*Style`, `*Icon`, `*Image`, `*Size`, `*Id`)
-- 📦 Auto-ignores styling constants (`STATUS_COLORS`, `BUTTON_CLASSES`, `THEME_STYLES`, etc.)
+- 📦 Auto-ignores styling variables (`colorClasses`, `STATUS_COLORS`, `buttonStyles`, etc.)
 - 🔢 Auto-ignores numeric/symbolic strings without letters (`"1,00€"`, `"12:30"`)
 - 🔒 Verifies Lingui macros actually come from `@lingui/*` packages (no false positives from similarly-named functions)
 

docs/rules/no-unlocalized-strings.md

@@ -195,9 +195,36 @@ This covers common patterns in component libraries like Chakra UI, Material UI,
 
 **Note**: Strings inside callback functions (like `onClick`) are NOT ignored, even when `className` is present on the same element.
 
-#### Auto-Detected Styling Constants
+#### Auto-Detected Styling Variables
 
-UPPER_CASE constant names with styling-related suffixes are also automatically ignored:
+Variable names (both UPPER_CASE and camelCase) with styling-related suffixes are automatically ignored:
+
+**camelCase variables** (for object mappings):
+
+| Suffix | Examples |
+|--------|----------|
+| `Classes`, `ClassName`, `ClassNames` | `colorClasses`, `buttonClassNames` |
+| `Colors` | `statusColors`, `themeColors` |
+| `Styles` | `buttonStyles`, `cardStyles` |
+| `Icons` | `navIcons`, `statusIcons` |
+| `Images` | `heroImages`, `avatarImages` |
+| `Sizes` | `iconSizes`, `fontSizes` |
+| `Ids` | `elementIds`, `sectionIds` |
+
+```tsx
+// camelCase variables with styling suffixes
+const colorClasses = {
+  Solar: "bg-orange-100 text-orange-800",
+  Wind: "bg-blue-100 text-blue-800",
+}
+
+const buttonStyles = {
+  primary: "px-4 py-2 bg-blue-500",
+  secondary: "px-4 py-2 bg-gray-200",
+}
+```
+
+**UPPER_CASE constants**:
 
 | Suffix | Examples |
 |--------|----------|

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

@@ -165,9 +165,20 @@ ruleTester.run("no-unlocalized-strings", noUnlocalizedStrings, {
     { code: 'const AVATAR_SIZES = { sm: "w-8 h-8", lg: "w-16 h-16" }', filename: "test.tsx" },
     { code: 'const CARD_IMAGES = { hero: "/images/hero.jpg" }', filename: "test.tsx" },
     { code: 'const ELEMENT_IDS = { header: "main-header", footer: "main-footer" }', filename: "test.tsx" },
-    // Singular forms
+    // Singular forms (UPPER_CASE)
     { code: 'const DEFAULT_COLOR = { value: "#ff0000" }', filename: "test.tsx" },
     { code: 'const MAIN_CLASS = { container: "mx-auto max-w-7xl" }', filename: "test.tsx" },
+    // camelCase styling variables
+    {
+      code: 'const colorClasses = { Solar: "bg-orange-100 text-orange-800", Wind: "bg-blue-100" }',
+      filename: "test.tsx"
+    },
+    {
+      code: 'const buttonStyles = { primary: "px-4 py-2 bg-blue-500", secondary: "px-4 py-2 bg-gray-200" }',
+      filename: "test.tsx"
+    },
+    { code: 'const statusColors = { active: "#00ff00", inactive: "#cccccc" }', filename: "test.tsx" },
+    { code: 'const iconSizes = { sm: "w-4 h-4", lg: "w-8 h-8" }', filename: "test.tsx" },
     // Nested objects should NOT be ignored (only direct property values)
     // These are in the invalid section below
 

src/rules/no-unlocalized-strings.ts

@@ -515,8 +515,11 @@ function isStylingProperty(propertyName: string): boolean {
 const UPPER_CASE_STYLING_PATTERN =
   /^[A-Z][A-Z0-9]*(_[A-Z0-9]+)*_(CLASSNAMES?|CLASSES?|CLASS|COLORS?|STYLES?|ICONS?|IMAGES?|SIZES?|IDS?)$/
 
+/** camelCase variable names with styling-related suffixes (plural forms for objects) */
+const CAMEL_CASE_STYLING_VAR_PATTERN = /^[a-z][a-zA-Z]*(Classes|ClassNames?|Colors|Styles|Icons|Images|Sizes|Ids)$/
+
 /**
- * Checks if a variable name is a styling/technical constant.
+ * Checks if a variable name is a styling/technical constant or variable.
  *
  * Matches UPPER_CASE constants ending with:
  * - "_CLASS", "_CLASSES", "_CLASSNAME", "_CLASSNAMES"
@@ -527,10 +530,14 @@ const UPPER_CASE_STYLING_PATTERN =
  * - "_SIZE", "_SIZES"
  * - "_ID", "_IDS"
  *
- * Examples: STATUS_COLORS, BUTTON_CLASSES, THEME_STYLES
+ * Also matches camelCase variables ending with:
+ * - "Classes", "ClassName", "ClassNames"
+ * - "Colors", "Styles", "Icons", "Images", "Sizes", "Ids"
+ *
+ * Examples: STATUS_COLORS, BUTTON_CLASSES, colorClasses, buttonStyles
  */
 function isStylingConstant(variableName: string): boolean {
-  return UPPER_CASE_STYLING_PATTERN.test(variableName)
+  return UPPER_CASE_STYLING_PATTERN.test(variableName) || CAMEL_CASE_STYLING_VAR_PATTERN.test(variableName)
 }
 
 /**