classname-variants 1.4.1 → 1.5.0

package/README.md

@@ -7,7 +7,8 @@ Library to create type-safe components that render their class name based on a s
 - ⚛️ Supports React, Preact and vanilla DOM
 - 🛡️ Fully type-safe and excellent auto completion support
 - ✅ Supports both optional and required variants
-- 🪶 Light-weight without any dependencies
+- 🔗 Supports custom strategies like [tailwind-merge](https://www.npmjs.com/package/tailwind-merge)
+- 🪶 [Light-weight](https://bundlephobia.com/package/classname-variants) without any dependencies
 
 ![npm bundle size](https://img.shields.io/bundlephobia/minzip/classname-variants)
 
@@ -232,6 +233,23 @@ The component can then be rendered as button or as anchor or even as custom comp
 </>
 ```
 
+### Using a custom strategy to combine class names
+
+The built-in strategy for combining multiple class names into one string is simple and straightforward:
+
+```ts
+(classes) => classes.filter(Boolean).join(" ");
+```
+
+If you [want](https://github.com/dcastil/tailwind-merge/blob/main/docs/when-and-how-to-use-it.md), you can use a custom strategy like tailwind-merge instead:
+
+```ts
+import { classNames } from "classname-variants";
+import { twMerge } from "tailwind-merge";
+
+classNames.combine = twMerge;
+```
+
 # Tailwind IntelliSense
 
 In order to get auto-completion for the CSS classes themselves, you can use the [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) plugin for VS Code. In order to make it recognize the strings inside your variants-config, you have to somehow mark them and configure the plugin accordingly.

package/lib/index.d.ts

@@ -101,6 +101,9 @@ export type VariantOptions<C extends VariantsConfig<V>, V extends Variants = C["
 export type Simplify<T> = {
     [K in keyof T]: T[K];
 };
+export declare const classNames: {
+    combine: (...classes: Array<string | undefined | null | false | 0>) => string;
+};
 export declare function variants<C extends VariantsConfig<V>, V extends Variants = C["variants"]>(config: Simplify<C>): (props: VariantOptions<C>) => string;
 /**
  * No-op function to mark template literals as tailwind strings.

package/lib/index.js

@@ -1,3 +1,6 @@
+export const classNames = {
+    combine: (...classes) => classes.filter(Boolean).join(" "),
+};
 export function variants(config) {
     const { base, variants, compoundVariants, defaultVariants } = config;
     const isBooleanVariant = (name) => {
@@ -6,7 +9,7 @@ export function variants(config) {
     };
     return (props) => {
         var _a;
-        const res = [base];
+        const classes = base ? [base] : [];
         const getSelected = (name) => {
             var _a, _b;
             return (_b = (_a = props[name]) !== null && _a !== void 0 ? _a : defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[name]) !== null && _b !== void 0 ? _b : (isBooleanVariant(name) ? false : undefined);
@@ -14,15 +17,15 @@ export function variants(config) {
         for (let name in variants) {
             const selected = getSelected(name);
             if (selected !== undefined)
-                res.push((_a = variants[name]) === null || _a === void 0 ? void 0 : _a[selected]);
+                classes.push((_a = variants[name]) === null || _a === void 0 ? void 0 : _a[selected]);
         }
         for (let { variants, className } of compoundVariants !== null && compoundVariants !== void 0 ? compoundVariants : []) {
             const isSelected = (name) => getSelected(name) === variants[name];
             if (Object.keys(variants).every(isSelected)) {
-                res.push(className);
+                classes.push(className);
             }
         }
-        return res.filter(Boolean).join(" ");
+        return classNames.combine(...classes);
     };
 }
 /**

package/lib/preact.js

@@ -1,6 +1,6 @@
 import { h } from "preact";
 import { forwardRef } from "preact/compat";
-import { variants, } from "./index.js";
+import { variants, classNames, } from "./index.js";
 export function variantProps(config) {
     const variantClassName = variants(config);
     return (props) => {
@@ -12,9 +12,7 @@ export function variantProps(config) {
             }
         }
         // Add the optionally passed class/className prop for chaining
-        result.class = [variantClassName(props), props.class, props.className]
-            .filter(Boolean)
-            .join(" ");
+        result.class = classNames.combine(variantClassName(props), props.class, props.className);
         return result;
     };
 }

package/lib/react.js

@@ -1,5 +1,5 @@
 import { createElement, forwardRef, } from "react";
-import { variants, } from "./index.js";
+import { variants, classNames, } from "./index.js";
 export function variantProps(config) {
     const variantClassName = variants(config);
     return (props) => {
@@ -11,9 +11,7 @@ export function variantProps(config) {
             }
         }
         // Add the optionally passed className prop for chaining
-        result.className = [variantClassName(props), props.className]
-            .filter(Boolean)
-            .join(" ");
+        result.className = classNames.combine(variantClassName(props), props.className);
         return result;
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classname-variants",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "Variant API for plain class names",
   "author": "Felix Gnass <fgnass@gmail.com>",
   "license": "MIT",