simple-merge-class-names 1.0.6 → 1.0.8

package/README.md

@@ -2,6 +2,19 @@
 
 A straightforward utility for merging CSS class names in `React + Tailwind` and other JavaScript projects.
 
+## Table of Contents
+
+-   [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)
+-   [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)
+-   [Source Code](#source-code)
+    -   [Argument Handling](#argument-handling)
+-   [Production Considerations](#production-considerations)
+-   [License](#license)
+
 ## Installation
 
 ```bash
@@ -16,7 +29,7 @@ yarn add simple-merge-class-names
 npm install simple-merge-class-names
 ```
 
-## Install `Prettier` With VSCode (Most Recommended)
+### Install `Prettier` With VSCode (Most Recommended)
 
 [https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
 
@@ -46,7 +59,7 @@ function MyComponent() {
 }
 ```
 
-While using separate strings for each class name can be tedious (see [Workflow To Minimize Typing Strain](#workflow-to-minimize-typing-strain)), it however significantly enhances Code Readability and Developer Experience (DX). This is in contrast to hard-to-read strings like:
+While using separate strings for each class name can be tedious, see [Workflow To Minimize Typing Strain](#workflow-to-minimize-typing-strain), it significantly enhances code readability and Developer Experience (DX). This is in contrast to hard-to-read strings like:
 
 ```jsx
 function MyComponent() {
@@ -58,7 +71,7 @@ function MyComponent() {
 }
 ```
 
-## Workflow To Minimize Typing Strain
+### Workflow To Minimize Typing Strain
 
 ![Screen recording of optimal DX in action: using this package with Prettier as it neatly arranges each class name on a new line](https://raw.githubusercontent.com/new-AF/simple-merge-class-names/main/.github/images/Reduce%20typing%20strain.gif)
 
@@ -89,27 +102,9 @@ While similar packages exist (`clsx`) with better features and potentially impro
 
 ```javascript
 /**
- * mergeClassNames - a utility to merge CSS class names I developed for use in my `React` + `Tailwind` projects. Use it in conjunction with an auto-formatting tool like `Prettier`
- *
- * Example usage: <div className = {mergeClassNames("flex", "flex-col")}/>
- *
- * @license AGPL-3.0
- * Copyright (C) 2025 Abdullah Fatota
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ * mergeClassNames - A straightforward utility for merging CSS class names in React + Tailwind, and other JavaScript projects.
+ ...
  */
-
 const isDefined = (val) => val !== undefined && val !== null;
 
 const isNotEmptyString = (val) => val !== "";
@@ -124,7 +119,7 @@ export const mergeClassNames = (...args) => {
 };
 ```
 
-## Argument Handling
+### Argument Handling
 
 `mergeClassNames` accepts multiple arguments but filters out `null`, `undefined`, and empty strings (`""`). Remaining values are either strings or are _implicitly converted_ to strings by the JavaScript engine, then joined with spaces to produce the final class name string.
 
@@ -136,4 +131,4 @@ If you are considering this package for production, you might also want to look
 
 This project is licensed under the AGPL-3.0 License. See `LICENSE.txt` for full details.
 
-## Enjoy 😉
+Enjoy 😉

package/mergeClassNames.js

@@ -1,11 +1,28 @@
 /**
- * mergeClassNames - a utility to merge CSS class names I developed for use in my `React` + `Tailwind` projects. Use it in conjunction with an auto-formatting tool like `Prettier`
- *
- * Example usage: <div className = {mergeClassNames("flex", "flex-col")}/>
+ * 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
  *
+ * Example usage:
+ * import { mergeClassNames } from "simple-merge-class-names";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <div
+ *       className={mergeClassNames(
+ *         "app",
+ *         "min-h-dvh",
+ *         "grid",
+ *         "grid-rows-[auto_1fr_auto]",
+ *         "outline"
+ *       )}
+ *     >
+ *       Hello, world!
+ *     </div>
+ *   );
+ * }
+ *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
  * the Free Software Foundation, either version 3 of the License, or

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "simple-merge-class-names",
-    "version": "1.0.6",
+    "version": "1.0.8",
     "description": "Example usage: <div className = {mergeClassNames('flex', 'flex-col')}/>",
     "main": "mergeClassNames.js",
     "exports": "./mergeClassNames.js",