feat(no-unlocalized-strings): auto-ignore UPPER_CASE styling constants

- Matches *_COLORS, *_CLASSES, *_STYLES, *_ICONS, *_IMAGES, *_SIZES, *_IDS
- Useful for Tailwind CSS class mappings like STATUS_COLORS
- Also adds Image suffix to camelCase props (backgroundImage, avatarImage)

Author: swernerx

README.md

@@ -22,8 +22,9 @@ date.toLocaleDateString("de-DE", { weekday: "long" })  // Intl.DateTimeFormatOpt
 type Status = "idle" | "loading" | "error"
 const status: Status = "loading"                 // String literal union
 
-// ✅ Automatically ignored - styling props and numeric strings
+// ✅ Automatically ignored - styling props, constants, and numeric strings
 <Box containerClassName="flex items-center" />   // *ClassName, *Class, *Color, etc.
+const STATUS_COLORS = { active: "bg-green-100" } // *_COLORS, *_CLASSES, etc.
 const price = "1,00€"                            // No letters = technical
 
 // ❌ Reported - actual user-visible text
@@ -52,7 +53,8 @@ const label = t("save")  // ❌ Not confused with Lingui
 - 📝 Enforces simple, safe expressions inside translated messages
 - 🎯 Detects missing localization of user-visible text
 - 🧠 Zero-config recognition of technical strings via TypeScript types
-- 🎨 Auto-ignores styling props (`*ClassName`, `*Color`, `*Style`, `*Icon`, `*Size`, `*Id`)
+- 🎨 Auto-ignores styling props (`*ClassName`, `*Color`, `*Style`, `*Icon`, `*Image`, `*Size`, `*Id`)
+- 📦 Auto-ignores styling constants (`STATUS_COLORS`, `BUTTON_CLASSES`, `THEME_STYLES`, 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)
 
