eslint-plugin-code-style 1.9.5 → 1.9.6

package/CHANGELOG.md

@@ -7,6 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [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
@@ -1310,6 +1325,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+[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,38 @@ 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/[\]]*$/;
+
+        // 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;
+
+            // 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
+                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
+                    || /^-?[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)
+                );
+            });
+        };
+
         // 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 +14359,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.6",
     "description": "A custom ESLint plugin for enforcing consistent code formatting and style rules in React/JSX projects",
     "main": "index.js",
     "types": "index.d.ts",