feat(twmerge): inject function like tailwind merge possible

busbud · Sep 25, 2024 · f8af2ca · f8af2ca
1 parent 82a9b4a
commit f8af2ca
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 53 deletions.
diff --git a/packages/core/src/tailwind-buddy.ts b/packages/core/src/tailwind-buddy.ts
@@ -10,7 +10,7 @@ import {
 import { cleanString } from "./utils/strings";
 
 // Utility functions
-const mergeClasses = (classes: string[]): string => {
+const uniquifyClasses = (classes: string[]): string => {
   return [...new Set(classes.filter(Boolean))].join(" ");
 };
 
@@ -29,7 +29,10 @@ const flattenVariant = <S extends Slots>(
 };
 
 // Main function
-export const setupCompose = <Sc extends string>(screens: Sc[]) => {
+export const setupCompose = <Sc extends string>(
+  screens: Sc[],
+  mergeClasses: (str: string) => string = (str) => str
+) => {
   return <
     V extends Variants<S>,
     CV extends CompoundVariant<V, S>,
@@ -200,7 +203,7 @@ export const setupCompose = <Sc extends string>(screens: Sc[]) => {
                 .forEach((cls) => classSet.add(cls));
             }
 
-            const result = mergeClasses(Array.from(classSet));
+            const result = mergeClasses(uniquifyClasses(Array.from(classSet)));
             variantCache.set(cacheKey, result);
             return result;
           };

diff --git a/packages/documentation/.vitepress/cache/deps/@theme_index.js b/packages/documentation/.vitepress/cache/deps/@theme_index.js
diff --git a/packages/documentation/.vitepress/cache/deps/_metadata.json b/packages/documentation/.vitepress/cache/deps/_metadata.json
@@ -1,49 +1,49 @@
 {
-  "hash": "19b9179e",
-  "configHash": "f43f310e",
-  "lockfileHash": "a8ccead4",
-  "browserHash": "4bff83ef",
+  "hash": "3bc5aab3",
+  "configHash": "2763b157",
+  "lockfileHash": "8d748f00",
+  "browserHash": "9cdcabca",
   "optimized": {
     "vue": {
       "src": "../../../../../node_modules/.pnpm/[email protected][email protected]/node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "f982f54e",
+      "fileHash": "a578c79e",
       "needsInterop": false
     },
     "vitepress > @vue/devtools-api": {
       "src": "../../../../../node_modules/.pnpm/@[email protected]/node_modules/@vue/devtools-api/dist/index.js",
       "file": "vitepress___@vue_devtools-api.js",
-      "fileHash": "fe1b5d95",
+      "fileHash": "a04a0f40",
       "needsInterop": false
     },
     "vitepress > @vueuse/core": {
       "src": "../../../../../node_modules/.pnpm/@[email protected][email protected][email protected]_/node_modules/@vueuse/core/index.mjs",
       "file": "vitepress___@vueuse_core.js",
-      "fileHash": "28238cb9",
+      "fileHash": "a4a2525c",
       "needsInterop": false
     },
     "vitepress > @vueuse/integrations/useFocusTrap": {
       "src": "../../../../../node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_/node_modules/@vueuse/integrations/useFocusTrap.mjs",
       "file": "vitepress___@vueuse_integrations_useFocusTrap.js",
-      "fileHash": "17a4660b",
+      "fileHash": "5a67a617",
       "needsInterop": false
     },
     "vitepress > mark.js/src/vanilla.js": {
       "src": "../../../../../node_modules/.pnpm/[email protected]/node_modules/mark.js/src/vanilla.js",
       "file": "vitepress___mark__js_src_vanilla__js.js",
-      "fileHash": "edea4024",
+      "fileHash": "d73b5fff",
       "needsInterop": false
     },
     "vitepress > minisearch": {
       "src": "../../../../../node_modules/.pnpm/[email protected]/node_modules/minisearch/dist/es/index.js",
       "file": "vitepress___minisearch.js",
-      "fileHash": "970d326c",
+      "fileHash": "34b10db2",
       "needsInterop": false
     },
     "@theme/index": {
       "src": "../../../../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected]_postcss@_2aekxe2sbooqp2zuwhekukj7iy/node_modules/vitepress/dist/client/theme-default/index.js",
       "file": "@theme_index.js",
-      "fileHash": "03db824f",
+      "fileHash": "5d12843e",
       "needsInterop": false
     }
   },

diff --git a/packages/documentation/pages/setup.md b/packages/documentation/pages/setup.md
@@ -20,3 +20,17 @@ export type Screens = "sm" | "md";
 export const screens: Screens[] = ["sm", "md"];
 export const compose = setupCompose<Screens>(screens);
 ```
+
+## Tailwind merge or similar
+
+You can use any function, such as [tailwind-merge](https://www.npmjs.com/package/tailwind-merge). We recommend using tailwind-merge.
+
+This function takes a string of classes and returns a modified string. The main goal is to merge Tailwind classes to avoid style conflicts.
+
+Example:
+
+```ts
+import { twMerge } from "tailwind-merge";
+
+export const compose = setupCompose<Screens>(screens, twMerge);
+```
diff --git a/packages/sandbox/src/App.tsx b/packages/sandbox/src/App.tsx
@@ -13,7 +13,7 @@ function App() {
       </Label>
 
       <Button
-        className="h-full w-full rounded-bl-none rounded-tl-none xl:rounded-bl-none xl:rounded-tl-none"
+        className="h-full w-full rounded-bl-none rounded-tl-none xl:rounded-bl-none xl:rounded-tl-none bg-blue-500 md:bg-blue-500"
         appearance="primary"
         iconStart={<SearchIcon />}
         size={{

diff --git a/packages/ui/src/components/Label/Label.tsx b/packages/ui/src/components/Label/Label.tsx
@@ -2,7 +2,6 @@ import React from "react";
 
 import { PropsWithChildren } from "react";
 import { LabelProps, labelVariants } from "./Label.variants";
-import { twMerge } from "tailwind-merge";
 
 export const Label: React.FC<PropsWithChildren<LabelProps>> = ({
   as: Component = "span",
@@ -17,17 +16,15 @@ export const Label: React.FC<PropsWithChildren<LabelProps>> = ({
 
   return (
     <Component
-      className={twMerge(
-        root({
-          fontWeight: {
-            initial: "xxl",
-            md: "xxl",
-          },
-          size,
-          className,
-          disabled,
-        })
-      )}
+      className={root({
+        fontWeight: {
+          initial: "xxl",
+          md: "xxl",
+        },
+        size,
+        className,
+        disabled,
+      })}
       {...restProps}
     >
       {children}