simple-merge-class-names 2.0.0 → 2.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +38 -29
- package/package.json +38 -38
package/README.md
CHANGED
|
@@ -7,13 +7,18 @@ A straightforward utility for merging CSS class names in `React + Tailwind` and
|
|
|
7
7
|
- [Installation](#installation)
|
|
8
8
|
- [Install Prettier With VSCode (Most Recommended)](#install-prettier-with-vscode-most-recommended)
|
|
9
9
|
- [Usage](#usage)
|
|
10
|
+
|
|
10
11
|
- [Workflow To Minimize Typing Strain](#workflow-to-minimize-typing-strain)
|
|
11
|
-
|
|
12
|
-
- [
|
|
13
|
-
- [
|
|
14
|
-
- [Argument Handling](#argument-handling)
|
|
15
|
-
- [Changes From Version 1.X.X](#changes-from-version-1xx)
|
|
12
|
+
|
|
13
|
+
- [Argument Handling](#argument-handling)
|
|
14
|
+
- [Breaking Changes From Version 1.X.X](#breaking-changes-from-version-1xx)
|
|
16
15
|
- [Testing](#testing)
|
|
16
|
+
- [Source Code](#source-code)
|
|
17
|
+
- [Misc.](#misc)
|
|
18
|
+
|
|
19
|
+
- [Why the Mismatch Between Exported Function and Package Name?](#why-the-mismatch-between-exported-function-and-package-name)
|
|
20
|
+
- [Where This Package Excels](#where-this-package-excels)
|
|
21
|
+
|
|
17
22
|
- [Production Considerations](#production-considerations)
|
|
18
23
|
- [License](#license)
|
|
19
24
|
|
|
@@ -90,15 +95,29 @@ function MyComponent() {
|
|
|
90
95
|
- Replaces single quotes with double quotes.
|
|
91
96
|
- Neatly arranges each class name on a new line.
|
|
92
97
|
|
|
93
|
-
##
|
|
98
|
+
## Argument Handling
|
|
94
99
|
|
|
95
|
-
|
|
100
|
+
`mergeClassNames` only accepts **_non-empty string values_**, everything else like empty strings (`""`), `null`, `undefined`, numbers, objects and arrays is _ignored_. This ensures stricter and predictable output.
|
|
96
101
|
|
|
97
|
-
|
|
102
|
+
### Breaking Changes From Version 1.X.X
|
|
98
103
|
|
|
99
|
-
|
|
104
|
+
In pervious versions, arguments that were not strings were implicitly converted to strings by the JavaScript engine.
|
|
100
105
|
|
|
101
|
-
|
|
106
|
+
## Testing
|
|
107
|
+
|
|
108
|
+
This project uses `Vitest` as the test runner for fast, modern testing.
|
|
109
|
+
|
|
110
|
+
#### Run All Testing Once
|
|
111
|
+
|
|
112
|
+
```bash
|
|
113
|
+
pnpm test
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
#### Run Tests In Watch Mode
|
|
117
|
+
|
|
118
|
+
```bash
|
|
119
|
+
pnpm test:watch
|
|
120
|
+
```
|
|
102
121
|
|
|
103
122
|
## Source Code
|
|
104
123
|
|
|
@@ -126,36 +145,26 @@ export const mergeClassNames = (...args) => {
|
|
|
126
145
|
};
|
|
127
146
|
```
|
|
128
147
|
|
|
129
|
-
|
|
148
|
+
## Misc.
|
|
130
149
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
#### Breaking Changes From Version 1.X.X
|
|
150
|
+
### Why the Mismatch Between Exported Function and Package Name?
|
|
134
151
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
### Testing
|
|
138
|
-
|
|
139
|
-
This project uses `Vitest` as the test runner for fast, modern testing.
|
|
140
|
-
|
|
141
|
-
#### Run All Testing Once
|
|
152
|
+
I wanted to name the package as `mergeClassNames` to reflect the single exported function, but the NPM Package Registry does not allow capital letters, only lower case and dash characters.
|
|
142
153
|
|
|
143
|
-
|
|
144
|
-
pnpm test
|
|
145
|
-
```
|
|
154
|
+
In addition there was already a package named `merge-class-names` but it is no longer maintained (and the developer recommends `clsx` instead).
|
|
146
155
|
|
|
147
|
-
|
|
156
|
+
### Where This Package Excels
|
|
148
157
|
|
|
149
|
-
|
|
150
|
-
pnpm test:watch
|
|
151
|
-
```
|
|
158
|
+
While similar packages exist (`clsx`) with better features and potentially improved performance, `simple-merge-class-names` focuses on being very straightforward and easy to reason about, as defined in its source code.
|
|
152
159
|
|
|
153
160
|
## Production Considerations
|
|
154
161
|
|
|
155
|
-
If you are considering this package for production, you might also want to look into `clsx
|
|
162
|
+
If you are considering this package for production, you might also want to look into `clsx`: [https://www.npmjs.com/package/clsx](https://www.npmjs.com/package/clsx)
|
|
156
163
|
|
|
157
164
|
## License
|
|
158
165
|
|
|
159
166
|
This project is licensed under the AGPL-3.0 License. See `LICENSE.txt` for full details.
|
|
160
167
|
|
|
168
|
+
---
|
|
169
|
+
|
|
161
170
|
Enjoy 😉
|
package/package.json
CHANGED
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "simple-merge-class-names",
|
|
3
|
-
"version": "2.0.
|
|
4
|
-
"description": "Example usage: <div className = {mergeClassNames('flex', 'flex-col')}/>",
|
|
5
|
-
"main": "mergeClassNames.js",
|
|
6
|
-
"exports": "./mergeClassNames.js",
|
|
7
|
-
"files": [
|
|
8
|
-
"package.json",
|
|
9
|
-
"mergeClassNames.js",
|
|
10
|
-
"LICENSE.txt",
|
|
11
|
-
"README.md"
|
|
12
|
-
],
|
|
13
|
-
"scripts": {
|
|
14
|
-
"test": "vitest",
|
|
15
|
-
"test:watch": "vitest --watch",
|
|
16
|
-
"test:ui": "vitest --ui"
|
|
17
|
-
},
|
|
18
|
-
"keywords": [
|
|
19
|
-
"merge",
|
|
20
|
-
"class-names-merger",
|
|
21
|
-
"utility",
|
|
22
|
-
"react",
|
|
23
|
-
"tailwindcss"
|
|
24
|
-
],
|
|
25
|
-
"author": "Abdullah Fatota",
|
|
26
|
-
"license": "AGPL-3.0",
|
|
27
|
-
"repository": {
|
|
28
|
-
"type": "git",
|
|
29
|
-
"url": "git+https://github.com/new-AF/simple-merge-class-names.git"
|
|
30
|
-
},
|
|
31
|
-
"bugs": {
|
|
32
|
-
"url": "https://github.com/new-AF/simple-merge-class-names/issues"
|
|
33
|
-
},
|
|
34
|
-
"homepage": "https://github.com/new-AF/simple-merge-class-names",
|
|
35
|
-
"devDependencies": {
|
|
36
|
-
"vitest": "^3.2.3"
|
|
37
|
-
}
|
|
38
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "simple-merge-class-names",
|
|
3
|
+
"version": "2.0.2",
|
|
4
|
+
"description": "Example usage: <div className = {mergeClassNames('flex', 'flex-col')}/>",
|
|
5
|
+
"main": "mergeClassNames.js",
|
|
6
|
+
"exports": "./mergeClassNames.js",
|
|
7
|
+
"files": [
|
|
8
|
+
"package.json",
|
|
9
|
+
"mergeClassNames.js",
|
|
10
|
+
"LICENSE.txt",
|
|
11
|
+
"README.md"
|
|
12
|
+
],
|
|
13
|
+
"scripts": {
|
|
14
|
+
"test": "vitest",
|
|
15
|
+
"test:watch": "vitest --watch",
|
|
16
|
+
"test:ui": "vitest --ui"
|
|
17
|
+
},
|
|
18
|
+
"keywords": [
|
|
19
|
+
"merge",
|
|
20
|
+
"class-names-merger",
|
|
21
|
+
"utility",
|
|
22
|
+
"react",
|
|
23
|
+
"tailwindcss"
|
|
24
|
+
],
|
|
25
|
+
"author": "Abdullah Fatota",
|
|
26
|
+
"license": "AGPL-3.0",
|
|
27
|
+
"repository": {
|
|
28
|
+
"type": "git",
|
|
29
|
+
"url": "git+https://github.com/new-AF/simple-merge-class-names.git"
|
|
30
|
+
},
|
|
31
|
+
"bugs": {
|
|
32
|
+
"url": "https://github.com/new-AF/simple-merge-class-names/issues"
|
|
33
|
+
},
|
|
34
|
+
"homepage": "https://github.com/new-AF/simple-merge-class-names",
|
|
35
|
+
"devDependencies": {
|
|
36
|
+
"vitest": "^3.2.3"
|
|
37
|
+
}
|
|
38
|
+
}
|