docs: document auto-ignore for styling props and numeric strings

Author: swernerx

README.md

@@ -22,12 +22,16 @@ 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
+<Box containerClassName="flex items-center" />   // *ClassName, *Class, *Color, etc.
+const price = "1,00€"                            // No letters = technical
+
 // ❌ Reported - actual user-visible text
 const message = "Welcome to our app"
 <button>Save changes</button>
 ```
 
-**No configuration needed** for DOM APIs, Intl methods, or your own string literal union types. TypeScript already knows!
+**No configuration needed** for DOM APIs, Intl methods, string literal unions, styling props, or numeric strings. TypeScript + smart heuristics handle it!
 
 ### Smart Lingui Detection
 
@@ -48,6 +52,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 numeric/symbolic strings without letters (`"1,00€"`, `"12:30"`)
 - 🔒 Verifies Lingui macros actually come from `@lingui/*` packages (no false positives from similarly-named functions)
 
 ## Requirements
@@ -126,6 +132,8 @@ This plugin is a TypeScript-focused alternative to the official [eslint-plugin-l
 | **String literal unions** | Manual whitelist | ✅ Auto-detected |
 | **DOM API strings** | Manual whitelist | ✅ Auto-detected |
 | **Intl method arguments** | Manual whitelist | ✅ Auto-detected |
+| **Styling props** (`*ClassName`, 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) |
 | **Config format** | Legacy `.eslintrc` | Flat config only |

docs/rules/no-unlocalized-strings.md

@@ -153,6 +153,30 @@ Default:
 
 **Note**: Properties like `type`, `role`, `href`, `id` are NOT in the default list because TypeScript automatically detects them as technical when they have string literal union types.
 
+#### Auto-Detected Styling Properties
+
+In addition to the explicit list, the rule automatically ignores camelCase properties ending with common styling suffixes:
+
+| Suffix | Examples |
+|--------|----------|
+| `ClassName` | `containerClassName`, `wrapperClassName` |
+| `Class` | `buttonClass`, `inputClass` |
+| `Color` | `backgroundColor`, `borderColor` |
+| `Style` | `containerStyle`, `buttonStyle` |
+| `Icon` | `leftIcon`, `statusIcon` |
+| `Size` | `fontSize`, `iconSize` |
+| `Id` | `containerId`, `elementId` |
+
+```tsx
+// All automatically ignored - no configuration needed
+<Button containerClassName="flex items-center" />
+<Input wrapperClassName="mt-4" />
+<Box backgroundColor="#ff0000" />
+<Avatar iconSize="24" />
+```
+
+This covers common patterns in component libraries like Chakra UI, Material UI, and custom component props.
+
 ### `ignoreNames`
 
 Array of variable names to ignore.
@@ -193,6 +217,24 @@ The rule uses heuristics to determine if a string looks like UI text:
 - Identifiers without spaces (`myFunction`, `my-css-class`)
 - CSS selectors (`:hover`, `.class`, `#id`)
 - SVG path data (`M10 10`, `L20 30`)
+- Strings without any letters — numeric/symbolic only
+
+### Numeric and Symbolic Strings
+
+Strings containing only numbers, punctuation, and symbols are automatically ignored:
+
+```tsx
+// All automatically ignored - no letters means no UI text
+const price = "1,00€"
+const amount = "$99.99"
+const time = "12:30"
+const date = "2024-01-15"
+const percentage = "100%"
+const list = "1,00 2,00 3,00"
+const arrows = "→ ← ↑ ↓"
+```
+
+This uses Unicode letter detection (`\p{L}`), so accented characters like `ä`, `ö`, `ü`, `é` are correctly recognized as letters.
 
 ## When Not To Use It