eslint-plugin-code-style 1.9.4 → 1.9.6

package/CHANGELOG.md

@@ -7,6 +7,32 @@ 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
+
+- **`no-hardcoded-strings`** - Fix bug where strings inside exported components were incorrectly skipped:
+  - Previously: `export const Component = () => { const name = "ahmed" }` 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" }`
+
+---
+
 ## [1.9.4] - 2026-02-03
 
 ### Enhanced
@@ -1299,6 +1325,8 @@ 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
 [1.9.2]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.9.1...v1.9.2

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));
         };
 
@@ -14421,8 +14472,11 @@ const noHardcodedStrings = {
         // Check if string is in an object that looks like constants definition
         const isInConstantsObjectHandler = (node) => {
             let current = node.parent;
+            let depth = 0;
 
             while (current) {
+                depth++;
+
                 if (current.type === "VariableDeclarator") {
                     const varName = current.id && current.id.name;
 
@@ -14440,9 +14494,34 @@ const noHardcodedStrings = {
                     }
                 }
 
-                // Check for export const CONSTANT_NAME = "value"
-                if (current.type === "ExportNamedDeclaration") {
-                    return true;
+                // Check for export const CONSTANT_NAME = "value" - only direct assignments (depth <= 3)
+                // e.g., export const X = "value" or export const X = { key: "value" }
+                // But NOT strings inside exported functions like export const Component = () => { const x = "value" }
+                if (current.type === "ExportNamedDeclaration" && depth <= 3) {
+                    // Only skip if the export is a direct literal or object, not a function
+                    const declaration = current.declaration;
+
+                    if (declaration && declaration.type === "VariableDeclaration") {
+                        const declarator = declaration.declarations[0];
+
+                        if (declarator && declarator.init) {
+                            const initType = declarator.init.type;
+
+                            // Skip if it's a direct string, object, or array constant
+                            if (initType === "Literal" || initType === "ObjectExpression" || initType === "ArrayExpression") {
+                                return true;
+                            }
+                        }
+                    }
+                }
+
+                // Stop traversing if we hit a function - strings inside functions should be checked
+                if (
+                    current.type === "FunctionDeclaration"
+                    || current.type === "FunctionExpression"
+                    || current.type === "ArrowFunctionExpression"
+                ) {
+                    return false;
                 }
 
                 current = current.parent;

package/package.json

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