simple-merge-class-names 6.0.9 → 7.0.1

package/README.md

@@ -1,40 +1,42 @@
 # simple-merge-class-names
 
-A straightforward utility for merging CSS class names in _React & Tailwind_ and other _JavaScript_ projects.
+A straightforward utility for merging CSS class names in _React (JSX)_ and other _JavaScript_ projects.
+
+For Production look into [https://www.npmjs.com/package/clsx](https://www.npmjs.com/package/clsx)
 
 ## Table of Contents
 
--   [We Stand with Palestine](#we-stand-with-palestine)
--   [Production Considerations](#production-considerations)
--   [Installation](#installation)
-    -   [Install Prettier With VSCode (Most Recommended)](#install-prettier-with-vscode-most-recommended)
--   [Usage](#usage)
--   [Workflow To Minimize Typing Strain](#workflow-to-minimize-typing-strain)
--   [Type Definitions (of Exported Functions)](#type-definitions-of-exported-functions)
--   [Accepted Arguments](#accepted-arguments)
--   [Console Warning](#console-warning)
--   [Conditionally Include Class Names](#conditionally-include-class-names)
--   [Using `mergeClassNamesDebugger` And The Built-in Browser Debugger To Find And Fix Warnings](#using-mergeclassnamesdebugger-and-the-built-in-browser-debugger-to-find-and-fix-warnings)
--   [Strategies To Ensure Correct Arguments Are Sent to `mergeClassNames`](#strategies-to-ensure-correct-arguments-are-sent-to-mergeclassnames)
--   [Testing](#testing)
--   [Source Code (Partial)](#source-code-partial)
--   [Misc.](#misc)
-    -   [Motivation](#motivation)
-    -   [Why the Mismatch Between Exported Function and Package Name?](#why-the-mismatch-between-exported-function-and-package-name)
-    -   [Where This Package Excels](#where-this-package-excels)
--   [License](#license)
-
-## We Stand with Palestine <img src="https://raw.githubusercontent.com/new-AF/simple-merge-class-names/main/.github/images/ps.svg" alt="Flag of Palestine" height="11" />
+-   [simple-merge-class-names](#simple-merge-class-names)
+    -   [Table of Contents](#table-of-contents)
+    -   [The Genocidal Occupation Is Starving Gaza](#the-genocidal-occupation-is-starving-gaza)
+    -   [Installation](#installation)
+        -   [_Recommended If Using VSCode: Install `Prettier` Extension_](#recommended-if-using-vscode-install-prettier-extension)
+    -   [Usage](#usage)
+        -   [TypeScript Definitions](#typescript-definitions)
+        -   [Valid Arguments](#valid-arguments)
+        -   [Invalid Arguments](#invalid-arguments)
+        -   [Reason for warnings](#reason-for-warnings)
+        -   [Conditional class inclusion](#conditional-class-inclusion)
+        -   [Return Result](#return-result)
+        -   [Chaining](#chaining)
+    -   [Usage of Browser Debugger](#usage-of-browser-debugger)
+    -   [VSCode Workflow To Minimize Typing Strain](#vscode-workflow-to-minimize-typing-strain)
+    -   [Testing Source Code](#testing-source-code)
+        -   [Run Once](#run-once)
+        -   [Run Watch Mode](#run-watch-mode)
+    -   [License](#license)
+
+## The Genocidal Occupation Is Starving Gaza
 
 -   [Donate](https://gazafunds.com/)
 
--   [Boycott Brands Supporting Genocide](https://www.uplift.ie/bds/)
+-   [(US) Demand Immediate Opening of ALL Gaza Border Crossings](https://act.uscpr.org/a/letaidin)
 
--   [Legal Action](https://www.hindrajabfoundation.org/perpetrators)
+-   [Boycott Brands Supporting Gaza Holocaust](https://www.uplift.ie/bds/)
 
-## Production Considerations
+-   [Legal Action](https://www.hindrajabfoundation.org/perpetrators)
 
-In developing this package, I prioritized _code readability_, _strict input handling_, and _enhanced developer experience_. Consequently, **performance** and **_features_** were not the primary focus. If you are considering this package for production, you may also want to explore `clsx`: [https://www.npmjs.com/package/clsx](https://www.npmjs.com/package/clsx).
+_Palestine is about fundamental non-negotiable human rights. End all financial and diplomatic ties with i\*rael_.
 
 ## Installation
 
@@ -50,20 +52,25 @@ yarn add simple-merge-class-names
 npm install simple-merge-class-names
 ```
 
-### Install `Prettier` With VSCode (Most Recommended)
+### _Recommended If Using VSCode: Install `Prettier` Extension_
+
+-   _[https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)_
 
--   [https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+_It will nicely format your code especially when you have lots of classes, and will significantly improve your visual experience._
 
--   Or use an equivalent auto code formatter for your IDE.
+_If you have a different IDE use an equivalent auto code formatter tool/extension_
 
 ## Usage
 
-Import `mergeClassNames(...args)` from the package, and use it in your _JSX_ or _JavaScript_ code.
+| Function                  | Prints console warnings | Activates debugger |
+| ------------------------- | ----------------------- | ------------------ |
+| `mergeClassNames`         | ✅                      | ❌                 |
+| `mergeClassNamesDebugger` | ✅                      | ✅                 |
 
 ```jsx
 import { mergeClassNames } from "simple-merge-class-names";
 
-const MyComponent = () => {
+const Component = ({ condition }) => {
     return (
         <div
             className={mergeClassNames(
@@ -80,130 +87,110 @@ const MyComponent = () => {
 };
 ```
 
-Or for [debugging purposes to fix console warnings](#using-mergeclassnamesdebugger-and-the-built-in-browser-debugger-to-find-and-fix-warnings):
+### TypeScript Definitions
 
--   Open the _Browser's Developer Tools_ and
--   Use `mergeClassNamesDebugger`
+```ts
+export declare const mergeClassNames: (
+    ...args: (string | false)[]
+) => string | false;
 
-```jsx
-import { mergeClassNamesDebugger } from "simple-merge-class-names";
-
-const MyComponent = () => {
-    return (
-        <div
-            className={mergeClassNamesDebugger(
-                "app",
-                condition ? "min-h-dvh" : false,
-                "grid",
-                "grid-rows-[auto_1fr_auto]",
-                "outline"
-            )}
-        >
-            Hello, world!
-        </div>
-    );
-};
+export declare const mergeClassNamesDebugger: (
+    ...args: (string | false)[]
+) => string | false;
 ```
 
-## Workflow To Minimize Typing Strain
-
--   Have `Prettier` installed
--   Have `Editor: Word Wrap` enabled in VS Code:
+### Valid Arguments
 
-    -   `Open Settings (UI)` → `Editor: Word Wrap` → `on`
-    -   Or `Open User Settings (JSON)` and add this entry:
+Only 2:
 
-        `"editor.wordWrap": "on"`
+1. **Valid strings, not whitespace, of length >= 1**
 
--   **Use single quotes** (<kbd>'</kbd>) for class names, often a single key press on many keyboards.
--   **Save the file** (<kbd>Ctrl+S</kbd>), which activates `Prettier` to auto-format the file, it will:
+    _(As long as you have content in the string you're OK)_
 
-    -   Replace single quotes with double quotes.
-    -   Neatly arrange each class name on a new line.
+2. **`false`**
 
-### Result
+_Example, This is OK:_
 
-#### Before
-
-![Screenshot of code before Prettier neatly formats code](https://raw.githubusercontent.com/new-AF/simple-merge-class-names/main/.github/images/before.png)
-
-#### After
-
-![Screenshot of code after Prettier neatly formats code](https://raw.githubusercontent.com/new-AF/simple-merge-class-names/main/.github/images/after.png)
-
-## Type Definitions (of Exported Functions)
-
-```jsx
-mergeClassNames: (...args: (string | false)[]) => string;
+```js
+mergeClassNames(
+    "mx-auto",
+    "min-dvh    ",
+    "   flex",
+    "      grid      ",
+    "italic     font-bold   ",
+    `
+        gap-y-4
+    `,
+    false,
+    condition ? "daisy-btn-active" : false
+);
 ```
 
-```jsx
-mergeClassNamesDebugger: (...args: (string | false)[]) => string;
+### Invalid Arguments
+
+Each below argument will be **ignored**, and cause a Dev Console **warning to be printed** to alert you:
+
+-   **Empty strings**: _(e.g. `""`)_
+-   **Whitespace** any consecutive combination of the following:
+    -   new lines,
+    -   spaces,
+    -   tabs
+    -   _(e.g._ `"   "`, `"\n "`, `"  \t  \n "`, _etc.)_
+-   **`true`**
+-   **`undefined`**
+-   **`null`**
+-   **Objects**
+-   **Numbers**
+-   **Big Int**
+-   **Symbols**
+
+```js
+// Example: These arguments will be **ignored**, and a console.warn will be printed
+
+const someVariable = "";
+
+mergeClassNames(
+    someVariable, // empty string
+    "   ", // whitespace
+    "\n ", // whitespace
+    "  \t  \n ", // whitespace
+    `           // whitespace
+        \n
+    `,
+    true, // true
+    undefined, // undefined
+    null, // null
+    {
+        // object
+        name: "value",
+        email: "email@example.com",
+    },
+    123, // number
+    123.45 // number
+);
 ```
 
-Both `mergeClassNames` and `mergeClassNamesDebugger` always return a string.
-
--   If no inputs are provided (e.g. `mergeClassNames()`) or if invalid inputs are given (e.g. `mergeClassNames(undefined, " ")`), an _empty string_ is returned: `""`.
-
-## Acceptable Arguments
-
-`mergeClassNames(...args)` and `mergeClassNamesDebugger(...args)` only accept the following arguments:
-
--   **Strings that are not empty, and are not whitespace** (e.g. `"app"`, `"min-h-dvh"`, `"   grid   "`)
-
--   The boolean value **`false`**
-
-Any other input is considered an invalid argument and will be ignored, resulting in a matching warning being logged. Invalid argument types include:
-
--   _Empty strings_ (`""`),
--   _Whitespace combinations_ (e.g. `"   "`, `"\n"`, `"  \n\t "`, etc...),,
--   `null`,
--   `undefined`,
--   _Numbers_,
--   _Objects_,
--   _Arrays_
-
-## Console Warning
-
-Whenever invalid arguments are passed to `mergeClassNames`, they are not silently ignored, as this can lead to subtle bugs and increase technical debt. Instead, a `console.warn` is shown in the _Developer Console_ to notify the developer of a potentially deeper issue that requires attention. For example:
-
-```plaintext
-[mergeClassNames] Warning: invalid arguments were provided and ignored:
-
-        * Replace "mergeClassNames" with "mergeClassNamesDebugger" without changing any arguments, and open the Developer Console, or attach Debugger (see README.md).
-
-        * Expected all arguments to be either strings or value `false`, but got 5 invalid value(s):
-        [
-        (1/5): >undefined< of type "undefined",
-        (2/5): > test < of type "object",
-        (3/5): >[object Object]< of type "object",
-        (4/5): >true< of type "boolean",
-        (5/5): >null< of type "object"
-        ]
+![screenshot of console.warn warnings because invalid arguments were provided and ignored, so no silent failing](https://raw.githubusercontent.com/new-AF/simple-merge-class-names/main/.github/images/warnings.PNG)
 
-        * Expected 0 empty strings, but got 2 invalid value(s):
-        [
-        (1/2): ><,
-        (2/2): >   <
-        ]
-```
+### Reason for warnings
 
-## Conditionally Include Class Names
+-   To avoid silent failures, because you will be pulling your hair asking why a Tailwind class isn't working only to figure out you passed an _object_, _array_ or an _empty string_ instead of a valid string. _(It could also be because of an unsupported class name or typo but this is beyond the scope of this package)_
 
-To conditionally include a class name, use the _conditional operator_ as follows:
+### Conditional class inclusion
 
--   `condition ? "class-name" : false`, with `false` serving as the fallback value to ensure clear and warning-free code.
+Use this pattern:
 
-This approach is effective because `false` will never result in a warning from the function.
+-   `condition ? "class-name" : false` with `false` serving as the valid fallback.
+-   _or_ `condition === true ? "class-name" : false` if you want to be specific.
 
-**Important**: Avoid using the _short-circuit implicit syntax_ like this:
+_Note:_ Avoid using the _short-circuit implicit syntax_ like this:
 
--   `condition && "class-name"`, as it can produce falsy values such as `0`, `""`, `undefined`, and `null`, which will lead to warnings being logged.
+-   `condition && "class-name"`, beside less readable code, it can produce _falsy_ values which will be **_ignored_** _(e.g. `0`, `""`, `undefined`, and `null`)_.
 
 ```jsx
 import { mergeClassNames } from "simple-merge-class-names";
 
-const MyComponent = () => {
+const Component = () => {
     return (
         <div
             className={mergeClassNames(
@@ -220,141 +207,129 @@ const MyComponent = () => {
 };
 ```
 
-## Using `mergeClassNamesDebugger` And The Built-in Browser Debugger To Find And Fix Warnings
+### Return Result
 
-```jsx
-import { mergeClassNamesDebugger } from "simple-merge-class-names";
+Either:
 
-const MyComponent = () => {
-    return (
-        <div
-            className={mergeClassNamesDebugger(
-                "app",
-                condition ? "min-h-dvh" : false,
-                "grid",
-                "grid-rows-[auto_1fr_auto]",
-                "outline"
-            )}
-        >
-            Hello, world!
-        </div>
-    );
-};
-```
+1. **Valid `string`, never whitespace, always length >= 1**
 
-`mergeClassNamesDebugger` is a drop-in replacement for `mergeClassNames` but with the added _benefit_ that it will activate the built-in **_debugger_** inside browsers like _FireFox_, _Chrome_, _Safari_ and even _VS Code_ if configured properly.
+2. _or_ **`false`** _(if all input arguments were invalid)_
 
-This built-in JavaScript feature gained wide-spread support from major browsers around 2012, allowing you to access it with minimal effort. To utilize it, simply follow these two steps:
+### Chaining
 
-1. **_Open the Browser's Developer Tools_** to inform the JavaScript engine that the debugger is _enabled_.
-2. **_Replace_** `mergeClassNames` with **`mergeClassNamesDebugger`** _without_ altering any of the provided arguments.
+Because of safe return types you can chain calls safely without worrying about warnings or arguments being ignored.
 
-_When the debugger is enabled (i.e. *Browser's Developer Tools* is open) and an invalid argument such as `undefined` or `" "` is passed to `mergeClassNamesDebugger`, the JavaScript engine will automatically pause execution and highlight the invalid argument. You simply need to select the offending component (e.g. `Container.jsx`) from the Call Stack._
+_So this is OK:_
 
-When the debugger is active, it will appear as shown in this screenshot (in _Firefox_):
+```js
+mergeClassNames(condition ? "disabled" : mergeClassNames(...) )
+```
 
-![Firefox Debugger automatically paused execution when undefined was passed to mergeClassNamesDebugger](https://raw.githubusercontent.com/new-AF/simple-merge-class-names/main/.github/images/debugger.png)
+## Usage of Browser Debugger
 
-## Strategies To Ensure Correct Arguments Are Sent to `mergeClassNames`
+**Once you see warnings in the console, the next step is to use `mergeClassNamesDebugger`**
 
--   Use the _conditional operator_ to conditionally including class names:
+1. Enable Debugger
+    - _For chromium-based browsers it's On by default and you don't need to do anything AFAIK._
+    - _For Firefox:_ Open **_Developer Tools_:**
+        - _Make Sure_ **_Debugger_** _(tab)_ -> **`Pause on debugger statement`** is ticked.
+        - Keep Dev Tools open.
+          ![screenshot of Firefox Debugger section with Pause on debugger statement ticked on](https://raw.githubusercontent.com/new-AF/simple-merge-class-names/main/.github/images/debugger-enabled.png)
 
-```jsx
-import { mergeClassNames } from "simple-merge-class-names";
+-   Use **`import {mergeClassNamesDebugger as mergeClassNames}`** to debug the entire file, and keep the rest intact.
 
-const MyComponent = () => {
-    return (
-        <div
-            className={mergeClassNames(
-                "app",
-                condition ? "min-h-dvh" : false,
-                "grid",
-                "grid-rows-[auto_1fr_auto]",
-                "outline"
-            )}
-        >
-            Hello, world!
-        </div>
-    );
-};
-```
+    ```jsx
+    import { mergeClassNamesDebugger as mergeClassNames } from "simple-merge-class-names";
 
-## Testing
+    const Component = ({ condition }) => {
+        return (
+            <div
+                className={mergeClassNames(
+                    "app",
+                    condition ? "min-h-dvh" : false,
+                    "grid",
+                    "grid-rows-[auto_1fr_auto]",
+                    "outline"
+                )}
+            >
+                Hello, world!
+            </div>
+        );
+    };
+    ```
 
-This project uses `Vitest` as the test runner for fast and modern testing.
+-   or call `mergeClassNamesDebugger` directly.
 
-#### Run All Tests Once
+    ```jsx
+    import { mergeClassNamesDebugger } from "simple-merge-class-names";
 
-```bash
-git clone https://github.com/new-AF/simple-merge-class-names
-cd simple-merge-class-names
-pnpm install
-pnpm test
-```
+    const Component = ({ condition }) => {
+        return (
+            <div
+                className={mergeClassNamesDebugger(
+                    "app",
+                    condition ? "min-h-dvh" : false,
+                    "grid",
+                    "grid-rows-[auto_1fr_auto]",
+                    "outline"
+                )}
+            >
+                Hello, world!
+            </div>
+        );
+    };
+    ```
 
-#### Run Tests In Watch Mode
+-   Refresh the page, the debugger should connect:
 
-```bash
-pnpm test:watch
-```
+    -   Navigate to the **_Call stack_**
+    -   Click the function/component right before _`mergeClassNamesDebugger`_
 
-## Source Code (Partial)
+    ![screenshot of Firefox debugger active because of `undefined` invalid class name argument](https://raw.githubusercontent.com/new-AF/simple-merge-class-names/main/.github/images/debugger-active.png)
 
-```javascript
-/**
- * mergeClassNames - A straightforward utility for merging CSS class names in React + Tailwind, and other JavaScript projects.
- *
- * @license AGPL-3.0
- * Copyright (C) 2025 Abdullah Fatota
- *
- * ...
- */
+-   Hover over the arguments, one or several should be invalid:
+    ![screenshot of Firefox debugger active because of `undefined` invalid class name argument](https://raw.githubusercontent.com/new-AF/simple-merge-class-names/main/.github/images/debugger-3.png)
 
-const mergeClassNamesCore = ({ args, activateDebugger }) => {
-    const space = "\x20"; // ASCII code for a single space character (" "), decimal 32
+## VSCode Workflow To Minimize Typing Strain
 
-    const [_, nonFalseValues] = partition(args, isValueFalse); // ignore all false values used for conditional class inclusion
-    const [strings, nonStrings] = partition(nonFalseValues, isTypeString);
-    const [emptyStrings, nonEmptyStrings] = partition(strings, isEmptyString);
-    const trimmed = nonEmptyStrings.map((val) => val.trim());
-    const className = trimmed.join(space);
+Use single quotes around class names, and activate `Prettier` which will neatly format and arrange the classes.
 
-    /* Don't silently ignore invalid input, explicitly disclose them as it may indicate a bigger problem */
-    warnInvalidArguments({ nonStrings, emptyStrings, activateDebugger });
+-   Install `Prettier`
+-   Enable `Editor: Word Wrap`:
 
-    return className;
-};
+    -   Open `Settings (UI)` → `Editor: Word Wrap` → `on`
+    -   _or_ `User Settings (JSON)` and add this entry `"editor.wordWrap": "on"`
 
-export const mergeClassNames = (...args) =>
-    mergeClassNamesCore({ args, activateDebugger: false });
+-   Use single quotes (<kbd>'</kbd>) around class names
+-   Save the file
 
-export const mergeClassNamesDebugger = (...args) =>
-    mergeClassNamesCore({ args, activateDebugger: true });
-```
+Example:
 
-## Misc.
+-   Before
+    ![Screenshot of code before Prettier neatly formats code](https://raw.githubusercontent.com/new-AF/simple-merge-class-names/main/.github/images/before.png)
 
-### Motivation
+-   After
 
-This package aims to improve code readability and developer experience in _React & Tailwind_ projects by enforcing strict input handling. It logs warnings for invalid arguments, helping developers catch and fix underlying issues _early_.
+    ![Screenshot of code after Prettier neatly formats code](https://raw.githubusercontent.com/new-AF/simple-merge-class-names/main/.github/images/after.png)
 
-While writing class names as separate strings may seem tedious, the [workflow](#workflow-to-minimize-typing-strain) reduces friction and the overall process results in more readable and maintainable code in contrast to using single long strings:
+## Testing Source Code
 
-```jsx
-const MyComponent = () => {
-    return (
-        <div className="app min-h-dvh grid grid-rows-[auto_1fr_auto] outline">
-            Hello, world!
-        </div>
-    );
-};
-```
+This project uses `Vitest` as the test runner for fast and modern testing.
+
+### Run Once
 
-### Why the Mismatch Between Exported Function and Package Name?
+```bash
+git clone https://github.com/new-AF/simple-merge-class-names
+cd simple-merge-class-names
+pnpm install
+pnpm test
+```
 
-I wanted to name the package `mergeClassNames` to reflect the exported function, but the NPM Package Registry doesn't allow capital letters, only lower case and dash characters.
+### Run Watch Mode
 
-In addition there was already a package named `merge-class-names` but it is no longer maintained (and the developer recommends `clsx` instead).
+```bash
+pnpm test:watch
+```
 
 ## License
 

package/mergeClassNames.d.ts

@@ -1,4 +1,7 @@
-export declare const mergeClassNames: (...args: (string | false)[]) => string;
+export declare const mergeClassNames: (
+    ...args: (string | false)[]
+) => string | false;
+
 export declare const mergeClassNamesDebugger: (
     ...args: (string | false)[]
-) => string;
+) => string | false;

package/mergeClassNames.js

@@ -37,153 +37,139 @@
  * along with this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-const isValueFalse = (val) => val === false;
-
-const isTypeString = (val) => typeof val === "string";
-
-const isEmptyString = (val) => {
-    const trimmed = val.trim();
-    return trimmed === "";
-};
-
 const partition = (array, keepPredicate) => {
     const keep = [];
     const ignore = [];
     for (const element of array) {
-        (keepPredicate(element) ? keep : ignore).push(element);
+        const arrayRef = keepPredicate(element) ? keep : ignore;
+        arrayRef.push(element);
     }
     return [keep, ignore];
 };
 
-const warnInvalidArguments = ({
-    nonStrings,
-    emptyStrings,
-    activateDebugger = false,
-}) => {
-    const hasInvalidTypes = nonStrings.length > 0;
-    const hasEmptyStrings = emptyStrings.length > 0;
-    const doPrint = hasInvalidTypes || hasEmptyStrings;
-
-    if (doPrint === false) return;
-
-    const messages = [];
-    const newline = "\n";
-    const doubleNewline = newline.repeat(2);
-
-    const tabString = (string, tabCount = 0) => {
-        const tab = "\t".repeat(tabCount);
-        return `${tab}${string}`;
-    };
-
-    const tabArray = (array, tabCount) =>
-        array.map((element) => tabString(element, tabCount));
-
-    /* convert array to nice string because console.warn(array) squashes it on 1 line */
-    const makeMessage = ({
-        array,
-        expected,
-        tabCount = 1,
-        includeElementType = false,
-        arrayMaxLength = 5,
-    }) => {
-        const count = array.length;
-        const addEllipsis = count > arrayMaxLength;
-        const slice = addEllipsis ? array.slice(0, arrayMaxLength) : array;
-
-        const formatElementWithType = (element, index) =>
-            `(${index + 1}/${count}): >${element}< of type "${typeof element}"`;
-
-        const formatElement = (element, index) =>
-            `(${index + 1}/${count}): >${element}<`;
-
-        const initialMapped = slice.map(
-            includeElementType ? formatElementWithType : formatElement
-        );
-
-        const mapped = addEllipsis ? [...initialMapped, "..."] : initialMapped;
-
-        const string = [
-            tabString(
-                `${expected}, but got ${count} invalid value(s):`,
-                tabCount
-            ),
-            tabString("[", tabCount),
-            tabArray(mapped, tabCount).join("," + newline),
-            tabString("]", tabCount),
-        ].join(newline);
-
-        return string;
-    };
-
-    /* "Replace "mergeClassNames" with "mergeClassNamesDebugger" ... " */
-    if (doPrint && activateDebugger === false) {
-        messages.push(
-            tabString(
-                '* Replace "mergeClassNames" with "mergeClassNamesDebugger" without changing any arguments, and open the Developer Console, or attach Debugger (see README.md).',
-                1
-            )
-        );
+const filterArguments = (argumentsArray) => {
+    /* 
+    returns {
+        valid: bool,
+        value: any
+        (optional) isString: bool,
+        (optional) valueType: any
+        (optional) isValueFalse
+        (optional) isValidString: bool
     }
+    */
+    const isValidArgument = (value) => {
+        const valueType = typeof value;
 
-    /* "Expected all arguments to be either ..." */
-    if (hasInvalidTypes) {
-        if (activateDebugger) {
-            debugger;
+        if (value === false) {
+            return { valid: true, value };
         }
-        messages.push(
-            makeMessage({
-                array: nonStrings,
-                expected:
-                    "* Expected all arguments to be either strings or value `false`",
-                includeElementType: true,
-            })
-        );
-    }
 
-    /* "Expected 0 empty strings ..." */
-    if (hasEmptyStrings) {
-        if (activateDebugger) {
-            debugger;
+        if (valueType === "string") {
+            const trimmed = value.trim();
+
+            // invalid string
+            if (trimmed === "") {
+                return {
+                    valid: false,
+                    value,
+                    isString: true,
+                    isValidString: false,
+                };
+            }
+            // valid string
+            return {
+                valid: true,
+                value: trimmed,
+                isString: true,
+                isValidString: true,
+            };
         }
-        messages.push(
-            makeMessage({
-                array: emptyStrings,
-                expected: "* Expected 0 empty strings",
-            })
-        );
-    }
 
-    /* Full Warn makeMessage */
-    const functionName =
-        activateDebugger === false
-            ? "mergeClassNames"
-            : "mergeClassNamesDebugger";
+        // everything else
+        return { valid: false, value, isString: false, valueType };
+    };
 
-    const string = [
-        `[${functionName}] Warning: invalid arguments were provided and ignored:`,
-        ...messages,
-    ].join(doubleNewline);
+    // array of objects
+    const newArguments = argumentsArray.map((element) =>
+        isValidArgument(element)
+    );
 
-    console.warn(string);
-};
+    // includes `false`
+    const [validArgumentsWithFalse, invalidArguments] = partition(
+        newArguments,
+        ({ valid }) => valid === true
+    );
+
+    // ignore `false`
+    const [validArguments, _] = partition(
+        validArgumentsWithFalse,
+        ({ value }) => value !== false
+    );
 
-const mergeClassNamesCore = ({ args, activateDebugger }) => {
-    const space = "\x20"; // ASCII code for a single space character (" "), decimal 32
+    // console.log({ validArgumentsWithFalse, validArguments, invalidArguments });
 
-    const [_, nonFalseValues] = partition(args, isValueFalse); // ignore all false values used for conditional class inclusion
-    const [strings, nonStrings] = partition(nonFalseValues, isTypeString);
-    const [emptyStrings, nonEmptyStrings] = partition(strings, isEmptyString);
-    const trimmed = nonEmptyStrings.map((val) => val.trim());
-    const className = trimmed.join(space);
+    return { validArguments, invalidArguments };
+};
 
-    /* Don't silently ignore invalid input, explicitly disclose them as it may indicate a bigger problem */
-    warnInvalidArguments({ nonStrings, emptyStrings, activateDebugger });
+const warnMessage = (
+    { value, isString, valueType, isValidString },
+    callerFunctionName
+) => {
+    if (isString === false) {
+        return `[${callerFunctionName}] Ignored non-string >${value}< (${valueType})`;
+    } else if (isValidString === false) {
+        return `[${callerFunctionName}] Ignored empty string "${value}"`;
+    }
+};
 
-    return className;
+const warnOnly = (
+    invalidArgumentsArray,
+    callerFunctionName,
+    debuggerVariantName
+) =>
+    invalidArgumentsArray.forEach((obj) => {
+        const message = warnMessage(obj, callerFunctionName);
+        console.warn(`${message}`);
+    });
+
+const warnDebug = (invalidArgumentsArray, callerFunctionName) =>
+    invalidArgumentsArray.forEach((obj) => {
+        console.warn(warnMessage(obj, callerFunctionName));
+        debugger;
+    });
+
+const join = (argumentsArray) => {
+    const space = "\x20"; // ASCII for single space (" "), decimal 32
+    const classNames = argumentsArray.map(({ value }) => value).join(space);
+    return classNames;
 };
 
-export const mergeClassNames = (...args) =>
-    mergeClassNamesCore({ args, activateDebugger: false });
+const finalResult = (joinedClassNames) =>
+    joinedClassNames === "" ? false : joinedClassNames;
+
+// exported
+// export const mergeClassNamesNoWarning = (...argumentsArray) => {
+//     const { validArguments, _ } = filterArguments(argumentsArray);
+//     const classNames = join(validArguments);
+//     const result = finalResult(classNames);
+//     return result;
+// };
+
+export const mergeClassNames = (...argumentsArray) => {
+    const { validArguments, invalidArguments } =
+        filterArguments(argumentsArray);
+    warnOnly(invalidArguments, "mergeClassNames", "mergeClassNamesDebugger");
+    const classNames = join(validArguments);
+    const result = finalResult(classNames);
+    return result;
+};
 
-export const mergeClassNamesDebugger = (...args) =>
-    mergeClassNamesCore({ args, activateDebugger: true });
+export const mergeClassNamesDebugger = (...argumentsArray) => {
+    const { validArguments, invalidArguments } =
+        filterArguments(argumentsArray);
+    warnDebug(invalidArguments, "mergeClassNamesDebugger");
+    const classNames = join(validArguments);
+    const result = finalResult(classNames);
+    return result;
+};

package/package.json

@@ -1,44 +1,44 @@
-{
-    "name": "simple-merge-class-names",
-    "version": "6.0.9",
-    "description": "A straightforward utility for merging CSS class names in React + Tailwind and JavaScript projects.",
-    "exports": {
-        ".": {
-            "import": "./mergeClassNames.js",
-            "types": "./mergeClassNames.d.ts"
-        }
-    },
-    "files": [
-        "mergeClassNames.js",
-        "mergeClassNames.d.ts",
-        "LICENSE.txt",
-        "README.md"
-    ],
-    "sideEffects": false,
-    "scripts": {
-        "test": "vitest",
-        "test:watch": "vitest --watch",
-        "test:ui": "vitest --ui"
-    },
-    "keywords": [
-        "mergeClassNames",
-        "merge",
-        "class-names-merger",
-        "utility",
-        "react",
-        "tailwindcss"
-    ],
-    "author": "Abdullah Fatota",
-    "license": "AGPL-3.0",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/new-AF/simple-merge-class-names.git"
-    },
-    "bugs": {
-        "url": "https://github.com/new-AF/simple-merge-class-names/issues"
-    },
-    "homepage": "https://github.com/new-AF/simple-merge-class-names",
-    "devDependencies": {
-        "vitest": "^3.2.3"
-    }
-}
+{
+  "name": "simple-merge-class-names",
+  "version": "7.0.1",
+  "description": "A straightforward utility for merging CSS class names in React + Tailwind and JavaScript projects.",
+  "exports": {
+    ".": {
+      "import": "./mergeClassNames.js",
+      "types": "./mergeClassNames.d.ts"
+    }
+  },
+  "files": [
+    "mergeClassNames.js",
+    "mergeClassNames.d.ts",
+    "LICENSE.txt",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "keywords": [
+    "mergeClassNames",
+    "merge",
+    "class-names-merger",
+    "utility",
+    "react",
+    "tailwindcss"
+  ],
+  "author": "Abdullah Fatota",
+  "license": "AGPL-3.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/new-AF/simple-merge-class-names.git"
+  },
+  "bugs": {
+    "url": "https://github.com/new-AF/simple-merge-class-names/issues"
+  },
+  "homepage": "https://github.com/new-AF/simple-merge-class-names",
+  "devDependencies": {
+    "vitest": "^3.2.3"
+  },
+  "scripts": {
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:ui": "vitest --ui"
+  }
+}