search

joe-bell / cva

Class Variance Authority
https://cva.style
Apache License 2.0
5.46k stars 107 forks source link

ClassName Duplication Issue with Compound Variants in Next.js 13.5.4 Using class-variance-authority ^0.7.0 #228

Closed Hamza-Liaqat1 closed 9 months ago

Hamza-Liaqat1 commented 9 months ago

Describe the bug In a Next.js (version 13.5.4) project with class-variance-authority (version ^0.7.0), I observe that class names are being duplicated on the generated elements, specifically when using compound variants. This results in conflicting styles being applied to the components, causing them to not render with the expected styles.

To Reproduce Steps to reproduce the behavior:

  1. Create a Next.js project (version 13.5.4).
  2. Install and setup class-variance-authority (version ^0.7.0).
  3. Define a component with cva and set up multiple variants and compound variants.
  4. Render the component with a combination of variants that should resolve to a compound variant.
  5. Observe the generated class names on the rendered component.

For example, in a Button component:

<Button variant="primary" modifier="plain">
  Add product (plain)
</Button>

The generated class names include conflicting styles, e.g.:

rounded-md relative bg-primary text-white bg-transparent border border-current shadow-[0_0_0_1px_currentColor] text-sm text-primary px-4 py-2

Note the duplication of text-white and text-primary.

Expected behavior The class names generated for the component should be non-conflicting and should represent the correct combination of the specified variants. For example, the text-white and text-primary classes should not be applied at the same time if they conflict.

Desktop:

Additional context This issue results in unexpected visual rendering of the components due to the conflicting styles from the duplicated class names. It happens when rendering components with specific combinations of variants, particularly with compound variants.

joe-bell commented 9 months ago

For example, the text-white and text-primary classes should not be applied at the same time if they conflict.

I think maybe there's a misunderstanding here, cva doesn't handle class conflicts for Tailwind.

For that you'll need to implement tw-merge: https://cva.style/docs/getting-started/installation#handling-style-conflicts

Hamza-Liaqat1 commented 9 months ago

Thank you so much, It works.