@trackunit/eslint-plugin-trackunit 0.6.129 → 0.6.130

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 0.6.130 (2026-09-08)
+
+### 🚀 Features
+
+- ⚠️  **css-class-variance-utilities:** replace cvaMerge with cva 1.0 ([#25413](https://github.com/Trackunit/manager/pull/25413), [#25396](https://github.com/Trackunit/manager/issues/25396), [#25410](https://github.com/Trackunit/manager/issues/25410), [#133](https://github.com/Trackunit/manager/issues/133))
+
+### ⚠️  Breaking Changes
+
+- **css-class-variance-utilities:** replace cvaMerge with cva 1.0  ([#25413](https://github.com/Trackunit/manager/pull/25413), [#25396](https://github.com/Trackunit/manager/issues/25396), [#25410](https://github.com/Trackunit/manager/issues/25410), [#133](https://github.com/Trackunit/manager/issues/133))
+
+### 🧱 Updated Dependencies
+
+- Updated css-classname-utils to 0.0.33
+- Updated shared-utils to 1.16.33
+
+### ❤️ Thank You
+
+- Cursor @cursoragent
+- Michael Buss Rønne @man-trackunit
+
 ## 0.6.129 (2026-09-08)
 
 ### 🧱 Updated Dependencies

package/README.md

@@ -54,9 +54,9 @@ All custom rules are enabled automatically through the presets under the `@track
 
 | Rule                                                   | Severity | Auto-fix | Description                                                                                |
 | ------------------------------------------------------ | -------- | -------- | ------------------------------------------------------------------------------------------ |
-| `@trackunit/no-template-strings-in-classname-prop`     | —        | —        | Disallows template literals in `className`. Use `twMerge()` or `cvaMerge()` instead.       |
+| `@trackunit/no-template-strings-in-classname-prop`     | —        | —        | Disallows template literals in `className`. Use `cx()` or `cva()` instead.                 |
 | `@trackunit/require-classname-alternatives`            | —        | yes      | Replaces banned class names with approved alternatives.                                    |
-| `@trackunit/cva-merge-base-classes-as-array`           | —        | yes      | Enforces array syntax for `cvaMerge` base classes when more than one class is used.        |
+| `@trackunit/cva-merge-base-classes-as-array`           | —        | yes      | Enforces array syntax for `cva` base classes when more than one class is used.             |
 | `@trackunit/design-guideline-button-icon-size-match`   | —        | yes      | Ensures `Icon` inside `Button` uses the correct `size` prop.                               |
 | `@trackunit/prefer-field-components`                   | —        | yes      | Prefers `SelectField`/`TextField` over manually combining `Label` + base input components. |
 | `@trackunit/prefer-mouse-event-handler-in-react-props` | —        | —        | Enforces `MouseEventHandler<T>` typing for `onClick*` props.                               |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/eslint-plugin-trackunit",
-  "version": "0.6.129",
+  "version": "0.6.130",
   "license": "SEE LICENSE IN LICENSE.txt",
   "repository": "https://github.com/Trackunit/manager",
   "engines": {
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@nx/eslint-plugin": "23.1.0",
-    "@trackunit/css-classname-utils": "0.0.32",
+    "@trackunit/css-classname-utils": "0.0.33",
     "@typescript-eslint/eslint-plugin": "8.58.1",
     "@typescript-eslint/utils": "8.58.1",
     "eslint-config-prettier": "^10.1.8",

package/src/lib/config/fragments/restricted-imports.js

@@ -50,9 +50,13 @@ exports.restrictedImportRules = {
                     name: "@heroicons/react/24/outline",
                     message: "Please use the Icon component from react-components instead.",
                 },
+                {
+                    name: "cva",
+                    message: "Import cva/cx from @trackunit/css-class-variance-utilities instead. Ours are bound to a config whose onComplete hook runs every generated class string through tailwind-merge; the raw ones only concatenate, so conflicting utilities would both survive.",
+                },
                 {
                     name: "class-variance-authority",
-                    message: "Import our wrappers from, @trackunit/css-class-variance-utilities or twMerge instead. [cva -> cvaMerge], [cx -> twMerge]",
+                    message: "Removed — import cva/cx from @trackunit/css-class-variance-utilities instead. The old package is no longer a dependency.",
                 },
             ],
             patterns: [

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

@@ -1,14 +1,22 @@
 import { ESLintUtils } from "@typescript-eslint/utils";
 type MessageIds = "stringNeedsArray" | "arrayNeedsSplit";
 /**
- * ESLint rule that converts cvaMerge base styles to arrays if more than one class is used.
+ * ESLint rule that converts cva base styles to arrays if more than one class is used.
+ *
+ * One class per array item keeps diffs and merge conflicts to the class that
+ * actually changed, and lets tailwind-merge see each utility individually.
+ *
+ * The export and published rule id keep the historical `cva-merge-…` name
+ * (GLU-2173). Renaming would be a breaking change for every consumer
+ * `eslint.config` that lists `@trackunit/cva-merge-base-classes-as-array`;
+ * the implementation only inspects `cva({ base })`.
  *
  * @example
  *  Invalid:
- *    const cvaMyComponent = cvaMerge("text-danger-600 mb-4 font-semibold");
- *    const cvaMyComponent = cvaMerge(["text-danger-600 mb-4","font-semibold"]);
+ *    const cvaMyComponent = cva({ base: "text-danger-600 mb-4 font-semibold" });
+ *    const cvaMyComponent = cva({ base: ["text-danger-600 mb-4","font-semibold"] });
  *  Valid:
- *    const cvaMyComponent = cvaMerge(["text-danger-600", "mb-4", "font-semibold"]);
+ *    const cvaMyComponent = cva({ base: ["text-danger-600", "mb-4", "font-semibold"] });
  */
 export declare const cvaMergeBaseClassesAsArray: ESLintUtils.RuleModule<MessageIds, [], unknown, ESLintUtils.RuleListener> & {
     name: string;

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

@@ -4,39 +4,83 @@ exports.cvaMergeBaseClassesAsArray = void 0;
 const css_classname_utils_1 = require("@trackunit/css-classname-utils");
 const utils_1 = require("@typescript-eslint/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;
+/** Base classes live under `base` in a cva 1.0 config. */
+const isBaseContext = (context) => {
+    if (context.type === "array-element") {
+        return isBaseContext(context.parentContext);
     }
-    if (context.type === "array-element" && context.parentContext.type === "function-call") {
-        return context.parentContext.functionName === "cvaMerge" && context.parentContext.argumentIndex === 0;
+    if (context.type === "cva-variant") {
+        return context.functionName === "cva" && context.variantPath.length === 1 && context.variantPath[0] === "base";
     }
     return false;
 };
+const propertyKeyName = (key) => {
+    if (key.type === utils_1.AST_NODE_TYPES.Identifier) {
+        return key.name;
+    }
+    if (key.type === utils_1.AST_NODE_TYPES.Literal && typeof key.value === "string") {
+        return key.value;
+    }
+    return null;
+};
+/**
+ * The node holding the base classes on a `cva({ base, ... })` call.
+ */
+const findBaseNode = (node) => {
+    const calleeName = (0, css_classname_utils_1.getCalleeName)(node.callee);
+    if (calleeName !== "cva") {
+        return null;
+    }
+    const firstArgument = node.arguments[0];
+    if (!firstArgument || firstArgument.type !== utils_1.AST_NODE_TYPES.ObjectExpression) {
+        return null;
+    }
+    const baseProperty = firstArgument.properties.find((property) => property.type === utils_1.AST_NODE_TYPES.Property && propertyKeyName(property.key) === "base");
+    const baseValue = baseProperty?.value;
+    if (baseValue?.type === utils_1.AST_NODE_TYPES.Literal || baseValue?.type === utils_1.AST_NODE_TYPES.ArrayExpression) {
+        return baseValue;
+    }
+    return null;
+};
 const isLiteralLocation = (location) => {
     return location.fixNode.type === utils_1.AST_NODE_TYPES.Literal && typeof location.fixNode.value === "string";
 };
+const isStringLiteral = (element) => element !== null && element.type === utils_1.AST_NODE_TYPES.Literal && typeof element.value === "string";
 /**
- * ESLint rule that converts cvaMerge base styles to arrays if more than one class is used.
+ * `formatAsArray(allClasses)` below rebuilds the array from string literals only, then replaces
+ * the *whole* array node -- so a non-literal element (a spread, an identifier, a conditional, ...)
+ * would be silently dropped. Report but don't offer a fix in that case instead.
+ */
+const hasNonLiteralElement = (node) => node.type === utils_1.AST_NODE_TYPES.ArrayExpression && node.elements.some(element => !isStringLiteral(element));
+/**
+ * ESLint rule that converts cva base styles to arrays if more than one class is used.
+ *
+ * One class per array item keeps diffs and merge conflicts to the class that
+ * actually changed, and lets tailwind-merge see each utility individually.
+ *
+ * The export and published rule id keep the historical `cva-merge-…` name
+ * (GLU-2173). Renaming would be a breaking change for every consumer
+ * `eslint.config` that lists `@trackunit/cva-merge-base-classes-as-array`;
+ * the implementation only inspects `cva({ base })`.
  *
  * @example
  *  Invalid:
- *    const cvaMyComponent = cvaMerge("text-danger-600 mb-4 font-semibold");
- *    const cvaMyComponent = cvaMerge(["text-danger-600 mb-4","font-semibold"]);
+ *    const cvaMyComponent = cva({ base: "text-danger-600 mb-4 font-semibold" });
+ *    const cvaMyComponent = cva({ base: ["text-danger-600 mb-4","font-semibold"] });
  *  Valid:
- *    const cvaMyComponent = cvaMerge(["text-danger-600", "mb-4", "font-semibold"]);
+ *    const cvaMyComponent = cva({ base: ["text-danger-600", "mb-4", "font-semibold"] });
  */
 exports.cvaMergeBaseClassesAsArray = createRule({
     name: "cva-merge-base-classes-as-array",
     meta: {
         type: "layout",
         docs: {
-            description: "Convert cvaMerge base styles to arrays if more than one class is used.",
+            description: "Convert cva base styles to arrays if more than one class is used.",
         },
         fixable: "code",
         messages: {
-            stringNeedsArray: "[cvaMerge] The first argument of cvaMerge should be an array if multiple classes are used.",
-            arrayNeedsSplit: "[cvaMerge] Only one class per array item is allowed.",
+            stringNeedsArray: "[cva] Base classes should be an array if multiple classes are used.",
+            arrayNeedsSplit: "[cva] Only one class per array item is allowed.",
         },
         schema: [],
     },
@@ -44,15 +88,15 @@ exports.cvaMergeBaseClassesAsArray = createRule({
     create(context) {
         return {
             CallExpression(node) {
-                const firstArg = node.arguments[0];
-                if (!firstArg) {
+                const baseNode = findBaseNode(node);
+                if (!baseNode) {
                     return;
                 }
                 const baseClassLocations = (0, css_classname_utils_1.findClassnameStringsInCall)(node)
-                    .filter(location => isCvaMergeBaseContext(location.context))
+                    .filter(location => isBaseContext(location.context))
                     .filter(isLiteralLocation);
-                // Handle string literal: cvaMerge("class1 class2")
-                if (firstArg.type === utils_1.AST_NODE_TYPES.Literal) {
+                // A single string: cva({ base: "class1 class2" })
+                if (baseNode.type === utils_1.AST_NODE_TYPES.Literal) {
                     const baseClassLocation = baseClassLocations[0];
                     if (!baseClassLocation) {
                         return;
@@ -69,19 +113,22 @@ exports.cvaMergeBaseClassesAsArray = createRule({
                     }
                     return;
                 }
-                // Handle array: cvaMerge(["class1 class2", "class3"])
-                if (firstArg.type === utils_1.AST_NODE_TYPES.ArrayExpression) {
-                    const hasMultiClassElement = baseClassLocations.some(location => location.value.includes(" "));
-                    if (hasMultiClassElement) {
-                        context.report({
-                            node,
-                            messageId: "arrayNeedsSplit",
-                            fix(fixer) {
+                // An array: cva({ base: [...] })
+                const hasMultiClassElement = baseClassLocations.some(location => location.value.includes(" "));
+                if (hasMultiClassElement) {
+                    context.report({
+                        node,
+                        messageId: "arrayNeedsSplit",
+                        // A non-literal element (spread, identifier, conditional, ...) can't be rebuilt by
+                        // formatAsArray, and offering a fix that silently drops it would be worse than
+                        // reporting without one.
+                        fix: hasNonLiteralElement(baseNode)
+                            ? null
+                            : fixer => {
                                 const allClasses = baseClassLocations.flatMap(location => (0, css_classname_utils_1.splitClasses)(location.value));
-                                return fixer.replaceText(firstArg, (0, css_classname_utils_1.formatAsArray)(allClasses));
+                                return fixer.replaceText(baseNode, (0, css_classname_utils_1.formatAsArray)(allClasses));
                             },
-                        });
-                    }
+                    });
                 }
             },
         };

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

@@ -24,7 +24,7 @@ exports.noTemplateStringsInClassName = createRule({
             description: "Disallow the use of template strings in className prop to encourage better class management.",
         },
         messages: {
-            templateStringInClassName: "Do not use template strings in className prop. If you wish to merge classes from different sources, use twMerge() for simple inline merging or make a cvaMerge() function if it has variants.",
+            templateStringInClassName: "Do not use template strings in className prop. If you wish to merge classes from different sources, use cx() for simple inline merging or make a cva() function if it has variants.",
         },
         schema: [],
     },