eslint-plugin-code-style 1.9.5 → 1.9.7

package/CHANGELOG.md

@@ -7,12 +7,39 @@ 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
+
+- **`no-hardcoded-strings`** - Skip Tailwind CSS class strings:
+  - Multi-class strings like `"px-5 py-3 w-full bg-white"` are now ignored
+  - Individual classes: `w-5`, `p-4`, `pr-12`, `text-2xl`, `gap-4`, etc.
+  - State modifiers: `hover:bg-primary`, `focus:ring-2`, `disabled:opacity-50`
+  - Responsive prefixes: `sm:flex`, `md:hidden`, `lg:grid`
+  - Opacity values: `bg-white/50`, `text-black/80`, `placeholder-error/50`
+  - Arbitrary values: `w-[100px]`, `bg-[#ff0000]`
+  - Negative values: `-translate-y-1/2`, `-rotate-45`
+
+---
+
 ## [1.9.5] - 2026-02-03
 
 ### 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" }`
 
@@ -1310,6 +1337,8 @@ 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
 [1.9.3]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.9.2...v1.9.3

package/index.js

@@ -14070,6 +14070,22 @@ const noHardcodedStrings = {
             /^[a-z][a-zA-Z0-9_]*=/,
             // CSS property-like (kebab-case): must have hyphen (e.g., font-size, background-color)
             /^[a-z]+-[a-z]+(-[a-z]+)*$/,
+            // Tailwind CSS utility classes
+            // With numbers: w-5, p-4, pr-12, mt-1, text-2xl, gap-4, h-5, rounded-lg, etc.
+            /^-?[a-z]+-\d+(\.\d+)?(\/\d+)?$/,
+            /^-?[a-z]+-[a-z]+-\d+(\.\d+)?(\/\d+)?$/,
+            // With modifiers: hover:bg-primary, focus:ring-2, sm:flex, disabled:opacity-50, etc.
+            /^[a-z]+:[a-z][-a-z0-9/]*$/,
+            // With opacity: bg-white/50, text-black/80, placeholder-error/50, etc.
+            /^[a-z]+-[a-z]+(-[a-z]+)*\/\d+$/,
+            // Arbitrary values: w-[100px], bg-[#ff0000], translate-x-[50%], etc.
+            /^-?[a-z]+(-[a-z]+)*-\[.+\]$/,
+            // Negative transforms: -translate-y-1/2, -rotate-45, -skew-x-12, etc.
+            /^-[a-z]+-[a-z]+-\d+\/\d+$/,
+            // Common Tailwind patterns with full/auto/screen/none/inherit etc.
+            /^[a-z]+-(full|auto|screen|none|inherit|initial|px|fit|min|max)$/,
+            // Responsive/state prefixes with values: sm:w-full, md:flex, lg:hidden, etc.
+            /^(sm|md|lg|xl|2xl|hover|focus|active|disabled|first|last|odd|even|group-hover|dark|motion-safe|motion-reduce):[a-z][-a-z0-9/[\]]*$/,
             // Numbers with separators
             /^[\d,._]+$/,
             // Semantic version
@@ -14090,6 +14106,66 @@ const noHardcodedStrings = {
 
         const allIgnorePatterns = [...technicalPatterns, ...extraIgnorePatterns];
 
+        // 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
+            const tokens = str.trim().split(/\s+/).filter(Boolean);
+
+            // 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;
+
+                // Known single-word Tailwind utilities
+                if (singleWordTailwindUtilities.has(token)) return true;
+
+                // Common Tailwind patterns - MUST have hyphen, colon, slash, or brackets
+                return (
+                    // 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)
+                );
+            });
+        };
+
         // UI component patterns - only ignored in JSX attributes, not in logic
         const uiComponentPattern = /^(primary|secondary|tertiary|ghost|outline|link|muted|danger|warning|info|success|error|default|subtle|solid|soft|plain|flat|elevated|filled|tonal|text|contained|standard|xs|sm|md|lg|xl|2xl|3xl|4xl|5xl|xxs|xxl|small|medium|large|tiny|huge|compact|comfortable|spacious|left|right|center|top|bottom|start|end|middle|baseline|stretch|between|around|evenly|horizontal|vertical|row|column|inline|block|flex|grid|auto|none|hidden|visible|static|relative|absolute|fixed|sticky|on|off|hover|focus|click|blur|always|never)$/;
 
@@ -14311,6 +14387,9 @@ const noHardcodedStrings = {
             // Always flag HTTP status codes and role names
             if (isFlaggedSpecialStringHandler(str)) return false;
 
+            // Skip Tailwind/CSS class strings
+            if (isTailwindClassStringHandler(str)) return true;
+
             return allIgnorePatterns.some((pattern) => pattern.test(str));
         };
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eslint-plugin-code-style",
-    "version": "1.9.5",
+    "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",