tailwind-to-style 2.7.7 → 2.8.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 +204 -157
- package/dist/generated-styles.css +336 -0
- package/dist/index.browser.js +71 -37
- package/dist/index.cjs +71 -37
- package/dist/index.esm.js +71 -37
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +3 -2
- package/plugins/vite-twsx.js +40 -0
- package/plugins/webpack-twsx.js +43 -0
|
@@ -0,0 +1,336 @@
|
|
|
1
|
+
|
|
2
|
+
/* Component Styles */
|
|
3
|
+
/* btn Component */
|
|
4
|
+
.btn {
|
|
5
|
+
display: inline-block;
|
|
6
|
+
padding: 0.5rem 1rem;
|
|
7
|
+
border-radius: 0.25rem;
|
|
8
|
+
font-weight: 500;
|
|
9
|
+
text-align: center;
|
|
10
|
+
text-decoration: none;
|
|
11
|
+
cursor: pointer;
|
|
12
|
+
transition: all 0.2s ease-in-out;
|
|
13
|
+
}
|
|
14
|
+
.btn--primary {
|
|
15
|
+
background-color: #3b82f6;
|
|
16
|
+
color: #ffffff;
|
|
17
|
+
}
|
|
18
|
+
.btn--secondary {
|
|
19
|
+
background-color: #6b7280;
|
|
20
|
+
color: #ffffff;
|
|
21
|
+
}
|
|
22
|
+
.btn--success {
|
|
23
|
+
background-color: #10b981;
|
|
24
|
+
color: #ffffff;
|
|
25
|
+
}
|
|
26
|
+
.btn--danger {
|
|
27
|
+
background-color: #ef4444;
|
|
28
|
+
color: #ffffff;
|
|
29
|
+
}
|
|
30
|
+
.btn:hover {
|
|
31
|
+
opacity: 0.9;
|
|
32
|
+
transform: translateY(-1px);
|
|
33
|
+
}
|
|
34
|
+
.btn:focus {
|
|
35
|
+
outline: 2px solid #3b82f6;
|
|
36
|
+
outline-offset: 2px;
|
|
37
|
+
}
|
|
38
|
+
.btn:active {
|
|
39
|
+
transform: translateY(0);
|
|
40
|
+
}
|
|
41
|
+
/* card Component */
|
|
42
|
+
.card {
|
|
43
|
+
background-color: #ffffff;
|
|
44
|
+
border-radius: 0.5rem;
|
|
45
|
+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
|
46
|
+
padding: 1.5rem;
|
|
47
|
+
}
|
|
48
|
+
.card--elevated {
|
|
49
|
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
50
|
+
}
|
|
51
|
+
.card--bordered {
|
|
52
|
+
border: 1px solid #e5e7eb;
|
|
53
|
+
box-shadow: none;
|
|
54
|
+
}
|
|
55
|
+
/* input Component */
|
|
56
|
+
.input {
|
|
57
|
+
display: block;
|
|
58
|
+
width: 100%;
|
|
59
|
+
padding: 0.5rem 0.75rem;
|
|
60
|
+
border: 1px solid #d1d5db;
|
|
61
|
+
border-radius: 0.375rem;
|
|
62
|
+
font-size: 1rem;
|
|
63
|
+
line-height: 1.5;
|
|
64
|
+
}
|
|
65
|
+
.input:focus {
|
|
66
|
+
outline: none;
|
|
67
|
+
border-color: #3b82f6;
|
|
68
|
+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
69
|
+
}
|
|
70
|
+
.input:disabled {
|
|
71
|
+
background-color: #f3f4f6;
|
|
72
|
+
opacity: 0.6;
|
|
73
|
+
cursor: not-allowed;
|
|
74
|
+
}
|
|
75
|
+
/* Utility Styles */
|
|
76
|
+
/* Background Color utilities */
|
|
77
|
+
.bg-primary { background-color: #3b82f6; }
|
|
78
|
+
.bg-secondary { background-color: #6b7280; }
|
|
79
|
+
.bg-success { background-color: #10b981; }
|
|
80
|
+
.bg-warning { background-color: #f59e0b; }
|
|
81
|
+
.bg-error { background-color: #ef4444; }
|
|
82
|
+
.bg-white { background-color: #ffffff; }
|
|
83
|
+
.bg-black { background-color: #000000; }
|
|
84
|
+
.bg-gray-100 { background-color: #f3f4f6; }
|
|
85
|
+
.bg-gray-200 { background-color: #e5e7eb; }
|
|
86
|
+
.bg-gray-300 { background-color: #d1d5db; }
|
|
87
|
+
.bg-gray-400 { background-color: #9ca3af; }
|
|
88
|
+
.bg-gray-500 { background-color: #6b7280; }
|
|
89
|
+
.bg-gray-600 { background-color: #4b5563; }
|
|
90
|
+
.bg-gray-700 { background-color: #374151; }
|
|
91
|
+
.bg-gray-800 { background-color: #1f2937; }
|
|
92
|
+
.bg-gray-900 { background-color: #111827; }
|
|
93
|
+
/* Text Color utilities */
|
|
94
|
+
.text-primary { color: #3b82f6; }
|
|
95
|
+
.text-secondary { color: #6b7280; }
|
|
96
|
+
.text-success { color: #10b981; }
|
|
97
|
+
.text-warning { color: #f59e0b; }
|
|
98
|
+
.text-error { color: #ef4444; }
|
|
99
|
+
.text-white { color: #ffffff; }
|
|
100
|
+
.text-black { color: #000000; }
|
|
101
|
+
.text-gray-100 { color: #f3f4f6; }
|
|
102
|
+
.text-gray-200 { color: #e5e7eb; }
|
|
103
|
+
.text-gray-300 { color: #d1d5db; }
|
|
104
|
+
.text-gray-400 { color: #9ca3af; }
|
|
105
|
+
.text-gray-500 { color: #6b7280; }
|
|
106
|
+
.text-gray-600 { color: #4b5563; }
|
|
107
|
+
.text-gray-700 { color: #374151; }
|
|
108
|
+
.text-gray-800 { color: #1f2937; }
|
|
109
|
+
.text-gray-900 { color: #111827; }
|
|
110
|
+
/* Padding utilities */
|
|
111
|
+
.p-0 { padding: 0; }
|
|
112
|
+
.px-0 { padding-left: 0; padding-right: 0; }
|
|
113
|
+
.py-0 { padding-top: 0; padding-bottom: 0; }
|
|
114
|
+
.pt-0 { padding-top: 0; }
|
|
115
|
+
.pr-0 { padding-right: 0; }
|
|
116
|
+
.pb-0 { padding-bottom: 0; }
|
|
117
|
+
.pl-0 { padding-left: 0; }
|
|
118
|
+
.p-1 { padding: 0.25rem; }
|
|
119
|
+
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
|
|
120
|
+
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
|
|
121
|
+
.pt-1 { padding-top: 0.25rem; }
|
|
122
|
+
.pr-1 { padding-right: 0.25rem; }
|
|
123
|
+
.pb-1 { padding-bottom: 0.25rem; }
|
|
124
|
+
.pl-1 { padding-left: 0.25rem; }
|
|
125
|
+
.p-2 { padding: 0.5rem; }
|
|
126
|
+
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
|
|
127
|
+
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
|
|
128
|
+
.pt-2 { padding-top: 0.5rem; }
|
|
129
|
+
.pr-2 { padding-right: 0.5rem; }
|
|
130
|
+
.pb-2 { padding-bottom: 0.5rem; }
|
|
131
|
+
.pl-2 { padding-left: 0.5rem; }
|
|
132
|
+
.p-3 { padding: 0.75rem; }
|
|
133
|
+
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
|
|
134
|
+
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
|
|
135
|
+
.pt-3 { padding-top: 0.75rem; }
|
|
136
|
+
.pr-3 { padding-right: 0.75rem; }
|
|
137
|
+
.pb-3 { padding-bottom: 0.75rem; }
|
|
138
|
+
.pl-3 { padding-left: 0.75rem; }
|
|
139
|
+
.p-4 { padding: 1rem; }
|
|
140
|
+
.px-4 { padding-left: 1rem; padding-right: 1rem; }
|
|
141
|
+
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
|
|
142
|
+
.pt-4 { padding-top: 1rem; }
|
|
143
|
+
.pr-4 { padding-right: 1rem; }
|
|
144
|
+
.pb-4 { padding-bottom: 1rem; }
|
|
145
|
+
.pl-4 { padding-left: 1rem; }
|
|
146
|
+
.p-5 { padding: 1.25rem; }
|
|
147
|
+
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
|
|
148
|
+
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
|
|
149
|
+
.pt-5 { padding-top: 1.25rem; }
|
|
150
|
+
.pr-5 { padding-right: 1.25rem; }
|
|
151
|
+
.pb-5 { padding-bottom: 1.25rem; }
|
|
152
|
+
.pl-5 { padding-left: 1.25rem; }
|
|
153
|
+
.p-6 { padding: 1.5rem; }
|
|
154
|
+
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
|
|
155
|
+
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
|
|
156
|
+
.pt-6 { padding-top: 1.5rem; }
|
|
157
|
+
.pr-6 { padding-right: 1.5rem; }
|
|
158
|
+
.pb-6 { padding-bottom: 1.5rem; }
|
|
159
|
+
.pl-6 { padding-left: 1.5rem; }
|
|
160
|
+
.p-8 { padding: 2rem; }
|
|
161
|
+
.px-8 { padding-left: 2rem; padding-right: 2rem; }
|
|
162
|
+
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
|
|
163
|
+
.pt-8 { padding-top: 2rem; }
|
|
164
|
+
.pr-8 { padding-right: 2rem; }
|
|
165
|
+
.pb-8 { padding-bottom: 2rem; }
|
|
166
|
+
.pl-8 { padding-left: 2rem; }
|
|
167
|
+
.p-10 { padding: 2.5rem; }
|
|
168
|
+
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
|
|
169
|
+
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
|
|
170
|
+
.pt-10 { padding-top: 2.5rem; }
|
|
171
|
+
.pr-10 { padding-right: 2.5rem; }
|
|
172
|
+
.pb-10 { padding-bottom: 2.5rem; }
|
|
173
|
+
.pl-10 { padding-left: 2.5rem; }
|
|
174
|
+
.p-12 { padding: 3rem; }
|
|
175
|
+
.px-12 { padding-left: 3rem; padding-right: 3rem; }
|
|
176
|
+
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
|
|
177
|
+
.pt-12 { padding-top: 3rem; }
|
|
178
|
+
.pr-12 { padding-right: 3rem; }
|
|
179
|
+
.pb-12 { padding-bottom: 3rem; }
|
|
180
|
+
.pl-12 { padding-left: 3rem; }
|
|
181
|
+
.p-16 { padding: 4rem; }
|
|
182
|
+
.px-16 { padding-left: 4rem; padding-right: 4rem; }
|
|
183
|
+
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
|
|
184
|
+
.pt-16 { padding-top: 4rem; }
|
|
185
|
+
.pr-16 { padding-right: 4rem; }
|
|
186
|
+
.pb-16 { padding-bottom: 4rem; }
|
|
187
|
+
.pl-16 { padding-left: 4rem; }
|
|
188
|
+
.p-20 { padding: 5rem; }
|
|
189
|
+
.px-20 { padding-left: 5rem; padding-right: 5rem; }
|
|
190
|
+
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
|
|
191
|
+
.pt-20 { padding-top: 5rem; }
|
|
192
|
+
.pr-20 { padding-right: 5rem; }
|
|
193
|
+
.pb-20 { padding-bottom: 5rem; }
|
|
194
|
+
.pl-20 { padding-left: 5rem; }
|
|
195
|
+
.p-24 { padding: 6rem; }
|
|
196
|
+
.px-24 { padding-left: 6rem; padding-right: 6rem; }
|
|
197
|
+
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
|
|
198
|
+
.pt-24 { padding-top: 6rem; }
|
|
199
|
+
.pr-24 { padding-right: 6rem; }
|
|
200
|
+
.pb-24 { padding-bottom: 6rem; }
|
|
201
|
+
.pl-24 { padding-left: 6rem; }
|
|
202
|
+
.p-32 { padding: 8rem; }
|
|
203
|
+
.px-32 { padding-left: 8rem; padding-right: 8rem; }
|
|
204
|
+
.py-32 { padding-top: 8rem; padding-bottom: 8rem; }
|
|
205
|
+
.pt-32 { padding-top: 8rem; }
|
|
206
|
+
.pr-32 { padding-right: 8rem; }
|
|
207
|
+
.pb-32 { padding-bottom: 8rem; }
|
|
208
|
+
.pl-32 { padding-left: 8rem; }
|
|
209
|
+
/* Margin utilities */
|
|
210
|
+
.m-0 { margin: 0; }
|
|
211
|
+
.mx-0 { margin-left: 0; margin-right: 0; }
|
|
212
|
+
.my-0 { margin-top: 0; margin-bottom: 0; }
|
|
213
|
+
.mt-0 { margin-top: 0; }
|
|
214
|
+
.mr-0 { margin-right: 0; }
|
|
215
|
+
.mb-0 { margin-bottom: 0; }
|
|
216
|
+
.ml-0 { margin-left: 0; }
|
|
217
|
+
.m-1 { margin: 0.25rem; }
|
|
218
|
+
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
|
|
219
|
+
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
|
|
220
|
+
.mt-1 { margin-top: 0.25rem; }
|
|
221
|
+
.mr-1 { margin-right: 0.25rem; }
|
|
222
|
+
.mb-1 { margin-bottom: 0.25rem; }
|
|
223
|
+
.ml-1 { margin-left: 0.25rem; }
|
|
224
|
+
.m-2 { margin: 0.5rem; }
|
|
225
|
+
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
|
|
226
|
+
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
|
|
227
|
+
.mt-2 { margin-top: 0.5rem; }
|
|
228
|
+
.mr-2 { margin-right: 0.5rem; }
|
|
229
|
+
.mb-2 { margin-bottom: 0.5rem; }
|
|
230
|
+
.ml-2 { margin-left: 0.5rem; }
|
|
231
|
+
.m-3 { margin: 0.75rem; }
|
|
232
|
+
.mx-3 { margin-left: 0.75rem; margin-right: 0.75rem; }
|
|
233
|
+
.my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
|
|
234
|
+
.mt-3 { margin-top: 0.75rem; }
|
|
235
|
+
.mr-3 { margin-right: 0.75rem; }
|
|
236
|
+
.mb-3 { margin-bottom: 0.75rem; }
|
|
237
|
+
.ml-3 { margin-left: 0.75rem; }
|
|
238
|
+
.m-4 { margin: 1rem; }
|
|
239
|
+
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
|
|
240
|
+
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
|
|
241
|
+
.mt-4 { margin-top: 1rem; }
|
|
242
|
+
.mr-4 { margin-right: 1rem; }
|
|
243
|
+
.mb-4 { margin-bottom: 1rem; }
|
|
244
|
+
.ml-4 { margin-left: 1rem; }
|
|
245
|
+
.m-5 { margin: 1.25rem; }
|
|
246
|
+
.mx-5 { margin-left: 1.25rem; margin-right: 1.25rem; }
|
|
247
|
+
.my-5 { margin-top: 1.25rem; margin-bottom: 1.25rem; }
|
|
248
|
+
.mt-5 { margin-top: 1.25rem; }
|
|
249
|
+
.mr-5 { margin-right: 1.25rem; }
|
|
250
|
+
.mb-5 { margin-bottom: 1.25rem; }
|
|
251
|
+
.ml-5 { margin-left: 1.25rem; }
|
|
252
|
+
.m-6 { margin: 1.5rem; }
|
|
253
|
+
.mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; }
|
|
254
|
+
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
|
|
255
|
+
.mt-6 { margin-top: 1.5rem; }
|
|
256
|
+
.mr-6 { margin-right: 1.5rem; }
|
|
257
|
+
.mb-6 { margin-bottom: 1.5rem; }
|
|
258
|
+
.ml-6 { margin-left: 1.5rem; }
|
|
259
|
+
.m-8 { margin: 2rem; }
|
|
260
|
+
.mx-8 { margin-left: 2rem; margin-right: 2rem; }
|
|
261
|
+
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
|
|
262
|
+
.mt-8 { margin-top: 2rem; }
|
|
263
|
+
.mr-8 { margin-right: 2rem; }
|
|
264
|
+
.mb-8 { margin-bottom: 2rem; }
|
|
265
|
+
.ml-8 { margin-left: 2rem; }
|
|
266
|
+
.m-10 { margin: 2.5rem; }
|
|
267
|
+
.mx-10 { margin-left: 2.5rem; margin-right: 2.5rem; }
|
|
268
|
+
.my-10 { margin-top: 2.5rem; margin-bottom: 2.5rem; }
|
|
269
|
+
.mt-10 { margin-top: 2.5rem; }
|
|
270
|
+
.mr-10 { margin-right: 2.5rem; }
|
|
271
|
+
.mb-10 { margin-bottom: 2.5rem; }
|
|
272
|
+
.ml-10 { margin-left: 2.5rem; }
|
|
273
|
+
.m-12 { margin: 3rem; }
|
|
274
|
+
.mx-12 { margin-left: 3rem; margin-right: 3rem; }
|
|
275
|
+
.my-12 { margin-top: 3rem; margin-bottom: 3rem; }
|
|
276
|
+
.mt-12 { margin-top: 3rem; }
|
|
277
|
+
.mr-12 { margin-right: 3rem; }
|
|
278
|
+
.mb-12 { margin-bottom: 3rem; }
|
|
279
|
+
.ml-12 { margin-left: 3rem; }
|
|
280
|
+
.m-16 { margin: 4rem; }
|
|
281
|
+
.mx-16 { margin-left: 4rem; margin-right: 4rem; }
|
|
282
|
+
.my-16 { margin-top: 4rem; margin-bottom: 4rem; }
|
|
283
|
+
.mt-16 { margin-top: 4rem; }
|
|
284
|
+
.mr-16 { margin-right: 4rem; }
|
|
285
|
+
.mb-16 { margin-bottom: 4rem; }
|
|
286
|
+
.ml-16 { margin-left: 4rem; }
|
|
287
|
+
.m-20 { margin: 5rem; }
|
|
288
|
+
.mx-20 { margin-left: 5rem; margin-right: 5rem; }
|
|
289
|
+
.my-20 { margin-top: 5rem; margin-bottom: 5rem; }
|
|
290
|
+
.mt-20 { margin-top: 5rem; }
|
|
291
|
+
.mr-20 { margin-right: 5rem; }
|
|
292
|
+
.mb-20 { margin-bottom: 5rem; }
|
|
293
|
+
.ml-20 { margin-left: 5rem; }
|
|
294
|
+
.m-24 { margin: 6rem; }
|
|
295
|
+
.mx-24 { margin-left: 6rem; margin-right: 6rem; }
|
|
296
|
+
.my-24 { margin-top: 6rem; margin-bottom: 6rem; }
|
|
297
|
+
.mt-24 { margin-top: 6rem; }
|
|
298
|
+
.mr-24 { margin-right: 6rem; }
|
|
299
|
+
.mb-24 { margin-bottom: 6rem; }
|
|
300
|
+
.ml-24 { margin-left: 6rem; }
|
|
301
|
+
.m-32 { margin: 8rem; }
|
|
302
|
+
.mx-32 { margin-left: 8rem; margin-right: 8rem; }
|
|
303
|
+
.my-32 { margin-top: 8rem; margin-bottom: 8rem; }
|
|
304
|
+
.mt-32 { margin-top: 8rem; }
|
|
305
|
+
.mr-32 { margin-right: 8rem; }
|
|
306
|
+
.mb-32 { margin-bottom: 8rem; }
|
|
307
|
+
.ml-32 { margin-left: 8rem; }
|
|
308
|
+
/* Font Size utilities */
|
|
309
|
+
.text-xs { font-size: 0.75rem; }
|
|
310
|
+
.text-sm { font-size: 0.875rem; }
|
|
311
|
+
.text-base { font-size: 1rem; }
|
|
312
|
+
.text-lg { font-size: 1.125rem; }
|
|
313
|
+
.text-xl { font-size: 1.25rem; }
|
|
314
|
+
.text-2xl { font-size: 1.5rem; }
|
|
315
|
+
.text-3xl { font-size: 1.875rem; }
|
|
316
|
+
.text-4xl { font-size: 2.25rem; }
|
|
317
|
+
/* Border Radius utilities */
|
|
318
|
+
.rounded-none { border-radius: 0; }
|
|
319
|
+
.rounded-sm { border-radius: 0.125rem; }
|
|
320
|
+
.rounded { border-radius: 0.25rem; }
|
|
321
|
+
.rounded-md { border-radius: 0.375rem; }
|
|
322
|
+
.rounded-lg { border-radius: 0.5rem; }
|
|
323
|
+
.rounded-xl { border-radius: 0.75rem; }
|
|
324
|
+
.rounded-2xl { border-radius: 1rem; }
|
|
325
|
+
.rounded-full { border-radius: 9999px; }
|
|
326
|
+
/* Custom Styles */
|
|
327
|
+
.container {
|
|
328
|
+
max-width: 1200px;
|
|
329
|
+
margin: 0 auto;
|
|
330
|
+
padding: 0 1rem;
|
|
331
|
+
}
|
|
332
|
+
.flex-center {
|
|
333
|
+
display: flex;
|
|
334
|
+
align-items: center;
|
|
335
|
+
justify-content: center;
|
|
336
|
+
}
|
package/dist/index.browser.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* tailwind-to-style v2.
|
|
2
|
+
* tailwind-to-style v2.8.0
|
|
3
3
|
* Convert tailwind classes to inline style
|
|
4
4
|
*
|
|
5
5
|
* @author Bigetion
|
|
@@ -6400,10 +6400,10 @@ var tailwindToStyle = (function (exports) {
|
|
|
6400
6400
|
return null;
|
|
6401
6401
|
}
|
|
6402
6402
|
|
|
6403
|
-
/**
|
|
6404
|
-
* Resolve all CSS custom properties (var) in a CSS string and output only clear CSS (no custom property)
|
|
6405
|
-
* @param {string} cssString
|
|
6406
|
-
* @returns {string} e.g. 'color: rgba(255,255,255,1); background: #fff;'
|
|
6403
|
+
/**
|
|
6404
|
+
* Resolve all CSS custom properties (var) in a CSS string and output only clear CSS (no custom property)
|
|
6405
|
+
* @param {string} cssString
|
|
6406
|
+
* @returns {string} e.g. 'color: rgba(255,255,255,1); background: #fff;'
|
|
6407
6407
|
*/
|
|
6408
6408
|
function resolveCssToClearCss(cssString) {
|
|
6409
6409
|
const customVars = {};
|
|
@@ -6681,11 +6681,11 @@ var tailwindToStyle = (function (exports) {
|
|
|
6681
6681
|
}
|
|
6682
6682
|
}
|
|
6683
6683
|
|
|
6684
|
-
/**
|
|
6685
|
-
* Process opacity modifier from class name (e.g., text-red-500/50 -> 50% opacity)
|
|
6686
|
-
* @param {string} className - Class name with potential opacity modifier
|
|
6687
|
-
* @param {string} cssDeclaration - CSS declaration to modify
|
|
6688
|
-
* @returns {string} Modified CSS declaration with opacity applied
|
|
6684
|
+
/**
|
|
6685
|
+
* Process opacity modifier from class name (e.g., text-red-500/50 -> 50% opacity)
|
|
6686
|
+
* @param {string} className - Class name with potential opacity modifier
|
|
6687
|
+
* @param {string} cssDeclaration - CSS declaration to modify
|
|
6688
|
+
* @returns {string} Modified CSS declaration with opacity applied
|
|
6689
6689
|
*/
|
|
6690
6690
|
function processOpacityModifier(className, cssDeclaration) {
|
|
6691
6691
|
const opacityMatch = className.match(/\/(\d+)$/);
|
|
@@ -6746,11 +6746,11 @@ var tailwindToStyle = (function (exports) {
|
|
|
6746
6746
|
return modifiedDeclaration;
|
|
6747
6747
|
}
|
|
6748
6748
|
|
|
6749
|
-
/**
|
|
6750
|
-
* Convert Tailwind class string to inline CSS styles or JSON object
|
|
6751
|
-
* @param {string} classNames - String containing Tailwind classes to convert
|
|
6752
|
-
* @param {boolean} convertToJson - If true, result will be JSON object, if false becomes CSS string
|
|
6753
|
-
* @returns {string|Object} Inline CSS string or style JSON object
|
|
6749
|
+
/**
|
|
6750
|
+
* Convert Tailwind class string to inline CSS styles or JSON object
|
|
6751
|
+
* @param {string} classNames - String containing Tailwind classes to convert
|
|
6752
|
+
* @param {boolean} convertToJson - If true, result will be JSON object, if false becomes CSS string
|
|
6753
|
+
* @returns {string|Object} Inline CSS string or style JSON object
|
|
6754
6754
|
*/
|
|
6755
6755
|
function tws(classNames, convertToJson) {
|
|
6756
6756
|
const totalMarker = performanceMonitor.start("tws:total");
|
|
@@ -6781,11 +6781,29 @@ var tailwindToStyle = (function (exports) {
|
|
|
6781
6781
|
const processMarker = performanceMonitor.start("tws:process");
|
|
6782
6782
|
let cssResult = classes.map(className => {
|
|
6783
6783
|
// Extract base class name without opacity modifier
|
|
6784
|
-
|
|
6785
|
-
|
|
6784
|
+
// Only remove /digits if it's an opacity modifier (not a fraction like w-2/3)
|
|
6785
|
+
// Opacity modifiers are typically /0-100, fractions are /2, /3, /4, /5, /6, /12
|
|
6786
|
+
const opacityMatch = className.match(/\/(\d+)$/);
|
|
6787
|
+
let baseClassName = className;
|
|
6788
|
+
let hasOpacityModifier = false;
|
|
6789
|
+
if (opacityMatch) {
|
|
6790
|
+
const opacityValue = parseInt(opacityMatch[1], 10);
|
|
6791
|
+
// If it's a valid opacity value (0-100), treat it as opacity modifier
|
|
6792
|
+
if (opacityValue >= 0 && opacityValue <= 100) {
|
|
6793
|
+
// Check if this could be a fraction (e.g., w-2/3, h-1/2)
|
|
6794
|
+
// Fractions typically have denominators of 2, 3, 4, 5, 6, 12
|
|
6795
|
+
const fractionDenominators = [2, 3, 4, 5, 6, 12];
|
|
6796
|
+
const couldBeFraction = fractionDenominators.includes(opacityValue) && (className.startsWith('w-') || className.startsWith('h-') || className.startsWith('max-w-') || className.startsWith('max-h-') || className.startsWith('min-w-') || className.startsWith('min-h-'));
|
|
6797
|
+
if (!couldBeFraction) {
|
|
6798
|
+
baseClassName = className.replace(/\/\d+$/, "");
|
|
6799
|
+
hasOpacityModifier = true;
|
|
6800
|
+
}
|
|
6801
|
+
}
|
|
6802
|
+
}
|
|
6803
|
+
let result = cssObject[baseClassName] || cssObject[baseClassName.replace(/\//g, "\\/")] || cssObject[baseClassName.replace(/\./g, "\\.")];
|
|
6786
6804
|
if (result) {
|
|
6787
6805
|
// Apply opacity modifier if present
|
|
6788
|
-
if (className.includes("/") && /\/\d+$/.test(className)) {
|
|
6806
|
+
if (hasOpacityModifier && className.includes("/") && /\/\d+$/.test(className)) {
|
|
6789
6807
|
result = processOpacityModifier(className, result);
|
|
6790
6808
|
}
|
|
6791
6809
|
return resolveCssToClearCss(result);
|
|
@@ -6797,7 +6815,7 @@ var tailwindToStyle = (function (exports) {
|
|
|
6797
6815
|
if (cssObject[`${baseKey}custom`]) {
|
|
6798
6816
|
let customResult = cssObject[`${baseKey}custom`].replace(/custom_value/g, customValue);
|
|
6799
6817
|
// Apply opacity modifier to custom values too
|
|
6800
|
-
if (className.includes("/") && /\/\d+$/.test(className)) {
|
|
6818
|
+
if (hasOpacityModifier && className.includes("/") && /\/\d+$/.test(className)) {
|
|
6801
6819
|
customResult = processOpacityModifier(className, customResult);
|
|
6802
6820
|
}
|
|
6803
6821
|
return customResult;
|
|
@@ -6933,7 +6951,23 @@ var tailwindToStyle = (function (exports) {
|
|
|
6933
6951
|
} = resolveVariants(selector, rawVariants);
|
|
6934
6952
|
|
|
6935
6953
|
// Extract base class name without opacity modifier for CSS lookup
|
|
6936
|
-
|
|
6954
|
+
// Only remove /digits if it's an opacity modifier (not a fraction like w-2/3)
|
|
6955
|
+
const opacityMatch = pureClassName.match(/\/(\d+)$/);
|
|
6956
|
+
let baseClassName = pureClassName;
|
|
6957
|
+
let hasOpacityModifier = false;
|
|
6958
|
+
if (opacityMatch) {
|
|
6959
|
+
const opacityValue = parseInt(opacityMatch[1], 10);
|
|
6960
|
+
// If it's a valid opacity value (0-100), treat it as opacity modifier
|
|
6961
|
+
if (opacityValue >= 0 && opacityValue <= 100) {
|
|
6962
|
+
// Check if this could be a fraction (e.g., w-2/3, h-1/2)
|
|
6963
|
+
const fractionDenominators = [2, 3, 4, 5, 6, 12];
|
|
6964
|
+
const couldBeFraction = fractionDenominators.includes(opacityValue) && (pureClassName.startsWith('w-') || pureClassName.startsWith('h-') || pureClassName.startsWith('max-w-') || pureClassName.startsWith('max-h-') || pureClassName.startsWith('min-w-') || pureClassName.startsWith('min-h-'));
|
|
6965
|
+
if (!couldBeFraction) {
|
|
6966
|
+
baseClassName = pureClassName.replace(/\/\d+$/, "");
|
|
6967
|
+
hasOpacityModifier = true;
|
|
6968
|
+
}
|
|
6969
|
+
}
|
|
6970
|
+
}
|
|
6937
6971
|
let declarations = cssObject[baseClassName] || cssObject[baseClassName.replace(/(\/)/g, "\\$1")] || cssObject[baseClassName.replace(/\./g, "\\.")];
|
|
6938
6972
|
if (!declarations && baseClassName.includes("[")) {
|
|
6939
6973
|
const match = baseClassName.match(/^(.+?)\[(.+)\]$/);
|
|
@@ -6954,7 +6988,7 @@ var tailwindToStyle = (function (exports) {
|
|
|
6954
6988
|
}
|
|
6955
6989
|
|
|
6956
6990
|
// Apply opacity modifier if present
|
|
6957
|
-
if (pureClassName.includes("/") && /\/\d+$/.test(pureClassName)) {
|
|
6991
|
+
if (hasOpacityModifier && pureClassName.includes("/") && /\/\d+$/.test(pureClassName)) {
|
|
6958
6992
|
declarations = processOpacityModifier(pureClassName, declarations);
|
|
6959
6993
|
}
|
|
6960
6994
|
if (isImportant) {
|
|
@@ -7129,12 +7163,12 @@ var tailwindToStyle = (function (exports) {
|
|
|
7129
7163
|
return cssString.trim();
|
|
7130
7164
|
}
|
|
7131
7165
|
|
|
7132
|
-
/**
|
|
7133
|
-
* Generate CSS string from style object with SCSS-like syntax
|
|
7134
|
-
* Supports nested selectors, state variants, responsive variants, and @css directives
|
|
7135
|
-
* @param {Object} obj - Object with SCSS-like style format
|
|
7136
|
-
* @param {Object} [options] - Additional options, e.g. { inject: true/false }
|
|
7137
|
-
* @returns {string} Generated CSS string
|
|
7166
|
+
/**
|
|
7167
|
+
* Generate CSS string from style object with SCSS-like syntax
|
|
7168
|
+
* Supports nested selectors, state variants, responsive variants, and @css directives
|
|
7169
|
+
* @param {Object} obj - Object with SCSS-like style format
|
|
7170
|
+
* @param {Object} [options] - Additional options, e.g. { inject: true/false }
|
|
7171
|
+
* @returns {string} Generated CSS string
|
|
7138
7172
|
*/
|
|
7139
7173
|
function twsx(obj) {
|
|
7140
7174
|
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
@@ -7241,19 +7275,19 @@ var tailwindToStyle = (function (exports) {
|
|
|
7241
7275
|
}
|
|
7242
7276
|
|
|
7243
7277
|
// Enhanced debounced functions with performance monitoring configuration
|
|
7244
|
-
/**
|
|
7245
|
-
* Debounced version of tws function with performance monitoring
|
|
7246
|
-
* @param {string} classNames - String containing Tailwind classes to convert
|
|
7247
|
-
* @param {boolean} convertToJson - If true, result will be JSON object, if false becomes CSS string
|
|
7248
|
-
* @returns {string|Object} Inline CSS string or style JSON object
|
|
7278
|
+
/**
|
|
7279
|
+
* Debounced version of tws function with performance monitoring
|
|
7280
|
+
* @param {string} classNames - String containing Tailwind classes to convert
|
|
7281
|
+
* @param {boolean} convertToJson - If true, result will be JSON object, if false becomes CSS string
|
|
7282
|
+
* @returns {string|Object} Inline CSS string or style JSON object
|
|
7249
7283
|
*/
|
|
7250
7284
|
const debouncedTws = debounce(tws, 50); // Faster debounce for tws
|
|
7251
7285
|
|
|
7252
|
-
/**
|
|
7253
|
-
* Debounced version of twsx function with performance monitoring
|
|
7254
|
-
* @param {Object} obj - Object with SCSS-like style format
|
|
7255
|
-
* @param {Object} [options] - Additional options
|
|
7256
|
-
* @returns {string} Generated CSS string
|
|
7286
|
+
/**
|
|
7287
|
+
* Debounced version of twsx function with performance monitoring
|
|
7288
|
+
* @param {Object} obj - Object with SCSS-like style format
|
|
7289
|
+
* @param {Object} [options] - Additional options
|
|
7290
|
+
* @returns {string} Generated CSS string
|
|
7257
7291
|
*/
|
|
7258
7292
|
const debouncedTwsx = debounce(twsx, 100); // Standard debounce for twsx
|
|
7259
7293
|
|