eslint-plugin-code-style 1.9.6 → 1.10.0

package/CHANGELOG.md

@@ -7,6 +7,60 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.10.0] - 2026-02-03
+
+**New Rule: logical-expression-multiline + Enhanced no-hardcoded-strings**
+
+**Version Range:** v1.9.1 → v1.10.0
+
+### Added
+
+**New Rules (1)**
+
+- **`logical-expression-multiline`** - Enforce multiline formatting for logical expressions with more than maxOperands (default: 3) 🔧
+  - Handles variable declarations: `const err = a || b || c || d || e;`
+  - Handles return statements, assignments, and other contexts
+  - Skips if/ternary conditions (handled by other rules)
+  - Auto-fixes to put each operand on its own line with operator at start
+
+### Enhanced
+
+- **`no-hardcoded-strings`** - Major improvements:
+  - Remove single-word string length limitations (now detects all single-word hardcoded strings)
+  - Add validation strings: `empty`, `invalid`, `missing`, `optional`, `required`, `valid`
+  - Add auth state strings: `anonymous`, `authenticated`, `authed`, `authorized`, `denied`, `forbidden`, etc.
+  - Add more status strings: `done`, `finished`, `inprogress`, `queued`, `ready`, `running`, etc.
+  - Skip UI component patterns in JSX attributes: `variant="ghost"`, `size="md"`, etc.
+  - Skip Tailwind CSS class strings: `"px-5 py-3 w-full"`, `"hover:bg-primary"`, etc.
+  - Make technical patterns stricter to avoid false negatives
+
+### Fixed
+
+- **`no-hardcoded-strings`** - Fix detection of strings inside exported components
+- **`no-hardcoded-strings`** - Fix Tailwind detection being too broad (now requires actual Tailwind syntax)
+
+### Stats
+
+- Total Rules: 72 (was 71)
+- Auto-fixable: 65 rules 🔧 (was 64)
+- Report-only: 7 rules
+
+**Full Changelog:** [v1.9.1...v1.10.0](https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.9.1...v1.10.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 +81,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 +1379,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+[1.10.0]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.9.0...v1.10.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.d.ts

@@ -50,6 +50,7 @@ export type RuleNames =
     | "code-style/jsx-simple-element-one-line"
     | "code-style/jsx-string-value-trim"
     | "code-style/jsx-ternary-format"
+    | "code-style/logical-expression-multiline"
     | "code-style/member-expression-bracket-spacing"
     | "code-style/module-index-exports"
     | "code-style/multiline-if-conditions"
@@ -143,6 +144,7 @@ interface PluginRules {
     "jsx-simple-element-one-line": Rule.RuleModule;
     "jsx-string-value-trim": Rule.RuleModule;
     "jsx-ternary-format": Rule.RuleModule;
+    "logical-expression-multiline": Rule.RuleModule;
     "member-expression-bracket-spacing": Rule.RuleModule;
     "module-index-exports": Rule.RuleModule;
     "multiline-if-conditions": Rule.RuleModule;

package/index.js

@@ -5208,6 +5208,179 @@ const ternaryConditionMultiline = {
     },
 };
 
+/**
+ * ───────────────────────────────────────────────────────────────
+ * Rule: Logical Expression Multiline
+ * ───────────────────────────────────────────────────────────────
+ *
+ * Description:
+ *   Enforce multiline formatting for logical expressions with more
+ *   than maxOperands. This applies to variable declarations, return
+ *   statements, assignment expressions, and other contexts.
+ *
+ * Options:
+ *   { maxOperands: 3 } - Maximum operands on single line (default: 3)
+ *
+ * ✓ Good:
+ *   const err = data.error
+ *       || data.message
+ *       || data.status
+ *       || data.fallback;
+ *
+ * ✗ Bad:
+ *   const err = data.error || data.message || data.status || data.fallback;
+ */
+const logicalExpressionMultiline = {
+    create(context) {
+        const sourceCode = context.sourceCode || context.getSourceCode();
+        const options = context.options[0] || {};
+        const maxOperands = options.maxOperands !== undefined ? options.maxOperands : 3;
+
+        // Check if node is wrapped in parentheses
+        const isParenthesizedHandler = (node) => {
+            const tokenBefore = sourceCode.getTokenBefore(node);
+            const tokenAfter = sourceCode.getTokenAfter(node);
+
+            if (!tokenBefore || !tokenAfter) return false;
+
+            return tokenBefore.value === "(" && tokenAfter.value === ")";
+        };
+
+        // Collect all operands from a logical expression (flattening non-parenthesized ones)
+        const collectOperandsHandler = (node) => {
+            const operands = [];
+
+            const collectHelperHandler = (n) => {
+                if (n.type === "LogicalExpression" && !isParenthesizedHandler(n)) {
+                    collectHelperHandler(n.left);
+                    collectHelperHandler(n.right);
+                } else {
+                    operands.push(n);
+                }
+            };
+
+            collectHelperHandler(node);
+
+            return operands;
+        };
+
+        // Get the operator between two operands
+        const getOperatorHandler = (leftNode, rightNode) => {
+            const tokens = sourceCode.getTokensBetween(leftNode, rightNode);
+            const opToken = tokens.find((t) => t.value === "||" || t.value === "&&" || t.value === "??" || t.value === "|" || t.value === "&");
+
+            return opToken ? opToken.value : "||";
+        };
+
+        // Check if the expression is already multiline
+        const isMultilineHandler = (node) => node.loc.start.line !== node.loc.end.line;
+
+        // Check if we're inside an if condition or ternary test (handled by other rules)
+        const isInIfOrTernaryHandler = (node) => {
+            let current = node.parent;
+
+            while (current) {
+                if (current.type === "IfStatement" && current.test === node) return true;
+
+                if (current.type === "ConditionalExpression" && current.test === node) return true;
+
+                // Stop if we hit a statement or declaration boundary
+                if (current.type.includes("Statement") || current.type.includes("Declaration")) return false;
+
+                current = current.parent;
+            }
+
+            return false;
+        };
+
+        // Handle logical expression
+        const checkLogicalExpressionHandler = (node) => {
+            // Only process top-level logical expressions (not nested ones)
+            if (node.parent.type === "LogicalExpression" && !isParenthesizedHandler(node)) return;
+
+            // Skip if this is in an if condition or ternary test (handled by other rules)
+            if (isInIfOrTernaryHandler(node)) return;
+
+            // Collect all operands
+            const operands = collectOperandsHandler(node);
+
+            // If operands count is within threshold, skip
+            if (operands.length <= maxOperands) return;
+
+            // Check if already properly multiline
+            if (isMultilineHandler(node)) {
+                // Check if each operand is on its own line
+                let allOnOwnLines = true;
+
+                for (let i = 1; i < operands.length; i++) {
+                    if (operands[i].loc.start.line === operands[i - 1].loc.end.line) {
+                        allOnOwnLines = false;
+                        break;
+                    }
+                }
+
+                if (allOnOwnLines) return;
+            }
+
+            // Report and fix
+            context.report({
+                fix(fixer) {
+                    // Build the formatted expression
+                    const firstOperandText = sourceCode.getText(operands[0]);
+
+                    // Get the line containing the first operand
+                    const firstToken = sourceCode.getFirstToken(operands[0]);
+                    const lineStart = sourceCode.text.lastIndexOf("\n", firstToken.range[0]) + 1;
+                    const lineContent = sourceCode.text.slice(lineStart, firstToken.range[0]);
+
+                    // Extract only the whitespace indentation from the line
+                    const indentMatch = lineContent.match(/^(\s*)/);
+                    const baseIndent = indentMatch ? indentMatch[1] : "";
+
+                    // Build each line: first operand, then operator + operand for each subsequent
+                    const lines = [firstOperandText];
+
+                    for (let i = 1; i < operands.length; i++) {
+                        const operator = getOperatorHandler(operands[i - 1], operands[i]);
+                        const operandText = sourceCode.getText(operands[i]);
+                        lines.push(`${baseIndent}    ${operator} ${operandText}`);
+                    }
+
+                    // Get the full range of the expression
+                    const fullText = lines.join("\n");
+
+                    return fixer.replaceText(node, fullText);
+                },
+                message: `Logical expression with ${operands.length} operands should be on multiple lines (max: ${maxOperands})`,
+                node,
+            });
+        };
+
+        return {
+            LogicalExpression: checkLogicalExpressionHandler,
+        };
+    },
+    meta: {
+        docs: { description: "Enforce multiline formatting for logical expressions with more than maxOperands" },
+        fixable: "code",
+        schema: [
+            {
+                additionalProperties: false,
+                properties: {
+                    maxOperands: {
+                        default: 3,
+                        description: "Maximum operands to keep on single line (default: 3)",
+                        minimum: 1,
+                        type: "integer",
+                    },
+                },
+                type: "object",
+            },
+        ],
+        type: "layout",
+    },
+};
+
 /**
  * ───────────────────────────────────────────────────────────────
  * Rule: Empty Line After Block
@@ -14109,6 +14282,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 +14310,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)
                 );
             });
         };
@@ -19890,6 +20091,7 @@ export default {
         "empty-line-after-block": emptyLineAfterBlock,
         "if-else-spacing": ifElseSpacing,
         "if-statement-format": ifStatementFormat,
+        "logical-expression-multiline": logicalExpressionMultiline,
         "multiline-if-conditions": multilineIfConditions,
         "no-empty-lines-in-switch-cases": noEmptyLinesInSwitchCases,
         "ternary-condition-multiline": ternaryConditionMultiline,

package/package.json

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