@culur/prettier-plugin-tailwindcss-group 1.1.0

package/src/handle-targets/target-cva-compound-variants.test.ts

@@ -0,0 +1,239 @@
+import dedent from 'dedent';
+import { describe } from 'vitest';
+import { testFormat } from '../__tests__/utils/test-format';
+
+describe('target-cva-compound-variants: bypassing invalid or missing compoundVariants', () => {
+  testFormat(
+    'ignores config without compoundVariants',
+    { classNameThreshold: 4 },
+    dedent /* ts */ `
+      const b = cva('base', {
+        variants: { size: { sm: 'text-sm' } },
+      });
+    `,
+    dedent /* ts */ `
+      const b = cva('base', {
+        variants: { size: { sm: 'text-sm' } },
+      });
+    `,
+  );
+
+  testFormat(
+    'ignores non-array compoundVariants property',
+    { classNameThreshold: 4 },
+    dedent /* ts */ `
+      const b = cva('base', {
+        compoundVariants: 'invalid-string',
+      });
+    `,
+    dedent /* ts */ `
+      const b = cva('base', {
+        compoundVariants: 'invalid-string',
+      });
+    `,
+  );
+
+  testFormat(
+    'skips non-object elements in compoundVariants array',
+    { classNameThreshold: 4 },
+    dedent /* ts */ `
+      const b = cva('base', {
+        compoundVariants: [null, undefined, 'string-elem'],
+      });
+    `,
+    dedent /* ts */ `
+      const b = cva('base', {
+        compoundVariants: [null, undefined, 'string-elem'],
+      });
+    `,
+  );
+
+  testFormat(
+    'ignores non-class properties inside compoundVariants objects',
+    { classNameThreshold: 1 },
+    dedent /* ts */ `
+      const b = cva('base', {
+        compoundVariants: [
+          {
+            intent: 'primary',
+            size: 'medium',
+          },
+        ],
+      });
+    `,
+    dedent /* ts */ `
+      const b = cva('base', {
+        compoundVariants: [
+          {
+            intent: 'primary',
+            size: 'medium',
+          },
+        ],
+      });
+    `,
+  );
+
+  testFormat(
+    'skips non-transformable class property values',
+    { classNameThreshold: 1 },
+    dedent /* ts */ `
+      const b = cva('base', {
+        compoundVariants: [
+          {
+            intent: 'primary',
+            class: someIdentifier,
+          },
+        ],
+      });
+    `,
+    dedent /* ts */ `
+      const b = cva('base', {
+        compoundVariants: [
+          {
+            intent: 'primary',
+            class: someIdentifier,
+          },
+        ],
+      });
+    `,
+  );
+});
+
+describe('target-cva-compound-variants: formatting "class" property', () => {
+  testFormat(
+    'formats StringLiteral "class" when > threshold',
+    { classNameThreshold: 4 },
+    dedent /* ts */ `
+      const b = cva('base', {
+        compoundVariants: [
+          {
+            intent: 'primary',
+            class:
+              'flex items-center justify-center text-sm font-bold bg-white',
+          },
+        ],
+      });
+    `,
+    dedent /* ts */ `
+      const b = cva('base', {
+        compoundVariants: [
+          {
+            intent: 'primary',
+            class: [
+              'flex items-center justify-center',
+              'text-sm font-bold',
+              'bg-white',
+            ],
+          },
+        ],
+      });
+    `,
+  );
+
+  testFormat(
+    'formats CallExpression in "class"',
+    { classNameThreshold: 4 },
+    dedent /* ts */ `
+      const b = cva('base', {
+        compoundVariants: [
+          {
+            intent: 'primary',
+            class: cn('flex items-center text-sm font-bold bg-white'),
+          },
+        ],
+      });
+    `,
+    dedent /* ts */ `
+      const b = cva('base', {
+        compoundVariants: [
+          {
+            intent: 'primary',
+            class: cn('flex items-center', 'text-sm font-bold', 'bg-white'),
+          },
+        ],
+      });
+    `,
+  );
+
+  testFormat(
+    'formats ArrayExpression in "class"',
+    { classNameThreshold: 4 },
+    dedent /* ts */ `
+      const b = cva('base', {
+        compoundVariants: [
+          {
+            intent: 'primary',
+            class: ['flex items-center text-sm font-bold bg-white'],
+          },
+        ],
+      });
+    `,
+    dedent /* ts */ `
+      const b = cva('base', {
+        compoundVariants: [
+          {
+            intent: 'primary',
+            class: ['flex items-center', 'text-sm font-bold', 'bg-white'],
+          },
+        ],
+      });
+    `,
+  );
+});
+
+describe('target-cva-compound-variants: formatting "className" property', () => {
+  testFormat(
+    'formats StringLiteral "className" when > threshold',
+    { classNameThreshold: 4 },
+    dedent /* ts */ `
+      const b = cva('base', {
+        compoundVariants: [
+          {
+            intent: 'primary',
+            className:
+              'flex items-center justify-center text-sm font-bold bg-white',
+          },
+        ],
+      });
+    `,
+    dedent /* ts */ `
+      const b = cva('base', {
+        compoundVariants: [
+          {
+            intent: 'primary',
+            className: [
+              'flex items-center justify-center',
+              'text-sm font-bold',
+              'bg-white',
+            ],
+          },
+        ],
+      });
+    `,
+  );
+
+  testFormat(
+    'leaves StringLiteral "className" unchanged when <= threshold',
+    { classNameThreshold: 10 },
+    dedent /* ts */ `
+      const b = cva('base', {
+        compoundVariants: [
+          {
+            intent: 'primary',
+            className: 'flex items-center',
+          },
+        ],
+      });
+    `,
+    dedent /* ts */ `
+      const b = cva('base', {
+        compoundVariants: [
+          {
+            intent: 'primary',
+            className: 'flex items-center',
+          },
+        ],
+      });
+    `,
+  );
+});

