eslint-plugin-code-style 1.9.6 → 1.9.7

package/CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.9.7] - 2026-02-03
+
+### Fixed
+
+- **`no-hardcoded-strings`** - Fix Tailwind detection being too broad:
+  - Previously: `"john"`, `"not found"` were incorrectly skipped as Tailwind classes
+  - Now: Only strings with Tailwind syntax (hyphens, colons, slashes, brackets) are skipped
+  - Regular strings like `const name = "john"` are now properly detected
+  - Tailwind classes like `"px-5 py-3 w-full"` still correctly skipped
+
+---
+
 ## [1.9.6] - 2026-02-03
 
 ### Enhanced
@@ -27,7 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - **`no-hardcoded-strings`** - Fix bug where strings inside exported components were incorrectly skipped:
-  - Previously: `export const Component = () => { const name = "ahmed" }` was not detected
+  - Previously: `export const Component = () => { const name = "john" }` was not detected
   - Now: Strings inside functions are properly detected regardless of export status
   - Only direct constant exports are skipped: `export const MESSAGE = "value"` or `export const DATA = { key: "value" }`
 
@@ -1325,6 +1337,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+[1.9.7]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.9.6...v1.9.7
 [1.9.6]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.9.5...v1.9.6
 [1.9.5]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.9.4...v1.9.5
 [1.9.4]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.9.3...v1.9.4

package/index.js

@@ -14109,6 +14109,26 @@ const noHardcodedStrings = {
         // Tailwind/CSS class pattern - matches individual class names
         const tailwindClassPattern = /^-?[a-z]+(-[a-z0-9]+)*(\/\d+)?$|^-?[a-z]+(-[a-z0-9]+)*-\[.+\]$|^[a-z]+:[a-z][-a-z0-9/[\]]*$/;
 
+        // Known single-word Tailwind utilities (no hyphen required)
+        const singleWordTailwindUtilities = new Set([
+            // Display
+            "block", "contents", "flex", "flow", "grid", "hidden", "inline", "table",
+            // Position
+            "absolute", "fixed", "relative", "static", "sticky",
+            // Visibility
+            "collapse", "invisible", "visible",
+            // Typography
+            "antialiased", "capitalize", "italic", "lowercase", "ordinal", "overline",
+            "subpixel", "truncate", "underline", "uppercase",
+            // Layout
+            "container", "isolate",
+            // Misc
+            "resize", "snap", "touch", "select", "pointer", "transition", "animate",
+            "filter", "backdrop", "transform", "appearance", "cursor", "outline",
+            "ring", "shadow", "opacity", "blur", "invert", "sepia", "grayscale",
+            "hue", "saturate", "brightness", "contrast",
+        ]);
+
         // Check if a string contains only CSS/Tailwind class names
         const isTailwindClassStringHandler = (str) => {
             // Split by whitespace and filter empty strings
@@ -14117,23 +14137,31 @@ const noHardcodedStrings = {
             // Must have at least one token
             if (tokens.length === 0) return false;
 
+            // Must have at least one token with Tailwind-like syntax (hyphen, colon, slash, or brackets)
+            // to be considered a Tailwind class string
+            const hasTailwindSyntax = tokens.some((token) =>
+                token.includes("-") || token.includes(":") || token.includes("/") || token.includes("["));
+
+            if (!hasTailwindSyntax) return false;
+
             // Check if all tokens look like CSS classes
             return tokens.every((token) => {
                 // Skip template literal expressions placeholders if any
                 if (token.includes("${")) return true;
 
-                // Common Tailwind patterns
+                // Known single-word Tailwind utilities
+                if (singleWordTailwindUtilities.has(token)) return true;
+
+                // Common Tailwind patterns - MUST have hyphen, colon, slash, or brackets
                 return (
-                    // Basic kebab-case with numbers: w-5, p-4, pr-12, text-2xl, gap-4
-                    /^-?[a-z]+(-[a-z0-9]+)*$/.test(token)
-                    // With fractions: w-1/2, -translate-y-1/2
+                    // Kebab-case: w-5, p-4, pr-12, text-2xl, gap-4, bg-white, text-error
+                    /^-?[a-z]+(-[a-z0-9]+)+$/.test(token)
+                    // With fractions: w-1/2, -translate-y-1/2, bg-black/50
                     || /^-?[a-z]+(-[a-z0-9]+)*\/\d+$/.test(token)
                     // With modifiers: hover:bg-primary, focus:ring-2, sm:flex
                     || /^[a-z0-9]+:[a-z][-a-z0-9/[\]]*$/.test(token)
                     // Arbitrary values: w-[100px], bg-[#ff0000]
                     || /^-?[a-z]+(-[a-z]+)*-?\[.+\]$/.test(token)
-                    // Single word utilities: flex, hidden, block
-                    || /^[a-z]+$/.test(token)
                 );
             });
         };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eslint-plugin-code-style",
-    "version": "1.9.6",
+    "version": "1.9.7",
     "description": "A custom ESLint plugin for enforcing consistent code formatting and style rules in React/JSX projects",
     "main": "index.js",
     "types": "index.d.ts",