@@ -133,6 +135,7 @@ This plugin is a TypeScript-focused alternative to the official [eslint-plugin-l
 | **DOM API strings** | Manual whitelist | ✅ Auto-detected |
 | **Intl method arguments** | Manual whitelist | ✅ Auto-detected |
 | **Styling props** (`*ClassName`, etc.) | Manual whitelist | ✅ Auto-detected |
+| **Styling constants** (`*_COLORS`, etc.) | Manual whitelist | ✅ Auto-detected |
 | **Numeric strings** (`"1,00€"`) | Manual whitelist | ✅ Auto-detected |
 | **Lingui macro verification** | Name-based only | ✅ Verifies package origin |
 | **ESLint version** | 8.x | 9.x (flat config) |

docs/rules/no-unlocalized-strings.md

@@ -164,6 +164,7 @@ In addition to the explicit list, the rule automatically ignores camelCase prope
 | `Color` | `backgroundColor`, `borderColor` |
 | `Style` | `containerStyle`, `buttonStyle` |
 | `Icon` | `leftIcon`, `statusIcon` |
+| `Image` | `backgroundImage`, `avatarImage` |
 | `Size` | `fontSize`, `iconSize` |
 | `Id` | `containerId`, `elementId` |
 
@@ -172,11 +173,41 @@ In addition to the explicit list, the rule automatically ignores camelCase prope
 <Button containerClassName="flex items-center" />
 <Input wrapperClassName="mt-4" />
 <Box backgroundColor="#ff0000" />
+<Card backgroundImage="url(/hero.jpg)" />
 <Avatar iconSize="24" />
 ```
 
 This covers common patterns in component libraries like Chakra UI, Material UI, and custom component props.
 
+#### Auto-Detected Styling Constants
+
+UPPER_CASE constant names with styling-related suffixes are also automatically ignored:
+
+| Suffix | Examples |
+|--------|----------|
+| `_CLASS`, `_CLASSES`, `_CLASSNAME`, `_CLASSNAMES` | `BUTTON_CLASSES`, `CARD_CLASSNAME` |
+| `_COLOR`, `_COLORS` | `STATUS_COLORS`, `THEME_COLOR` |
+| `_STYLE`, `_STYLES` | `CARD_STYLES`, `INPUT_STYLE` |
+| `_ICON`, `_ICONS` | `NAV_ICONS`, `STATUS_ICON` |
+| `_IMAGE`, `_IMAGES` | `HERO_IMAGES`, `CARD_IMAGE` |
+| `_SIZE`, `_SIZES` | `AVATAR_SIZES`, `FONT_SIZE` |
+| `_ID`, `_IDS` | `ELEMENT_IDS`, `SECTION_ID` |
+
+```tsx
+// All string values inside these constants are automatically ignored
+const STATUS_COLORS = {
+  active: "bg-green-100 text-green-800",
+  error: "bg-red-100 text-red-800",
+}
+
+const BUTTON_CLASSES = {
+  primary: "px-4 py-2 bg-blue-500 text-white rounded",
+  secondary: "px-4 py-2 bg-gray-200 text-gray-800 rounded",
+}
+```
+
+This is useful for Tailwind CSS class mappings and similar styling configuration objects.
+
 ### `ignoreNames`
 
 Array of variable names to ignore.

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

@@ -112,6 +112,21 @@ ruleTester.run("no-unlocalized-strings", noUnlocalizedStrings, {
     // Id properties
     { code: '<Section containerId="main-section" />', filename: "test.tsx" },
     { code: '({ elementId: "header" })', filename: "test.tsx" },
+    // Image properties
+    { code: '<Card backgroundImage="url(/bg.png)" />', filename: "test.tsx" },
+    { code: '({ avatarImage: "user-default.svg" })', filename: "test.tsx" },
+
+    // UPPER_CASE styling constants
+    { code: 'const STATUS_COLORS = { active: "bg-green-100 text-green-800" }', filename: "test.tsx" },
+    { code: 'const BUTTON_CLASSES = { primary: "px-4 py-2 rounded" }', filename: "test.tsx" },
+    { code: 'const THEME_STYLES = { dark: "bg-gray-900 text-white" }', filename: "test.tsx" },
+    { code: 'const NAV_ICONS = { home: "house-solid", settings: "gear-outline" }', filename: "test.tsx" },
+    { 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
+    { code: 'const DEFAULT_COLOR = { value: "#ff0000" }', filename: "test.tsx" },
+    { code: 'const MAIN_CLASS = { container: "mx-auto max-w-7xl" }', filename: "test.tsx" },
 
     // Technical strings (no spaces, identifiers)
     { code: 'const x = "myIdentifier"', filename: "test.tsx" },

src/rules/no-unlocalized-strings.ts

@@ -489,7 +489,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|Size|Id)$/
+const STYLING_SUFFIX_PATTERN = /[a-z](ClassName|Class|Color|Style|Icon|Image|Size|Id)$/
 
 /**
  * Checks if a property name is a styling/technical property.
@@ -499,6 +499,7 @@ const STYLING_SUFFIX_PATTERN = /[a-z](ClassName|Class|Color|Style|Icon|Size|Id)$
  * - "Color": backgroundColor, borderColor, textColor
  * - "Style": containerStyle, buttonStyle
  * - "Icon": leftIcon, statusIcon
+ * - "Image": backgroundImage, avatarImage
  * - "Size": fontSize, iconSize
  * - "Id": containerId, elementId
  *
@@ -509,6 +510,28 @@ function isStylingProperty(propertyName: string): boolean {
   return CAMEL_CASE_PATTERN.test(propertyName) && STYLING_SUFFIX_PATTERN.test(propertyName)
 }
 
+/** UPPER_CASE constant names with styling-related suffixes (singular and plural) */
+const UPPER_CASE_STYLING_PATTERN =
+  /^[A-Z][A-Z0-9]*(_[A-Z0-9]+)*_(CLASSNAMES?|CLASSES?|CLASS|COLORS?|STYLES?|ICONS?|IMAGES?|SIZES?|IDS?)$/
+
+/**
+ * Checks if a variable name is a styling/technical constant.
+ *
+ * Matches UPPER_CASE constants ending with:
+ * - "_CLASS", "_CLASSES", "_CLASSNAME", "_CLASSNAMES"
+ * - "_COLOR", "_COLORS"
+ * - "_STYLE", "_STYLES"
+ * - "_ICON", "_ICONS"
+ * - "_IMAGE", "_IMAGES"
+ * - "_SIZE", "_SIZES"
+ * - "_ID", "_IDS"
+ *
+ * Examples: STATUS_COLORS, BUTTON_CLASSES, THEME_STYLES
+ */
+function isStylingConstant(variableName: string): boolean {
+  return UPPER_CASE_STYLING_PATTERN.test(variableName)
+}
+
 /**
  * Checks if a string is a value for an ignored property/attribute.
  */
@@ -544,6 +567,31 @@ function isIgnoredProperty(node: TSESTree.Node, ignoreProperties: string[]): boo
   return false
 }
 
+/**
+ * Checks if a string is inside an object assigned to a styling constant.
+ *
+ * Matches patterns like:
+ *   const STATUS_COLORS = { active: "bg-green-100..." }
+ *   const BUTTON_STYLES = { primary: "px-4 py-2..." }
+ */
+function isInsideStylingConstant(node: TSESTree.Node): boolean {
+  let current: TSESTree.Node | undefined = node.parent ?? undefined
+
+  while (current !== undefined) {
+    // Look for: const NAME = { ... } or let NAME = { ... }
+    if (
+      current.type === AST_NODE_TYPES.VariableDeclarator &&
+      current.id.type === AST_NODE_TYPES.Identifier &&
+      isStylingConstant(current.id.name)
+    ) {
+      return true
+    }
+    current = current.parent ?? undefined
+  }
+
+  return false
+}
+
 // ============================================================================
 // Syntax Context Checks (non-user-facing locations)
 // ============================================================================
@@ -886,6 +934,11 @@ export const noUnlocalizedStrings = createRule<[Options], MessageId>({
         return
       }
 
+      // Inside a styling constant (e.g., STATUS_COLORS, BUTTON_CLASSES)
+      if (isInsideStylingConstant(node)) {
+        return
+      }
+
       // TypeScript type-aware: string literal union, Intl API, etc.
       if (isTechnicalStringType(node, typeChecker, parserServices)) {
         return