Repository: marigold-ui/marigold
Pull request #3258 (2023-08-09 10:56:05)

feat: always merge and clean tailwind classes when using `cva`

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: 72c021cd4f76fc6577ed77e688a27694fee32b89

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/marigold-ui/marigold/new/merge-cva?filename=.changeset/thirty-panthers-happen.md&value=---%0A%22%40marigold%2Fsystem%22%3A%20patch%0A---%0A%0Afeat%3A%20always%20merge%20and%20clean%20tailwind%20classes%20when%20using%20%60cva%60%0A)


codecov[bot]: ## [Codecov](https://app.codecov.io/gh/marigold-ui/marigold/pull/3258?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui) Report
> Merging [#3258](https://app.codecov.io/gh/marigold-ui/marigold/pull/3258?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui) (72c021c) into [main](https://app.codecov.io/gh/marigold-ui/marigold/commit/1bff9acf700325ef4e23ebf8826585ddc113bf0d?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui) (1bff9ac) will **not change** coverage.
> The diff coverage is `100.00%`.

[![Impacted file tree graph](https://app.codecov.io/gh/marigold-ui/marigold/pull/3258/graphs/tree.svg?width=650&height=150&src=pr&token=YIIcKX7TZu&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui)](https://app.codecov.io/gh/marigold-ui/marigold/pull/3258?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui)

```diff
@@            Coverage Diff            @@
##              main     #3258   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          116       116           
  Lines         7268      7268           
  Branches       319       319           
=========================================
  Hits          7268      7268           
```

| [Files Changed](https://app.codecov.io/gh/marigold-ui/marigold/pull/3258?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui) | Coverage Δ | |
|---|---|---|
| [packages/system/src/utils.ts](https://app.codecov.io/gh/marigold-ui/marigold/pull/3258?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui#diff-cGFja2FnZXMvc3lzdGVtL3NyYy91dGlscy50cw==) | `100.00% <100.00%> (ø)` | |


Patch:
diff --git a/packages/system/src/utils.ts b/packages/system/src/utils.ts
index 0287ab7bf..6fe802ea9 100644
--- a/packages/system/src/utils.ts
+++ b/packages/system/src/utils.ts
@@ -35,7 +35,7 @@ export type Props<T> = T extends ConfigSchema
 
 export const cva = <T>(base?: ClassValue, config?: Config<T>) => {
   function styles(props?: Props<T>) {
-    return _cva(base, config)(props);
+    return twMerge(_cva(base, config)(props));
   }
   styles.variants = config?.variants;
 
diff --git a/themes/theme-core/src/components/Button.styles.ts b/themes/theme-core/src/components/Button.styles.ts
index 5220c1f79..620fd236c 100644
--- a/themes/theme-core/src/components/Button.styles.ts
+++ b/themes/theme-core/src/components/Button.styles.ts
@@ -18,10 +18,10 @@ export const Button: ThemeComponent<'Button'> = cva(
           'text-text-primary-light border-none bg-transparent',
           'hover:bg-transparent hover:underline',
         ],
-        text: [' border-none bg-transparent', 'hover:bg-bg-hover-light'],
+        text: ['border-none bg-transparent', 'hover:bg-bg-hover-light'],
       },
       size: {
-        small: 'p-1',
+        small: 'py-1',
       },
     },
   }


Test patch:
diff --git a/packages/system/src/utils.test.ts b/packages/system/src/utils.test.ts
new file mode 100644
index 000000000..c620ff210
--- /dev/null
+++ b/packages/system/src/utils.test.ts
@@ -0,0 +1,24 @@
+import { cva } from './utils';
+
+test('cva (simple)', () => {
+  expect(cva(['text-sm'])()).toMatchInlineSnapshot(`"text-sm"`);
+});
+
+test('cva (variants)', () => {
+  const styles = cva(['text-sm'], {
+    variants: {
+      variant: {
+        blue: 'text-blue-500',
+      },
+      size: {
+        large: 'text-lg',
+      },
+    },
+  });
+
+  expect(styles()).toMatchInlineSnapshot(`"text-sm"`);
+  expect(styles({ variant: 'blue' })).toMatchInlineSnapshot(
+    `"text-sm text-blue-500"`
+  );
+  expect(styles({ size: 'large' })).toMatchInlineSnapshot(`"text-lg"`);
+});