@lightsound/cn 1.0.3 → 1.1.0
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 +17 -57
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -9,12 +9,24 @@ A tiny, **blazing fast** utility for constructing `className` strings conditiona
|
|
|
9
9
|
|
|
10
10
|
## Features
|
|
11
11
|
|
|
12
|
-
- **Blazing Fast**: Up to
|
|
12
|
+
- **Blazing Fast**: Up to 26% faster than `clsx/lite`
|
|
13
13
|
- **Tiny**: ~130B gzipped (smaller than clsx/lite!)
|
|
14
14
|
- **TypeScript**: Full type support out of the box
|
|
15
15
|
- **Simple API**: Strings only - no objects, no arrays, maximum performance
|
|
16
16
|
- **Zero Dependencies**: No external dependencies
|
|
17
17
|
|
|
18
|
+
## Why @lightsound/cn?
|
|
19
|
+
|
|
20
|
+
| Feature | @lightsound/cn | clsx/lite | clsx |
|
|
21
|
+
| --------------- | -------------- | --------- | ----- |
|
|
22
|
+
| Strings only | ✅ | ✅ | ❌ |
|
|
23
|
+
| Objects support | ❌ | ❌ | ✅ |
|
|
24
|
+
| Arrays support | ❌ | ❌ | ✅ |
|
|
25
|
+
| Size (gzip) | ~130B | ~139B | ~239B |
|
|
26
|
+
| Performance | ⚡⚡⚡ | ⚡⚡ | ⚡ |
|
|
27
|
+
|
|
28
|
+
If you only use string-based class composition (the most common pattern with Tailwind CSS), `@lightsound/cn` provides the best performance.
|
|
29
|
+
|
|
18
30
|
## Benchmarks
|
|
19
31
|
|
|
20
32
|
> Benchmarks are run on every CI build. See the [latest CI run](https://github.com/lightsound/cn/actions/workflows/ci.yml) for up-to-date results.
|
|
@@ -22,10 +34,10 @@ A tiny, **blazing fast** utility for constructing `className` strings conditiona
|
|
|
22
34
|
<!-- BENCHMARK_START -->
|
|
23
35
|
| Test Case | @lightsound/cn | clsx/lite | Improvement |
|
|
24
36
|
| --------- | -------------- | --------- | ----------- |
|
|
25
|
-
| 2 strings |
|
|
26
|
-
| 3 strings |
|
|
27
|
-
| 5 strings |
|
|
28
|
-
| 10 strings |
|
|
37
|
+
| 2 strings | 52.31 ns | 67.05 ns | **22% faster** |
|
|
38
|
+
| 3 strings | 52.07 ns | 70.71 ns | **26% faster** |
|
|
39
|
+
| 5 strings | 68.33 ns | 87.32 ns | **22% faster** |
|
|
40
|
+
| 10 strings | 104.29 ns | 139.06 ns | **25% faster** |
|
|
29
41
|
<!-- BENCHMARK_END -->
|
|
30
42
|
|
|
31
43
|
## Installation
|
|
@@ -68,46 +80,6 @@ cn("foo", false, null, undefined, 0, "", "bar");
|
|
|
68
80
|
// => 'foo bar'
|
|
69
81
|
```
|
|
70
82
|
|
|
71
|
-
## Real-world Example (Tailwind CSS)
|
|
72
|
-
|
|
73
|
-
```typescript
|
|
74
|
-
import { cn } from "@lightsound/cn";
|
|
75
|
-
|
|
76
|
-
interface ButtonProps {
|
|
77
|
-
variant?: "primary" | "secondary";
|
|
78
|
-
size?: "sm" | "md" | "lg";
|
|
79
|
-
disabled?: boolean;
|
|
80
|
-
className?: string;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
function Button({
|
|
84
|
-
variant = "primary",
|
|
85
|
-
size = "md",
|
|
86
|
-
disabled,
|
|
87
|
-
className,
|
|
88
|
-
}: ButtonProps) {
|
|
89
|
-
return (
|
|
90
|
-
<button
|
|
91
|
-
className={cn(
|
|
92
|
-
"inline-flex items-center justify-center rounded-md font-medium",
|
|
93
|
-
"transition-colors focus-visible:outline-none focus-visible:ring-2",
|
|
94
|
-
variant === "primary" && "bg-blue-500 text-white hover:bg-blue-600",
|
|
95
|
-
variant === "secondary" &&
|
|
96
|
-
"bg-gray-200 text-gray-900 hover:bg-gray-300",
|
|
97
|
-
size === "sm" && "h-8 px-3 text-sm",
|
|
98
|
-
size === "md" && "h-10 px-4 text-base",
|
|
99
|
-
size === "lg" && "h-12 px-6 text-lg",
|
|
100
|
-
disabled && "pointer-events-none opacity-50",
|
|
101
|
-
className
|
|
102
|
-
)}
|
|
103
|
-
disabled={disabled}
|
|
104
|
-
>
|
|
105
|
-
Click me
|
|
106
|
-
</button>
|
|
107
|
-
);
|
|
108
|
-
}
|
|
109
|
-
```
|
|
110
|
-
|
|
111
83
|
## API
|
|
112
84
|
|
|
113
85
|
### `cn(...classes)`
|
|
@@ -122,18 +94,6 @@ Combines class names into a single string. Only accepts strings - non-string val
|
|
|
122
94
|
|
|
123
95
|
- `string` - The combined class names separated by spaces
|
|
124
96
|
|
|
125
|
-
## Why @lightsound/cn?
|
|
126
|
-
|
|
127
|
-
| Feature | @lightsound/cn | clsx/lite | clsx |
|
|
128
|
-
| --------------- | -------------- | --------- | ----- |
|
|
129
|
-
| Strings only | ✅ | ✅ | ❌ |
|
|
130
|
-
| Objects support | ❌ | ❌ | ✅ |
|
|
131
|
-
| Arrays support | ❌ | ❌ | ✅ |
|
|
132
|
-
| Size (gzip) | ~130B | ~139B | ~239B |
|
|
133
|
-
| Performance | ⚡⚡⚡ | ⚡⚡ | ⚡ |
|
|
134
|
-
|
|
135
|
-
If you only use string-based class composition (the most common pattern with Tailwind CSS), `@lightsound/cn` provides the best performance.
|
|
136
|
-
|
|
137
97
|
## Compatibility with clsx/lite
|
|
138
98
|
|
|
139
99
|
`@lightsound/cn` is designed as a faster, drop-in replacement for `clsx/lite`:
|