@trackunit/eslint-plugin-trackunit 0.6.82 → 0.6.84

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## 0.6.84 (2026-07-29)
+
+### 🧱 Updated Dependencies
+
+- Updated shared-utils to 1.15.84
+
+## 0.6.83 (2026-07-28)
+
+### 🩹 Fixes
+
+- **eslint:** reuse classname detection in rules ([dcfeae4cafc](https://github.com/Trackunit/manager/commit/dcfeae4cafc))
+
+### 🧱 Updated Dependencies
+
+- Updated shared-utils to 1.15.83
+
+### ❤️ Thank You
+
+- Cursor @cursoragent
+- Michael Buss Rønne
+
 ## 0.6.82 (2026-07-27)
 
 ### 🧱 Updated Dependencies

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/eslint-plugin-trackunit",
-  "version": "0.6.82",
+  "version": "0.6.84",
   "license": "SEE LICENSE IN LICENSE.txt",
   "repository": "https://github.com/Trackunit/manager",
   "engines": {

package/src/lib/rules/cva-merge-base-classes-as-array/cva-merge-base-classes-as-array.js

@@ -4,6 +4,18 @@ exports.cvaMergeBaseClassesAsArray = void 0;
 const utils_1 = require("@typescript-eslint/utils");
 const classname_utils_1 = require("../../utils/classname-utils");
 const createRule = utils_1.ESLintUtils.RuleCreator(name => `https://github.com/trackunit/manager/blob/main/libs/eslint/plugin-trackunit/src/lib/rules/${name}.ts`);
+const isCvaMergeBaseContext = (context) => {
+    if (context.type === "function-call") {
+        return context.functionName === "cvaMerge" && context.argumentIndex === 0;
+    }
+    if (context.type === "array-element" && context.parentContext.type === "function-call") {
+        return context.parentContext.functionName === "cvaMerge" && context.parentContext.argumentIndex === 0;
+    }
+    return false;
+};
+const isLiteralLocation = (location) => {
+    return location.fixNode.type === utils_1.AST_NODE_TYPES.Literal && typeof location.fixNode.value === "string";
+};
 /**
  * ESLint rule that converts cvaMerge base styles to arrays if more than one class is used.
  *
@@ -32,23 +44,26 @@ exports.cvaMergeBaseClassesAsArray = createRule({
     create(context) {
         return {
             CallExpression(node) {
-                const calleeName = (0, classname_utils_1.getCalleeName)(node.callee);
-                if (calleeName !== "cvaMerge" || node.arguments.length === 0) {
-                    return;
-                }
                 const firstArg = node.arguments[0];
                 if (!firstArg) {
                     return;
                 }
+                const baseClassLocations = (0, classname_utils_1.findClassnameStringsInCall)(node)
+                    .filter(location => isCvaMergeBaseContext(location.context))
+                    .filter(isLiteralLocation);
                 // Handle string literal: cvaMerge("class1 class2")
-                if (firstArg.type === utils_1.AST_NODE_TYPES.Literal && typeof firstArg.value === "string") {
-                    const value = firstArg.value;
+                if (firstArg.type === utils_1.AST_NODE_TYPES.Literal) {
+                    const baseClassLocation = baseClassLocations[0];
+                    if (!baseClassLocation) {
+                        return;
+                    }
+                    const value = baseClassLocation.value;
                     if (value.includes(" ")) {
                         context.report({
                             node,
                             messageId: "stringNeedsArray",
                             fix(fixer) {
-                                return fixer.replaceText(firstArg, (0, classname_utils_1.formatAsArray)((0, classname_utils_1.splitClasses)(value)));
+                                return fixer.replaceText(baseClassLocation.fixNode, (0, classname_utils_1.formatAsArray)((0, classname_utils_1.splitClasses)(value)));
                             },
                         });
                     }
@@ -56,21 +71,13 @@ exports.cvaMergeBaseClassesAsArray = createRule({
                 }
                 // Handle array: cvaMerge(["class1 class2", "class3"])
                 if (firstArg.type === utils_1.AST_NODE_TYPES.ArrayExpression) {
-                    const hasMultiClassElement = firstArg.elements.some(element => element?.type === utils_1.AST_NODE_TYPES.Literal &&
-                        typeof element.value === "string" &&
-                        element.value.includes(" "));
+                    const hasMultiClassElement = baseClassLocations.some(location => location.value.includes(" "));
                     if (hasMultiClassElement) {
                         context.report({
                             node,
                             messageId: "arrayNeedsSplit",
                             fix(fixer) {
-                                // Extract all string values and split them into individual classes
-                                const allClasses = [];
-                                for (const element of firstArg.elements) {
-                                    if (element?.type === utils_1.AST_NODE_TYPES.Literal && typeof element.value === "string") {
-                                        allClasses.push(...(0, classname_utils_1.splitClasses)(element.value));
-                                    }
-                                }
+                                const allClasses = baseClassLocations.flatMap(location => (0, classname_utils_1.splitClasses)(location.value));
                                 return fixer.replaceText(firstArg, (0, classname_utils_1.formatAsArray)(allClasses));
                             },
                         });

package/src/lib/rules/no-template-strings-in-classname-prop/no-template-strings-in-classname-prop.js

@@ -49,6 +49,14 @@ exports.noTemplateStringsInClassName = createRule({
                     context.report({ node, messageId: "templateStringInClassName" });
                 }
             },
+            VariableDeclarator(node) {
+                const locations = (0, classname_utils_1.findClassnameStringsInVariable)(node);
+                for (const location of locations) {
+                    if (location.fixNode.type === utils_1.AST_NODE_TYPES.TemplateLiteral) {
+                        context.report({ node: location.reportNode, messageId: "templateStringInClassName" });
+                    }
+                }
+            },
         };
     },
 });

package/src/lib/rules/require-classname-alternatives/require-classname-alternatives.js

@@ -265,6 +265,12 @@ exports.requireClassnameAlternatives = createRule({
                     checkAndReport(location.reportNode, location.value, location.fixNode);
                 }
             },
+            VariableDeclarator(node) {
+                const locations = (0, classname_utils_1.findClassnameStringsInVariable)(node);
+                for (const location of locations) {
+                    checkAndReport(location.reportNode, location.value, location.fixNode);
+                }
+            },
         };
     },
 });

package/src/lib/utils/classname-utils.d.ts

@@ -71,11 +71,19 @@ export type ClassnameLocation = {
  * Function names that accept Tailwind class strings as arguments.
  * These are commonly used for class merging and conditional class application.
  *
- * Corresponds to the `tailwindFunctions` config in .prettierrc for Prettier's
- * Tailwind CSS plugin.
+ * Kept in sync with Prettier's Tailwind CSS plugin config by
+ * `classname-config-sync.spec.ts`.
  */
 export declare const TAILWIND_FUNCTIONS: readonly ["cva", "cvaMerge", "tw", "twx", "tws", "twMerge", "twJoin", "cn", "clsx", "classNames"];
 export type TailwindFunction = (typeof TAILWIND_FUNCTIONS)[number];
+/**
+ * Variable name suffixes that indicate a classname value.
+ * Matches variables like: containerClass, buttonClassName, rootClasses
+ *
+ * Kept in sync with the VS Code `tailwindCSS.experimental.classRegex` setting by
+ * `classname-config-sync.spec.ts`, since Prettier has no equivalent option to check against.
+ */
+export declare const CLASSNAME_VARIABLE_SUFFIXES: readonly ["Class", "ClassName", "Classes"];
 /**
  * JSX attribute names that contain classname values
  */
@@ -134,6 +142,25 @@ export declare const findClassnameStringsInCall: (node: TSESTree.CallExpression)
  * ```
  */
 export declare const findClassnameStringsInAttribute: (node: TSESTree.JSXAttribute) => Array<ClassnameLocation>;
+/**
+ * Find all classname string locations in a VariableDeclarator node.
+ *
+ * Use this in your ESLint rule's VariableDeclarator handler to process
+ * variables with classname-like names.
+ *
+ * @example
+ * ```typescript
+ * VariableDeclarator(node) {
+ *   const locations = findClassnameStringsInVariable(node);
+ *   for (const location of locations) {
+ *     if (hasBannedPattern(location.value)) {
+ *       context.report({ node: location.reportNode, ... });
+ *     }
+ *   }
+ * }
+ * ```
+ */
+export declare const findClassnameStringsInVariable: (node: TSESTree.VariableDeclarator) => Array<ClassnameLocation>;
 /**
  * Split a classname string into individual class names.
  * Handles whitespace-separated classes.
@@ -148,3 +175,7 @@ export declare const joinClasses: (classes: Array<string>) => string;
  * Useful for auto-fix operations.
  */
 export declare const formatAsArray: (classes: Array<string>) => string;
+/**
+ * Create a quoted string with the same quote style as the original.
+ */
+export declare const quoteString: (value: string, originalNode: TSESTree.Literal) => string;

package/src/lib/utils/classname-utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatAsArray = exports.joinClasses = exports.splitClasses = exports.findClassnameStringsInAttribute = exports.findClassnameStringsInCall = exports.getCalleeName = exports.isClassnameAttribute = exports.isClassnameVariable = exports.isTailwindFunction = exports.CLASSNAME_ATTRIBUTES = exports.TAILWIND_FUNCTIONS = void 0;
+exports.quoteString = exports.formatAsArray = exports.joinClasses = exports.splitClasses = exports.findClassnameStringsInVariable = exports.findClassnameStringsInAttribute = exports.findClassnameStringsInCall = exports.getCalleeName = exports.isClassnameAttribute = exports.isClassnameVariable = exports.isTailwindFunction = exports.CLASSNAME_ATTRIBUTES = exports.CLASSNAME_VARIABLE_SUFFIXES = exports.TAILWIND_FUNCTIONS = void 0;
 const utils_1 = require("@typescript-eslint/utils");
 // =============================================================================
 // Constants
@@ -9,8 +9,8 @@ const utils_1 = require("@typescript-eslint/utils");
  * Function names that accept Tailwind class strings as arguments.
  * These are commonly used for class merging and conditional class application.
  *
- * Corresponds to the `tailwindFunctions` config in .prettierrc for Prettier's
- * Tailwind CSS plugin.
+ * Kept in sync with Prettier's Tailwind CSS plugin config by
+ * `classname-config-sync.spec.ts`.
  */
 exports.TAILWIND_FUNCTIONS = [
     "cva",
@@ -25,10 +25,17 @@ exports.TAILWIND_FUNCTIONS = [
     "classNames",
 ];
 /**
- * Variable name patterns that indicate a classname value.
+ * Variable name suffixes that indicate a classname value.
  * Matches variables like: containerClass, buttonClassName, rootClasses
+ *
+ * Kept in sync with the VS Code `tailwindCSS.experimental.classRegex` setting by
+ * `classname-config-sync.spec.ts`, since Prettier has no equivalent option to check against.
+ */
+exports.CLASSNAME_VARIABLE_SUFFIXES = ["Class", "ClassName", "Classes"];
+/**
+ * Variable name patterns that indicate a classname value, derived from CLASSNAME_VARIABLE_SUFFIXES.
  */
-const CLASSNAME_VARIABLE_PATTERNS = [/Class$/, /ClassName$/, /Classes$/];
+const CLASSNAME_VARIABLE_PATTERNS = exports.CLASSNAME_VARIABLE_SUFFIXES.map(suffix => new RegExp(`${suffix}$`));
 /**
  * JSX attribute names that contain classname values
  */
@@ -337,6 +344,49 @@ const extractFromJsxAttribute = (node) => {
     return [];
 };
 // =============================================================================
+// Variable Declaration Extraction
+// =============================================================================
+/**
+ * Extract classname locations from a variable declaration with a classname-like name.
+ *
+ * Example: const buttonClass = "flex items-center";
+ */
+const extractFromVariableDeclarator = (node) => {
+    if (node.id.type !== utils_1.AST_NODE_TYPES.Identifier) {
+        return [];
+    }
+    const varName = node.id.name;
+    if (!(0, exports.isClassnameVariable)(varName)) {
+        return [];
+    }
+    if (!node.init) {
+        return [];
+    }
+    const context = {
+        type: "variable",
+        variableName: varName,
+    };
+    // Handle string literal
+    const extracted = extractStringValue(node.init);
+    if (extracted) {
+        return [
+            {
+                value: extracted.value,
+                reportNode: node.init,
+                fixNode: extracted.node,
+                context,
+            },
+        ];
+    }
+    // Handle array of strings
+    if (node.init.type === utils_1.AST_NODE_TYPES.ArrayExpression) {
+        return extractFromArray(node.init, context);
+    }
+    // Note: Function calls in variable initializers are handled separately
+    // by the CallExpression handler
+    return [];
+};
+// =============================================================================
 // Unified Entry Points
 // =============================================================================
 /**
@@ -383,6 +433,28 @@ const findClassnameStringsInAttribute = (node) => {
     return extractFromJsxAttribute(node);
 };
 exports.findClassnameStringsInAttribute = findClassnameStringsInAttribute;
+/**
+ * Find all classname string locations in a VariableDeclarator node.
+ *
+ * Use this in your ESLint rule's VariableDeclarator handler to process
+ * variables with classname-like names.
+ *
+ * @example
+ * ```typescript
+ * VariableDeclarator(node) {
+ *   const locations = findClassnameStringsInVariable(node);
+ *   for (const location of locations) {
+ *     if (hasBannedPattern(location.value)) {
+ *       context.report({ node: location.reportNode, ... });
+ *     }
+ *   }
+ * }
+ * ```
+ */
+const findClassnameStringsInVariable = (node) => {
+    return extractFromVariableDeclarator(node);
+};
+exports.findClassnameStringsInVariable = findClassnameStringsInVariable;
 // =============================================================================
 // Utility Helpers for Fixing
 // =============================================================================
@@ -409,4 +481,21 @@ const formatAsArray = (classes) => {
     return JSON.stringify(classes);
 };
 exports.formatAsArray = formatAsArray;
+/**
+ * Get the quote character used in a string literal.
+ */
+const getQuoteChar = (node) => {
+    if (typeof node.value === "string" && node.raw) {
+        return node.raw.charAt(0);
+    }
+    return '"';
+};
+/**
+ * Create a quoted string with the same quote style as the original.
+ */
+const quoteString = (value, originalNode) => {
+    const quote = getQuoteChar(originalNode);
+    return `${quote}${value}${quote}`;
+};
+exports.quoteString = quoteString;
 //# sourceMappingURL=classname-utils.js.map