package/src/handle-targets/target-cva-compound-variants.ts

@@ -0,0 +1,45 @@
+import type { ObjectExpression } from 'estree-jsx';
+import type { PluginOptions } from '../prettier';
+import {
+  isArrayExpression,
+  isCallExpression,
+  isObjectExpression,
+  isStaticProperty,
+  isStringLiteral,
+} from '../ast';
+import { handleCvaClassValue } from '../handle-node/handle-cva-class-value';
+
+/** Processes `compoundVariants[*].class` and `compoundVariants[*].className` in `cva(...)`. */
+export function handleTargetCvaCompoundVariants(
+  config: ObjectExpression,
+  options: PluginOptions,
+): void {
+  // Find the 'compoundVariants' property on the cva config object
+  const cvProp = config.properties.find(property =>
+    isStaticProperty(property, 'compoundVariants'),
+  );
+
+  // Return early if 'compoundVariants' is missing or not an array
+  if (!cvProp || !isArrayExpression(cvProp.value)) return;
+
+  // Process each compound variant object entry
+  for (const element of cvProp.value.elements) {
+    if (!element || !isObjectExpression(element)) continue;
+
+    for (const prop of element.properties) {
+      // Only target 'class' or 'className' properties containing transformable class expressions
+      if (
+        (!isStaticProperty(prop, 'class') &&
+          !isStaticProperty(prop, 'className')) ||
+        (!isStringLiteral(prop.value) &&
+          !isCallExpression(prop.value) &&
+          !isArrayExpression(prop.value))
+      ) {
+        continue;
+      }
+
+      // Transform class value (string literal, function call, or array)
+      prop.value = handleCvaClassValue(prop.value, options);
+    }
+  }
+}

package/src/handle-targets/target-cva-variants.test.ts

