css-variants 2.2.1 → 2.2.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 +95 -39
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -1,35 +1,42 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
|
|
1
3
|
# css-variants
|
|
2
4
|
|
|
3
|
-
|
|
5
|
+
**Zero-dependency, type-safe CSS variant composition for modern JavaScript**
|
|
4
6
|
|
|
5
|
-
Build powerful, flexible component style systems with variants
|
|
7
|
+
Build powerful, flexible component style systems with variants.<br/>
|
|
8
|
+
Perfect for Tailwind CSS, vanilla CSS, or any CSS-in-JS solution.
|
|
6
9
|
|
|
7
10
|
[](https://github.com/timphandev/css-variants/actions/workflows/ci.yml)
|
|
8
11
|
[](https://www.npmjs.com/package/css-variants)
|
|
9
12
|
[](https://bundlephobia.com/package/css-variants)
|
|
10
13
|
[](https://www.typescriptlang.org/)
|
|
11
14
|
[](https://opensource.org/licenses/MIT)
|
|
12
|
-
[](https://github.com/timphandev/css-variants)
|
|
13
15
|
|
|
14
|
-
|
|
16
|
+
[Documentation](https://css-variants.vercel.app/) · [Getting Started](https://css-variants.vercel.app/getting-started/introduction/) · [API Reference](https://css-variants.vercel.app/api/cv/)
|
|
17
|
+
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
---
|
|
15
21
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
22
|
+
## Why css-variants?
|
|
23
|
+
|
|
24
|
+
| | Feature |
|
|
25
|
+
|---|---------|
|
|
26
|
+
| ⚡ | **~1KB** — Zero dependencies, tree-shakeable |
|
|
27
|
+
| 🔒 | **Type-Safe** — Full TypeScript inference for variants & props |
|
|
28
|
+
| 🧩 | **Flexible** — Works with Tailwind, CSS Modules, vanilla CSS, inline styles |
|
|
29
|
+
| 🚀 | **Fast** — Up to 10x faster than alternatives in complex scenarios |
|
|
21
30
|
|
|
22
31
|
## Installation
|
|
23
32
|
|
|
24
33
|
```bash
|
|
25
34
|
npm install css-variants
|
|
26
|
-
# or
|
|
27
|
-
yarn add css-variants
|
|
28
|
-
# or
|
|
29
|
-
pnpm add css-variants
|
|
30
35
|
```
|
|
31
36
|
|
|
32
|
-
## Quick
|
|
37
|
+
## Quick Start
|
|
38
|
+
|
|
39
|
+
### Single-Element Variants (`cv`)
|
|
33
40
|
|
|
34
41
|
```typescript
|
|
35
42
|
import { cv } from 'css-variants'
|
|
@@ -43,49 +50,98 @@ const button = cv({
|
|
|
43
50
|
},
|
|
44
51
|
size: {
|
|
45
52
|
sm: 'px-3 py-1.5 text-sm',
|
|
46
|
-
md: 'px-4 py-2 text-base',
|
|
47
53
|
lg: 'px-6 py-3 text-lg',
|
|
48
54
|
},
|
|
49
55
|
},
|
|
50
|
-
defaultVariants: {
|
|
51
|
-
|
|
52
|
-
|
|
56
|
+
defaultVariants: { color: 'primary', size: 'sm' },
|
|
57
|
+
})
|
|
58
|
+
|
|
59
|
+
button() // Primary + Small (defaults)
|
|
60
|
+
button({ color: 'secondary' }) // Secondary + Small
|
|
61
|
+
button({ size: 'lg', className: 'w-full' }) // Primary + Large + custom class
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Multi-Element Components (`scv`)
|
|
65
|
+
|
|
66
|
+
```typescript
|
|
67
|
+
import { scv } from 'css-variants'
|
|
68
|
+
|
|
69
|
+
const card = scv({
|
|
70
|
+
slots: ['root', 'header', 'body', 'footer'],
|
|
71
|
+
base: {
|
|
72
|
+
root: 'rounded-xl border shadow-sm',
|
|
73
|
+
header: 'px-6 py-4 border-b',
|
|
74
|
+
body: 'px-6 py-4',
|
|
75
|
+
footer: 'px-6 py-3 bg-gray-50',
|
|
76
|
+
},
|
|
77
|
+
variants: {
|
|
78
|
+
variant: {
|
|
79
|
+
default: { root: 'bg-white border-gray-200' },
|
|
80
|
+
danger: { root: 'bg-red-50 border-red-200', header: 'text-red-900' },
|
|
81
|
+
},
|
|
53
82
|
},
|
|
54
83
|
})
|
|
55
84
|
|
|
56
|
-
|
|
57
|
-
|
|
85
|
+
const styles = card({ variant: 'danger' })
|
|
86
|
+
// styles.root → 'rounded-xl border shadow-sm bg-red-50 border-red-200'
|
|
87
|
+
// styles.header → 'px-6 py-4 border-b text-red-900'
|
|
58
88
|
```
|
|
59
89
|
|
|
60
|
-
|
|
90
|
+
### Compound Variants
|
|
61
91
|
|
|
62
|
-
|
|
92
|
+
Apply styles when multiple variants match:
|
|
63
93
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
94
|
+
```typescript
|
|
95
|
+
const button = cv({
|
|
96
|
+
variants: {
|
|
97
|
+
color: { primary: '...', danger: '...' },
|
|
98
|
+
size: { sm: '...', lg: '...' },
|
|
99
|
+
},
|
|
100
|
+
compoundVariants: [
|
|
101
|
+
{ color: 'danger', size: 'lg', className: 'font-bold uppercase' },
|
|
102
|
+
],
|
|
103
|
+
})
|
|
104
|
+
```
|
|
68
105
|
|
|
69
|
-
|
|
106
|
+
### Style Variants (`sv`)
|
|
70
107
|
|
|
71
|
-
|
|
108
|
+
For inline styles instead of class names:
|
|
72
109
|
|
|
73
|
-
|
|
110
|
+
```typescript
|
|
111
|
+
import { sv } from 'css-variants'
|
|
74
112
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
113
|
+
const box = sv({
|
|
114
|
+
base: { display: 'flex', borderRadius: '8px' },
|
|
115
|
+
variants: {
|
|
116
|
+
size: {
|
|
117
|
+
sm: { padding: '8px' },
|
|
118
|
+
lg: { padding: '24px' },
|
|
119
|
+
},
|
|
120
|
+
},
|
|
121
|
+
})
|
|
122
|
+
|
|
123
|
+
box({ size: 'lg' }) // => { display: 'flex', borderRadius: '8px', padding: '24px' }
|
|
81
124
|
```
|
|
82
125
|
|
|
83
|
-
##
|
|
126
|
+
## Performance
|
|
84
127
|
|
|
85
|
-
|
|
128
|
+
| vs cva | vs tailwind-variants |
|
|
129
|
+
|:------:|:--------------------:|
|
|
130
|
+
| 3-4x faster (compound variants) | 5-6x faster (compound variants) |
|
|
131
|
+
| 4-9x faster (complex components) | 10-11x faster (complex components) |
|
|
132
|
+
|
|
133
|
+
## Documentation
|
|
134
|
+
|
|
135
|
+
**[Full documentation →](https://css-variants.vercel.app/)**
|
|
136
|
+
|
|
137
|
+
## Contributing
|
|
138
|
+
|
|
139
|
+
```bash
|
|
140
|
+
git clone https://github.com/timphandev/css-variants.git
|
|
141
|
+
cd css-variants && yarn install
|
|
142
|
+
yarn test && yarn build
|
|
143
|
+
```
|
|
86
144
|
|
|
87
145
|
## License
|
|
88
146
|
|
|
89
147
|
MIT © [Tim Phan](https://github.com/timphandev)
|
|
90
|
-
|
|
91
|
-
**Made with ❤️ by developers, for developers**
|
package/package.json
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "css-variants",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.2",
|
|
4
4
|
"description": "Lightweight helpers to compose class names and inline styles using variants. Zero runtime deps, small bundle, and first-class TypeScript support.",
|
|
5
|
+
"homepage": "https://css-variants.vercel.app",
|
|
5
6
|
"main": "dist/cjs/index.js",
|
|
6
7
|
"module": "dist/esm/index.js",
|
|
7
8
|
"types": "dist/esm/index.d.ts",
|