@trackunit/css-classname-utils 0.0.31 → 0.0.33

package/index.cjs.js

@@ -14,7 +14,7 @@ var types = require('@typescript-eslint/types');
  */
 const TAILWIND_FUNCTIONS = [
     "cva",
-    "cvaMerge",
+    "cx",
     "tw",
     "twx",
     "tws",
@@ -134,14 +134,15 @@ const extractFromArray = (node, parentContext) => {
     return locations;
 };
 // =============================================================================
-// CVA/CVAMerge Object Traversal
+// CVA Object Traversal
 // =============================================================================
 /**
  * Recursively extract classname locations from a CVA options object.
  *
  * CVA structure:
  * ```
- * cva(baseClasses, {
+ * cva({
+ *   base: baseClasses,
  *   variants: {
  *     variantName: {
  *       variantValue: "classnames here",
@@ -169,6 +170,11 @@ const extractFromCvaObject = (node, functionName, currentPath = []) => {
         if (keyName === "defaultVariants") {
             continue;
         }
+        // Compound-variant objects mix selector values (`intent: "truncate"`) with
+        // classname fields (`class` / `className`). Only the latter are classnames.
+        if (currentPath[0] === "compoundVariants" && !isClassnameAttribute(keyName)) {
+            continue;
+        }
         // Recurse into nested objects (variants, compoundVariants entries, etc.)
         if (property.value.type === types.AST_NODE_TYPES.ObjectExpression) {
             locations.push(...extractFromCvaObject(property.value, functionName, propertyPath));
@@ -235,8 +241,8 @@ const getPropertyKeyName = (key) => {
  * Handles various argument patterns:
  * - String literals: twMerge("flex items-center")
  * - Template literals: twMerge(`flex ${condition && "hidden"}`)
- * - Arrays: cvaMerge(["flex", "items-center"], options)
- * - CVA options objects: cva(base, { variants: { ... } })
+ * - Arrays: cx(["flex", "items-center"], "gap-2")
+ * - CVA options objects: cva({ base, variants: { ... } })
  */
 const extractFromFunctionCall = (node) => {
     const calleeName = getCalleeName(node.callee);
@@ -244,7 +250,7 @@ const extractFromFunctionCall = (node) => {
         return [];
     }
     const locations = [];
-    const isCvaStyle = calleeName === "cva" || calleeName === "cvaMerge";
+    const isCvaStyle = calleeName === "cva";
     node.arguments.forEach((arg, argIndex) => {
         const baseContext = {
             type: "function-call",
@@ -267,7 +273,7 @@ const extractFromFunctionCall = (node) => {
             locations.push(...extractFromArray(arg, baseContext));
             return;
         }
-        // Handle CVA options object (typically second argument)
+        // Handle CVA options object (`cva({ base, variants, ... })`)
         if (isCvaStyle && arg.type === types.AST_NODE_TYPES.ObjectExpression) {
             locations.push(...extractFromCvaObject(arg, calleeName));
         }
@@ -389,7 +395,7 @@ const extractFromVariableDeclarator = (node) => {
  * Find all classname string locations in a CallExpression node.
  *
  * Use this in your ESLint rule's CallExpression handler to process
- * Tailwind utility function calls like twMerge, cvaMerge, etc.
+ * Tailwind utility function calls like twMerge, cva, etc.
  *
  * @example
  * ```typescript

package/index.esm.js

@@ -12,7 +12,7 @@ import { AST_NODE_TYPES } from '@typescript-eslint/types';
  */
 const TAILWIND_FUNCTIONS = [
     "cva",
-    "cvaMerge",
+    "cx",
     "tw",
     "twx",
     "tws",
@@ -132,14 +132,15 @@ const extractFromArray = (node, parentContext) => {
     return locations;
 };
 // =============================================================================
-// CVA/CVAMerge Object Traversal
+// CVA Object Traversal
 // =============================================================================
 /**
  * Recursively extract classname locations from a CVA options object.
  *
  * CVA structure:
  * ```
- * cva(baseClasses, {
+ * cva({
+ *   base: baseClasses,
  *   variants: {
  *     variantName: {
  *       variantValue: "classnames here",
@@ -167,6 +168,11 @@ const extractFromCvaObject = (node, functionName, currentPath = []) => {
         if (keyName === "defaultVariants") {
             continue;
         }
+        // Compound-variant objects mix selector values (`intent: "truncate"`) with
+        // classname fields (`class` / `className`). Only the latter are classnames.
+        if (currentPath[0] === "compoundVariants" && !isClassnameAttribute(keyName)) {
+            continue;
+        }
         // Recurse into nested objects (variants, compoundVariants entries, etc.)
         if (property.value.type === AST_NODE_TYPES.ObjectExpression) {
             locations.push(...extractFromCvaObject(property.value, functionName, propertyPath));
@@ -233,8 +239,8 @@ const getPropertyKeyName = (key) => {
  * Handles various argument patterns:
  * - String literals: twMerge("flex items-center")
  * - Template literals: twMerge(`flex ${condition && "hidden"}`)
- * - Arrays: cvaMerge(["flex", "items-center"], options)
- * - CVA options objects: cva(base, { variants: { ... } })
+ * - Arrays: cx(["flex", "items-center"], "gap-2")
+ * - CVA options objects: cva({ base, variants: { ... } })
  */
 const extractFromFunctionCall = (node) => {
     const calleeName = getCalleeName(node.callee);
@@ -242,7 +248,7 @@ const extractFromFunctionCall = (node) => {
         return [];
     }
     const locations = [];
-    const isCvaStyle = calleeName === "cva" || calleeName === "cvaMerge";
+    const isCvaStyle = calleeName === "cva";
     node.arguments.forEach((arg, argIndex) => {
         const baseContext = {
             type: "function-call",
@@ -265,7 +271,7 @@ const extractFromFunctionCall = (node) => {
             locations.push(...extractFromArray(arg, baseContext));
             return;
         }
-        // Handle CVA options object (typically second argument)
+        // Handle CVA options object (`cva({ base, variants, ... })`)
         if (isCvaStyle && arg.type === AST_NODE_TYPES.ObjectExpression) {
             locations.push(...extractFromCvaObject(arg, calleeName));
         }
@@ -387,7 +393,7 @@ const extractFromVariableDeclarator = (node) => {
  * Find all classname string locations in a CallExpression node.
  *
  * Use this in your ESLint rule's CallExpression handler to process
- * Tailwind utility function calls like twMerge, cvaMerge, etc.
+ * Tailwind utility function calls like twMerge, cva, etc.
  *
  * @example
  * ```typescript

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/css-classname-utils",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/classname-utils.d.ts

@@ -16,7 +16,7 @@ import { TSESTree } from "@typescript-eslint/types";
  * This module provides a centralized way to detect classname usage patterns across:
  * - JSX `className` and `class` attributes
  * - Variables named with `...Class` or `...ClassName` suffixes
- * - Tailwind utility functions: `cvaMerge`, `twMerge`, `cva`, `tw`, `twx`, `tws`, `cn`, `clsx`, `classNames`, `twJoin`
+ * - Tailwind utility functions: `cva`, `cx`, `twMerge`, `tw`, `twx`, `tws`, `cn`, `clsx`, `classNames`, `twJoin`
  *
  * ## Core Concepts
  *
@@ -85,7 +85,7 @@ export type ClassnameLocation = {
  * 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 declare const TAILWIND_FUNCTIONS: readonly ["cva", "cx", "tw", "twx", "tws", "twMerge", "twJoin", "cn", "clsx", "classNames"];
 export type TailwindFunction = (typeof TAILWIND_FUNCTIONS)[number];
 /**
  * Variable name suffixes that indicate a classname value.
@@ -119,7 +119,7 @@ export declare const getCalleeName: (callee: TSESTree.CallExpression["callee"])
  * Find all classname string locations in a CallExpression node.
  *
  * Use this in your ESLint rule's CallExpression handler to process
- * Tailwind utility function calls like twMerge, cvaMerge, etc.
+ * Tailwind utility function calls like twMerge, cva, etc.
  *
  * @example
  * ```typescript