@@ -0,0 +1,178 @@
+import dedent from 'dedent';
+import { describe } from 'vitest';
+import { testFormat } from '../__tests__/utils/test-format';
+
+describe('target-cva-variants: bypassing invalid or missing variants', () => {
+  testFormat(
+    'ignores config without variants property',
+    { classNameThreshold: 4 },
+    dedent /* ts */ `
+      const b = cva('base', {
+        defaultVariants: { size: 'sm' },
+      });
+    `,
+    dedent /* ts */ `
+      const b = cva('base', {
+        defaultVariants: { size: 'sm' },
+      });
+    `,
+  );
+
+  testFormat(
+    'ignores non-object variants property',
+    { classNameThreshold: 4 },
+    dedent /* ts */ `
+      const b = cva('base', {
+        variants: 'invalid-string',
+      });
+    `,
+    dedent /* ts */ `
+      const b = cva('base', {
+        variants: 'invalid-string',
+      });
+    `,
+  );
+
+  testFormat(
+    'skips variant groups that are not objects',
+    { classNameThreshold: 4 },
+    dedent /* ts */ `
+      const b = cva('base', {
+        variants: {
+          size: 'not-an-object',
+        },
+      });
+    `,
+    dedent /* ts */ `
+      const b = cva('base', {
+        variants: {
+          size: 'not-an-object',
+        },
+      });
+    `,
+  );
+
+  testFormat(
+    'skips options with non-transformable values',
+    { classNameThreshold: 1 },
+    dedent /* ts */ `
+      const b = cva('base', {
+        variants: {
+          size: {
+            sm: dynamicVar,
+          },
+        },
+      });
+    `,
+    dedent /* ts */ `
+      const b = cva('base', {
+        variants: {
+          size: {
+            sm: dynamicVar,
+          },
+        },
+      });
+    `,
+  );
+});
+
+describe('target-cva-variants: formatting variant option values', () => {
+  testFormat(
+    'converts StringLiteral option to StringArrayExpression when > threshold',
+    { classNameThreshold: 4 },
+    dedent /* ts */ `
+      const b = cva('base', {
+        variants: {
+          size: {
+            sm: 'flex items-center justify-center text-sm font-bold bg-white shadow-md',
+            lg: 'flex',
+          },
+        },
+      });
+    `,
+    dedent /* ts */ `
+      const b = cva('base', {
+        variants: {
+          size: {
+            sm: [
+              'flex items-center justify-center',
+              'text-sm font-bold',
+              'bg-white',
+              'shadow-md',
+            ],
+            lg: 'flex',
+          },
+        },
+      });
+    `,
+  );
+
+  testFormat(
+    'simplifies variant StringArrayExpression to StringLiteral when <= threshold',
+    { classNameThreshold: 10 },
+    dedent /* ts */ `
+      const b = cva('base', {
+        variants: {
+          size: {
+            sm: ['flex', 'items-center'],
+          },
+        },
+      });
+    `,
+    dedent /* ts */ `
+      const b = cva('base', {
+        variants: {
+          size: {
+            sm: 'flex items-center',
+          },
+        },
+      });
+    `,
+  );
+
+  testFormat(
+    'formats CallExpression option in variants',
+    { classNameThreshold: 4 },
+    dedent /* ts */ `
+      const b = cva('base', {
+        variants: {
+          size: {
+            sm: cn('flex items-center text-sm font-bold bg-white'),
+          },
+        },
+      });
+    `,
+    dedent /* ts */ `
+      const b = cva('base', {
+        variants: {
+          size: {
+            sm: cn('flex items-center', 'text-sm font-bold', 'bg-white'),
+          },
+        },
+      });
+    `,
+  );
+
+  testFormat(
+    'preserves dynamic variant option untouched',
+    { classNameThreshold: 1 },
+    dedent /* ts */ `
+      const b = cva('base', {
+        variants: {
+          size: {
+            sm: cn(isActive && 'flex'),
+          },
+        },
+      });
+    `,
+    dedent /* ts */ `
+      const b = cva('base', {
+        variants: {
+          size: {
+            sm: cn(isActive && 'flex'),
+          },
+        },
+      });
+    `,
+  );
+});

package/src/handle-targets/target-cva-variants.ts

@@ -0,0 +1,50 @@
+import type { ObjectExpression } from 'estree-jsx';
+import type { PluginOptions } from '../prettier';
+import {
+  isArrayExpression,
+  isCallExpression,
+  isObjectExpression,
+  isStaticProperty,
+  isStringLiteral,
+} from '../ast';
+import { handleCvaClassValue } from '../handle-node/handle-cva-class-value';
+
+/** Processes `variants[*][*]` (all leaf option values) in `cva(...)`. */
+export function handleTargetCvaVariants(
+  config: ObjectExpression,
+  options: PluginOptions,
+): void {
+  // Find the 'variants' property on the cva config object
+  const variantsProp = config.properties.find(p =>
+    isStaticProperty(p, 'variants'),
+  );
+
+  // Return early if 'variants' is missing or not an object
+  if (!variantsProp || !isObjectExpression(variantsProp.value)) return;
+
+  // Traverse each variant group (e.g. `intent: { primary: "...", secondary: "..." }`)
+  for (const variantProp of variantsProp.value.properties) {
+    if (
+      !isStaticProperty(variantProp) ||
+      !isObjectExpression(variantProp.value)
+    ) {
+      continue;
+    }
+
+    // Traverse each option within the variant (e.g. `primary: "..."`)
+    for (const optionProp of variantProp.value.properties) {
+      // Only process properties with valid static keys and transformable values
+      if (
+        !isStaticProperty(optionProp) ||
+        (!isStringLiteral(optionProp.value) &&
+          !isCallExpression(optionProp.value) &&
+          !isArrayExpression(optionProp.value))
+      ) {
+        continue;
+      }
+
+      // Transform option class value (string literal, function call, or array)
+      optionProp.value = handleCvaClassValue(optionProp.value, options);
+    }
+  }
+}

package/src/handle-targets/target-cva.test.ts

@@ -0,0 +1,126 @@
+import dedent from 'dedent';
+import { describe } from 'vitest';
+import { testFormat } from '../__tests__/utils/test-format';
+
+describe('target-cva: validation and bypass', () => {
+  testFormat(
+    'ignores non-cva function calls',
+    { classNameThreshold: 2 },
+    dedent /* ts */ `
+      const b = myOtherFn('flex items-center text-sm font-bold');
+    `,
+    dedent /* ts */ `
+      const b = myOtherFn('flex items-center text-sm font-bold');
+    `,
+  );
+
+  testFormat(
+    'ignores aliased/renamed cva calls (e.g. createVariants or classVarianceAuthority)',
+    { classNameThreshold: 4 },
+    dedent /* ts */ `
+      const button = createVariants(
+        'flex items-center justify-center text-sm font-bold bg-white shadow-md',
+      );
+    `,
+    dedent /* ts */ `
+      const button = createVariants(
+        'flex items-center justify-center text-sm font-bold bg-white shadow-md',
+      );
+    `,
+  );
+
+  testFormat(
+    'ignores cva() calls with no arguments',
+    { classNameThreshold: 2 },
+    dedent /* ts */ ` const b = cva(); `,
+    dedent /* ts */ ` const b = cva(); `,
+  );
+
+  testFormat(
+    'handles cva(base, ...spreadConfig) by processing only base',
+    { classNameThreshold: 4 },
+    dedent /* ts */ `
+      const b = cva(
+        'flex items-center justify-center text-sm font-bold bg-white',
+        ...spreadConfig,
+      );
+    `,
+    dedent /* ts */ `
+      const b = cva(
+        ['flex items-center justify-center', 'text-sm font-bold', 'bg-white'],
+        ...spreadConfig,
+      );
+    `,
+  );
+
+  testFormat(
+    'handles cva(base, identifierConfig) by processing only base',
+    { classNameThreshold: 4 },
+    dedent /* ts */ `
+      const b = cva(
+        'flex items-center justify-center text-sm font-bold bg-white',
+        config,
+      );
+    `,
+    dedent /* ts */ `
+      const b = cva(
+        ['flex items-center justify-center', 'text-sm font-bold', 'bg-white'],
+        config,
+      );
+    `,
+  );
+});
+
+describe('target-cva: full cva processing (base + config)', () => {
+  testFormat(
+    'formats both base and variants in a complete cva definition',
+    { classNameThreshold: 4 },
+    dedent /* ts */ `
+      const b = cva(
+        'flex items-center justify-center text-sm font-bold bg-white',
+        {
+          variants: {
+            intent: {
+              primary:
+                'flex items-center justify-center text-sm font-bold bg-white shadow-md',
+            },
+          },
+          compoundVariants: [
+            {
+              intent: 'primary',
+              class:
+                'flex items-center justify-center text-sm font-bold bg-white',
+            },
+          ],
+        },
+      );
+    `,
+    dedent /* ts */ `
+      const b = cva(
+        ['flex items-center justify-center', 'text-sm font-bold', 'bg-white'],
+        {
+          variants: {
+            intent: {
+              primary: [
+                'flex items-center justify-center',
+                'text-sm font-bold',
+                'bg-white',
+                'shadow-md',
+              ],
+            },
+          },
+          compoundVariants: [
+            {
+              intent: 'primary',
+              class: [
+                'flex items-center justify-center',
+                'text-sm font-bold',
+                'bg-white',
+              ],
+            },
+          ],
+        },
+      );
+    `,
+  );
+});

package/src/handle-targets/target-cva.ts

@@ -0,0 +1,33 @@
+import type { Node } from 'estree-jsx';
+import type { PluginOptions } from '../prettier';
+import { isCallExpression, isIdentifier, isObjectExpression } from '../ast';
+import { handleTargetCvaBase } from './target-cva-base';
+import { handleTargetCvaCompoundVariants } from './target-cva-compound-variants';
+import { handleTargetCvaVariants } from './target-cva-variants';
+
+/**
+ * Handles a `cva(...)` CallExpression, transforming static classes in
+ * `params[0]`, `params[1].variants`, and `params[1].compoundVariants`.
+ */
+export function handleTargetCVA(node: Node, options: PluginOptions): boolean {
+  // Validate that node is a CallExpression calling `cva(...)` with at least 1 argument
+  if (
+    !isCallExpression(node) ||
+    !isIdentifier(node.callee, 'cva') ||
+    node.arguments.length < 1
+  ) {
+    return false;
+  }
+
+  // Process params[0] — base classes
+  handleTargetCvaBase(node, options);
+
+  // Process params[1] — config object (variants & compoundVariants)
+  const config = node.arguments[1];
+  if (config && config.type !== 'SpreadElement' && isObjectExpression(config)) {
+    handleTargetCvaVariants(config, options);
+    handleTargetCvaCompoundVariants(config, options);
+  }
+
+  return true;
+}