twirlwind 0.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/LICENSE +21 -0
- package/README.md +225 -0
- package/dist/index.d.mts +58 -0
- package/dist/index.mjs +3545 -0
- package/package.json +60 -0
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,3545 @@
|
|
|
1
|
+
//#region src/compress.ts
|
|
2
|
+
const groups = [
|
|
3
|
+
{
|
|
4
|
+
properties: [
|
|
5
|
+
"margin-top",
|
|
6
|
+
"margin-right",
|
|
7
|
+
"margin-bottom",
|
|
8
|
+
"margin-left"
|
|
9
|
+
],
|
|
10
|
+
all: "m",
|
|
11
|
+
x: "mx",
|
|
12
|
+
y: "my",
|
|
13
|
+
top: "mt",
|
|
14
|
+
right: "mr",
|
|
15
|
+
bottom: "mb",
|
|
16
|
+
left: "ml"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
properties: [
|
|
20
|
+
"padding-top",
|
|
21
|
+
"padding-right",
|
|
22
|
+
"padding-bottom",
|
|
23
|
+
"padding-left"
|
|
24
|
+
],
|
|
25
|
+
all: "p",
|
|
26
|
+
x: "px",
|
|
27
|
+
y: "py",
|
|
28
|
+
top: "pt",
|
|
29
|
+
right: "pr",
|
|
30
|
+
bottom: "pb",
|
|
31
|
+
left: "pl"
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
properties: [
|
|
35
|
+
"top",
|
|
36
|
+
"right",
|
|
37
|
+
"bottom",
|
|
38
|
+
"left"
|
|
39
|
+
],
|
|
40
|
+
all: "inset",
|
|
41
|
+
x: "inset-x",
|
|
42
|
+
y: "inset-y",
|
|
43
|
+
top: "top",
|
|
44
|
+
right: "right",
|
|
45
|
+
bottom: "bottom",
|
|
46
|
+
left: "left"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
properties: [
|
|
50
|
+
"border-top-width",
|
|
51
|
+
"border-right-width",
|
|
52
|
+
"border-bottom-width",
|
|
53
|
+
"border-left-width"
|
|
54
|
+
],
|
|
55
|
+
all: "border",
|
|
56
|
+
x: "border-x",
|
|
57
|
+
y: "border-y",
|
|
58
|
+
top: "border-t",
|
|
59
|
+
right: "border-r",
|
|
60
|
+
bottom: "border-b",
|
|
61
|
+
left: "border-l"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
properties: [
|
|
65
|
+
"border-top-color",
|
|
66
|
+
"border-right-color",
|
|
67
|
+
"border-bottom-color",
|
|
68
|
+
"border-left-color"
|
|
69
|
+
],
|
|
70
|
+
all: "border",
|
|
71
|
+
x: "border-x",
|
|
72
|
+
y: "border-y",
|
|
73
|
+
top: "border-t",
|
|
74
|
+
right: "border-r",
|
|
75
|
+
bottom: "border-b",
|
|
76
|
+
left: "border-l"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
properties: [
|
|
80
|
+
"border-top-style",
|
|
81
|
+
"border-right-style",
|
|
82
|
+
"border-bottom-style",
|
|
83
|
+
"border-left-style"
|
|
84
|
+
],
|
|
85
|
+
all: "border",
|
|
86
|
+
x: "border-x",
|
|
87
|
+
y: "border-y",
|
|
88
|
+
top: "border-t",
|
|
89
|
+
right: "border-r",
|
|
90
|
+
bottom: "border-b",
|
|
91
|
+
left: "border-l"
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
properties: [
|
|
95
|
+
"scroll-margin-top",
|
|
96
|
+
"scroll-margin-right",
|
|
97
|
+
"scroll-margin-bottom",
|
|
98
|
+
"scroll-margin-left"
|
|
99
|
+
],
|
|
100
|
+
all: "scroll-m",
|
|
101
|
+
x: "scroll-mx",
|
|
102
|
+
y: "scroll-my",
|
|
103
|
+
top: "scroll-mt",
|
|
104
|
+
right: "scroll-mr",
|
|
105
|
+
bottom: "scroll-mb",
|
|
106
|
+
left: "scroll-ml"
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
properties: [
|
|
110
|
+
"scroll-padding-top",
|
|
111
|
+
"scroll-padding-right",
|
|
112
|
+
"scroll-padding-bottom",
|
|
113
|
+
"scroll-padding-left"
|
|
114
|
+
],
|
|
115
|
+
all: "scroll-p",
|
|
116
|
+
x: "scroll-px",
|
|
117
|
+
y: "scroll-py",
|
|
118
|
+
top: "scroll-pt",
|
|
119
|
+
right: "scroll-pr",
|
|
120
|
+
bottom: "scroll-pb",
|
|
121
|
+
left: "scroll-pl"
|
|
122
|
+
}
|
|
123
|
+
];
|
|
124
|
+
function compressConverted(converted, options) {
|
|
125
|
+
if (options.compression === "none") return converted;
|
|
126
|
+
let remaining = [...converted];
|
|
127
|
+
const compressed = [];
|
|
128
|
+
for (const group of groups) {
|
|
129
|
+
const found = findBoxGroup(remaining, group.properties);
|
|
130
|
+
if (!found) continue;
|
|
131
|
+
const replacement = compressBox(found, group);
|
|
132
|
+
remaining = remaining.filter((item) => !group.properties.includes(item.property));
|
|
133
|
+
compressed.push(...replacement);
|
|
134
|
+
}
|
|
135
|
+
let result = [...remaining, ...compressed];
|
|
136
|
+
result = compressRadius(result);
|
|
137
|
+
result = compressAxisPairs(result);
|
|
138
|
+
return result;
|
|
139
|
+
}
|
|
140
|
+
function findBoxGroup(converted, properties) {
|
|
141
|
+
const [topProperty, rightProperty, bottomProperty, leftProperty] = properties;
|
|
142
|
+
const top = converted.find((item) => item.property === topProperty);
|
|
143
|
+
const right = converted.find((item) => item.property === rightProperty);
|
|
144
|
+
const bottom = converted.find((item) => item.property === bottomProperty);
|
|
145
|
+
const left = converted.find((item) => item.property === leftProperty);
|
|
146
|
+
return top && right && bottom && left ? {
|
|
147
|
+
top,
|
|
148
|
+
right,
|
|
149
|
+
bottom,
|
|
150
|
+
left
|
|
151
|
+
} : void 0;
|
|
152
|
+
}
|
|
153
|
+
function compressBox(box, group) {
|
|
154
|
+
const top = extractToken(box.top.className, group.top);
|
|
155
|
+
const right = extractToken(box.right.className, group.right);
|
|
156
|
+
const bottom = extractToken(box.bottom.className, group.bottom);
|
|
157
|
+
const left = extractToken(box.left.className, group.left);
|
|
158
|
+
if (!top || !right || !bottom || !left) return [
|
|
159
|
+
box.top,
|
|
160
|
+
box.right,
|
|
161
|
+
box.bottom,
|
|
162
|
+
box.left
|
|
163
|
+
];
|
|
164
|
+
if (top === right && right === bottom && bottom === left) return [withClass(box.top, `${group.all}-${top}`)];
|
|
165
|
+
if (top === bottom && right === left) return [withClass(box.top, `${group.y}-${top}`), withClass(box.right, `${group.x}-${right}`)];
|
|
166
|
+
const result = [];
|
|
167
|
+
if (top === bottom) result.push(withClass(box.top, `${group.y}-${top}`));
|
|
168
|
+
else result.push(withClass(box.top, `${group.top}-${top}`), withClass(box.bottom, `${group.bottom}-${bottom}`));
|
|
169
|
+
if (right === left) result.push(withClass(box.right, `${group.x}-${right}`));
|
|
170
|
+
else result.push(withClass(box.right, `${group.right}-${right}`), withClass(box.left, `${group.left}-${left}`));
|
|
171
|
+
return result;
|
|
172
|
+
}
|
|
173
|
+
function extractToken(className, prefix) {
|
|
174
|
+
if (!className.startsWith(prefix + "-")) return void 0;
|
|
175
|
+
return className.slice(prefix.length + 1);
|
|
176
|
+
}
|
|
177
|
+
function compressAxisPairs(converted) {
|
|
178
|
+
let result = [...converted];
|
|
179
|
+
const rowGap = result.find((c) => c.property === "row-gap");
|
|
180
|
+
const colGap = result.find((c) => c.property === "column-gap");
|
|
181
|
+
if (rowGap && colGap) {
|
|
182
|
+
const rowToken = extractToken(rowGap.className, "gap-y");
|
|
183
|
+
const colToken = extractToken(colGap.className, "gap-x");
|
|
184
|
+
if (rowToken && colToken && rowToken === colToken) {
|
|
185
|
+
result = result.filter((c) => c.property !== "row-gap" && c.property !== "column-gap");
|
|
186
|
+
result.push(withClass(rowGap, `gap-${rowToken}`));
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
return result;
|
|
190
|
+
}
|
|
191
|
+
function compressRadius(converted) {
|
|
192
|
+
const tlProp = "border-top-left-radius";
|
|
193
|
+
const trProp = "border-top-right-radius";
|
|
194
|
+
const brProp = "border-bottom-right-radius";
|
|
195
|
+
const blProp = "border-bottom-left-radius";
|
|
196
|
+
const tl = converted.find((c) => c.property === tlProp);
|
|
197
|
+
const tr = converted.find((c) => c.property === trProp);
|
|
198
|
+
const br = converted.find((c) => c.property === brProp);
|
|
199
|
+
const bl = converted.find((c) => c.property === blProp);
|
|
200
|
+
if (!tl || !tr || !br || !bl) return converted;
|
|
201
|
+
const tlToken = extractToken(tl.className, "rounded-tl");
|
|
202
|
+
const trToken = extractToken(tr.className, "rounded-tr");
|
|
203
|
+
const brToken = extractToken(br.className, "rounded-br");
|
|
204
|
+
const blToken = extractToken(bl.className, "rounded-bl");
|
|
205
|
+
if (!tlToken || !trToken || !brToken || !blToken) return converted;
|
|
206
|
+
const radiusProps = new Set([
|
|
207
|
+
tlProp,
|
|
208
|
+
trProp,
|
|
209
|
+
brProp,
|
|
210
|
+
blProp
|
|
211
|
+
]);
|
|
212
|
+
const rest = converted.filter((c) => !radiusProps.has(c.property));
|
|
213
|
+
if (tlToken === trToken && trToken === brToken && brToken === blToken) return [...rest, withClass(tl, `rounded-${tlToken}`)];
|
|
214
|
+
const result = [...rest];
|
|
215
|
+
if (tlToken === blToken && trToken === brToken) {
|
|
216
|
+
result.push(withClass(tl, `rounded-l-${tlToken}`));
|
|
217
|
+
result.push(withClass(tr, `rounded-r-${trToken}`));
|
|
218
|
+
return result;
|
|
219
|
+
}
|
|
220
|
+
if (tlToken === trToken) result.push(withClass(tl, `rounded-t-${tlToken}`));
|
|
221
|
+
else result.push(tl, tr);
|
|
222
|
+
if (brToken === blToken) result.push(withClass(br, `rounded-b-${brToken}`));
|
|
223
|
+
else result.push(br, bl);
|
|
224
|
+
return result;
|
|
225
|
+
}
|
|
226
|
+
function withClass(declaration, className) {
|
|
227
|
+
return {
|
|
228
|
+
...declaration,
|
|
229
|
+
className
|
|
230
|
+
};
|
|
231
|
+
}
|
|
232
|
+
//#endregion
|
|
233
|
+
//#region src/colors.ts
|
|
234
|
+
const tailwindV3Hex = {
|
|
235
|
+
"red-50": "#fef2f2",
|
|
236
|
+
"red-100": "#fee2e2",
|
|
237
|
+
"red-200": "#fecaca",
|
|
238
|
+
"red-300": "#fca5a5",
|
|
239
|
+
"red-400": "#f87171",
|
|
240
|
+
"red-500": "#ef4444",
|
|
241
|
+
"red-600": "#dc2626",
|
|
242
|
+
"red-700": "#b91c1c",
|
|
243
|
+
"red-800": "#991b1b",
|
|
244
|
+
"red-900": "#7f1d1d",
|
|
245
|
+
"red-950": "#450a0a",
|
|
246
|
+
"orange-50": "#fff7ed",
|
|
247
|
+
"orange-100": "#ffedd5",
|
|
248
|
+
"orange-200": "#fed7aa",
|
|
249
|
+
"orange-300": "#fdba74",
|
|
250
|
+
"orange-400": "#fb923c",
|
|
251
|
+
"orange-500": "#f97316",
|
|
252
|
+
"orange-600": "#ea580c",
|
|
253
|
+
"orange-700": "#c2410c",
|
|
254
|
+
"orange-800": "#9a3412",
|
|
255
|
+
"orange-900": "#7c2d12",
|
|
256
|
+
"orange-950": "#431407",
|
|
257
|
+
"amber-50": "#fffbeb",
|
|
258
|
+
"amber-100": "#fef3c7",
|
|
259
|
+
"amber-200": "#fde68a",
|
|
260
|
+
"amber-300": "#fcd34d",
|
|
261
|
+
"amber-400": "#fbbf24",
|
|
262
|
+
"amber-500": "#f59e0b",
|
|
263
|
+
"amber-600": "#d97706",
|
|
264
|
+
"amber-700": "#b45309",
|
|
265
|
+
"amber-800": "#92400e",
|
|
266
|
+
"amber-900": "#78350f",
|
|
267
|
+
"amber-950": "#451a03",
|
|
268
|
+
"yellow-50": "#fefce8",
|
|
269
|
+
"yellow-100": "#fef9c3",
|
|
270
|
+
"yellow-200": "#fef08a",
|
|
271
|
+
"yellow-300": "#fde047",
|
|
272
|
+
"yellow-400": "#facc15",
|
|
273
|
+
"yellow-500": "#eab308",
|
|
274
|
+
"yellow-600": "#ca8a04",
|
|
275
|
+
"yellow-700": "#a16207",
|
|
276
|
+
"yellow-800": "#854d0e",
|
|
277
|
+
"yellow-900": "#713f12",
|
|
278
|
+
"yellow-950": "#422006",
|
|
279
|
+
"lime-50": "#f7fee7",
|
|
280
|
+
"lime-100": "#ecfccb",
|
|
281
|
+
"lime-200": "#d9f99d",
|
|
282
|
+
"lime-300": "#bef264",
|
|
283
|
+
"lime-400": "#a3e635",
|
|
284
|
+
"lime-500": "#84cc16",
|
|
285
|
+
"lime-600": "#65a30d",
|
|
286
|
+
"lime-700": "#4d7c0f",
|
|
287
|
+
"lime-800": "#3f6212",
|
|
288
|
+
"lime-900": "#365314",
|
|
289
|
+
"lime-950": "#1a2e05",
|
|
290
|
+
"green-50": "#f0fdf4",
|
|
291
|
+
"green-100": "#dcfce7",
|
|
292
|
+
"green-200": "#bbf7d0",
|
|
293
|
+
"green-300": "#86efac",
|
|
294
|
+
"green-400": "#4ade80",
|
|
295
|
+
"green-500": "#22c55e",
|
|
296
|
+
"green-600": "#16a34a",
|
|
297
|
+
"green-700": "#15803d",
|
|
298
|
+
"green-800": "#166534",
|
|
299
|
+
"green-900": "#14532d",
|
|
300
|
+
"green-950": "#052e16",
|
|
301
|
+
"emerald-50": "#ecfdf5",
|
|
302
|
+
"emerald-100": "#d1fae5",
|
|
303
|
+
"emerald-200": "#a7f3d0",
|
|
304
|
+
"emerald-300": "#6ee7b7",
|
|
305
|
+
"emerald-400": "#34d399",
|
|
306
|
+
"emerald-500": "#10b981",
|
|
307
|
+
"emerald-600": "#059669",
|
|
308
|
+
"emerald-700": "#047857",
|
|
309
|
+
"emerald-800": "#065f46",
|
|
310
|
+
"emerald-900": "#064e3b",
|
|
311
|
+
"emerald-950": "#022c22",
|
|
312
|
+
"teal-50": "#f0fdfa",
|
|
313
|
+
"teal-100": "#ccfbf1",
|
|
314
|
+
"teal-200": "#99f6e4",
|
|
315
|
+
"teal-300": "#5eead4",
|
|
316
|
+
"teal-400": "#2dd4bf",
|
|
317
|
+
"teal-500": "#14b8a6",
|
|
318
|
+
"teal-600": "#0d9488",
|
|
319
|
+
"teal-700": "#0f766e",
|
|
320
|
+
"teal-800": "#115e59",
|
|
321
|
+
"teal-900": "#134e4a",
|
|
322
|
+
"teal-950": "#042f2e",
|
|
323
|
+
"cyan-50": "#ecfeff",
|
|
324
|
+
"cyan-100": "#cffafe",
|
|
325
|
+
"cyan-200": "#a5f3fc",
|
|
326
|
+
"cyan-300": "#67e8f9",
|
|
327
|
+
"cyan-400": "#22d3ee",
|
|
328
|
+
"cyan-500": "#06b6d4",
|
|
329
|
+
"cyan-600": "#0891b2",
|
|
330
|
+
"cyan-700": "#0e7490",
|
|
331
|
+
"cyan-800": "#155e75",
|
|
332
|
+
"cyan-900": "#164e63",
|
|
333
|
+
"cyan-950": "#083344",
|
|
334
|
+
"sky-50": "#f0f9ff",
|
|
335
|
+
"sky-100": "#e0f2fe",
|
|
336
|
+
"sky-200": "#bae6fd",
|
|
337
|
+
"sky-300": "#7dd3fc",
|
|
338
|
+
"sky-400": "#38bdf8",
|
|
339
|
+
"sky-500": "#0ea5e9",
|
|
340
|
+
"sky-600": "#0284c7",
|
|
341
|
+
"sky-700": "#0369a1",
|
|
342
|
+
"sky-800": "#075985",
|
|
343
|
+
"sky-900": "#0c4a6e",
|
|
344
|
+
"sky-950": "#082f49",
|
|
345
|
+
"blue-50": "#eff6ff",
|
|
346
|
+
"blue-100": "#dbeafe",
|
|
347
|
+
"blue-200": "#bfdbfe",
|
|
348
|
+
"blue-300": "#93c5fd",
|
|
349
|
+
"blue-400": "#60a5fa",
|
|
350
|
+
"blue-500": "#3b82f6",
|
|
351
|
+
"blue-600": "#2563eb",
|
|
352
|
+
"blue-700": "#1d4ed8",
|
|
353
|
+
"blue-800": "#1e40af",
|
|
354
|
+
"blue-900": "#1e3a8a",
|
|
355
|
+
"blue-950": "#172554",
|
|
356
|
+
"indigo-50": "#eef2ff",
|
|
357
|
+
"indigo-100": "#e0e7ff",
|
|
358
|
+
"indigo-200": "#c7d2fe",
|
|
359
|
+
"indigo-300": "#a5b4fc",
|
|
360
|
+
"indigo-400": "#818cf8",
|
|
361
|
+
"indigo-500": "#6366f1",
|
|
362
|
+
"indigo-600": "#4f46e5",
|
|
363
|
+
"indigo-700": "#4338ca",
|
|
364
|
+
"indigo-800": "#3730a3",
|
|
365
|
+
"indigo-900": "#312e81",
|
|
366
|
+
"indigo-950": "#1e1b4b",
|
|
367
|
+
"violet-50": "#f5f3ff",
|
|
368
|
+
"violet-100": "#ede9fe",
|
|
369
|
+
"violet-200": "#ddd6fe",
|
|
370
|
+
"violet-300": "#c4b5fd",
|
|
371
|
+
"violet-400": "#a78bfa",
|
|
372
|
+
"violet-500": "#8b5cf6",
|
|
373
|
+
"violet-600": "#7c3aed",
|
|
374
|
+
"violet-700": "#6d28d9",
|
|
375
|
+
"violet-800": "#5b21b6",
|
|
376
|
+
"violet-900": "#4c1d95",
|
|
377
|
+
"violet-950": "#2e1065",
|
|
378
|
+
"purple-50": "#faf5ff",
|
|
379
|
+
"purple-100": "#f3e8ff",
|
|
380
|
+
"purple-200": "#e9d5ff",
|
|
381
|
+
"purple-300": "#d8b4fe",
|
|
382
|
+
"purple-400": "#c084fc",
|
|
383
|
+
"purple-500": "#a855f7",
|
|
384
|
+
"purple-600": "#9333ea",
|
|
385
|
+
"purple-700": "#7e22ce",
|
|
386
|
+
"purple-800": "#6b21a8",
|
|
387
|
+
"purple-900": "#581c87",
|
|
388
|
+
"purple-950": "#3b0764",
|
|
389
|
+
"fuchsia-50": "#fdf4ff",
|
|
390
|
+
"fuchsia-100": "#fae8ff",
|
|
391
|
+
"fuchsia-200": "#f5d0fe",
|
|
392
|
+
"fuchsia-300": "#f0abfc",
|
|
393
|
+
"fuchsia-400": "#e879f9",
|
|
394
|
+
"fuchsia-500": "#d946ef",
|
|
395
|
+
"fuchsia-600": "#c026d3",
|
|
396
|
+
"fuchsia-700": "#a21caf",
|
|
397
|
+
"fuchsia-800": "#86198f",
|
|
398
|
+
"fuchsia-900": "#701a75",
|
|
399
|
+
"fuchsia-950": "#4a044e",
|
|
400
|
+
"pink-50": "#fdf2f8",
|
|
401
|
+
"pink-100": "#fce7f3",
|
|
402
|
+
"pink-200": "#fbcfe8",
|
|
403
|
+
"pink-300": "#f9a8d4",
|
|
404
|
+
"pink-400": "#f472b6",
|
|
405
|
+
"pink-500": "#ec4899",
|
|
406
|
+
"pink-600": "#db2777",
|
|
407
|
+
"pink-700": "#be185d",
|
|
408
|
+
"pink-800": "#9d174d",
|
|
409
|
+
"pink-900": "#831843",
|
|
410
|
+
"pink-950": "#500724",
|
|
411
|
+
"rose-50": "#fff1f2",
|
|
412
|
+
"rose-100": "#ffe4e6",
|
|
413
|
+
"rose-200": "#fecdd3",
|
|
414
|
+
"rose-300": "#fda4af",
|
|
415
|
+
"rose-400": "#fb7185",
|
|
416
|
+
"rose-500": "#f43f5e",
|
|
417
|
+
"rose-600": "#e11d48",
|
|
418
|
+
"rose-700": "#be123c",
|
|
419
|
+
"rose-800": "#9f1239",
|
|
420
|
+
"rose-900": "#881337",
|
|
421
|
+
"rose-950": "#4c0519",
|
|
422
|
+
"slate-50": "#f8fafc",
|
|
423
|
+
"slate-100": "#f1f5f9",
|
|
424
|
+
"slate-200": "#e2e8f0",
|
|
425
|
+
"slate-300": "#cbd5e1",
|
|
426
|
+
"slate-400": "#94a3b8",
|
|
427
|
+
"slate-500": "#64748b",
|
|
428
|
+
"slate-600": "#475569",
|
|
429
|
+
"slate-700": "#334155",
|
|
430
|
+
"slate-800": "#1e293b",
|
|
431
|
+
"slate-900": "#0f172a",
|
|
432
|
+
"slate-950": "#020617",
|
|
433
|
+
"gray-50": "#f9fafb",
|
|
434
|
+
"gray-100": "#f3f4f6",
|
|
435
|
+
"gray-200": "#e5e7eb",
|
|
436
|
+
"gray-300": "#d1d5db",
|
|
437
|
+
"gray-400": "#9ca3af",
|
|
438
|
+
"gray-500": "#6b7280",
|
|
439
|
+
"gray-600": "#4b5563",
|
|
440
|
+
"gray-700": "#374151",
|
|
441
|
+
"gray-800": "#1f2937",
|
|
442
|
+
"gray-900": "#111827",
|
|
443
|
+
"gray-950": "#030712",
|
|
444
|
+
"zinc-50": "#fafafa",
|
|
445
|
+
"zinc-100": "#f4f4f5",
|
|
446
|
+
"zinc-200": "#e4e4e7",
|
|
447
|
+
"zinc-300": "#d4d4d8",
|
|
448
|
+
"zinc-400": "#a1a1aa",
|
|
449
|
+
"zinc-500": "#71717a",
|
|
450
|
+
"zinc-600": "#52525b",
|
|
451
|
+
"zinc-700": "#3f3f46",
|
|
452
|
+
"zinc-800": "#27272a",
|
|
453
|
+
"zinc-900": "#18181b",
|
|
454
|
+
"zinc-950": "#09090b",
|
|
455
|
+
"neutral-50": "#fafafa",
|
|
456
|
+
"neutral-100": "#f5f5f5",
|
|
457
|
+
"neutral-200": "#e5e5e5",
|
|
458
|
+
"neutral-300": "#d4d4d4",
|
|
459
|
+
"neutral-400": "#a3a3a3",
|
|
460
|
+
"neutral-500": "#737373",
|
|
461
|
+
"neutral-600": "#525252",
|
|
462
|
+
"neutral-700": "#404040",
|
|
463
|
+
"neutral-800": "#262626",
|
|
464
|
+
"neutral-900": "#171717",
|
|
465
|
+
"neutral-950": "#0a0a0a",
|
|
466
|
+
"stone-50": "#fafaf9",
|
|
467
|
+
"stone-100": "#f5f5f4",
|
|
468
|
+
"stone-200": "#e7e5e4",
|
|
469
|
+
"stone-300": "#d6d3d1",
|
|
470
|
+
"stone-400": "#a8a29e",
|
|
471
|
+
"stone-500": "#78716c",
|
|
472
|
+
"stone-600": "#57534e",
|
|
473
|
+
"stone-700": "#44403c",
|
|
474
|
+
"stone-800": "#292524",
|
|
475
|
+
"stone-900": "#1c1917",
|
|
476
|
+
"stone-950": "#0c0a09"
|
|
477
|
+
};
|
|
478
|
+
const hexToToken = {};
|
|
479
|
+
for (const [token, hex] of Object.entries(tailwindV3Hex)) hexToToken[hex.toLowerCase()] = token;
|
|
480
|
+
function lookupHexToken(hex) {
|
|
481
|
+
return hexToToken[hex.toLowerCase()];
|
|
482
|
+
}
|
|
483
|
+
const tailwindColors = {
|
|
484
|
+
transparent: "transparent",
|
|
485
|
+
current: "currentColor",
|
|
486
|
+
black: "#000000",
|
|
487
|
+
white: "#ffffff",
|
|
488
|
+
"amber-100": "oklch(96.2% 0.059 95.617)",
|
|
489
|
+
"amber-200": "oklch(92.4% 0.12 95.746)",
|
|
490
|
+
"amber-300": "oklch(87.9% 0.169 91.605)",
|
|
491
|
+
"amber-400": "oklch(82.8% 0.189 84.429)",
|
|
492
|
+
"amber-50": "oklch(98.7% 0.022 95.277)",
|
|
493
|
+
"amber-500": "oklch(76.9% 0.188 70.08)",
|
|
494
|
+
"amber-600": "oklch(66.6% 0.179 58.318)",
|
|
495
|
+
"amber-700": "oklch(55.5% 0.163 48.998)",
|
|
496
|
+
"amber-800": "oklch(47.3% 0.137 46.201)",
|
|
497
|
+
"amber-900": "oklch(41.4% 0.112 45.904)",
|
|
498
|
+
"amber-950": "oklch(27.9% 0.077 45.635)",
|
|
499
|
+
"blue-100": "oklch(93.2% 0.032 255.585)",
|
|
500
|
+
"blue-200": "oklch(88.2% 0.059 254.128)",
|
|
501
|
+
"blue-300": "oklch(80.9% 0.105 251.813)",
|
|
502
|
+
"blue-400": "oklch(70.7% 0.165 254.624)",
|
|
503
|
+
"blue-50": "oklch(97% 0.014 254.604)",
|
|
504
|
+
"blue-500": "oklch(62.3% 0.214 259.815)",
|
|
505
|
+
"blue-600": "oklch(54.6% 0.245 262.881)",
|
|
506
|
+
"blue-700": "oklch(48.8% 0.243 264.376)",
|
|
507
|
+
"blue-800": "oklch(42.4% 0.199 265.638)",
|
|
508
|
+
"blue-900": "oklch(37.9% 0.146 265.522)",
|
|
509
|
+
"blue-950": "oklch(28.2% 0.091 267.935)",
|
|
510
|
+
"cyan-100": "oklch(95.6% 0.045 203.388)",
|
|
511
|
+
"cyan-200": "oklch(91.7% 0.08 205.041)",
|
|
512
|
+
"cyan-300": "oklch(86.5% 0.127 207.078)",
|
|
513
|
+
"cyan-400": "oklch(78.9% 0.154 211.53)",
|
|
514
|
+
"cyan-50": "oklch(98.4% 0.019 200.873)",
|
|
515
|
+
"cyan-500": "oklch(71.5% 0.143 215.221)",
|
|
516
|
+
"cyan-600": "oklch(60.9% 0.126 221.723)",
|
|
517
|
+
"cyan-700": "oklch(52% 0.105 223.128)",
|
|
518
|
+
"cyan-800": "oklch(45% 0.085 224.283)",
|
|
519
|
+
"cyan-900": "oklch(39.8% 0.07 227.392)",
|
|
520
|
+
"cyan-950": "oklch(30.2% 0.056 229.695)",
|
|
521
|
+
"emerald-100": "oklch(95% 0.052 163.051)",
|
|
522
|
+
"emerald-200": "oklch(90.5% 0.093 164.15)",
|
|
523
|
+
"emerald-300": "oklch(84.5% 0.143 164.978)",
|
|
524
|
+
"emerald-400": "oklch(76.5% 0.177 163.223)",
|
|
525
|
+
"emerald-50": "oklch(97.9% 0.021 166.113)",
|
|
526
|
+
"emerald-500": "oklch(69.6% 0.17 162.48)",
|
|
527
|
+
"emerald-600": "oklch(59.6% 0.145 163.225)",
|
|
528
|
+
"emerald-700": "oklch(50.8% 0.118 165.612)",
|
|
529
|
+
"emerald-800": "oklch(43.2% 0.095 166.913)",
|
|
530
|
+
"emerald-900": "oklch(37.8% 0.077 168.94)",
|
|
531
|
+
"emerald-950": "oklch(26.2% 0.051 172.552)",
|
|
532
|
+
"fuchsia-100": "oklch(95.2% 0.037 318.852)",
|
|
533
|
+
"fuchsia-200": "oklch(90.3% 0.076 319.62)",
|
|
534
|
+
"fuchsia-300": "oklch(83.3% 0.145 321.434)",
|
|
535
|
+
"fuchsia-400": "oklch(74% 0.238 322.16)",
|
|
536
|
+
"fuchsia-50": "oklch(97.7% 0.017 320.058)",
|
|
537
|
+
"fuchsia-500": "oklch(66.7% 0.295 322.15)",
|
|
538
|
+
"fuchsia-600": "oklch(59.1% 0.293 322.896)",
|
|
539
|
+
"fuchsia-700": "oklch(51.8% 0.253 323.949)",
|
|
540
|
+
"fuchsia-800": "oklch(45.2% 0.211 324.591)",
|
|
541
|
+
"fuchsia-900": "oklch(40.1% 0.17 325.612)",
|
|
542
|
+
"fuchsia-950": "oklch(29.3% 0.136 325.661)",
|
|
543
|
+
"gray-100": "oklch(96.7% 0.003 264.542)",
|
|
544
|
+
"gray-200": "oklch(92.8% 0.006 264.531)",
|
|
545
|
+
"gray-300": "oklch(87.2% 0.01 258.338)",
|
|
546
|
+
"gray-400": "oklch(70.7% 0.022 261.325)",
|
|
547
|
+
"gray-50": "oklch(98.5% 0.002 247.839)",
|
|
548
|
+
"gray-500": "oklch(55.1% 0.027 264.364)",
|
|
549
|
+
"gray-600": "oklch(44.6% 0.03 256.802)",
|
|
550
|
+
"gray-700": "oklch(37.3% 0.034 259.733)",
|
|
551
|
+
"gray-800": "oklch(27.8% 0.033 256.848)",
|
|
552
|
+
"gray-900": "oklch(21% 0.034 264.665)",
|
|
553
|
+
"gray-950": "oklch(13% 0.028 261.692)",
|
|
554
|
+
"green-100": "oklch(96.2% 0.044 156.743)",
|
|
555
|
+
"green-200": "oklch(92.5% 0.084 155.995)",
|
|
556
|
+
"green-300": "oklch(87.1% 0.15 154.449)",
|
|
557
|
+
"green-400": "oklch(79.2% 0.209 151.711)",
|
|
558
|
+
"green-50": "oklch(98.2% 0.018 155.826)",
|
|
559
|
+
"green-500": "oklch(72.3% 0.219 149.579)",
|
|
560
|
+
"green-600": "oklch(62.7% 0.194 149.214)",
|
|
561
|
+
"green-700": "oklch(52.7% 0.154 150.069)",
|
|
562
|
+
"green-800": "oklch(44.8% 0.119 151.328)",
|
|
563
|
+
"green-900": "oklch(39.3% 0.095 152.535)",
|
|
564
|
+
"green-950": "oklch(26.6% 0.065 152.934)",
|
|
565
|
+
"indigo-100": "oklch(93% 0.034 272.788)",
|
|
566
|
+
"indigo-200": "oklch(87% 0.065 274.039)",
|
|
567
|
+
"indigo-300": "oklch(78.5% 0.115 274.713)",
|
|
568
|
+
"indigo-400": "oklch(67.3% 0.182 276.935)",
|
|
569
|
+
"indigo-50": "oklch(96.2% 0.018 272.314)",
|
|
570
|
+
"indigo-500": "oklch(58.5% 0.233 277.117)",
|
|
571
|
+
"indigo-600": "oklch(51.1% 0.262 276.966)",
|
|
572
|
+
"indigo-700": "oklch(45.7% 0.24 277.023)",
|
|
573
|
+
"indigo-800": "oklch(39.8% 0.195 277.366)",
|
|
574
|
+
"indigo-900": "oklch(35.9% 0.144 278.697)",
|
|
575
|
+
"indigo-950": "oklch(25.7% 0.09 281.288)",
|
|
576
|
+
"lime-100": "oklch(96.7% 0.067 122.328)",
|
|
577
|
+
"lime-200": "oklch(93.8% 0.127 124.321)",
|
|
578
|
+
"lime-300": "oklch(89.7% 0.196 126.665)",
|
|
579
|
+
"lime-400": "oklch(84.1% 0.238 128.85)",
|
|
580
|
+
"lime-50": "oklch(98.6% 0.031 120.757)",
|
|
581
|
+
"lime-500": "oklch(76.8% 0.233 130.85)",
|
|
582
|
+
"lime-600": "oklch(64.8% 0.2 131.684)",
|
|
583
|
+
"lime-700": "oklch(53.2% 0.157 131.589)",
|
|
584
|
+
"lime-800": "oklch(45.3% 0.124 130.933)",
|
|
585
|
+
"lime-900": "oklch(40.5% 0.101 131.063)",
|
|
586
|
+
"lime-950": "oklch(27.4% 0.072 132.109)",
|
|
587
|
+
"neutral-100": "oklch(97% 0 0)",
|
|
588
|
+
"neutral-200": "oklch(92.2% 0 0)",
|
|
589
|
+
"neutral-300": "oklch(87% 0 0)",
|
|
590
|
+
"neutral-400": "oklch(70.8% 0 0)",
|
|
591
|
+
"neutral-50": "oklch(98.5% 0 0)",
|
|
592
|
+
"neutral-500": "oklch(55.6% 0 0)",
|
|
593
|
+
"neutral-600": "oklch(43.9% 0 0)",
|
|
594
|
+
"neutral-700": "oklch(37.1% 0 0)",
|
|
595
|
+
"neutral-800": "oklch(26.9% 0 0)",
|
|
596
|
+
"neutral-900": "oklch(20.5% 0 0)",
|
|
597
|
+
"neutral-950": "oklch(14.5% 0 0)",
|
|
598
|
+
"orange-100": "oklch(95.4% 0.038 75.164)",
|
|
599
|
+
"orange-200": "oklch(90.1% 0.076 70.697)",
|
|
600
|
+
"orange-300": "oklch(83.7% 0.128 66.29)",
|
|
601
|
+
"orange-400": "oklch(75% 0.183 55.934)",
|
|
602
|
+
"orange-50": "oklch(98% 0.016 73.684)",
|
|
603
|
+
"orange-500": "oklch(70.5% 0.213 47.604)",
|
|
604
|
+
"orange-600": "oklch(64.6% 0.222 41.116)",
|
|
605
|
+
"orange-700": "oklch(55.3% 0.195 38.402)",
|
|
606
|
+
"orange-800": "oklch(47% 0.157 37.304)",
|
|
607
|
+
"orange-900": "oklch(40.8% 0.123 38.172)",
|
|
608
|
+
"orange-950": "oklch(26.6% 0.079 36.259)",
|
|
609
|
+
"pink-100": "oklch(94.8% 0.028 342.258)",
|
|
610
|
+
"pink-200": "oklch(89.9% 0.061 343.231)",
|
|
611
|
+
"pink-300": "oklch(82.3% 0.12 346.018)",
|
|
612
|
+
"pink-400": "oklch(71.8% 0.202 349.761)",
|
|
613
|
+
"pink-50": "oklch(97.1% 0.014 343.198)",
|
|
614
|
+
"pink-500": "oklch(65.6% 0.241 354.308)",
|
|
615
|
+
"pink-600": "oklch(59.2% 0.249 0.584)",
|
|
616
|
+
"pink-700": "oklch(52.5% 0.223 3.958)",
|
|
617
|
+
"pink-800": "oklch(45.9% 0.187 3.815)",
|
|
618
|
+
"pink-900": "oklch(40.8% 0.153 2.432)",
|
|
619
|
+
"pink-950": "oklch(28.4% 0.109 3.907)",
|
|
620
|
+
"purple-100": "oklch(94.6% 0.033 307.174)",
|
|
621
|
+
"purple-200": "oklch(90.2% 0.063 306.703)",
|
|
622
|
+
"purple-300": "oklch(82.7% 0.119 306.383)",
|
|
623
|
+
"purple-400": "oklch(71.4% 0.203 305.504)",
|
|
624
|
+
"purple-50": "oklch(97.7% 0.014 308.299)",
|
|
625
|
+
"purple-500": "oklch(62.7% 0.265 303.9)",
|
|
626
|
+
"purple-600": "oklch(55.8% 0.288 302.321)",
|
|
627
|
+
"purple-700": "oklch(49.6% 0.265 301.924)",
|
|
628
|
+
"purple-800": "oklch(43.8% 0.218 303.724)",
|
|
629
|
+
"purple-900": "oklch(38.1% 0.176 304.987)",
|
|
630
|
+
"purple-950": "oklch(29.1% 0.149 302.717)",
|
|
631
|
+
"red-100": "oklch(93.6% 0.032 17.717)",
|
|
632
|
+
"red-200": "oklch(88.5% 0.062 18.334)",
|
|
633
|
+
"red-300": "oklch(80.8% 0.114 19.571)",
|
|
634
|
+
"red-400": "oklch(70.4% 0.191 22.216)",
|
|
635
|
+
"red-50": "oklch(97.1% 0.013 17.38)",
|
|
636
|
+
"red-500": "oklch(63.7% 0.237 25.331)",
|
|
637
|
+
"red-600": "oklch(57.7% 0.245 27.325)",
|
|
638
|
+
"red-700": "oklch(50.5% 0.213 27.518)",
|
|
639
|
+
"red-800": "oklch(44.4% 0.177 26.899)",
|
|
640
|
+
"red-900": "oklch(39.6% 0.141 25.723)",
|
|
641
|
+
"red-950": "oklch(25.8% 0.092 26.042)",
|
|
642
|
+
"rose-100": "oklch(94.1% 0.03 12.58)",
|
|
643
|
+
"rose-200": "oklch(89.2% 0.058 10.001)",
|
|
644
|
+
"rose-300": "oklch(81% 0.117 11.638)",
|
|
645
|
+
"rose-400": "oklch(71.2% 0.194 13.428)",
|
|
646
|
+
"rose-50": "oklch(96.9% 0.015 12.422)",
|
|
647
|
+
"rose-500": "oklch(64.5% 0.246 16.439)",
|
|
648
|
+
"rose-600": "oklch(58.6% 0.253 17.585)",
|
|
649
|
+
"rose-700": "oklch(51.4% 0.222 16.935)",
|
|
650
|
+
"rose-800": "oklch(45.5% 0.188 13.697)",
|
|
651
|
+
"rose-900": "oklch(41% 0.159 10.272)",
|
|
652
|
+
"rose-950": "oklch(27.1% 0.105 12.094)",
|
|
653
|
+
"sky-100": "oklch(95.1% 0.026 236.824)",
|
|
654
|
+
"sky-200": "oklch(90.1% 0.058 230.902)",
|
|
655
|
+
"sky-300": "oklch(82.8% 0.111 230.318)",
|
|
656
|
+
"sky-400": "oklch(74.6% 0.16 232.661)",
|
|
657
|
+
"sky-50": "oklch(97.7% 0.013 236.62)",
|
|
658
|
+
"sky-500": "oklch(68.5% 0.169 237.323)",
|
|
659
|
+
"sky-600": "oklch(58.8% 0.158 241.966)",
|
|
660
|
+
"sky-700": "oklch(50% 0.134 242.749)",
|
|
661
|
+
"sky-800": "oklch(44.3% 0.11 240.79)",
|
|
662
|
+
"sky-900": "oklch(39.1% 0.09 240.876)",
|
|
663
|
+
"sky-950": "oklch(29.3% 0.066 243.157)",
|
|
664
|
+
"slate-100": "oklch(96.8% 0.007 247.896)",
|
|
665
|
+
"slate-200": "oklch(92.9% 0.013 255.508)",
|
|
666
|
+
"slate-300": "oklch(86.9% 0.022 252.894)",
|
|
667
|
+
"slate-400": "oklch(70.4% 0.04 256.788)",
|
|
668
|
+
"slate-50": "oklch(98.4% 0.003 247.858)",
|
|
669
|
+
"slate-500": "oklch(55.4% 0.046 257.417)",
|
|
670
|
+
"slate-600": "oklch(44.6% 0.043 257.281)",
|
|
671
|
+
"slate-700": "oklch(37.2% 0.044 257.287)",
|
|
672
|
+
"slate-800": "oklch(27.9% 0.041 260.031)",
|
|
673
|
+
"slate-900": "oklch(20.8% 0.042 265.755)",
|
|
674
|
+
"slate-950": "oklch(12.9% 0.042 264.695)",
|
|
675
|
+
"stone-100": "oklch(97% 0.001 106.424)",
|
|
676
|
+
"stone-200": "oklch(92.3% 0.003 48.717)",
|
|
677
|
+
"stone-300": "oklch(86.9% 0.005 56.366)",
|
|
678
|
+
"stone-400": "oklch(70.9% 0.01 56.259)",
|
|
679
|
+
"stone-50": "oklch(98.5% 0.001 106.423)",
|
|
680
|
+
"stone-500": "oklch(55.3% 0.013 58.071)",
|
|
681
|
+
"stone-600": "oklch(44.4% 0.011 73.639)",
|
|
682
|
+
"stone-700": "oklch(37.4% 0.01 67.558)",
|
|
683
|
+
"stone-800": "oklch(26.8% 0.007 34.298)",
|
|
684
|
+
"stone-900": "oklch(21.6% 0.006 56.043)",
|
|
685
|
+
"stone-950": "oklch(14.7% 0.004 49.25)",
|
|
686
|
+
"teal-100": "oklch(95.3% 0.051 180.801)",
|
|
687
|
+
"teal-200": "oklch(91% 0.096 180.426)",
|
|
688
|
+
"teal-300": "oklch(85.5% 0.138 181.071)",
|
|
689
|
+
"teal-400": "oklch(77.7% 0.152 181.912)",
|
|
690
|
+
"teal-50": "oklch(98.4% 0.014 180.72)",
|
|
691
|
+
"teal-500": "oklch(70.4% 0.14 182.503)",
|
|
692
|
+
"teal-600": "oklch(60% 0.118 184.704)",
|
|
693
|
+
"teal-700": "oklch(51.1% 0.096 186.391)",
|
|
694
|
+
"teal-800": "oklch(43.7% 0.078 188.216)",
|
|
695
|
+
"teal-900": "oklch(38.6% 0.063 188.416)",
|
|
696
|
+
"teal-950": "oklch(27.7% 0.046 192.524)",
|
|
697
|
+
"violet-100": "oklch(94.3% 0.029 294.588)",
|
|
698
|
+
"violet-200": "oklch(89.4% 0.057 293.283)",
|
|
699
|
+
"violet-300": "oklch(81.1% 0.111 293.571)",
|
|
700
|
+
"violet-400": "oklch(70.2% 0.183 293.541)",
|
|
701
|
+
"violet-50": "oklch(96.9% 0.016 293.756)",
|
|
702
|
+
"violet-500": "oklch(60.6% 0.25 292.717)",
|
|
703
|
+
"violet-600": "oklch(54.1% 0.281 293.009)",
|
|
704
|
+
"violet-700": "oklch(49.1% 0.27 292.581)",
|
|
705
|
+
"violet-800": "oklch(43.2% 0.232 292.759)",
|
|
706
|
+
"violet-900": "oklch(38% 0.189 293.745)",
|
|
707
|
+
"violet-950": "oklch(28.3% 0.141 291.089)",
|
|
708
|
+
"yellow-100": "oklch(97.3% 0.071 103.193)",
|
|
709
|
+
"yellow-200": "oklch(94.5% 0.129 101.54)",
|
|
710
|
+
"yellow-300": "oklch(90.5% 0.182 98.111)",
|
|
711
|
+
"yellow-400": "oklch(85.2% 0.199 91.936)",
|
|
712
|
+
"yellow-50": "oklch(98.7% 0.026 102.212)",
|
|
713
|
+
"yellow-500": "oklch(79.5% 0.184 86.047)",
|
|
714
|
+
"yellow-600": "oklch(68.1% 0.162 75.834)",
|
|
715
|
+
"yellow-700": "oklch(55.4% 0.135 66.442)",
|
|
716
|
+
"yellow-800": "oklch(47.6% 0.114 61.907)",
|
|
717
|
+
"yellow-900": "oklch(42.1% 0.095 57.708)",
|
|
718
|
+
"yellow-950": "oklch(28.6% 0.066 53.813)",
|
|
719
|
+
"zinc-100": "oklch(96.7% 0.001 286.375)",
|
|
720
|
+
"zinc-200": "oklch(92% 0.004 286.32)",
|
|
721
|
+
"zinc-300": "oklch(87.1% 0.006 286.286)",
|
|
722
|
+
"zinc-400": "oklch(70.5% 0.015 286.067)",
|
|
723
|
+
"zinc-50": "oklch(98.5% 0 0)",
|
|
724
|
+
"zinc-500": "oklch(55.2% 0.016 285.938)",
|
|
725
|
+
"zinc-600": "oklch(44.2% 0.017 285.786)",
|
|
726
|
+
"zinc-700": "oklch(37% 0.013 285.805)",
|
|
727
|
+
"zinc-800": "oklch(27.4% 0.006 286.033)",
|
|
728
|
+
"zinc-900": "oklch(21% 0.006 285.885)",
|
|
729
|
+
"zinc-950": "oklch(14.1% 0.005 285.823)"
|
|
730
|
+
};
|
|
731
|
+
//#endregion
|
|
732
|
+
//#region src/escape.ts
|
|
733
|
+
function escapeArbitraryValue(value) {
|
|
734
|
+
return value.trim().replace(/\\/g, "\\\\").replace(/_/g, "\\_").replace(/\s+/g, "_").replace(/]/g, "\\]");
|
|
735
|
+
}
|
|
736
|
+
function arbitraryValue(prefix, value) {
|
|
737
|
+
return `${prefix}-[${escapeArbitraryValue(value)}]`;
|
|
738
|
+
}
|
|
739
|
+
function arbitraryProperty(property, value) {
|
|
740
|
+
return `[${property}:${escapeArbitraryValue(value)}]`;
|
|
741
|
+
}
|
|
742
|
+
//#endregion
|
|
743
|
+
//#region src/convert/data.ts
|
|
744
|
+
const exactUtilities = {
|
|
745
|
+
display: {
|
|
746
|
+
block: "block",
|
|
747
|
+
"inline-block": "inline-block",
|
|
748
|
+
inline: "inline",
|
|
749
|
+
flex: "flex",
|
|
750
|
+
"inline-flex": "inline-flex",
|
|
751
|
+
grid: "grid",
|
|
752
|
+
"inline-grid": "inline-grid",
|
|
753
|
+
contents: "contents",
|
|
754
|
+
"flow-root": "flow-root",
|
|
755
|
+
"inline-table": "inline-table",
|
|
756
|
+
"list-item": "list-item",
|
|
757
|
+
table: "table",
|
|
758
|
+
"table-caption": "table-caption",
|
|
759
|
+
"table-cell": "table-cell",
|
|
760
|
+
"table-column": "table-column",
|
|
761
|
+
"table-column-group": "table-column-group",
|
|
762
|
+
"table-footer-group": "table-footer-group",
|
|
763
|
+
"table-header-group": "table-header-group",
|
|
764
|
+
"table-row": "table-row",
|
|
765
|
+
"table-row-group": "table-row-group",
|
|
766
|
+
none: "hidden"
|
|
767
|
+
},
|
|
768
|
+
position: {
|
|
769
|
+
static: "static",
|
|
770
|
+
fixed: "fixed",
|
|
771
|
+
absolute: "absolute",
|
|
772
|
+
relative: "relative",
|
|
773
|
+
sticky: "sticky"
|
|
774
|
+
},
|
|
775
|
+
visibility: {
|
|
776
|
+
visible: "visible",
|
|
777
|
+
hidden: "invisible",
|
|
778
|
+
collapse: "collapse"
|
|
779
|
+
},
|
|
780
|
+
fill: {
|
|
781
|
+
none: "fill-none",
|
|
782
|
+
currentcolor: "fill-current",
|
|
783
|
+
currentColor: "fill-current",
|
|
784
|
+
inherit: "fill-inherit",
|
|
785
|
+
transparent: "fill-transparent"
|
|
786
|
+
},
|
|
787
|
+
stroke: {
|
|
788
|
+
none: "stroke-none",
|
|
789
|
+
currentcolor: "stroke-current",
|
|
790
|
+
currentColor: "stroke-current",
|
|
791
|
+
inherit: "stroke-inherit",
|
|
792
|
+
transparent: "stroke-transparent"
|
|
793
|
+
},
|
|
794
|
+
"justify-content": {
|
|
795
|
+
normal: "justify-normal",
|
|
796
|
+
"flex-start": "justify-start",
|
|
797
|
+
center: "justify-center",
|
|
798
|
+
"flex-end": "justify-end",
|
|
799
|
+
"space-between": "justify-between",
|
|
800
|
+
"space-around": "justify-around",
|
|
801
|
+
"space-evenly": "justify-evenly",
|
|
802
|
+
stretch: "justify-stretch"
|
|
803
|
+
},
|
|
804
|
+
"align-items": {
|
|
805
|
+
"flex-start": "items-start",
|
|
806
|
+
center: "items-center",
|
|
807
|
+
"flex-end": "items-end",
|
|
808
|
+
stretch: "items-stretch",
|
|
809
|
+
baseline: "items-baseline",
|
|
810
|
+
"last baseline": "items-baseline-last"
|
|
811
|
+
},
|
|
812
|
+
"flex-direction": {
|
|
813
|
+
row: "flex-row",
|
|
814
|
+
"row-reverse": "flex-row-reverse",
|
|
815
|
+
column: "flex-col",
|
|
816
|
+
"column-reverse": "flex-col-reverse"
|
|
817
|
+
},
|
|
818
|
+
"flex-wrap": {
|
|
819
|
+
wrap: "flex-wrap",
|
|
820
|
+
"wrap-reverse": "flex-wrap-reverse",
|
|
821
|
+
nowrap: "flex-nowrap"
|
|
822
|
+
},
|
|
823
|
+
flex: {
|
|
824
|
+
none: "flex-none",
|
|
825
|
+
auto: "flex-auto",
|
|
826
|
+
initial: "flex-initial",
|
|
827
|
+
"1 1 0%": "flex-1"
|
|
828
|
+
},
|
|
829
|
+
"align-content": {
|
|
830
|
+
normal: "content-normal",
|
|
831
|
+
center: "content-center",
|
|
832
|
+
"flex-start": "content-start",
|
|
833
|
+
"flex-end": "content-end",
|
|
834
|
+
"space-between": "content-between",
|
|
835
|
+
"space-around": "content-around",
|
|
836
|
+
"space-evenly": "content-evenly",
|
|
837
|
+
stretch: "content-stretch",
|
|
838
|
+
baseline: "content-baseline"
|
|
839
|
+
},
|
|
840
|
+
"align-self": {
|
|
841
|
+
auto: "self-auto",
|
|
842
|
+
"flex-start": "self-start",
|
|
843
|
+
"flex-end": "self-end",
|
|
844
|
+
center: "self-center",
|
|
845
|
+
stretch: "self-stretch",
|
|
846
|
+
baseline: "self-baseline",
|
|
847
|
+
"last baseline": "self-baseline-last"
|
|
848
|
+
},
|
|
849
|
+
"place-items": {
|
|
850
|
+
start: "place-items-start",
|
|
851
|
+
end: "place-items-end",
|
|
852
|
+
center: "place-items-center",
|
|
853
|
+
baseline: "place-items-baseline",
|
|
854
|
+
stretch: "place-items-stretch"
|
|
855
|
+
},
|
|
856
|
+
"place-content": {
|
|
857
|
+
center: "place-content-center",
|
|
858
|
+
start: "place-content-start",
|
|
859
|
+
end: "place-content-end",
|
|
860
|
+
"space-between": "place-content-between",
|
|
861
|
+
"space-around": "place-content-around",
|
|
862
|
+
"space-evenly": "place-content-evenly",
|
|
863
|
+
stretch: "place-content-stretch",
|
|
864
|
+
baseline: "place-content-baseline"
|
|
865
|
+
},
|
|
866
|
+
"place-self": {
|
|
867
|
+
auto: "place-self-auto",
|
|
868
|
+
start: "place-self-start",
|
|
869
|
+
end: "place-self-end",
|
|
870
|
+
center: "place-self-center",
|
|
871
|
+
stretch: "place-self-stretch"
|
|
872
|
+
},
|
|
873
|
+
"justify-items": {
|
|
874
|
+
start: "justify-items-start",
|
|
875
|
+
end: "justify-items-end",
|
|
876
|
+
center: "justify-items-center",
|
|
877
|
+
stretch: "justify-items-stretch"
|
|
878
|
+
},
|
|
879
|
+
"justify-self": {
|
|
880
|
+
auto: "justify-self-auto",
|
|
881
|
+
start: "justify-self-start",
|
|
882
|
+
end: "justify-self-end",
|
|
883
|
+
center: "justify-self-center",
|
|
884
|
+
stretch: "justify-self-stretch"
|
|
885
|
+
},
|
|
886
|
+
"grid-auto-flow": {
|
|
887
|
+
row: "grid-flow-row",
|
|
888
|
+
column: "grid-flow-col",
|
|
889
|
+
dense: "grid-flow-dense",
|
|
890
|
+
"row dense": "grid-flow-row-dense",
|
|
891
|
+
"column dense": "grid-flow-col-dense"
|
|
892
|
+
},
|
|
893
|
+
"grid-template-columns": {
|
|
894
|
+
none: "grid-cols-none",
|
|
895
|
+
subgrid: "grid-cols-subgrid"
|
|
896
|
+
},
|
|
897
|
+
"grid-template-rows": {
|
|
898
|
+
none: "grid-rows-none",
|
|
899
|
+
subgrid: "grid-rows-subgrid"
|
|
900
|
+
},
|
|
901
|
+
"grid-auto-columns": {
|
|
902
|
+
auto: "auto-cols-auto",
|
|
903
|
+
min: "auto-cols-min",
|
|
904
|
+
max: "auto-cols-max",
|
|
905
|
+
fr: "auto-cols-fr"
|
|
906
|
+
},
|
|
907
|
+
"grid-auto-rows": {
|
|
908
|
+
auto: "auto-rows-auto",
|
|
909
|
+
min: "auto-rows-min",
|
|
910
|
+
max: "auto-rows-max",
|
|
911
|
+
fr: "auto-rows-fr"
|
|
912
|
+
},
|
|
913
|
+
"text-align": {
|
|
914
|
+
left: "text-left",
|
|
915
|
+
center: "text-center",
|
|
916
|
+
right: "text-right",
|
|
917
|
+
justify: "text-justify",
|
|
918
|
+
start: "text-start",
|
|
919
|
+
end: "text-end"
|
|
920
|
+
},
|
|
921
|
+
"text-transform": {
|
|
922
|
+
uppercase: "uppercase",
|
|
923
|
+
lowercase: "lowercase",
|
|
924
|
+
capitalize: "capitalize",
|
|
925
|
+
none: "normal-case"
|
|
926
|
+
},
|
|
927
|
+
"font-style": {
|
|
928
|
+
italic: "italic",
|
|
929
|
+
normal: "not-italic"
|
|
930
|
+
},
|
|
931
|
+
"font-family": {
|
|
932
|
+
sans: "font-sans",
|
|
933
|
+
serif: "font-serif",
|
|
934
|
+
monospace: "font-mono",
|
|
935
|
+
"ui-sans-serif, system-ui, sans-serif": "font-sans",
|
|
936
|
+
"ui-serif, georgia, cambria, \"times new roman\", times, serif": "font-serif",
|
|
937
|
+
"ui-monospace, sfmono-regular, menlo, monaco, consolas, \"liberation mono\", \"courier new\", monospace": "font-mono"
|
|
938
|
+
},
|
|
939
|
+
"font-variant-numeric": {
|
|
940
|
+
normal: "normal-nums",
|
|
941
|
+
ordinal: "ordinal",
|
|
942
|
+
"slashed-zero": "slashed-zero",
|
|
943
|
+
"lining-nums": "lining-nums",
|
|
944
|
+
"oldstyle-nums": "oldstyle-nums",
|
|
945
|
+
"proportional-nums": "proportional-nums",
|
|
946
|
+
"tabular-nums": "tabular-nums",
|
|
947
|
+
"diagonal-fractions": "diagonal-fractions",
|
|
948
|
+
"stacked-fractions": "stacked-fractions"
|
|
949
|
+
},
|
|
950
|
+
"-webkit-font-smoothing": {
|
|
951
|
+
antialiased: "antialiased",
|
|
952
|
+
auto: "subpixel-antialiased"
|
|
953
|
+
},
|
|
954
|
+
"-moz-osx-font-smoothing": {
|
|
955
|
+
grayscale: "antialiased",
|
|
956
|
+
auto: "subpixel-antialiased"
|
|
957
|
+
},
|
|
958
|
+
"font-stretch": {
|
|
959
|
+
"ultra-condensed": "font-stretch-ultra-condensed",
|
|
960
|
+
"extra-condensed": "font-stretch-extra-condensed",
|
|
961
|
+
condensed: "font-stretch-condensed",
|
|
962
|
+
"semi-condensed": "font-stretch-semi-condensed",
|
|
963
|
+
normal: "font-stretch-normal",
|
|
964
|
+
"semi-expanded": "font-stretch-semi-expanded",
|
|
965
|
+
expanded: "font-stretch-expanded",
|
|
966
|
+
"extra-expanded": "font-stretch-extra-expanded",
|
|
967
|
+
"ultra-expanded": "font-stretch-ultra-expanded"
|
|
968
|
+
},
|
|
969
|
+
"text-decoration-line": {
|
|
970
|
+
underline: "underline",
|
|
971
|
+
overline: "overline",
|
|
972
|
+
"line-through": "line-through",
|
|
973
|
+
none: "no-underline"
|
|
974
|
+
},
|
|
975
|
+
"border-style": {
|
|
976
|
+
solid: "border-solid",
|
|
977
|
+
dashed: "border-dashed",
|
|
978
|
+
dotted: "border-dotted",
|
|
979
|
+
double: "border-double",
|
|
980
|
+
hidden: "border-hidden",
|
|
981
|
+
none: "border-none"
|
|
982
|
+
},
|
|
983
|
+
"border-top-style": {
|
|
984
|
+
solid: "border-t-solid",
|
|
985
|
+
dashed: "border-t-dashed",
|
|
986
|
+
dotted: "border-t-dotted",
|
|
987
|
+
double: "border-t-double",
|
|
988
|
+
hidden: "border-t-hidden",
|
|
989
|
+
none: "border-t-none"
|
|
990
|
+
},
|
|
991
|
+
"border-right-style": {
|
|
992
|
+
solid: "border-r-solid",
|
|
993
|
+
dashed: "border-r-dashed",
|
|
994
|
+
dotted: "border-r-dotted",
|
|
995
|
+
double: "border-r-double",
|
|
996
|
+
hidden: "border-r-hidden",
|
|
997
|
+
none: "border-r-none"
|
|
998
|
+
},
|
|
999
|
+
"border-bottom-style": {
|
|
1000
|
+
solid: "border-b-solid",
|
|
1001
|
+
dashed: "border-b-dashed",
|
|
1002
|
+
dotted: "border-b-dotted",
|
|
1003
|
+
double: "border-b-double",
|
|
1004
|
+
hidden: "border-b-hidden",
|
|
1005
|
+
none: "border-b-none"
|
|
1006
|
+
},
|
|
1007
|
+
"border-left-style": {
|
|
1008
|
+
solid: "border-l-solid",
|
|
1009
|
+
dashed: "border-l-dashed",
|
|
1010
|
+
dotted: "border-l-dotted",
|
|
1011
|
+
double: "border-l-double",
|
|
1012
|
+
hidden: "border-l-hidden",
|
|
1013
|
+
none: "border-l-none"
|
|
1014
|
+
},
|
|
1015
|
+
"border-inline-start-style": {
|
|
1016
|
+
solid: "border-s-solid",
|
|
1017
|
+
dashed: "border-s-dashed",
|
|
1018
|
+
dotted: "border-s-dotted",
|
|
1019
|
+
double: "border-s-double",
|
|
1020
|
+
hidden: "border-s-hidden",
|
|
1021
|
+
none: "border-s-none"
|
|
1022
|
+
},
|
|
1023
|
+
"border-inline-end-style": {
|
|
1024
|
+
solid: "border-e-solid",
|
|
1025
|
+
dashed: "border-e-dashed",
|
|
1026
|
+
dotted: "border-e-dotted",
|
|
1027
|
+
double: "border-e-double",
|
|
1028
|
+
hidden: "border-e-hidden",
|
|
1029
|
+
none: "border-e-none"
|
|
1030
|
+
},
|
|
1031
|
+
"border-inline-style": {
|
|
1032
|
+
solid: "border-x-solid",
|
|
1033
|
+
dashed: "border-x-dashed",
|
|
1034
|
+
dotted: "border-x-dotted",
|
|
1035
|
+
double: "border-x-double",
|
|
1036
|
+
hidden: "border-x-hidden",
|
|
1037
|
+
none: "border-x-none"
|
|
1038
|
+
},
|
|
1039
|
+
"border-block-style": {
|
|
1040
|
+
solid: "border-y-solid",
|
|
1041
|
+
dashed: "border-y-dashed",
|
|
1042
|
+
dotted: "border-y-dotted",
|
|
1043
|
+
double: "border-y-double",
|
|
1044
|
+
hidden: "border-y-hidden",
|
|
1045
|
+
none: "border-y-none"
|
|
1046
|
+
},
|
|
1047
|
+
"outline-style": {
|
|
1048
|
+
solid: "outline-solid",
|
|
1049
|
+
dashed: "outline-dashed",
|
|
1050
|
+
dotted: "outline-dotted",
|
|
1051
|
+
double: "outline-double",
|
|
1052
|
+
none: "outline-none"
|
|
1053
|
+
},
|
|
1054
|
+
"object-fit": {
|
|
1055
|
+
contain: "object-contain",
|
|
1056
|
+
cover: "object-cover",
|
|
1057
|
+
fill: "object-fill",
|
|
1058
|
+
none: "object-none",
|
|
1059
|
+
"scale-down": "object-scale-down"
|
|
1060
|
+
},
|
|
1061
|
+
"object-position": {
|
|
1062
|
+
bottom: "object-bottom",
|
|
1063
|
+
center: "object-center",
|
|
1064
|
+
"center center": "object-center",
|
|
1065
|
+
left: "object-left",
|
|
1066
|
+
"left center": "object-left",
|
|
1067
|
+
"left bottom": "object-left-bottom",
|
|
1068
|
+
"left top": "object-left-top",
|
|
1069
|
+
right: "object-right",
|
|
1070
|
+
"right center": "object-right",
|
|
1071
|
+
"right bottom": "object-right-bottom",
|
|
1072
|
+
"right top": "object-right-top",
|
|
1073
|
+
top: "object-top",
|
|
1074
|
+
"center top": "object-top",
|
|
1075
|
+
"center bottom": "object-bottom"
|
|
1076
|
+
},
|
|
1077
|
+
"background-repeat": {
|
|
1078
|
+
repeat: "bg-repeat",
|
|
1079
|
+
"no-repeat": "bg-no-repeat",
|
|
1080
|
+
"repeat-x": "bg-repeat-x",
|
|
1081
|
+
"repeat-y": "bg-repeat-y",
|
|
1082
|
+
round: "bg-repeat-round",
|
|
1083
|
+
space: "bg-repeat-space"
|
|
1084
|
+
},
|
|
1085
|
+
"background-attachment": {
|
|
1086
|
+
fixed: "bg-fixed",
|
|
1087
|
+
local: "bg-local",
|
|
1088
|
+
scroll: "bg-scroll"
|
|
1089
|
+
},
|
|
1090
|
+
"background-clip": {
|
|
1091
|
+
"border-box": "bg-clip-border",
|
|
1092
|
+
"padding-box": "bg-clip-padding",
|
|
1093
|
+
"content-box": "bg-clip-content",
|
|
1094
|
+
text: "bg-clip-text"
|
|
1095
|
+
},
|
|
1096
|
+
"background-origin": {
|
|
1097
|
+
"border-box": "bg-origin-border",
|
|
1098
|
+
"padding-box": "bg-origin-padding",
|
|
1099
|
+
"content-box": "bg-origin-content"
|
|
1100
|
+
},
|
|
1101
|
+
"mask-image": { none: "mask-none" },
|
|
1102
|
+
"mask-mode": {
|
|
1103
|
+
alpha: "mask-alpha",
|
|
1104
|
+
luminance: "mask-luminance"
|
|
1105
|
+
},
|
|
1106
|
+
"mask-size": {
|
|
1107
|
+
auto: "mask-auto",
|
|
1108
|
+
contain: "mask-contain",
|
|
1109
|
+
cover: "mask-cover"
|
|
1110
|
+
},
|
|
1111
|
+
"mask-repeat": {
|
|
1112
|
+
repeat: "mask-repeat",
|
|
1113
|
+
"no-repeat": "mask-no-repeat"
|
|
1114
|
+
},
|
|
1115
|
+
"mask-origin": {
|
|
1116
|
+
"border-box": "mask-origin-border",
|
|
1117
|
+
"padding-box": "mask-origin-padding",
|
|
1118
|
+
"content-box": "mask-origin-content",
|
|
1119
|
+
"fill-box": "mask-origin-fill",
|
|
1120
|
+
"stroke-box": "mask-origin-stroke",
|
|
1121
|
+
"view-box": "mask-origin-view"
|
|
1122
|
+
},
|
|
1123
|
+
"mask-clip": {
|
|
1124
|
+
"border-box": "mask-clip-border",
|
|
1125
|
+
"padding-box": "mask-clip-padding",
|
|
1126
|
+
"content-box": "mask-clip-content",
|
|
1127
|
+
"fill-box": "mask-clip-fill",
|
|
1128
|
+
"stroke-box": "mask-clip-stroke",
|
|
1129
|
+
"view-box": "mask-clip-view",
|
|
1130
|
+
"no-clip": "mask-no-clip"
|
|
1131
|
+
},
|
|
1132
|
+
"clip-path": { none: "not-sr-only" },
|
|
1133
|
+
"box-decoration-break": {
|
|
1134
|
+
slice: "box-decoration-slice",
|
|
1135
|
+
clone: "box-decoration-clone"
|
|
1136
|
+
},
|
|
1137
|
+
"-webkit-box-decoration-break": {
|
|
1138
|
+
slice: "box-decoration-slice",
|
|
1139
|
+
clone: "box-decoration-clone"
|
|
1140
|
+
},
|
|
1141
|
+
"background-size": {
|
|
1142
|
+
auto: "bg-auto",
|
|
1143
|
+
cover: "bg-cover",
|
|
1144
|
+
contain: "bg-contain"
|
|
1145
|
+
},
|
|
1146
|
+
"background-position": {
|
|
1147
|
+
bottom: "bg-bottom",
|
|
1148
|
+
center: "bg-center",
|
|
1149
|
+
"center center": "bg-center",
|
|
1150
|
+
left: "bg-left",
|
|
1151
|
+
"left center": "bg-left",
|
|
1152
|
+
"left bottom": "bg-left-bottom",
|
|
1153
|
+
"left top": "bg-left-top",
|
|
1154
|
+
right: "bg-right",
|
|
1155
|
+
"right center": "bg-right",
|
|
1156
|
+
"right bottom": "bg-right-bottom",
|
|
1157
|
+
"right top": "bg-right-top",
|
|
1158
|
+
top: "bg-top",
|
|
1159
|
+
"center top": "bg-top",
|
|
1160
|
+
"center bottom": "bg-bottom"
|
|
1161
|
+
},
|
|
1162
|
+
"vertical-align": {
|
|
1163
|
+
baseline: "align-baseline",
|
|
1164
|
+
top: "align-top",
|
|
1165
|
+
middle: "align-middle",
|
|
1166
|
+
bottom: "align-bottom",
|
|
1167
|
+
"text-top": "align-text-top",
|
|
1168
|
+
"text-bottom": "align-text-bottom",
|
|
1169
|
+
sub: "align-sub",
|
|
1170
|
+
super: "align-super"
|
|
1171
|
+
},
|
|
1172
|
+
"white-space": {
|
|
1173
|
+
normal: "whitespace-normal",
|
|
1174
|
+
nowrap: "whitespace-nowrap",
|
|
1175
|
+
pre: "whitespace-pre",
|
|
1176
|
+
"pre-line": "whitespace-pre-line",
|
|
1177
|
+
"pre-wrap": "whitespace-pre-wrap",
|
|
1178
|
+
"break-spaces": "whitespace-break-spaces"
|
|
1179
|
+
},
|
|
1180
|
+
"word-break": {
|
|
1181
|
+
normal: "break-normal",
|
|
1182
|
+
"break-all": "break-all",
|
|
1183
|
+
"keep-all": "break-keep"
|
|
1184
|
+
},
|
|
1185
|
+
"overflow-wrap": {
|
|
1186
|
+
"break-word": "break-words",
|
|
1187
|
+
anywhere: "wrap-anywhere",
|
|
1188
|
+
normal: "wrap-normal"
|
|
1189
|
+
},
|
|
1190
|
+
"text-overflow": {
|
|
1191
|
+
ellipsis: "text-ellipsis",
|
|
1192
|
+
clip: "text-clip"
|
|
1193
|
+
},
|
|
1194
|
+
hyphens: {
|
|
1195
|
+
none: "hyphens-none",
|
|
1196
|
+
manual: "hyphens-manual",
|
|
1197
|
+
auto: "hyphens-auto"
|
|
1198
|
+
},
|
|
1199
|
+
"list-style-position": {
|
|
1200
|
+
inside: "list-inside",
|
|
1201
|
+
outside: "list-outside"
|
|
1202
|
+
},
|
|
1203
|
+
"list-style-type": {
|
|
1204
|
+
disc: "list-disc",
|
|
1205
|
+
decimal: "list-decimal",
|
|
1206
|
+
none: "list-none"
|
|
1207
|
+
},
|
|
1208
|
+
"table-layout": {
|
|
1209
|
+
auto: "table-auto",
|
|
1210
|
+
fixed: "table-fixed"
|
|
1211
|
+
},
|
|
1212
|
+
"caption-side": {
|
|
1213
|
+
top: "caption-top",
|
|
1214
|
+
bottom: "caption-bottom"
|
|
1215
|
+
},
|
|
1216
|
+
"border-collapse": {
|
|
1217
|
+
collapse: "border-collapse",
|
|
1218
|
+
separate: "border-separate"
|
|
1219
|
+
},
|
|
1220
|
+
"box-sizing": {
|
|
1221
|
+
"border-box": "box-border",
|
|
1222
|
+
"content-box": "box-content"
|
|
1223
|
+
},
|
|
1224
|
+
"aspect-ratio": {
|
|
1225
|
+
"1 / 1": "aspect-square",
|
|
1226
|
+
"16 / 9": "aspect-video",
|
|
1227
|
+
auto: "aspect-auto"
|
|
1228
|
+
},
|
|
1229
|
+
"field-sizing": {
|
|
1230
|
+
fixed: "field-sizing-fixed",
|
|
1231
|
+
content: "field-sizing-content"
|
|
1232
|
+
},
|
|
1233
|
+
"text-wrap": {
|
|
1234
|
+
wrap: "text-wrap",
|
|
1235
|
+
nowrap: "text-nowrap",
|
|
1236
|
+
balance: "text-balance",
|
|
1237
|
+
pretty: "text-pretty"
|
|
1238
|
+
},
|
|
1239
|
+
isolation: {
|
|
1240
|
+
isolate: "isolate",
|
|
1241
|
+
auto: "isolation-auto"
|
|
1242
|
+
},
|
|
1243
|
+
float: {
|
|
1244
|
+
right: "float-right",
|
|
1245
|
+
left: "float-left",
|
|
1246
|
+
none: "float-none"
|
|
1247
|
+
},
|
|
1248
|
+
clear: {
|
|
1249
|
+
left: "clear-left",
|
|
1250
|
+
right: "clear-right",
|
|
1251
|
+
both: "clear-both",
|
|
1252
|
+
none: "clear-none"
|
|
1253
|
+
},
|
|
1254
|
+
appearance: {
|
|
1255
|
+
none: "appearance-none",
|
|
1256
|
+
auto: "appearance-auto"
|
|
1257
|
+
},
|
|
1258
|
+
"color-scheme": {
|
|
1259
|
+
normal: "scheme-normal",
|
|
1260
|
+
dark: "scheme-dark",
|
|
1261
|
+
light: "scheme-light",
|
|
1262
|
+
"light dark": "scheme-light-dark",
|
|
1263
|
+
"only dark": "scheme-only-dark",
|
|
1264
|
+
"only light": "scheme-only-light"
|
|
1265
|
+
},
|
|
1266
|
+
"mix-blend-mode": {
|
|
1267
|
+
normal: "mix-blend-normal",
|
|
1268
|
+
multiply: "mix-blend-multiply",
|
|
1269
|
+
screen: "mix-blend-screen",
|
|
1270
|
+
overlay: "mix-blend-overlay",
|
|
1271
|
+
darken: "mix-blend-darken",
|
|
1272
|
+
lighten: "mix-blend-lighten",
|
|
1273
|
+
"color-dodge": "mix-blend-color-dodge",
|
|
1274
|
+
"color-burn": "mix-blend-color-burn",
|
|
1275
|
+
"hard-light": "mix-blend-hard-light",
|
|
1276
|
+
"soft-light": "mix-blend-soft-light",
|
|
1277
|
+
difference: "mix-blend-difference",
|
|
1278
|
+
exclusion: "mix-blend-exclusion",
|
|
1279
|
+
hue: "mix-blend-hue",
|
|
1280
|
+
saturation: "mix-blend-saturation",
|
|
1281
|
+
color: "mix-blend-color",
|
|
1282
|
+
luminosity: "mix-blend-luminosity",
|
|
1283
|
+
"plus-darker": "mix-blend-plus-darker",
|
|
1284
|
+
"plus-lighter": "mix-blend-plus-lighter"
|
|
1285
|
+
},
|
|
1286
|
+
"background-blend-mode": {
|
|
1287
|
+
normal: "bg-blend-normal",
|
|
1288
|
+
multiply: "bg-blend-multiply",
|
|
1289
|
+
screen: "bg-blend-screen",
|
|
1290
|
+
overlay: "bg-blend-overlay",
|
|
1291
|
+
darken: "bg-blend-darken",
|
|
1292
|
+
lighten: "bg-blend-lighten",
|
|
1293
|
+
"color-dodge": "bg-blend-color-dodge",
|
|
1294
|
+
"color-burn": "bg-blend-color-burn",
|
|
1295
|
+
"hard-light": "bg-blend-hard-light",
|
|
1296
|
+
"soft-light": "bg-blend-soft-light",
|
|
1297
|
+
difference: "bg-blend-difference",
|
|
1298
|
+
exclusion: "bg-blend-exclusion",
|
|
1299
|
+
hue: "bg-blend-hue",
|
|
1300
|
+
saturation: "bg-blend-saturation",
|
|
1301
|
+
color: "bg-blend-color",
|
|
1302
|
+
luminosity: "bg-blend-luminosity"
|
|
1303
|
+
},
|
|
1304
|
+
"overscroll-behavior": {
|
|
1305
|
+
auto: "overscroll-auto",
|
|
1306
|
+
contain: "overscroll-contain",
|
|
1307
|
+
none: "overscroll-none"
|
|
1308
|
+
},
|
|
1309
|
+
"overscroll-behavior-x": {
|
|
1310
|
+
auto: "overscroll-x-auto",
|
|
1311
|
+
contain: "overscroll-x-contain",
|
|
1312
|
+
none: "overscroll-x-none"
|
|
1313
|
+
},
|
|
1314
|
+
"overscroll-behavior-y": {
|
|
1315
|
+
auto: "overscroll-y-auto",
|
|
1316
|
+
contain: "overscroll-y-contain",
|
|
1317
|
+
none: "overscroll-y-none"
|
|
1318
|
+
},
|
|
1319
|
+
"scroll-behavior": {
|
|
1320
|
+
auto: "scroll-auto",
|
|
1321
|
+
smooth: "scroll-smooth"
|
|
1322
|
+
},
|
|
1323
|
+
"touch-action": {
|
|
1324
|
+
auto: "touch-auto",
|
|
1325
|
+
none: "touch-none",
|
|
1326
|
+
"pan-x": "touch-pan-x",
|
|
1327
|
+
"pan-left": "touch-pan-left",
|
|
1328
|
+
"pan-right": "touch-pan-right",
|
|
1329
|
+
"pan-y": "touch-pan-y",
|
|
1330
|
+
"pan-up": "touch-pan-up",
|
|
1331
|
+
"pan-down": "touch-pan-down",
|
|
1332
|
+
manipulation: "touch-manipulation"
|
|
1333
|
+
},
|
|
1334
|
+
"will-change": {
|
|
1335
|
+
auto: "will-change-auto",
|
|
1336
|
+
scroll: "will-change-scroll",
|
|
1337
|
+
contents: "will-change-contents",
|
|
1338
|
+
transform: "will-change-transform"
|
|
1339
|
+
},
|
|
1340
|
+
contain: {
|
|
1341
|
+
none: "contain-none",
|
|
1342
|
+
content: "contain-content",
|
|
1343
|
+
strict: "contain-strict",
|
|
1344
|
+
size: "contain-size",
|
|
1345
|
+
layout: "contain-layout",
|
|
1346
|
+
paint: "contain-paint",
|
|
1347
|
+
style: "contain-style",
|
|
1348
|
+
"inline-size": "contain-inline-size"
|
|
1349
|
+
},
|
|
1350
|
+
"break-before": {
|
|
1351
|
+
auto: "break-before-auto",
|
|
1352
|
+
avoid: "break-before-avoid",
|
|
1353
|
+
all: "break-before-all",
|
|
1354
|
+
"avoid-page": "break-before-avoid-page",
|
|
1355
|
+
page: "break-before-page",
|
|
1356
|
+
left: "break-before-left",
|
|
1357
|
+
right: "break-before-right",
|
|
1358
|
+
column: "break-before-column"
|
|
1359
|
+
},
|
|
1360
|
+
"break-after": {
|
|
1361
|
+
auto: "break-after-auto",
|
|
1362
|
+
avoid: "break-after-avoid",
|
|
1363
|
+
all: "break-after-all",
|
|
1364
|
+
"avoid-page": "break-after-avoid-page",
|
|
1365
|
+
page: "break-after-page",
|
|
1366
|
+
left: "break-after-left",
|
|
1367
|
+
right: "break-after-right",
|
|
1368
|
+
column: "break-after-column"
|
|
1369
|
+
},
|
|
1370
|
+
"break-inside": {
|
|
1371
|
+
auto: "break-inside-auto",
|
|
1372
|
+
avoid: "break-inside-avoid",
|
|
1373
|
+
"avoid-page": "break-inside-avoid-page",
|
|
1374
|
+
"avoid-column": "break-inside-avoid-column"
|
|
1375
|
+
},
|
|
1376
|
+
"forced-color-adjust": {
|
|
1377
|
+
auto: "forced-color-adjust-auto",
|
|
1378
|
+
none: "forced-color-adjust-none"
|
|
1379
|
+
},
|
|
1380
|
+
filter: { none: "filter-none" },
|
|
1381
|
+
"backdrop-filter": { none: "backdrop-filter-none" },
|
|
1382
|
+
"box-shadow": { none: "shadow-none" },
|
|
1383
|
+
"text-shadow": { none: "text-shadow-none" },
|
|
1384
|
+
"backface-visibility": {
|
|
1385
|
+
hidden: "backface-hidden",
|
|
1386
|
+
visible: "backface-visible"
|
|
1387
|
+
},
|
|
1388
|
+
perspective: {
|
|
1389
|
+
none: "perspective-none",
|
|
1390
|
+
"100px": "perspective-dramatic",
|
|
1391
|
+
"300px": "perspective-near",
|
|
1392
|
+
"500px": "perspective-normal",
|
|
1393
|
+
"800px": "perspective-midrange",
|
|
1394
|
+
"1200px": "perspective-distant"
|
|
1395
|
+
},
|
|
1396
|
+
"transform-style": {
|
|
1397
|
+
"preserve-3d": "transform-3d",
|
|
1398
|
+
flat: "transform-flat"
|
|
1399
|
+
},
|
|
1400
|
+
"transform-origin": {
|
|
1401
|
+
center: "origin-center",
|
|
1402
|
+
top: "origin-top",
|
|
1403
|
+
"top right": "origin-top-right",
|
|
1404
|
+
right: "origin-right",
|
|
1405
|
+
"bottom right": "origin-bottom-right",
|
|
1406
|
+
bottom: "origin-bottom",
|
|
1407
|
+
"bottom left": "origin-bottom-left",
|
|
1408
|
+
left: "origin-left",
|
|
1409
|
+
"top left": "origin-top-left",
|
|
1410
|
+
"50% 50%": "origin-center",
|
|
1411
|
+
"100% 0": "origin-top-right",
|
|
1412
|
+
"100% 0%": "origin-top-right",
|
|
1413
|
+
"100% 100%": "origin-bottom-right",
|
|
1414
|
+
"50% 100%": "origin-bottom",
|
|
1415
|
+
"0 100%": "origin-bottom-left",
|
|
1416
|
+
"0% 100%": "origin-bottom-left",
|
|
1417
|
+
"0 50%": "origin-left",
|
|
1418
|
+
"0% 50%": "origin-left",
|
|
1419
|
+
"0 0": "origin-top-left",
|
|
1420
|
+
"0% 0%": "origin-top-left"
|
|
1421
|
+
},
|
|
1422
|
+
"scroll-snap-align": {
|
|
1423
|
+
start: "snap-start",
|
|
1424
|
+
end: "snap-end",
|
|
1425
|
+
center: "snap-center",
|
|
1426
|
+
none: "snap-align-none"
|
|
1427
|
+
},
|
|
1428
|
+
"scroll-snap-type": { none: "snap-none" },
|
|
1429
|
+
"scroll-snap-stop": {
|
|
1430
|
+
normal: "snap-normal",
|
|
1431
|
+
always: "snap-always"
|
|
1432
|
+
},
|
|
1433
|
+
"transition-timing-function": {
|
|
1434
|
+
linear: "ease-linear",
|
|
1435
|
+
ease: "ease-in-out",
|
|
1436
|
+
"ease-in": "ease-in",
|
|
1437
|
+
"ease-out": "ease-out",
|
|
1438
|
+
"ease-in-out": "ease-in-out"
|
|
1439
|
+
},
|
|
1440
|
+
"transition-property": {
|
|
1441
|
+
all: "transition-all",
|
|
1442
|
+
none: "transition-none",
|
|
1443
|
+
color: "transition-colors",
|
|
1444
|
+
opacity: "transition-opacity",
|
|
1445
|
+
shadow: "transition-shadow",
|
|
1446
|
+
transform: "transition-transform"
|
|
1447
|
+
},
|
|
1448
|
+
"transition-behavior": {
|
|
1449
|
+
normal: "transition-normal",
|
|
1450
|
+
"allow-discrete": "transition-discrete"
|
|
1451
|
+
},
|
|
1452
|
+
animation: { none: "animate-none" },
|
|
1453
|
+
"animation-name": { none: "animate-none" },
|
|
1454
|
+
"background-image": { none: "bg-none" },
|
|
1455
|
+
content: { none: "content-none" },
|
|
1456
|
+
"accent-color": { auto: "accent-auto" },
|
|
1457
|
+
"caret-color": { auto: "caret-auto" },
|
|
1458
|
+
"list-style-image": { none: "list-image-none" },
|
|
1459
|
+
"text-decoration-style": {
|
|
1460
|
+
solid: "decoration-solid",
|
|
1461
|
+
double: "decoration-double",
|
|
1462
|
+
dotted: "decoration-dotted",
|
|
1463
|
+
dashed: "decoration-dashed",
|
|
1464
|
+
wavy: "decoration-wavy"
|
|
1465
|
+
},
|
|
1466
|
+
"text-decoration-thickness": {
|
|
1467
|
+
auto: "decoration-auto",
|
|
1468
|
+
"from-font": "decoration-from-font",
|
|
1469
|
+
"0px": "decoration-0",
|
|
1470
|
+
"1px": "decoration-1",
|
|
1471
|
+
"2px": "decoration-2",
|
|
1472
|
+
"4px": "decoration-4",
|
|
1473
|
+
"8px": "decoration-8"
|
|
1474
|
+
},
|
|
1475
|
+
"text-underline-offset": {
|
|
1476
|
+
auto: "underline-offset-auto",
|
|
1477
|
+
"0px": "underline-offset-0",
|
|
1478
|
+
"1px": "underline-offset-1",
|
|
1479
|
+
"2px": "underline-offset-2",
|
|
1480
|
+
"4px": "underline-offset-4",
|
|
1481
|
+
"8px": "underline-offset-8"
|
|
1482
|
+
},
|
|
1483
|
+
"font-weight": {
|
|
1484
|
+
"100": "font-thin",
|
|
1485
|
+
"200": "font-extralight",
|
|
1486
|
+
"300": "font-light",
|
|
1487
|
+
"400": "font-normal",
|
|
1488
|
+
"500": "font-medium",
|
|
1489
|
+
"600": "font-semibold",
|
|
1490
|
+
"700": "font-bold",
|
|
1491
|
+
"800": "font-extrabold",
|
|
1492
|
+
"900": "font-black",
|
|
1493
|
+
bold: "font-bold",
|
|
1494
|
+
normal: "font-normal"
|
|
1495
|
+
}
|
|
1496
|
+
};
|
|
1497
|
+
const arbitraryPrefixes = {
|
|
1498
|
+
width: "w",
|
|
1499
|
+
height: "h",
|
|
1500
|
+
"inline-size": "w",
|
|
1501
|
+
"block-size": "h",
|
|
1502
|
+
"flex-basis": "basis",
|
|
1503
|
+
"min-width": "min-w",
|
|
1504
|
+
"min-height": "min-h",
|
|
1505
|
+
"min-inline-size": "min-w",
|
|
1506
|
+
"min-block-size": "min-h",
|
|
1507
|
+
"max-width": "max-w",
|
|
1508
|
+
"max-height": "max-h",
|
|
1509
|
+
"max-inline-size": "max-w",
|
|
1510
|
+
"max-block-size": "max-h",
|
|
1511
|
+
margin: "m",
|
|
1512
|
+
"margin-top": "mt",
|
|
1513
|
+
"margin-right": "mr",
|
|
1514
|
+
"margin-bottom": "mb",
|
|
1515
|
+
"margin-left": "ml",
|
|
1516
|
+
"margin-inline-start": "ms",
|
|
1517
|
+
"margin-inline-end": "me",
|
|
1518
|
+
"margin-inline": "mx",
|
|
1519
|
+
"margin-block": "my",
|
|
1520
|
+
"margin-block-start": "mt",
|
|
1521
|
+
"margin-block-end": "mb",
|
|
1522
|
+
top: "top",
|
|
1523
|
+
right: "right",
|
|
1524
|
+
bottom: "bottom",
|
|
1525
|
+
left: "left",
|
|
1526
|
+
"inset-inline-start": "start",
|
|
1527
|
+
"inset-inline-end": "end",
|
|
1528
|
+
padding: "p",
|
|
1529
|
+
"padding-top": "pt",
|
|
1530
|
+
"padding-right": "pr",
|
|
1531
|
+
"padding-bottom": "pb",
|
|
1532
|
+
"padding-left": "pl",
|
|
1533
|
+
"padding-inline-start": "ps",
|
|
1534
|
+
"padding-inline-end": "pe",
|
|
1535
|
+
"padding-inline": "px",
|
|
1536
|
+
"padding-block": "py",
|
|
1537
|
+
"padding-block-start": "pt",
|
|
1538
|
+
"padding-block-end": "pb",
|
|
1539
|
+
gap: "gap",
|
|
1540
|
+
"row-gap": "gap-y",
|
|
1541
|
+
"column-gap": "gap-x",
|
|
1542
|
+
"text-indent": "indent",
|
|
1543
|
+
"border-spacing": "border-spacing",
|
|
1544
|
+
"border-spacing-x": "border-spacing-x",
|
|
1545
|
+
"border-spacing-y": "border-spacing-y",
|
|
1546
|
+
"scroll-margin": "scroll-m",
|
|
1547
|
+
"scroll-margin-top": "scroll-mt",
|
|
1548
|
+
"scroll-margin-right": "scroll-mr",
|
|
1549
|
+
"scroll-margin-bottom": "scroll-mb",
|
|
1550
|
+
"scroll-margin-left": "scroll-ml",
|
|
1551
|
+
"scroll-margin-inline-start": "scroll-ms",
|
|
1552
|
+
"scroll-margin-inline-end": "scroll-me",
|
|
1553
|
+
"scroll-margin-inline": "scroll-mx",
|
|
1554
|
+
"scroll-margin-block": "scroll-my",
|
|
1555
|
+
"scroll-margin-block-start": "scroll-mt",
|
|
1556
|
+
"scroll-margin-block-end": "scroll-mb",
|
|
1557
|
+
"scroll-padding": "scroll-p",
|
|
1558
|
+
"scroll-padding-top": "scroll-pt",
|
|
1559
|
+
"scroll-padding-right": "scroll-pr",
|
|
1560
|
+
"scroll-padding-bottom": "scroll-pb",
|
|
1561
|
+
"scroll-padding-left": "scroll-pl",
|
|
1562
|
+
"scroll-padding-inline-start": "scroll-ps",
|
|
1563
|
+
"scroll-padding-inline-end": "scroll-pe",
|
|
1564
|
+
"scroll-padding-inline": "scroll-px",
|
|
1565
|
+
"scroll-padding-block": "scroll-py",
|
|
1566
|
+
"scroll-padding-block-start": "scroll-pt",
|
|
1567
|
+
"scroll-padding-block-end": "scroll-pb",
|
|
1568
|
+
color: "text",
|
|
1569
|
+
"background-color": "bg",
|
|
1570
|
+
"background-image": "bg",
|
|
1571
|
+
"-webkit-line-clamp": "line-clamp",
|
|
1572
|
+
"line-clamp": "line-clamp",
|
|
1573
|
+
fill: "fill",
|
|
1574
|
+
stroke: "stroke",
|
|
1575
|
+
"border-color": "border",
|
|
1576
|
+
"border-top-color": "border-t",
|
|
1577
|
+
"border-right-color": "border-r",
|
|
1578
|
+
"border-bottom-color": "border-b",
|
|
1579
|
+
"border-left-color": "border-l",
|
|
1580
|
+
"border-inline-start-color": "border-s",
|
|
1581
|
+
"border-inline-end-color": "border-e",
|
|
1582
|
+
"border-inline-color": "border-x",
|
|
1583
|
+
"border-block-color": "border-y",
|
|
1584
|
+
"outline-color": "outline",
|
|
1585
|
+
"text-decoration-color": "decoration",
|
|
1586
|
+
"caret-color": "caret",
|
|
1587
|
+
"accent-color": "accent",
|
|
1588
|
+
"border-width": "border",
|
|
1589
|
+
"border-top-width": "border-t",
|
|
1590
|
+
"border-right-width": "border-r",
|
|
1591
|
+
"border-bottom-width": "border-b",
|
|
1592
|
+
"border-left-width": "border-l",
|
|
1593
|
+
"border-inline-start-width": "border-s",
|
|
1594
|
+
"border-inline-end-width": "border-e",
|
|
1595
|
+
"border-inline-width": "border-x",
|
|
1596
|
+
"border-block-width": "border-y",
|
|
1597
|
+
"stroke-width": "stroke",
|
|
1598
|
+
"border-radius": "rounded",
|
|
1599
|
+
"border-top-left-radius": "rounded-tl",
|
|
1600
|
+
"border-top-right-radius": "rounded-tr",
|
|
1601
|
+
"border-bottom-right-radius": "rounded-br",
|
|
1602
|
+
"border-bottom-left-radius": "rounded-bl",
|
|
1603
|
+
"border-start-start-radius": "rounded-ss",
|
|
1604
|
+
"border-start-end-radius": "rounded-se",
|
|
1605
|
+
"border-end-end-radius": "rounded-ee",
|
|
1606
|
+
"border-end-start-radius": "rounded-es",
|
|
1607
|
+
opacity: "opacity",
|
|
1608
|
+
"z-index": "z",
|
|
1609
|
+
"font-size": "text",
|
|
1610
|
+
"line-height": "leading",
|
|
1611
|
+
"letter-spacing": "tracking",
|
|
1612
|
+
"outline-width": "outline",
|
|
1613
|
+
"outline-offset": "outline-offset",
|
|
1614
|
+
"box-shadow": "shadow",
|
|
1615
|
+
filter: "filter",
|
|
1616
|
+
"backdrop-filter": "backdrop-filter",
|
|
1617
|
+
rotate: "rotate",
|
|
1618
|
+
scale: "scale",
|
|
1619
|
+
translate: "translate",
|
|
1620
|
+
"grid-template-columns": "grid-cols",
|
|
1621
|
+
"grid-template-rows": "grid-rows",
|
|
1622
|
+
"transition-property": "transition",
|
|
1623
|
+
"transition-duration": "duration",
|
|
1624
|
+
"transition-delay": "delay",
|
|
1625
|
+
"transition-timing-function": "ease",
|
|
1626
|
+
animation: "animate",
|
|
1627
|
+
"animation-name": "animate",
|
|
1628
|
+
"animation-duration": "duration",
|
|
1629
|
+
"animation-delay": "delay",
|
|
1630
|
+
"animation-timing-function": "ease",
|
|
1631
|
+
"animation-iteration-count": "animate-iteration",
|
|
1632
|
+
perspective: "perspective",
|
|
1633
|
+
"mask-position": "mask-position",
|
|
1634
|
+
"mask-image": "mask",
|
|
1635
|
+
"text-shadow": "text-shadow",
|
|
1636
|
+
"clip-path": "clip-path",
|
|
1637
|
+
"grid-column": "col",
|
|
1638
|
+
"grid-column-start": "col-start",
|
|
1639
|
+
"grid-column-end": "col-end",
|
|
1640
|
+
"grid-row": "row",
|
|
1641
|
+
"grid-row-start": "row-start",
|
|
1642
|
+
"grid-row-end": "row-end",
|
|
1643
|
+
cursor: "cursor",
|
|
1644
|
+
content: "content",
|
|
1645
|
+
"list-style-type": "list",
|
|
1646
|
+
"list-style-image": "list-image",
|
|
1647
|
+
"will-change": "will-change",
|
|
1648
|
+
contain: "contain",
|
|
1649
|
+
"mask-size": "mask-size",
|
|
1650
|
+
"mask-repeat": "mask-repeat",
|
|
1651
|
+
"mask-clip": "mask-clip",
|
|
1652
|
+
"mask-origin": "mask-origin",
|
|
1653
|
+
"mask-mode": "mask-mode",
|
|
1654
|
+
"mask-composite": "mask-composite",
|
|
1655
|
+
"font-family": "font",
|
|
1656
|
+
"font-weight": "font",
|
|
1657
|
+
"font-stretch": "font-stretch",
|
|
1658
|
+
"background-position-x": "bg-position-x",
|
|
1659
|
+
"background-position-y": "bg-position-y",
|
|
1660
|
+
"column-count": "columns",
|
|
1661
|
+
"column-width": "columns",
|
|
1662
|
+
"aspect-ratio": "aspect",
|
|
1663
|
+
"object-position": "object",
|
|
1664
|
+
order: "order",
|
|
1665
|
+
"tab-size": "tab",
|
|
1666
|
+
zoom: "zoom",
|
|
1667
|
+
"flex-grow": "grow",
|
|
1668
|
+
"flex-shrink": "shrink",
|
|
1669
|
+
"word-spacing": "word-spacing",
|
|
1670
|
+
hyphens: "hyphens",
|
|
1671
|
+
"column-rule-color": "column-rule",
|
|
1672
|
+
"column-rule-width": "column-rule",
|
|
1673
|
+
"column-rule-style": "column-rule",
|
|
1674
|
+
"stroke-dasharray": "stroke-dasharray",
|
|
1675
|
+
"stroke-dashoffset": "stroke-dashoffset",
|
|
1676
|
+
"stroke-linecap": "stroke-linecap",
|
|
1677
|
+
"stroke-linejoin": "stroke-linejoin",
|
|
1678
|
+
"image-rendering": "image-render",
|
|
1679
|
+
"paint-order": "paint-order",
|
|
1680
|
+
"shape-outside": "shape-outside",
|
|
1681
|
+
"shape-margin": "shape-margin",
|
|
1682
|
+
"shape-image-threshold": "shape-image-threshold"
|
|
1683
|
+
};
|
|
1684
|
+
const spacingProperties = new Set([
|
|
1685
|
+
"width",
|
|
1686
|
+
"height",
|
|
1687
|
+
"min-width",
|
|
1688
|
+
"min-height",
|
|
1689
|
+
"max-width",
|
|
1690
|
+
"max-height",
|
|
1691
|
+
"inline-size",
|
|
1692
|
+
"block-size",
|
|
1693
|
+
"min-inline-size",
|
|
1694
|
+
"min-block-size",
|
|
1695
|
+
"max-inline-size",
|
|
1696
|
+
"max-block-size",
|
|
1697
|
+
"flex-basis",
|
|
1698
|
+
"margin",
|
|
1699
|
+
"margin-top",
|
|
1700
|
+
"margin-right",
|
|
1701
|
+
"margin-bottom",
|
|
1702
|
+
"margin-left",
|
|
1703
|
+
"margin-inline-start",
|
|
1704
|
+
"margin-inline-end",
|
|
1705
|
+
"margin-inline",
|
|
1706
|
+
"margin-block",
|
|
1707
|
+
"margin-block-start",
|
|
1708
|
+
"margin-block-end",
|
|
1709
|
+
"padding",
|
|
1710
|
+
"padding-top",
|
|
1711
|
+
"padding-right",
|
|
1712
|
+
"padding-bottom",
|
|
1713
|
+
"padding-left",
|
|
1714
|
+
"padding-inline-start",
|
|
1715
|
+
"padding-inline-end",
|
|
1716
|
+
"padding-inline",
|
|
1717
|
+
"padding-block",
|
|
1718
|
+
"padding-block-start",
|
|
1719
|
+
"padding-block-end",
|
|
1720
|
+
"top",
|
|
1721
|
+
"right",
|
|
1722
|
+
"bottom",
|
|
1723
|
+
"left",
|
|
1724
|
+
"inset-inline-start",
|
|
1725
|
+
"inset-inline-end",
|
|
1726
|
+
"gap",
|
|
1727
|
+
"row-gap",
|
|
1728
|
+
"column-gap",
|
|
1729
|
+
"text-indent",
|
|
1730
|
+
"border-spacing",
|
|
1731
|
+
"border-spacing-x",
|
|
1732
|
+
"border-spacing-y",
|
|
1733
|
+
"scroll-margin",
|
|
1734
|
+
"scroll-margin-top",
|
|
1735
|
+
"scroll-margin-right",
|
|
1736
|
+
"scroll-margin-bottom",
|
|
1737
|
+
"scroll-margin-left",
|
|
1738
|
+
"scroll-margin-inline-start",
|
|
1739
|
+
"scroll-margin-inline-end",
|
|
1740
|
+
"scroll-margin-inline",
|
|
1741
|
+
"scroll-margin-block",
|
|
1742
|
+
"scroll-margin-block-start",
|
|
1743
|
+
"scroll-margin-block-end",
|
|
1744
|
+
"scroll-padding",
|
|
1745
|
+
"scroll-padding-top",
|
|
1746
|
+
"scroll-padding-right",
|
|
1747
|
+
"scroll-padding-bottom",
|
|
1748
|
+
"scroll-padding-left",
|
|
1749
|
+
"scroll-padding-inline-start",
|
|
1750
|
+
"scroll-padding-inline-end",
|
|
1751
|
+
"scroll-padding-inline",
|
|
1752
|
+
"scroll-padding-block",
|
|
1753
|
+
"scroll-padding-block-start",
|
|
1754
|
+
"scroll-padding-block-end",
|
|
1755
|
+
"border-width",
|
|
1756
|
+
"border-top-width",
|
|
1757
|
+
"border-right-width",
|
|
1758
|
+
"border-bottom-width",
|
|
1759
|
+
"border-left-width",
|
|
1760
|
+
"border-inline-start-width",
|
|
1761
|
+
"border-inline-end-width",
|
|
1762
|
+
"border-inline-width",
|
|
1763
|
+
"border-block-width",
|
|
1764
|
+
"border-radius",
|
|
1765
|
+
"border-top-left-radius",
|
|
1766
|
+
"border-top-right-radius",
|
|
1767
|
+
"border-bottom-right-radius",
|
|
1768
|
+
"border-bottom-left-radius",
|
|
1769
|
+
"border-start-start-radius",
|
|
1770
|
+
"border-start-end-radius",
|
|
1771
|
+
"border-end-end-radius",
|
|
1772
|
+
"border-end-start-radius",
|
|
1773
|
+
"font-size",
|
|
1774
|
+
"line-height",
|
|
1775
|
+
"letter-spacing",
|
|
1776
|
+
"outline-width",
|
|
1777
|
+
"outline-offset"
|
|
1778
|
+
]);
|
|
1779
|
+
const valueAliases = {
|
|
1780
|
+
width: {
|
|
1781
|
+
auto: "w-auto",
|
|
1782
|
+
"50%": "w-1/2",
|
|
1783
|
+
"33.333333%": "w-1/3",
|
|
1784
|
+
"66.666667%": "w-2/3",
|
|
1785
|
+
"25%": "w-1/4",
|
|
1786
|
+
"75%": "w-3/4",
|
|
1787
|
+
"100%": "w-full",
|
|
1788
|
+
"100vw": "w-screen",
|
|
1789
|
+
"100dvw": "w-dvw",
|
|
1790
|
+
"100lvw": "w-lvw",
|
|
1791
|
+
"100svw": "w-svw",
|
|
1792
|
+
"min-content": "w-min",
|
|
1793
|
+
"max-content": "w-max",
|
|
1794
|
+
"fit-content": "w-fit"
|
|
1795
|
+
},
|
|
1796
|
+
height: {
|
|
1797
|
+
auto: "h-auto",
|
|
1798
|
+
"50%": "h-1/2",
|
|
1799
|
+
"33.333333%": "h-1/3",
|
|
1800
|
+
"66.666667%": "h-2/3",
|
|
1801
|
+
"25%": "h-1/4",
|
|
1802
|
+
"75%": "h-3/4",
|
|
1803
|
+
"100%": "h-full",
|
|
1804
|
+
"100vh": "h-screen",
|
|
1805
|
+
"100dvh": "h-dvh",
|
|
1806
|
+
"100lvh": "h-lvh",
|
|
1807
|
+
"100svh": "h-svh",
|
|
1808
|
+
"min-content": "h-min",
|
|
1809
|
+
"max-content": "h-max",
|
|
1810
|
+
"fit-content": "h-fit"
|
|
1811
|
+
},
|
|
1812
|
+
"inline-size": {
|
|
1813
|
+
auto: "w-auto",
|
|
1814
|
+
"100%": "w-full",
|
|
1815
|
+
"100vw": "w-screen",
|
|
1816
|
+
"100dvw": "w-dvw",
|
|
1817
|
+
"100lvw": "w-lvw",
|
|
1818
|
+
"100svw": "w-svw",
|
|
1819
|
+
"min-content": "w-min",
|
|
1820
|
+
"max-content": "w-max",
|
|
1821
|
+
"fit-content": "w-fit"
|
|
1822
|
+
},
|
|
1823
|
+
"block-size": {
|
|
1824
|
+
auto: "h-auto",
|
|
1825
|
+
"100%": "h-full",
|
|
1826
|
+
"100vh": "h-screen",
|
|
1827
|
+
"100dvh": "h-dvh",
|
|
1828
|
+
"100lvh": "h-lvh",
|
|
1829
|
+
"100svh": "h-svh",
|
|
1830
|
+
"min-content": "h-min",
|
|
1831
|
+
"max-content": "h-max",
|
|
1832
|
+
"fit-content": "h-fit"
|
|
1833
|
+
},
|
|
1834
|
+
"flex-basis": {
|
|
1835
|
+
auto: "basis-auto",
|
|
1836
|
+
"100%": "basis-full",
|
|
1837
|
+
"50%": "basis-1/2",
|
|
1838
|
+
"33.333333%": "basis-1/3",
|
|
1839
|
+
"66.666667%": "basis-2/3",
|
|
1840
|
+
"25%": "basis-1/4",
|
|
1841
|
+
"75%": "basis-3/4",
|
|
1842
|
+
"20%": "basis-1/5",
|
|
1843
|
+
"40%": "basis-2/5",
|
|
1844
|
+
"60%": "basis-3/5",
|
|
1845
|
+
"80%": "basis-4/5",
|
|
1846
|
+
"16.666667%": "basis-1/6",
|
|
1847
|
+
"83.333333%": "basis-5/6"
|
|
1848
|
+
},
|
|
1849
|
+
"min-width": {
|
|
1850
|
+
"50%": "min-w-1/2",
|
|
1851
|
+
"100%": "min-w-full",
|
|
1852
|
+
"100vw": "min-w-screen",
|
|
1853
|
+
"100dvw": "min-w-dvw",
|
|
1854
|
+
"100lvw": "min-w-lvw",
|
|
1855
|
+
"100svw": "min-w-svw",
|
|
1856
|
+
"min-content": "min-w-min",
|
|
1857
|
+
"max-content": "min-w-max",
|
|
1858
|
+
"fit-content": "min-w-fit"
|
|
1859
|
+
},
|
|
1860
|
+
"min-height": {
|
|
1861
|
+
"50%": "min-h-1/2",
|
|
1862
|
+
"100%": "min-h-full",
|
|
1863
|
+
"100vh": "min-h-screen",
|
|
1864
|
+
"100dvh": "min-h-dvh",
|
|
1865
|
+
"100lvh": "min-h-lvh",
|
|
1866
|
+
"100svh": "min-h-svh",
|
|
1867
|
+
"min-content": "min-h-min",
|
|
1868
|
+
"max-content": "min-h-max",
|
|
1869
|
+
"fit-content": "min-h-fit"
|
|
1870
|
+
},
|
|
1871
|
+
"max-width": {
|
|
1872
|
+
"50%": "max-w-1/2",
|
|
1873
|
+
"100%": "max-w-full",
|
|
1874
|
+
"100vw": "max-w-screen",
|
|
1875
|
+
"100dvw": "max-w-dvw",
|
|
1876
|
+
"100lvw": "max-w-lvw",
|
|
1877
|
+
"100svw": "max-w-svw",
|
|
1878
|
+
"min-content": "max-w-min",
|
|
1879
|
+
"max-content": "max-w-max",
|
|
1880
|
+
"fit-content": "max-w-fit",
|
|
1881
|
+
none: "max-w-none"
|
|
1882
|
+
},
|
|
1883
|
+
"max-height": {
|
|
1884
|
+
"50%": "max-h-1/2",
|
|
1885
|
+
"100%": "max-h-full",
|
|
1886
|
+
"100vh": "max-h-screen",
|
|
1887
|
+
"100dvh": "max-h-dvh",
|
|
1888
|
+
"100lvh": "max-h-lvh",
|
|
1889
|
+
"100svh": "max-h-svh",
|
|
1890
|
+
"min-content": "max-h-min",
|
|
1891
|
+
"max-content": "max-h-max",
|
|
1892
|
+
"fit-content": "max-h-fit",
|
|
1893
|
+
none: "max-h-none"
|
|
1894
|
+
},
|
|
1895
|
+
"min-inline-size": {
|
|
1896
|
+
"100%": "min-w-full",
|
|
1897
|
+
"100vw": "min-w-screen",
|
|
1898
|
+
"min-content": "min-w-min",
|
|
1899
|
+
"max-content": "min-w-max",
|
|
1900
|
+
"fit-content": "min-w-fit"
|
|
1901
|
+
},
|
|
1902
|
+
"min-block-size": {
|
|
1903
|
+
"100%": "min-h-full",
|
|
1904
|
+
"100vh": "min-h-screen",
|
|
1905
|
+
"min-content": "min-h-min",
|
|
1906
|
+
"max-content": "min-h-max",
|
|
1907
|
+
"fit-content": "min-h-fit"
|
|
1908
|
+
},
|
|
1909
|
+
"max-inline-size": {
|
|
1910
|
+
"100%": "max-w-full",
|
|
1911
|
+
"100vw": "max-w-screen",
|
|
1912
|
+
"min-content": "max-w-min",
|
|
1913
|
+
"max-content": "max-w-max",
|
|
1914
|
+
"fit-content": "max-w-fit",
|
|
1915
|
+
none: "max-w-none"
|
|
1916
|
+
},
|
|
1917
|
+
"max-block-size": {
|
|
1918
|
+
"100%": "max-h-full",
|
|
1919
|
+
"100vh": "max-h-screen",
|
|
1920
|
+
"min-content": "max-h-min",
|
|
1921
|
+
"max-content": "max-h-max",
|
|
1922
|
+
"fit-content": "max-h-fit",
|
|
1923
|
+
none: "max-h-none"
|
|
1924
|
+
},
|
|
1925
|
+
margin: { auto: "m-auto" },
|
|
1926
|
+
"margin-top": { auto: "mt-auto" },
|
|
1927
|
+
"margin-right": { auto: "mr-auto" },
|
|
1928
|
+
"margin-bottom": { auto: "mb-auto" },
|
|
1929
|
+
"margin-left": { auto: "ml-auto" },
|
|
1930
|
+
"border-radius": {
|
|
1931
|
+
"0": "rounded-none",
|
|
1932
|
+
"0px": "rounded-none",
|
|
1933
|
+
"0.125rem": "rounded-xs",
|
|
1934
|
+
"2px": "rounded-xs",
|
|
1935
|
+
"0.25rem": "rounded-sm",
|
|
1936
|
+
"4px": "rounded-sm",
|
|
1937
|
+
"0.375rem": "rounded-md",
|
|
1938
|
+
"6px": "rounded-md",
|
|
1939
|
+
"0.5rem": "rounded-lg",
|
|
1940
|
+
"8px": "rounded-lg",
|
|
1941
|
+
"0.75rem": "rounded-xl",
|
|
1942
|
+
"12px": "rounded-xl",
|
|
1943
|
+
"1rem": "rounded-2xl",
|
|
1944
|
+
"16px": "rounded-2xl",
|
|
1945
|
+
"1.5rem": "rounded-3xl",
|
|
1946
|
+
"24px": "rounded-3xl",
|
|
1947
|
+
"9999px": "rounded-full"
|
|
1948
|
+
},
|
|
1949
|
+
"border-top-left-radius": {
|
|
1950
|
+
"0": "rounded-tl-none",
|
|
1951
|
+
"0px": "rounded-tl-none",
|
|
1952
|
+
"0.25rem": "rounded-tl-sm",
|
|
1953
|
+
"4px": "rounded-tl-sm",
|
|
1954
|
+
"0.5rem": "rounded-tl-lg",
|
|
1955
|
+
"8px": "rounded-tl-lg",
|
|
1956
|
+
"9999px": "rounded-tl-full"
|
|
1957
|
+
},
|
|
1958
|
+
"border-top-right-radius": {
|
|
1959
|
+
"0": "rounded-tr-none",
|
|
1960
|
+
"0px": "rounded-tr-none",
|
|
1961
|
+
"0.25rem": "rounded-tr-sm",
|
|
1962
|
+
"4px": "rounded-tr-sm",
|
|
1963
|
+
"0.5rem": "rounded-tr-lg",
|
|
1964
|
+
"8px": "rounded-tr-lg",
|
|
1965
|
+
"9999px": "rounded-tr-full"
|
|
1966
|
+
},
|
|
1967
|
+
"border-bottom-right-radius": {
|
|
1968
|
+
"0": "rounded-br-none",
|
|
1969
|
+
"0px": "rounded-br-none",
|
|
1970
|
+
"0.25rem": "rounded-br-sm",
|
|
1971
|
+
"4px": "rounded-br-sm",
|
|
1972
|
+
"0.5rem": "rounded-br-lg",
|
|
1973
|
+
"8px": "rounded-br-lg",
|
|
1974
|
+
"9999px": "rounded-br-full"
|
|
1975
|
+
},
|
|
1976
|
+
"border-bottom-left-radius": {
|
|
1977
|
+
"0": "rounded-bl-none",
|
|
1978
|
+
"0px": "rounded-bl-none",
|
|
1979
|
+
"0.25rem": "rounded-bl-sm",
|
|
1980
|
+
"4px": "rounded-bl-sm",
|
|
1981
|
+
"0.5rem": "rounded-bl-lg",
|
|
1982
|
+
"8px": "rounded-bl-lg",
|
|
1983
|
+
"9999px": "rounded-bl-full"
|
|
1984
|
+
},
|
|
1985
|
+
"border-start-start-radius": {
|
|
1986
|
+
"0": "rounded-ss-none",
|
|
1987
|
+
"0px": "rounded-ss-none",
|
|
1988
|
+
"0.25rem": "rounded-ss-sm",
|
|
1989
|
+
"4px": "rounded-ss-sm",
|
|
1990
|
+
"0.5rem": "rounded-ss-lg",
|
|
1991
|
+
"8px": "rounded-ss-lg",
|
|
1992
|
+
"9999px": "rounded-ss-full"
|
|
1993
|
+
},
|
|
1994
|
+
"border-start-end-radius": {
|
|
1995
|
+
"0": "rounded-se-none",
|
|
1996
|
+
"0px": "rounded-se-none",
|
|
1997
|
+
"0.25rem": "rounded-se-sm",
|
|
1998
|
+
"4px": "rounded-se-sm",
|
|
1999
|
+
"0.5rem": "rounded-se-lg",
|
|
2000
|
+
"8px": "rounded-se-lg",
|
|
2001
|
+
"9999px": "rounded-se-full"
|
|
2002
|
+
},
|
|
2003
|
+
"border-end-end-radius": {
|
|
2004
|
+
"0": "rounded-ee-none",
|
|
2005
|
+
"0px": "rounded-ee-none",
|
|
2006
|
+
"0.25rem": "rounded-ee-sm",
|
|
2007
|
+
"4px": "rounded-ee-sm",
|
|
2008
|
+
"0.5rem": "rounded-ee-lg",
|
|
2009
|
+
"8px": "rounded-ee-lg",
|
|
2010
|
+
"9999px": "rounded-ee-full"
|
|
2011
|
+
},
|
|
2012
|
+
"border-end-start-radius": {
|
|
2013
|
+
"0": "rounded-es-none",
|
|
2014
|
+
"0px": "rounded-es-none",
|
|
2015
|
+
"0.25rem": "rounded-es-sm",
|
|
2016
|
+
"4px": "rounded-es-sm",
|
|
2017
|
+
"0.5rem": "rounded-es-lg",
|
|
2018
|
+
"8px": "rounded-es-lg",
|
|
2019
|
+
"9999px": "rounded-es-full"
|
|
2020
|
+
},
|
|
2021
|
+
columns: { auto: "columns-auto" },
|
|
2022
|
+
"font-size": {
|
|
2023
|
+
"12px": "text-xs",
|
|
2024
|
+
"0.75rem": "text-xs",
|
|
2025
|
+
"14px": "text-sm",
|
|
2026
|
+
"0.875rem": "text-sm",
|
|
2027
|
+
"16px": "text-base",
|
|
2028
|
+
"1rem": "text-base",
|
|
2029
|
+
"18px": "text-lg",
|
|
2030
|
+
"1.125rem": "text-lg",
|
|
2031
|
+
"20px": "text-xl",
|
|
2032
|
+
"1.25rem": "text-xl",
|
|
2033
|
+
"24px": "text-2xl",
|
|
2034
|
+
"1.5rem": "text-2xl",
|
|
2035
|
+
"30px": "text-3xl",
|
|
2036
|
+
"1.875rem": "text-3xl",
|
|
2037
|
+
"36px": "text-4xl",
|
|
2038
|
+
"2.25rem": "text-4xl",
|
|
2039
|
+
"48px": "text-5xl",
|
|
2040
|
+
"3rem": "text-5xl",
|
|
2041
|
+
"60px": "text-6xl",
|
|
2042
|
+
"3.75rem": "text-6xl",
|
|
2043
|
+
"72px": "text-7xl",
|
|
2044
|
+
"4.5rem": "text-7xl",
|
|
2045
|
+
"96px": "text-8xl",
|
|
2046
|
+
"6rem": "text-8xl",
|
|
2047
|
+
"128px": "text-9xl",
|
|
2048
|
+
"8rem": "text-9xl"
|
|
2049
|
+
},
|
|
2050
|
+
"line-height": {
|
|
2051
|
+
"16px": "leading-4",
|
|
2052
|
+
"1rem": "leading-4",
|
|
2053
|
+
"20px": "leading-5",
|
|
2054
|
+
"1.25rem": "leading-5",
|
|
2055
|
+
"24px": "leading-6",
|
|
2056
|
+
"1.5rem": "leading-6",
|
|
2057
|
+
"28px": "leading-7",
|
|
2058
|
+
"1.75rem": "leading-7",
|
|
2059
|
+
"32px": "leading-8",
|
|
2060
|
+
"2rem": "leading-8",
|
|
2061
|
+
"1": "leading-none",
|
|
2062
|
+
normal: "leading-normal",
|
|
2063
|
+
"1.25": "leading-tight",
|
|
2064
|
+
"1.375": "leading-snug",
|
|
2065
|
+
"1.5": "leading-normal",
|
|
2066
|
+
"1.625": "leading-relaxed",
|
|
2067
|
+
"2": "leading-loose"
|
|
2068
|
+
},
|
|
2069
|
+
"letter-spacing": {
|
|
2070
|
+
normal: "tracking-normal",
|
|
2071
|
+
"-0.05em": "tracking-tighter",
|
|
2072
|
+
"-0.025em": "tracking-tight",
|
|
2073
|
+
"0.025em": "tracking-wide",
|
|
2074
|
+
"0.05em": "tracking-wider",
|
|
2075
|
+
"0.1em": "tracking-widest"
|
|
2076
|
+
},
|
|
2077
|
+
"outline-width": {
|
|
2078
|
+
"0": "outline-0",
|
|
2079
|
+
"0px": "outline-0",
|
|
2080
|
+
"1px": "outline-1",
|
|
2081
|
+
"2px": "outline-2",
|
|
2082
|
+
"4px": "outline-4",
|
|
2083
|
+
"8px": "outline-8"
|
|
2084
|
+
},
|
|
2085
|
+
"outline-offset": {
|
|
2086
|
+
"0": "outline-offset-0",
|
|
2087
|
+
"0px": "outline-offset-0",
|
|
2088
|
+
"1px": "outline-offset-1",
|
|
2089
|
+
"2px": "outline-offset-2",
|
|
2090
|
+
"4px": "outline-offset-4",
|
|
2091
|
+
"8px": "outline-offset-8"
|
|
2092
|
+
},
|
|
2093
|
+
overflow: {
|
|
2094
|
+
auto: "overflow-auto",
|
|
2095
|
+
hidden: "overflow-hidden",
|
|
2096
|
+
clip: "overflow-clip",
|
|
2097
|
+
visible: "overflow-visible",
|
|
2098
|
+
scroll: "overflow-scroll"
|
|
2099
|
+
},
|
|
2100
|
+
"overflow-x": {
|
|
2101
|
+
auto: "overflow-x-auto",
|
|
2102
|
+
hidden: "overflow-x-hidden",
|
|
2103
|
+
clip: "overflow-x-clip",
|
|
2104
|
+
visible: "overflow-x-visible",
|
|
2105
|
+
scroll: "overflow-x-scroll"
|
|
2106
|
+
},
|
|
2107
|
+
"overflow-y": {
|
|
2108
|
+
auto: "overflow-y-auto",
|
|
2109
|
+
hidden: "overflow-y-hidden",
|
|
2110
|
+
clip: "overflow-y-clip",
|
|
2111
|
+
visible: "overflow-y-visible",
|
|
2112
|
+
scroll: "overflow-y-scroll"
|
|
2113
|
+
},
|
|
2114
|
+
cursor: {
|
|
2115
|
+
alias: "cursor-alias",
|
|
2116
|
+
auto: "cursor-auto",
|
|
2117
|
+
cell: "cursor-cell",
|
|
2118
|
+
"context-menu": "cursor-context-menu",
|
|
2119
|
+
copy: "cursor-copy",
|
|
2120
|
+
crosshair: "cursor-crosshair",
|
|
2121
|
+
default: "cursor-default",
|
|
2122
|
+
grab: "cursor-grab",
|
|
2123
|
+
grabbing: "cursor-grabbing",
|
|
2124
|
+
help: "cursor-help",
|
|
2125
|
+
move: "cursor-move",
|
|
2126
|
+
"not-allowed": "cursor-not-allowed",
|
|
2127
|
+
pointer: "cursor-pointer",
|
|
2128
|
+
progress: "cursor-progress",
|
|
2129
|
+
text: "cursor-text",
|
|
2130
|
+
wait: "cursor-wait",
|
|
2131
|
+
"zoom-in": "cursor-zoom-in",
|
|
2132
|
+
"zoom-out": "cursor-zoom-out"
|
|
2133
|
+
},
|
|
2134
|
+
"pointer-events": {
|
|
2135
|
+
none: "pointer-events-none",
|
|
2136
|
+
auto: "pointer-events-auto"
|
|
2137
|
+
},
|
|
2138
|
+
resize: {
|
|
2139
|
+
none: "resize-none",
|
|
2140
|
+
both: "resize",
|
|
2141
|
+
horizontal: "resize-x",
|
|
2142
|
+
vertical: "resize-y"
|
|
2143
|
+
},
|
|
2144
|
+
"user-select": {
|
|
2145
|
+
none: "select-none",
|
|
2146
|
+
text: "select-text",
|
|
2147
|
+
all: "select-all",
|
|
2148
|
+
auto: "select-auto"
|
|
2149
|
+
}
|
|
2150
|
+
};
|
|
2151
|
+
//#endregion
|
|
2152
|
+
//#region src/convert/primitives.ts
|
|
2153
|
+
function spacingToken(value, options) {
|
|
2154
|
+
const normalized = value.trim().toLowerCase();
|
|
2155
|
+
const negative = normalized.startsWith("-");
|
|
2156
|
+
const absolute = negative ? normalized.slice(1) : normalized;
|
|
2157
|
+
if (absolute === "0" || absolute === "0px" || absolute === "0rem") return "0";
|
|
2158
|
+
if (absolute === "1px") return negative ? "-px" : "px";
|
|
2159
|
+
const rem = parseRem(absolute) ?? parsePxAsRem(absolute);
|
|
2160
|
+
if (rem === void 0) return void 0;
|
|
2161
|
+
const token = rem / .25;
|
|
2162
|
+
if (!Number.isFinite(token)) return void 0;
|
|
2163
|
+
const integerToken = Math.round(token);
|
|
2164
|
+
if (Math.abs(token - integerToken) < 1e-6) return negative ? `-${integerToken}` : String(integerToken);
|
|
2165
|
+
if (options.numericMultipliers !== "all") return void 0;
|
|
2166
|
+
if (Math.abs(token - Math.round(token * 4) / 4) > 1e-6) return void 0;
|
|
2167
|
+
const tokenName = String(token).replace(/\.([0-9]*?)0+$/, ".$1");
|
|
2168
|
+
return negative ? `-${tokenName}` : tokenName;
|
|
2169
|
+
}
|
|
2170
|
+
function parseRem(value) {
|
|
2171
|
+
if (!value.endsWith("rem")) return void 0;
|
|
2172
|
+
const parsed = Number(value.slice(0, -3));
|
|
2173
|
+
return Number.isFinite(parsed) ? parsed : void 0;
|
|
2174
|
+
}
|
|
2175
|
+
function parsePxAsRem(value) {
|
|
2176
|
+
if (!value.endsWith("px")) return void 0;
|
|
2177
|
+
const parsed = Number(value.slice(0, -2));
|
|
2178
|
+
return Number.isFinite(parsed) ? parsed / 16 : void 0;
|
|
2179
|
+
}
|
|
2180
|
+
//#endregion
|
|
2181
|
+
//#region src/convert/index.ts
|
|
2182
|
+
function convertDeclaration(declaration, options) {
|
|
2183
|
+
const exact = exactUtilities[declaration.property]?.[declaration.value];
|
|
2184
|
+
if (exact) return converted(declaration, exact, "exact");
|
|
2185
|
+
const alias = valueAliases[declaration.property]?.[declaration.value.toLowerCase()];
|
|
2186
|
+
if (alias) return converted(declaration, alias, "exact");
|
|
2187
|
+
if ((declaration.property === "-webkit-line-clamp" || declaration.property === "line-clamp") && /^\d+$/.test(declaration.value)) return converted(declaration, `line-clamp-${declaration.value}`, "exact");
|
|
2188
|
+
if ((declaration.property === "-webkit-line-clamp" || declaration.property === "line-clamp") && declaration.value === "none") return converted(declaration, "line-clamp-none", "exact");
|
|
2189
|
+
const contentClass = convertContent(declaration);
|
|
2190
|
+
if (contentClass) return converted(declaration, contentClass, "exact");
|
|
2191
|
+
if (declaration.property === "z-index" && /^-?\d+$/.test(declaration.value)) return converted(declaration, declaration.value.startsWith("-") ? `-z-${declaration.value.slice(1)}` : `z-${declaration.value}`, "exact");
|
|
2192
|
+
const numericClass = convertNumericUtility(declaration);
|
|
2193
|
+
if (numericClass) return converted(declaration, numericClass, "exact");
|
|
2194
|
+
const borderWidthClass = convertBorderWidth(declaration);
|
|
2195
|
+
if (borderWidthClass) return converted(declaration, borderWidthClass, "exact");
|
|
2196
|
+
const opacityClass = convertOpacity(declaration);
|
|
2197
|
+
if (opacityClass) return converted(declaration, opacityClass, "exact");
|
|
2198
|
+
const spacingClass = convertSpacingLike(declaration, options);
|
|
2199
|
+
if (spacingClass) return converted(declaration, spacingClass, "exact");
|
|
2200
|
+
const colorClass = convertColor(declaration, options);
|
|
2201
|
+
if (colorClass) return converted(declaration, colorClass, "exact");
|
|
2202
|
+
const transformResult = convertTransform(declaration, options);
|
|
2203
|
+
if (transformResult) {
|
|
2204
|
+
if (Array.isArray(transformResult)) return transformResult.map((cls) => converted(declaration, cls, "exact"));
|
|
2205
|
+
return converted(declaration, transformResult, "exact");
|
|
2206
|
+
}
|
|
2207
|
+
const snapResult = convertSnapType(declaration);
|
|
2208
|
+
if (snapResult) {
|
|
2209
|
+
if (Array.isArray(snapResult)) return snapResult.map((cls) => converted(declaration, cls, "exact"));
|
|
2210
|
+
return converted(declaration, snapResult, "exact");
|
|
2211
|
+
}
|
|
2212
|
+
const filterResult = convertFilter(declaration);
|
|
2213
|
+
if (filterResult) {
|
|
2214
|
+
if (Array.isArray(filterResult)) return filterResult.map((cls) => converted(declaration, cls, "exact"));
|
|
2215
|
+
return converted(declaration, filterResult, "exact");
|
|
2216
|
+
}
|
|
2217
|
+
const prefix = arbitraryPrefixes[declaration.property];
|
|
2218
|
+
if (prefix && options.allowArbitraryValues) return converted(declaration, arbitraryValue(prefix, declaration.value), "arbitrary");
|
|
2219
|
+
if (options.allowArbitraryProperties) return converted(declaration, arbitraryProperty(declaration.property, declaration.value), "arbitrary");
|
|
2220
|
+
}
|
|
2221
|
+
function convertSpacingLike(declaration, options) {
|
|
2222
|
+
if (!spacingProperties.has(declaration.property)) return void 0;
|
|
2223
|
+
const prefix = arbitraryPrefixes[declaration.property];
|
|
2224
|
+
if (!prefix) return void 0;
|
|
2225
|
+
const token = spacingToken(declaration.value, options);
|
|
2226
|
+
if (!token) return void 0;
|
|
2227
|
+
return token.startsWith("-") ? `-${prefix}-${token.slice(1)}` : `${prefix}-${token}`;
|
|
2228
|
+
}
|
|
2229
|
+
function convertNumericUtility(declaration) {
|
|
2230
|
+
if (declaration.property === "tab-size" && /^\d+$/.test(declaration.value)) return `tab-${declaration.value}`;
|
|
2231
|
+
if (declaration.property === "zoom") {
|
|
2232
|
+
const value = Number(declaration.value);
|
|
2233
|
+
if (Number.isFinite(value) && value > 0) return `zoom-${value * 100}`;
|
|
2234
|
+
}
|
|
2235
|
+
if (declaration.property === "order" && /^-?\d+$/.test(declaration.value)) return declaration.value.startsWith("-") ? `-order-${declaration.value.slice(1)}` : `order-${declaration.value}`;
|
|
2236
|
+
if ((declaration.property === "column-count" || declaration.property === "columns") && /^\d+$/.test(declaration.value)) return `columns-${declaration.value}`;
|
|
2237
|
+
const aspectRatio = convertAspectRatio(declaration);
|
|
2238
|
+
if (aspectRatio) return aspectRatio;
|
|
2239
|
+
const gridLine = convertGridLine(declaration);
|
|
2240
|
+
if (gridLine) return gridLine;
|
|
2241
|
+
const gridPlacement = convertGridPlacement(declaration);
|
|
2242
|
+
if (gridPlacement) return gridPlacement;
|
|
2243
|
+
const gridTemplate = convertGridTemplate(declaration);
|
|
2244
|
+
if (gridTemplate) return gridTemplate;
|
|
2245
|
+
if (declaration.property === "flex-grow" && /^[01]$/.test(declaration.value)) return declaration.value === "1" ? "grow" : "grow-0";
|
|
2246
|
+
if (declaration.property === "flex-shrink" && /^[01]$/.test(declaration.value)) return declaration.value === "1" ? "shrink" : "shrink-0";
|
|
2247
|
+
if (declaration.property === "stroke-width" && /^\d+$/.test(declaration.value)) return `stroke-${declaration.value}`;
|
|
2248
|
+
if (declaration.property === "transition-duration") {
|
|
2249
|
+
const milliseconds = millisecondsValue(declaration.value);
|
|
2250
|
+
if (milliseconds !== void 0) return `duration-${milliseconds}`;
|
|
2251
|
+
}
|
|
2252
|
+
if (declaration.property === "transition-delay") {
|
|
2253
|
+
const milliseconds = millisecondsValue(declaration.value);
|
|
2254
|
+
if (milliseconds !== void 0) return `delay-${milliseconds}`;
|
|
2255
|
+
}
|
|
2256
|
+
}
|
|
2257
|
+
function convertAspectRatio(declaration) {
|
|
2258
|
+
if (declaration.property !== "aspect-ratio") return void 0;
|
|
2259
|
+
const ratio = declaration.value.match(/^(\d+)\s*\/\s*(\d+)$/);
|
|
2260
|
+
if (!ratio) return void 0;
|
|
2261
|
+
const [, width, height] = ratio;
|
|
2262
|
+
if (width === height) return "aspect-square";
|
|
2263
|
+
if (width === "16" && height === "9") return "aspect-video";
|
|
2264
|
+
return `aspect-${width}/${height}`;
|
|
2265
|
+
}
|
|
2266
|
+
function convertSnapType(declaration) {
|
|
2267
|
+
if (declaration.property !== "scroll-snap-type") return void 0;
|
|
2268
|
+
if (declaration.value === "none") return "snap-none";
|
|
2269
|
+
const parts = declaration.value.trim().toLowerCase().split(/\s+/);
|
|
2270
|
+
if (parts.length !== 2) return void 0;
|
|
2271
|
+
const axes = {
|
|
2272
|
+
x: "snap-x",
|
|
2273
|
+
y: "snap-y",
|
|
2274
|
+
both: "snap-both",
|
|
2275
|
+
block: "snap-y",
|
|
2276
|
+
inline: "snap-x"
|
|
2277
|
+
};
|
|
2278
|
+
const strictness = {
|
|
2279
|
+
mandatory: "snap-mandatory",
|
|
2280
|
+
proximity: "snap-proximity"
|
|
2281
|
+
};
|
|
2282
|
+
const axisClass = axes[parts[0] ?? ""];
|
|
2283
|
+
const strictClass = strictness[parts[1] ?? ""];
|
|
2284
|
+
if (!axisClass || !strictClass) return void 0;
|
|
2285
|
+
return [axisClass, strictClass];
|
|
2286
|
+
}
|
|
2287
|
+
function convertContent(declaration) {
|
|
2288
|
+
if (declaration.property !== "content") return void 0;
|
|
2289
|
+
if (declaration.value === "none") return "content-none";
|
|
2290
|
+
const quoted = declaration.value.match(/^["'](.+)["']$/)?.[1];
|
|
2291
|
+
if (quoted) return `content-['${quoted.replace(/'/g, "\\'")}']`;
|
|
2292
|
+
}
|
|
2293
|
+
function convertGridLine(declaration) {
|
|
2294
|
+
const prefix = {
|
|
2295
|
+
"grid-column-start": "col-start",
|
|
2296
|
+
"grid-column-end": "col-end",
|
|
2297
|
+
"grid-row-start": "row-start",
|
|
2298
|
+
"grid-row-end": "row-end"
|
|
2299
|
+
}[declaration.property];
|
|
2300
|
+
if (!prefix || !/^-?\d+$/.test(declaration.value)) return void 0;
|
|
2301
|
+
return declaration.value.startsWith("-") ? `-${prefix}-${declaration.value.slice(1)}` : `${prefix}-${declaration.value}`;
|
|
2302
|
+
}
|
|
2303
|
+
function convertGridPlacement(declaration) {
|
|
2304
|
+
if (declaration.value === "1 / -1") {
|
|
2305
|
+
if (declaration.property === "grid-column") return "col-span-full";
|
|
2306
|
+
if (declaration.property === "grid-row") return "row-span-full";
|
|
2307
|
+
}
|
|
2308
|
+
const span = declaration.value.match(/^span (\d+) \/ span \d+$/)?.[1];
|
|
2309
|
+
if (!span) return void 0;
|
|
2310
|
+
if (declaration.property === "grid-column") return `col-span-${span}`;
|
|
2311
|
+
if (declaration.property === "grid-row") return `row-span-${span}`;
|
|
2312
|
+
}
|
|
2313
|
+
function convertGridTemplate(declaration) {
|
|
2314
|
+
const count = declaration.value.match(/^repeat\((\d+), minmax\(0, 1fr\)\)$/)?.[1];
|
|
2315
|
+
if (!count) return void 0;
|
|
2316
|
+
if (declaration.property === "grid-template-columns") return `grid-cols-${count}`;
|
|
2317
|
+
if (declaration.property === "grid-template-rows") return `grid-rows-${count}`;
|
|
2318
|
+
}
|
|
2319
|
+
function millisecondsValue(value) {
|
|
2320
|
+
const normalized = value.trim().toLowerCase();
|
|
2321
|
+
if (normalized.endsWith("ms")) {
|
|
2322
|
+
const parsed = Number(normalized.slice(0, -2));
|
|
2323
|
+
return Number.isInteger(parsed) ? parsed : void 0;
|
|
2324
|
+
}
|
|
2325
|
+
if (normalized.endsWith("s")) {
|
|
2326
|
+
const milliseconds = Number(normalized.slice(0, -1)) * 1e3;
|
|
2327
|
+
return Number.isInteger(milliseconds) ? milliseconds : void 0;
|
|
2328
|
+
}
|
|
2329
|
+
}
|
|
2330
|
+
function convertBorderWidth(declaration) {
|
|
2331
|
+
const prefix = {
|
|
2332
|
+
"border-width": "border",
|
|
2333
|
+
"border-top-width": "border-t",
|
|
2334
|
+
"border-right-width": "border-r",
|
|
2335
|
+
"border-bottom-width": "border-b",
|
|
2336
|
+
"border-left-width": "border-l",
|
|
2337
|
+
"border-inline-start-width": "border-s",
|
|
2338
|
+
"border-inline-end-width": "border-e",
|
|
2339
|
+
"border-inline-width": "border-x",
|
|
2340
|
+
"border-block-width": "border-y"
|
|
2341
|
+
}[declaration.property];
|
|
2342
|
+
if (!prefix) return void 0;
|
|
2343
|
+
const normalized = declaration.value.trim().toLowerCase();
|
|
2344
|
+
if (normalized === "1px") return prefix;
|
|
2345
|
+
if (normalized === "0" || normalized === "0px") return `${prefix}-0`;
|
|
2346
|
+
const width = normalized.match(/^(2|4|8)px$/)?.[1];
|
|
2347
|
+
return width ? `${prefix}-${width}` : void 0;
|
|
2348
|
+
}
|
|
2349
|
+
function convertOpacity(declaration) {
|
|
2350
|
+
if (declaration.property !== "opacity") return void 0;
|
|
2351
|
+
const value = Number(declaration.value);
|
|
2352
|
+
if (!Number.isFinite(value) || value < 0 || value > 1) return void 0;
|
|
2353
|
+
const percent = value * 100;
|
|
2354
|
+
if (!Number.isInteger(percent)) return void 0;
|
|
2355
|
+
return `opacity-${percent}`;
|
|
2356
|
+
}
|
|
2357
|
+
const colorAliases = {
|
|
2358
|
+
white: "#ffffff",
|
|
2359
|
+
black: "#000000",
|
|
2360
|
+
transparent: "transparent",
|
|
2361
|
+
currentcolor: "currentColor"
|
|
2362
|
+
};
|
|
2363
|
+
const colorKeywords = {
|
|
2364
|
+
inherit: "inherit",
|
|
2365
|
+
transparent: "transparent",
|
|
2366
|
+
currentcolor: "current"
|
|
2367
|
+
};
|
|
2368
|
+
function convertColor(declaration, options) {
|
|
2369
|
+
const prefix = {
|
|
2370
|
+
color: "text",
|
|
2371
|
+
fill: "fill",
|
|
2372
|
+
stroke: "stroke",
|
|
2373
|
+
"background-color": "bg",
|
|
2374
|
+
"border-color": "border",
|
|
2375
|
+
"border-top-color": "border-t",
|
|
2376
|
+
"border-right-color": "border-r",
|
|
2377
|
+
"border-bottom-color": "border-b",
|
|
2378
|
+
"border-left-color": "border-l",
|
|
2379
|
+
"border-inline-start-color": "border-s",
|
|
2380
|
+
"border-inline-end-color": "border-e",
|
|
2381
|
+
"border-inline-color": "border-x",
|
|
2382
|
+
"border-block-color": "border-y",
|
|
2383
|
+
"outline-color": "outline",
|
|
2384
|
+
"text-decoration-color": "decoration",
|
|
2385
|
+
"caret-color": "caret",
|
|
2386
|
+
"accent-color": "accent"
|
|
2387
|
+
}[declaration.property];
|
|
2388
|
+
if (!prefix || options.colorMatch === "none") return void 0;
|
|
2389
|
+
const normalized = normalizeColor(declaration.value);
|
|
2390
|
+
const keyword = colorKeywords[normalized];
|
|
2391
|
+
if (keyword) return `${prefix}-${keyword}`;
|
|
2392
|
+
const hexToken = lookupHexToken(normalized);
|
|
2393
|
+
if (hexToken) return `${prefix}-${hexToken}`;
|
|
2394
|
+
const token = Object.entries(options.theme.colors).find(([, color]) => normalizeColor(color) === normalized)?.[0];
|
|
2395
|
+
if (token) return `${prefix}-${token}`;
|
|
2396
|
+
const withOpacity = parseColorWithOpacity(normalized, options);
|
|
2397
|
+
if (withOpacity) return `${prefix}-${withOpacity}`;
|
|
2398
|
+
}
|
|
2399
|
+
function parseColorWithOpacity(value, options) {
|
|
2400
|
+
const oklchMatch = value.match(/^oklch\(([^/]+)\/\s*([\d.]+)%?\s*\)$/);
|
|
2401
|
+
if (oklchMatch) {
|
|
2402
|
+
const [, colorPart, alpha] = oklchMatch;
|
|
2403
|
+
if (!colorPart || !alpha) return void 0;
|
|
2404
|
+
const baseNormalized = normalizeColor(`oklch(${colorPart.trim()})`);
|
|
2405
|
+
const token = Object.entries(options.theme.colors).find(([, c]) => normalizeColor(c) === baseNormalized)?.[0];
|
|
2406
|
+
if (!token) return void 0;
|
|
2407
|
+
return `${token}/${Math.round(Number(alpha))}`;
|
|
2408
|
+
}
|
|
2409
|
+
const rgbaMatch = value.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d.]+)\s*\)$/);
|
|
2410
|
+
if (rgbaMatch) {
|
|
2411
|
+
const [, r, g, b, a] = rgbaMatch;
|
|
2412
|
+
if (!r || !g || !b || !a) return void 0;
|
|
2413
|
+
const baseNormalized = normalizeColor(`#${Number(r).toString(16).padStart(2, "0")}${Number(g).toString(16).padStart(2, "0")}${Number(b).toString(16).padStart(2, "0")}`);
|
|
2414
|
+
const token = Object.entries(options.theme.colors).find(([, c]) => normalizeColor(c) === baseNormalized)?.[0];
|
|
2415
|
+
if (!token) return void 0;
|
|
2416
|
+
return `${token}/${Math.round(Number(a) * 100)}`;
|
|
2417
|
+
}
|
|
2418
|
+
}
|
|
2419
|
+
function normalizeColor(value) {
|
|
2420
|
+
const normalized = value.trim().toLowerCase();
|
|
2421
|
+
const alias = colorAliases[normalized];
|
|
2422
|
+
if (alias) return alias.toLowerCase();
|
|
2423
|
+
const rgbToHex = rgbFunctionToHex(normalized);
|
|
2424
|
+
if (rgbToHex) return rgbToHex;
|
|
2425
|
+
return normalized;
|
|
2426
|
+
}
|
|
2427
|
+
function rgbFunctionToHex(value) {
|
|
2428
|
+
const match = value.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/);
|
|
2429
|
+
if (!match) {
|
|
2430
|
+
const modern = value.match(/^rgb\(\s*(\d+)\s+(\d+)\s+(\d+)\s*\)$/);
|
|
2431
|
+
if (!modern) return void 0;
|
|
2432
|
+
const [, r, g, b] = modern;
|
|
2433
|
+
if (!r || !g || !b) return void 0;
|
|
2434
|
+
return `#${toHex(Number(r))}${toHex(Number(g))}${toHex(Number(b))}`;
|
|
2435
|
+
}
|
|
2436
|
+
const [, r, g, b] = match;
|
|
2437
|
+
if (!r || !g || !b) return void 0;
|
|
2438
|
+
return `#${toHex(Number(r))}${toHex(Number(g))}${toHex(Number(b))}`;
|
|
2439
|
+
}
|
|
2440
|
+
function toHex(n) {
|
|
2441
|
+
return Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, "0");
|
|
2442
|
+
}
|
|
2443
|
+
function convertFilter(declaration) {
|
|
2444
|
+
if (declaration.property !== "filter" && declaration.property !== "backdrop-filter") return void 0;
|
|
2445
|
+
const prefix = declaration.property === "backdrop-filter" ? "backdrop-" : "";
|
|
2446
|
+
const value = declaration.value.trim().toLowerCase();
|
|
2447
|
+
const blur = value.match(/^blur\(([^)]+)\)$/)?.[1];
|
|
2448
|
+
if (blur === "8px") return `${prefix}blur`;
|
|
2449
|
+
if (blur) return `${prefix}blur-[${blur}]`;
|
|
2450
|
+
const brightness = value.match(/^brightness\(([^)]+)\)$/)?.[1];
|
|
2451
|
+
if (brightness) return percentageFilterClass(`${prefix}brightness`, brightness);
|
|
2452
|
+
const contrast = value.match(/^contrast\(([^)]+)\)$/)?.[1];
|
|
2453
|
+
if (contrast) return percentageFilterClass(`${prefix}contrast`, contrast);
|
|
2454
|
+
const grayscale = value.match(/^grayscale\(([^)]+)\)$/)?.[1];
|
|
2455
|
+
if (grayscale) return percentageFilterClass(`${prefix}grayscale`, grayscale);
|
|
2456
|
+
const invert = value.match(/^invert\(([^)]+)\)$/)?.[1];
|
|
2457
|
+
if (invert) return percentageFilterClass(`${prefix}invert`, invert);
|
|
2458
|
+
const saturate = value.match(/^saturate\(([^)]+)\)$/)?.[1];
|
|
2459
|
+
if (saturate) return percentageFilterClass(`${prefix}saturate`, saturate);
|
|
2460
|
+
const sepia = value.match(/^sepia\(([^)]+)\)$/)?.[1];
|
|
2461
|
+
if (sepia) return percentageFilterClass(`${prefix}sepia`, sepia);
|
|
2462
|
+
const hueRotate = value.match(/^hue-rotate\((-?\d+(?:\.\d+)?deg)\)$/)?.[1];
|
|
2463
|
+
if (hueRotate) return rotateClass(hueRotate)?.replace("rotate-", `${prefix}hue-rotate-`).replace("-rotate-", `-${prefix}hue-rotate-`);
|
|
2464
|
+
const opacity = value.match(/^opacity\(([^)]+)\)$/)?.[1];
|
|
2465
|
+
if (opacity && prefix === "backdrop-") return percentageFilterClass("backdrop-opacity", opacity);
|
|
2466
|
+
const dropShadow = value.match(/^drop-shadow\((.+)\)$/)?.[1];
|
|
2467
|
+
if (dropShadow && prefix === "") return dropShadowClass(dropShadow);
|
|
2468
|
+
const multi = parseMultiFilter(value, prefix);
|
|
2469
|
+
if (multi && multi.length > 0) return multi.length === 1 ? multi[0] : multi;
|
|
2470
|
+
}
|
|
2471
|
+
function parseMultiFilter(value, prefix) {
|
|
2472
|
+
const functions = value.match(/[a-z-]+\([^)]+\)/gi);
|
|
2473
|
+
if (!functions || functions.length < 2) return void 0;
|
|
2474
|
+
const classes = [];
|
|
2475
|
+
for (const fn of functions) {
|
|
2476
|
+
const cls = parseSingleFilter(fn.toLowerCase(), prefix);
|
|
2477
|
+
if (cls) classes.push(cls);
|
|
2478
|
+
}
|
|
2479
|
+
return classes.length >= 2 ? classes : void 0;
|
|
2480
|
+
}
|
|
2481
|
+
function parseSingleFilter(fn, prefix) {
|
|
2482
|
+
const blur = fn.match(/^blur\(([^)]+)\)$/)?.[1];
|
|
2483
|
+
if (blur === "8px") return `${prefix}blur`;
|
|
2484
|
+
if (blur) return `${prefix}blur-[${blur}]`;
|
|
2485
|
+
const brightness = fn.match(/^brightness\(([^)]+)\)$/)?.[1];
|
|
2486
|
+
if (brightness) return percentageFilterClass(`${prefix}brightness`, brightness);
|
|
2487
|
+
const contrast = fn.match(/^contrast\(([^)]+)\)$/)?.[1];
|
|
2488
|
+
if (contrast) return percentageFilterClass(`${prefix}contrast`, contrast);
|
|
2489
|
+
const grayscale = fn.match(/^grayscale\(([^)]+)\)$/)?.[1];
|
|
2490
|
+
if (grayscale) return percentageFilterClass(`${prefix}grayscale`, grayscale);
|
|
2491
|
+
const saturate = fn.match(/^saturate\(([^)]+)\)$/)?.[1];
|
|
2492
|
+
if (saturate) return percentageFilterClass(`${prefix}saturate`, saturate);
|
|
2493
|
+
const sepia = fn.match(/^sepia\(([^)]+)\)$/)?.[1];
|
|
2494
|
+
if (sepia) return percentageFilterClass(`${prefix}sepia`, sepia);
|
|
2495
|
+
const invert = fn.match(/^invert\(([^)]+)\)$/)?.[1];
|
|
2496
|
+
if (invert) return percentageFilterClass(`${prefix}invert`, invert);
|
|
2497
|
+
const hueRotate = fn.match(/^hue-rotate\((-?\d+(?:\.\d+)?deg)\)$/)?.[1];
|
|
2498
|
+
if (hueRotate) return rotateClass(hueRotate)?.replace("rotate-", `${prefix}hue-rotate-`).replace("-rotate-", `-${prefix}hue-rotate-`);
|
|
2499
|
+
}
|
|
2500
|
+
const dropShadowValues = {
|
|
2501
|
+
"0 1px 1px rgb(0 0 0 / 0.05)": "drop-shadow-xs",
|
|
2502
|
+
"0 1px 2px rgb(0 0 0 / 0.15)": "drop-shadow-sm",
|
|
2503
|
+
"0 3px 3px rgb(0 0 0 / 0.12)": "drop-shadow-md",
|
|
2504
|
+
"0 4px 4px rgb(0 0 0 / 0.15)": "drop-shadow-lg",
|
|
2505
|
+
"0 9px 7px rgb(0 0 0 / 0.1)": "drop-shadow-xl",
|
|
2506
|
+
"0 25px 25px rgb(0 0 0 / 0.15)": "drop-shadow-2xl"
|
|
2507
|
+
};
|
|
2508
|
+
function dropShadowClass(raw) {
|
|
2509
|
+
return dropShadowValues[raw.trim().replace(/\s+/g, " ")];
|
|
2510
|
+
}
|
|
2511
|
+
function percentageFilterClass(prefix, raw) {
|
|
2512
|
+
const normalized = raw.trim();
|
|
2513
|
+
const value = normalized.endsWith("%") ? Number(normalized.slice(0, -1)) : Number(normalized) * 100;
|
|
2514
|
+
if (!Number.isFinite(value)) return void 0;
|
|
2515
|
+
if (!Number.isInteger(value)) return `${prefix}-[${normalized}]`;
|
|
2516
|
+
if (value === 100 && (prefix.endsWith("grayscale") || prefix.endsWith("invert") || prefix.endsWith("sepia"))) return prefix;
|
|
2517
|
+
return `${prefix}-${value}`;
|
|
2518
|
+
}
|
|
2519
|
+
function convertTransform(declaration, options) {
|
|
2520
|
+
if (declaration.property === "rotate") return rotateClass(declaration.value);
|
|
2521
|
+
if (declaration.property === "scale") return scaleClass(declaration.value);
|
|
2522
|
+
if (declaration.property === "scale-x") return scaleClass(declaration.value, "scale-x");
|
|
2523
|
+
if (declaration.property === "scale-y") return scaleClass(declaration.value, "scale-y");
|
|
2524
|
+
if (declaration.property === "scale-z") return scaleClass(declaration.value, "scale-z");
|
|
2525
|
+
if (declaration.property === "translate") return translateClass(declaration.value, options);
|
|
2526
|
+
if (declaration.property === "translate-x") return translateAxisClass("translate-x", declaration.value, options);
|
|
2527
|
+
if (declaration.property === "translate-y") return translateAxisClass("translate-y", declaration.value, options);
|
|
2528
|
+
if (declaration.property === "translate-z") return translateAxisClass("translate-z", declaration.value, options);
|
|
2529
|
+
if (declaration.property === "transform") return transformClassMulti(declaration.value, options);
|
|
2530
|
+
}
|
|
2531
|
+
const transformParsers = [
|
|
2532
|
+
{
|
|
2533
|
+
pattern: /rotate\((-?\d+(?:\.\d+)?deg)\)/i,
|
|
2534
|
+
convert: (m) => rotateClass(m)
|
|
2535
|
+
},
|
|
2536
|
+
{
|
|
2537
|
+
pattern: /rotateX\((-?\d+(?:\.\d+)?deg)\)/i,
|
|
2538
|
+
convert: (m) => angleClass("rotate-x", m)
|
|
2539
|
+
},
|
|
2540
|
+
{
|
|
2541
|
+
pattern: /rotateY\((-?\d+(?:\.\d+)?deg)\)/i,
|
|
2542
|
+
convert: (m) => angleClass("rotate-y", m)
|
|
2543
|
+
},
|
|
2544
|
+
{
|
|
2545
|
+
pattern: /rotateZ\((-?\d+(?:\.\d+)?deg)\)/i,
|
|
2546
|
+
convert: (m) => angleClass("rotate-z", m)
|
|
2547
|
+
},
|
|
2548
|
+
{
|
|
2549
|
+
pattern: /scale\((-?\d+(?:\.\d+)?)\)/i,
|
|
2550
|
+
convert: (m) => scaleClass(m)
|
|
2551
|
+
},
|
|
2552
|
+
{
|
|
2553
|
+
pattern: /scaleX\((-?\d+(?:\.\d+)?)\)/i,
|
|
2554
|
+
convert: (m) => scaleClass(m, "scale-x")
|
|
2555
|
+
},
|
|
2556
|
+
{
|
|
2557
|
+
pattern: /scaleY\((-?\d+(?:\.\d+)?)\)/i,
|
|
2558
|
+
convert: (m) => scaleClass(m, "scale-y")
|
|
2559
|
+
},
|
|
2560
|
+
{
|
|
2561
|
+
pattern: /scaleZ\((-?\d+(?:\.\d+)?)\)/i,
|
|
2562
|
+
convert: (m) => scaleClass(m, "scale-z")
|
|
2563
|
+
},
|
|
2564
|
+
{
|
|
2565
|
+
pattern: /translateX\(([^)]+)\)/i,
|
|
2566
|
+
convert: (m, o) => translateAxisClass("translate-x", m, o)
|
|
2567
|
+
},
|
|
2568
|
+
{
|
|
2569
|
+
pattern: /translateY\(([^)]+)\)/i,
|
|
2570
|
+
convert: (m, o) => translateAxisClass("translate-y", m, o)
|
|
2571
|
+
},
|
|
2572
|
+
{
|
|
2573
|
+
pattern: /translateZ\(([^)]+)\)/i,
|
|
2574
|
+
convert: (m, o) => translateAxisClass("translate-z", m, o)
|
|
2575
|
+
},
|
|
2576
|
+
{
|
|
2577
|
+
pattern: /skewX\((-?\d+(?:\.\d+)?deg)\)/i,
|
|
2578
|
+
convert: (m) => angleClass("skew-x", m)
|
|
2579
|
+
},
|
|
2580
|
+
{
|
|
2581
|
+
pattern: /skewY\((-?\d+(?:\.\d+)?deg)\)/i,
|
|
2582
|
+
convert: (m) => angleClass("skew-y", m)
|
|
2583
|
+
}
|
|
2584
|
+
];
|
|
2585
|
+
function transformClassMulti(value, options) {
|
|
2586
|
+
const classes = [];
|
|
2587
|
+
for (const parser of transformParsers) {
|
|
2588
|
+
const match = value.match(parser.pattern);
|
|
2589
|
+
if (match?.[1]) {
|
|
2590
|
+
const cls = parser.convert(match[1], options);
|
|
2591
|
+
if (cls) classes.push(cls);
|
|
2592
|
+
}
|
|
2593
|
+
}
|
|
2594
|
+
if (classes.length === 0) return void 0;
|
|
2595
|
+
return classes.length === 1 ? classes[0] : classes;
|
|
2596
|
+
}
|
|
2597
|
+
function rotateClass(value) {
|
|
2598
|
+
return angleClass("rotate", value);
|
|
2599
|
+
}
|
|
2600
|
+
function angleClass(prefix, value) {
|
|
2601
|
+
const normalized = value.trim().toLowerCase();
|
|
2602
|
+
if (!normalized.endsWith("deg")) return void 0;
|
|
2603
|
+
const degrees = Number(normalized.slice(0, -3));
|
|
2604
|
+
if (!Number.isFinite(degrees)) return void 0;
|
|
2605
|
+
const absolute = Math.abs(degrees);
|
|
2606
|
+
const token = Number.isInteger(absolute) ? String(absolute) : `[${absolute}deg]`;
|
|
2607
|
+
return degrees < 0 ? `-${prefix}-${token}` : `${prefix}-${token}`;
|
|
2608
|
+
}
|
|
2609
|
+
function translateClass(value, options) {
|
|
2610
|
+
const [x, y = x] = value.trim().split(/\s+/);
|
|
2611
|
+
if (!x || y !== x) return void 0;
|
|
2612
|
+
return translateAxisClass("translate", x, options);
|
|
2613
|
+
}
|
|
2614
|
+
function translateAxisClass(prefix, value, options) {
|
|
2615
|
+
const token = spacingToken(value, options);
|
|
2616
|
+
if (!token) return void 0;
|
|
2617
|
+
return token.startsWith("-") ? `-${prefix}-${token.slice(1)}` : `${prefix}-${token}`;
|
|
2618
|
+
}
|
|
2619
|
+
function scaleClass(value, prefix = "scale") {
|
|
2620
|
+
const scale = Number(value.trim());
|
|
2621
|
+
if (!Number.isFinite(scale)) return void 0;
|
|
2622
|
+
const percent = scale * 100;
|
|
2623
|
+
if (!Number.isInteger(percent)) return `${prefix}-[${value.trim()}]`;
|
|
2624
|
+
return percent < 0 ? `-${prefix}-${Math.abs(percent)}` : `${prefix}-${percent}`;
|
|
2625
|
+
}
|
|
2626
|
+
function converted(declaration, className, kind) {
|
|
2627
|
+
const important = declaration.important ? "!" : "";
|
|
2628
|
+
const variants = declaration.variants.length > 0 ? `${declaration.variants.join(":")}:` : "";
|
|
2629
|
+
return {
|
|
2630
|
+
...declaration,
|
|
2631
|
+
className: `${important}${variants}${className}`,
|
|
2632
|
+
kind
|
|
2633
|
+
};
|
|
2634
|
+
}
|
|
2635
|
+
//#endregion
|
|
2636
|
+
//#region src/normalize.ts
|
|
2637
|
+
const unitlessProperties = new Set([
|
|
2638
|
+
"animation-iteration-count",
|
|
2639
|
+
"aspect-ratio",
|
|
2640
|
+
"border-image-outset",
|
|
2641
|
+
"border-image-slice",
|
|
2642
|
+
"border-image-width",
|
|
2643
|
+
"box-flex",
|
|
2644
|
+
"box-flex-group",
|
|
2645
|
+
"box-ordinal-group",
|
|
2646
|
+
"column-count",
|
|
2647
|
+
"columns",
|
|
2648
|
+
"flex",
|
|
2649
|
+
"flex-grow",
|
|
2650
|
+
"flex-negative",
|
|
2651
|
+
"flex-order",
|
|
2652
|
+
"flex-positive",
|
|
2653
|
+
"flex-shrink",
|
|
2654
|
+
"grid-area",
|
|
2655
|
+
"grid-column",
|
|
2656
|
+
"grid-column-end",
|
|
2657
|
+
"grid-column-start",
|
|
2658
|
+
"grid-row",
|
|
2659
|
+
"grid-row-end",
|
|
2660
|
+
"grid-row-start",
|
|
2661
|
+
"-webkit-line-clamp",
|
|
2662
|
+
"line-clamp",
|
|
2663
|
+
"line-height",
|
|
2664
|
+
"opacity",
|
|
2665
|
+
"order",
|
|
2666
|
+
"orphans",
|
|
2667
|
+
"scale",
|
|
2668
|
+
"scale-z",
|
|
2669
|
+
"stroke-width",
|
|
2670
|
+
"tab-size",
|
|
2671
|
+
"widows",
|
|
2672
|
+
"z-index",
|
|
2673
|
+
"zoom"
|
|
2674
|
+
]);
|
|
2675
|
+
function normalizeInput(input) {
|
|
2676
|
+
if (typeof input === "string") return parseCssText(input);
|
|
2677
|
+
if (isCssStyleDeclaration(input)) return Array.from({ length: input.length }, (_, index) => input.item(index)).filter(Boolean).map((property) => createDeclaration(property, input.getPropertyValue(property), input.getPropertyPriority(property) === "important"));
|
|
2678
|
+
if (isIterable(input)) return Array.from(input, ([property, value]) => normalizeEntry(property, value)).filter(Boolean);
|
|
2679
|
+
return normalizeObject(input);
|
|
2680
|
+
}
|
|
2681
|
+
function parseCssText(cssText) {
|
|
2682
|
+
return cssText.split(";").map((part) => part.trim()).filter(Boolean).map((part) => {
|
|
2683
|
+
const separator = part.indexOf(":");
|
|
2684
|
+
if (separator === -1) return void 0;
|
|
2685
|
+
return normalizeEntry(part.slice(0, separator).trim(), part.slice(separator + 1).trim());
|
|
2686
|
+
}).filter(Boolean);
|
|
2687
|
+
}
|
|
2688
|
+
function normalizeObject(input, variants = []) {
|
|
2689
|
+
return Object.entries(input).flatMap(([property, value]) => {
|
|
2690
|
+
if (isNestedStyle(value)) {
|
|
2691
|
+
const variant = variantName(property);
|
|
2692
|
+
return variant ? normalizeObject(value, [...variants, variant]) : [];
|
|
2693
|
+
}
|
|
2694
|
+
const declaration = normalizeEntry(property, value);
|
|
2695
|
+
return declaration ? [{
|
|
2696
|
+
...declaration,
|
|
2697
|
+
variants
|
|
2698
|
+
}] : [];
|
|
2699
|
+
});
|
|
2700
|
+
}
|
|
2701
|
+
function variantName(key) {
|
|
2702
|
+
if (key === "dark") return "dark";
|
|
2703
|
+
if (key.startsWith("&:")) return pseudoVariantName(key.slice(2));
|
|
2704
|
+
if (key.startsWith(":")) return pseudoVariantName(key.slice(1));
|
|
2705
|
+
if (key.startsWith("@media")) return mediaVariantName(key);
|
|
2706
|
+
if (key.startsWith("@supports")) return `supports-[${key.slice(9).trim()}]`;
|
|
2707
|
+
if (key.startsWith("@container")) return containerVariantName(key);
|
|
2708
|
+
}
|
|
2709
|
+
function containerVariantName(query) {
|
|
2710
|
+
const normalized = query.replace(/\s+/g, " ").trim();
|
|
2711
|
+
const sizeMatch = normalized.match(/@container\s*\(min-width:\s*(\d+)px\)/);
|
|
2712
|
+
if (sizeMatch) {
|
|
2713
|
+
const px = Number(sizeMatch[1]);
|
|
2714
|
+
return {
|
|
2715
|
+
320: "@xs",
|
|
2716
|
+
384: "@sm",
|
|
2717
|
+
448: "@md",
|
|
2718
|
+
512: "@lg",
|
|
2719
|
+
576: "@xl",
|
|
2720
|
+
672: "@2xl",
|
|
2721
|
+
768: "@3xl",
|
|
2722
|
+
896: "@4xl",
|
|
2723
|
+
1024: "@5xl",
|
|
2724
|
+
1152: "@6xl",
|
|
2725
|
+
1280: "@7xl"
|
|
2726
|
+
}[px] ?? `@min-[${px}px]`;
|
|
2727
|
+
}
|
|
2728
|
+
return `@container-[${normalized.replace(/^@container\s*/, "")}]`;
|
|
2729
|
+
}
|
|
2730
|
+
function pseudoVariantName(pseudo) {
|
|
2731
|
+
return pseudo.replace(/^:/, "").replace(/-child$/, "").replace(/-of-type$/, "-of-type");
|
|
2732
|
+
}
|
|
2733
|
+
function mediaVariantName(query) {
|
|
2734
|
+
const normalized = query.replace(/\s+/g, " ").trim();
|
|
2735
|
+
if (/min-width:\s*640px/.test(normalized)) return "sm";
|
|
2736
|
+
if (/min-width:\s*768px/.test(normalized)) return "md";
|
|
2737
|
+
if (/min-width:\s*1024px/.test(normalized)) return "lg";
|
|
2738
|
+
if (/min-width:\s*1280px/.test(normalized)) return "xl";
|
|
2739
|
+
if (/min-width:\s*1536px/.test(normalized)) return "2xl";
|
|
2740
|
+
if (/prefers-color-scheme:\s*dark/.test(normalized)) return "dark";
|
|
2741
|
+
if (/prefers-color-scheme:\s*light/.test(normalized)) return "light";
|
|
2742
|
+
if (/prefers-reduced-motion:\s*reduce/.test(normalized)) return "motion-reduce";
|
|
2743
|
+
if (/prefers-reduced-motion:\s*no-preference/.test(normalized)) return "motion-safe";
|
|
2744
|
+
if (/prefers-contrast:\s*more/.test(normalized)) return "contrast-more";
|
|
2745
|
+
if (/prefers-contrast:\s*less/.test(normalized)) return "contrast-less";
|
|
2746
|
+
if (/\(hover:\s*hover\)/.test(normalized)) return "hover";
|
|
2747
|
+
if (/\(pointer:\s*fine\)/.test(normalized)) return "pointer-fine";
|
|
2748
|
+
if (/\(pointer:\s*coarse\)/.test(normalized)) return "pointer-coarse";
|
|
2749
|
+
if (/print/.test(normalized)) return "print";
|
|
2750
|
+
if (/\(orientation:\s*portrait\)/.test(normalized)) return "portrait";
|
|
2751
|
+
if (/\(orientation:\s*landscape\)/.test(normalized)) return "landscape";
|
|
2752
|
+
return `media-[${normalized.replace(/^@media\s*/, "")}]`;
|
|
2753
|
+
}
|
|
2754
|
+
function normalizeEntry(propertyName, primitive) {
|
|
2755
|
+
if (primitive === null || primitive === void 0 || primitive === "") return;
|
|
2756
|
+
const property = normalizePropertyName(propertyName);
|
|
2757
|
+
const { value, important } = normalizeValue(property, primitive);
|
|
2758
|
+
return createDeclaration(property, value, important);
|
|
2759
|
+
}
|
|
2760
|
+
function normalizePropertyName(propertyName) {
|
|
2761
|
+
if (propertyName.startsWith("--")) return propertyName;
|
|
2762
|
+
return propertyName.replace(/^Webkit/, "-webkit").replace(/^Moz/, "-moz").replace(/^ms/, "-ms").replace(/^O/, "-o").replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
|
|
2763
|
+
}
|
|
2764
|
+
function normalizeValue(property, primitive) {
|
|
2765
|
+
const rawValue = typeof primitive === "number" && primitive !== 0 && !unitlessProperties.has(property) ? `${primitive}px` : String(primitive).trim();
|
|
2766
|
+
if (rawValue.endsWith("!important")) return {
|
|
2767
|
+
value: rawValue.slice(0, -10).trim(),
|
|
2768
|
+
important: true
|
|
2769
|
+
};
|
|
2770
|
+
return {
|
|
2771
|
+
value: rawValue,
|
|
2772
|
+
important: false
|
|
2773
|
+
};
|
|
2774
|
+
}
|
|
2775
|
+
function createDeclaration(property, value, important) {
|
|
2776
|
+
return {
|
|
2777
|
+
property,
|
|
2778
|
+
value,
|
|
2779
|
+
important,
|
|
2780
|
+
variants: []
|
|
2781
|
+
};
|
|
2782
|
+
}
|
|
2783
|
+
function isCssStyleDeclaration(value) {
|
|
2784
|
+
return typeof CSSStyleDeclaration !== "undefined" && value instanceof CSSStyleDeclaration;
|
|
2785
|
+
}
|
|
2786
|
+
function isIterable(value) {
|
|
2787
|
+
return typeof value === "object" && value !== null && Symbol.iterator in value;
|
|
2788
|
+
}
|
|
2789
|
+
function isNestedStyle(value) {
|
|
2790
|
+
return typeof value === "object" && value !== null;
|
|
2791
|
+
}
|
|
2792
|
+
//#endregion
|
|
2793
|
+
//#region src/value.ts
|
|
2794
|
+
function splitCssValueList(value) {
|
|
2795
|
+
const parts = [];
|
|
2796
|
+
let current = "";
|
|
2797
|
+
let depth = 0;
|
|
2798
|
+
let quote;
|
|
2799
|
+
for (const char of value.trim()) {
|
|
2800
|
+
if (quote) {
|
|
2801
|
+
current += char;
|
|
2802
|
+
if (char === quote) quote = void 0;
|
|
2803
|
+
continue;
|
|
2804
|
+
}
|
|
2805
|
+
if (char === "\"" || char === "'") {
|
|
2806
|
+
quote = char;
|
|
2807
|
+
current += char;
|
|
2808
|
+
continue;
|
|
2809
|
+
}
|
|
2810
|
+
if (char === "(") depth += 1;
|
|
2811
|
+
if (char === ")") depth = Math.max(0, depth - 1);
|
|
2812
|
+
if (/\s/.test(char) && depth === 0) {
|
|
2813
|
+
if (current) {
|
|
2814
|
+
parts.push(current);
|
|
2815
|
+
current = "";
|
|
2816
|
+
}
|
|
2817
|
+
continue;
|
|
2818
|
+
}
|
|
2819
|
+
current += char;
|
|
2820
|
+
}
|
|
2821
|
+
if (current) parts.push(current);
|
|
2822
|
+
return parts;
|
|
2823
|
+
}
|
|
2824
|
+
//#endregion
|
|
2825
|
+
//#region src/shorthands.ts
|
|
2826
|
+
const boxShorthands = {
|
|
2827
|
+
margin: [
|
|
2828
|
+
"margin-top",
|
|
2829
|
+
"margin-right",
|
|
2830
|
+
"margin-bottom",
|
|
2831
|
+
"margin-left"
|
|
2832
|
+
],
|
|
2833
|
+
padding: [
|
|
2834
|
+
"padding-top",
|
|
2835
|
+
"padding-right",
|
|
2836
|
+
"padding-bottom",
|
|
2837
|
+
"padding-left"
|
|
2838
|
+
],
|
|
2839
|
+
inset: [
|
|
2840
|
+
"top",
|
|
2841
|
+
"right",
|
|
2842
|
+
"bottom",
|
|
2843
|
+
"left"
|
|
2844
|
+
],
|
|
2845
|
+
"border-color": [
|
|
2846
|
+
"border-top-color",
|
|
2847
|
+
"border-right-color",
|
|
2848
|
+
"border-bottom-color",
|
|
2849
|
+
"border-left-color"
|
|
2850
|
+
],
|
|
2851
|
+
"border-style": [
|
|
2852
|
+
"border-top-style",
|
|
2853
|
+
"border-right-style",
|
|
2854
|
+
"border-bottom-style",
|
|
2855
|
+
"border-left-style"
|
|
2856
|
+
],
|
|
2857
|
+
"border-width": [
|
|
2858
|
+
"border-top-width",
|
|
2859
|
+
"border-right-width",
|
|
2860
|
+
"border-bottom-width",
|
|
2861
|
+
"border-left-width"
|
|
2862
|
+
],
|
|
2863
|
+
"border-radius": [
|
|
2864
|
+
"border-top-left-radius",
|
|
2865
|
+
"border-top-right-radius",
|
|
2866
|
+
"border-bottom-right-radius",
|
|
2867
|
+
"border-bottom-left-radius"
|
|
2868
|
+
],
|
|
2869
|
+
"scroll-margin": [
|
|
2870
|
+
"scroll-margin-top",
|
|
2871
|
+
"scroll-margin-right",
|
|
2872
|
+
"scroll-margin-bottom",
|
|
2873
|
+
"scroll-margin-left"
|
|
2874
|
+
],
|
|
2875
|
+
"scroll-padding": [
|
|
2876
|
+
"scroll-padding-top",
|
|
2877
|
+
"scroll-padding-right",
|
|
2878
|
+
"scroll-padding-bottom",
|
|
2879
|
+
"scroll-padding-left"
|
|
2880
|
+
]
|
|
2881
|
+
};
|
|
2882
|
+
const logicalPairShorthands = {
|
|
2883
|
+
"overscroll-behavior": ["overscroll-behavior-x", "overscroll-behavior-y"],
|
|
2884
|
+
"margin-inline": ["margin-inline-start", "margin-inline-end"],
|
|
2885
|
+
"margin-block": ["margin-block-start", "margin-block-end"],
|
|
2886
|
+
"padding-inline": ["padding-inline-start", "padding-inline-end"],
|
|
2887
|
+
"padding-block": ["padding-block-start", "padding-block-end"],
|
|
2888
|
+
"inset-inline": ["inset-inline-start", "inset-inline-end"],
|
|
2889
|
+
"inset-block": ["top", "bottom"],
|
|
2890
|
+
"scroll-margin-inline": ["scroll-margin-inline-start", "scroll-margin-inline-end"],
|
|
2891
|
+
"scroll-margin-block": ["scroll-margin-block-start", "scroll-margin-block-end"],
|
|
2892
|
+
"scroll-padding-inline": ["scroll-padding-inline-start", "scroll-padding-inline-end"],
|
|
2893
|
+
"scroll-padding-block": ["scroll-padding-block-start", "scroll-padding-block-end"]
|
|
2894
|
+
};
|
|
2895
|
+
function expandShorthands(declarations) {
|
|
2896
|
+
return declarations.flatMap((declaration) => {
|
|
2897
|
+
const overflow = expandOverflow(declaration);
|
|
2898
|
+
if (overflow) return overflow;
|
|
2899
|
+
const gap = expandGap(declaration);
|
|
2900
|
+
if (gap) return gap;
|
|
2901
|
+
const place = expandPlace(declaration);
|
|
2902
|
+
if (place) return place;
|
|
2903
|
+
const logicalPair = expandLogicalPair(declaration);
|
|
2904
|
+
if (logicalPair) return logicalPair;
|
|
2905
|
+
const listStyle = expandListStyle(declaration);
|
|
2906
|
+
if (listStyle) return listStyle;
|
|
2907
|
+
const outline = expandOutline(declaration);
|
|
2908
|
+
if (outline) return outline;
|
|
2909
|
+
const textDecoration = expandTextDecoration(declaration);
|
|
2910
|
+
if (textDecoration) return textDecoration;
|
|
2911
|
+
const transition = expandTransition(declaration);
|
|
2912
|
+
if (transition) return transition;
|
|
2913
|
+
const border = expandBorderCombined(declaration);
|
|
2914
|
+
if (border) return border;
|
|
2915
|
+
const columnRule = expandColumnRule(declaration);
|
|
2916
|
+
if (columnRule) return columnRule;
|
|
2917
|
+
const sizeExpanded = expandSize(declaration);
|
|
2918
|
+
if (sizeExpanded) return sizeExpanded;
|
|
2919
|
+
const font = expandFont(declaration);
|
|
2920
|
+
if (font) return font;
|
|
2921
|
+
const background = expandBackground(declaration);
|
|
2922
|
+
if (background) return background;
|
|
2923
|
+
const longhands = boxShorthands[declaration.property];
|
|
2924
|
+
if (!longhands) return [declaration];
|
|
2925
|
+
const values = splitBoxValue(declaration.value);
|
|
2926
|
+
if (!values) return [declaration];
|
|
2927
|
+
return [
|
|
2928
|
+
{
|
|
2929
|
+
...declaration,
|
|
2930
|
+
property: longhands[0],
|
|
2931
|
+
value: values[0]
|
|
2932
|
+
},
|
|
2933
|
+
{
|
|
2934
|
+
...declaration,
|
|
2935
|
+
property: longhands[1],
|
|
2936
|
+
value: values[1]
|
|
2937
|
+
},
|
|
2938
|
+
{
|
|
2939
|
+
...declaration,
|
|
2940
|
+
property: longhands[2],
|
|
2941
|
+
value: values[2]
|
|
2942
|
+
},
|
|
2943
|
+
{
|
|
2944
|
+
...declaration,
|
|
2945
|
+
property: longhands[3],
|
|
2946
|
+
value: values[3]
|
|
2947
|
+
}
|
|
2948
|
+
];
|
|
2949
|
+
});
|
|
2950
|
+
}
|
|
2951
|
+
function expandBackground(declaration) {
|
|
2952
|
+
if (declaration.property !== "background") return void 0;
|
|
2953
|
+
const parts = splitCssValueList(declaration.value);
|
|
2954
|
+
if (parts.length < 1) return void 0;
|
|
2955
|
+
const bgRepeats = new Set([
|
|
2956
|
+
"repeat",
|
|
2957
|
+
"no-repeat",
|
|
2958
|
+
"repeat-x",
|
|
2959
|
+
"repeat-y",
|
|
2960
|
+
"space",
|
|
2961
|
+
"round"
|
|
2962
|
+
]);
|
|
2963
|
+
const bgSizes = new Set(["cover", "contain"]);
|
|
2964
|
+
const bgAttachments = new Set([
|
|
2965
|
+
"fixed",
|
|
2966
|
+
"local",
|
|
2967
|
+
"scroll"
|
|
2968
|
+
]);
|
|
2969
|
+
const bgPositions = new Set([
|
|
2970
|
+
"center",
|
|
2971
|
+
"top",
|
|
2972
|
+
"bottom",
|
|
2973
|
+
"left",
|
|
2974
|
+
"right"
|
|
2975
|
+
]);
|
|
2976
|
+
const expanded = [];
|
|
2977
|
+
for (const part of parts) if (bgRepeats.has(part)) expanded.push({
|
|
2978
|
+
...declaration,
|
|
2979
|
+
property: "background-repeat",
|
|
2980
|
+
value: part
|
|
2981
|
+
});
|
|
2982
|
+
else if (bgSizes.has(part)) expanded.push({
|
|
2983
|
+
...declaration,
|
|
2984
|
+
property: "background-size",
|
|
2985
|
+
value: part
|
|
2986
|
+
});
|
|
2987
|
+
else if (bgAttachments.has(part)) expanded.push({
|
|
2988
|
+
...declaration,
|
|
2989
|
+
property: "background-attachment",
|
|
2990
|
+
value: part
|
|
2991
|
+
});
|
|
2992
|
+
else if (bgPositions.has(part)) expanded.push({
|
|
2993
|
+
...declaration,
|
|
2994
|
+
property: "background-position",
|
|
2995
|
+
value: part
|
|
2996
|
+
});
|
|
2997
|
+
else if (part === "none") expanded.push({
|
|
2998
|
+
...declaration,
|
|
2999
|
+
property: "background-image",
|
|
3000
|
+
value: "none"
|
|
3001
|
+
});
|
|
3002
|
+
else if (!expanded.some((d) => d.property === "background-color")) expanded.push({
|
|
3003
|
+
...declaration,
|
|
3004
|
+
property: "background-color",
|
|
3005
|
+
value: part
|
|
3006
|
+
});
|
|
3007
|
+
return expanded.length > 0 ? expanded : void 0;
|
|
3008
|
+
}
|
|
3009
|
+
function expandFont(declaration) {
|
|
3010
|
+
if (declaration.property !== "font") return void 0;
|
|
3011
|
+
const weights = new Set([
|
|
3012
|
+
"normal",
|
|
3013
|
+
"bold",
|
|
3014
|
+
"100",
|
|
3015
|
+
"200",
|
|
3016
|
+
"300",
|
|
3017
|
+
"400",
|
|
3018
|
+
"500",
|
|
3019
|
+
"600",
|
|
3020
|
+
"700",
|
|
3021
|
+
"800",
|
|
3022
|
+
"900"
|
|
3023
|
+
]);
|
|
3024
|
+
const fontStyles = new Set(["italic", "oblique"]);
|
|
3025
|
+
const parts = splitCssValueList(declaration.value);
|
|
3026
|
+
if (parts.length < 2) return void 0;
|
|
3027
|
+
const expanded = [];
|
|
3028
|
+
for (const part of parts) if (fontStyles.has(part)) expanded.push({
|
|
3029
|
+
...declaration,
|
|
3030
|
+
property: "font-style",
|
|
3031
|
+
value: part
|
|
3032
|
+
});
|
|
3033
|
+
else if (weights.has(part)) expanded.push({
|
|
3034
|
+
...declaration,
|
|
3035
|
+
property: "font-weight",
|
|
3036
|
+
value: part
|
|
3037
|
+
});
|
|
3038
|
+
else if (part.includes("/")) {
|
|
3039
|
+
const [size, lineHeight] = part.split("/");
|
|
3040
|
+
if (size) expanded.push({
|
|
3041
|
+
...declaration,
|
|
3042
|
+
property: "font-size",
|
|
3043
|
+
value: size
|
|
3044
|
+
});
|
|
3045
|
+
if (lineHeight) expanded.push({
|
|
3046
|
+
...declaration,
|
|
3047
|
+
property: "line-height",
|
|
3048
|
+
value: lineHeight
|
|
3049
|
+
});
|
|
3050
|
+
} else if (/^\d/.test(part)) expanded.push({
|
|
3051
|
+
...declaration,
|
|
3052
|
+
property: "font-size",
|
|
3053
|
+
value: part
|
|
3054
|
+
});
|
|
3055
|
+
else if (!expanded.some((d) => d.property === "font-family")) expanded.push({
|
|
3056
|
+
...declaration,
|
|
3057
|
+
property: "font-family",
|
|
3058
|
+
value: part
|
|
3059
|
+
});
|
|
3060
|
+
return expanded.length >= 2 ? expanded : void 0;
|
|
3061
|
+
}
|
|
3062
|
+
function expandSize(declaration) {
|
|
3063
|
+
if (declaration.property !== "size") return void 0;
|
|
3064
|
+
const parts = splitCssValueList(declaration.value);
|
|
3065
|
+
if (parts.length === 1 && parts[0]) return [{
|
|
3066
|
+
...declaration,
|
|
3067
|
+
property: "width",
|
|
3068
|
+
value: parts[0]
|
|
3069
|
+
}, {
|
|
3070
|
+
...declaration,
|
|
3071
|
+
property: "height",
|
|
3072
|
+
value: parts[0]
|
|
3073
|
+
}];
|
|
3074
|
+
if (parts.length === 2) {
|
|
3075
|
+
const [w, h] = parts;
|
|
3076
|
+
if (!w || !h) return void 0;
|
|
3077
|
+
return [{
|
|
3078
|
+
...declaration,
|
|
3079
|
+
property: "width",
|
|
3080
|
+
value: w
|
|
3081
|
+
}, {
|
|
3082
|
+
...declaration,
|
|
3083
|
+
property: "height",
|
|
3084
|
+
value: h
|
|
3085
|
+
}];
|
|
3086
|
+
}
|
|
3087
|
+
}
|
|
3088
|
+
function expandColumnRule(declaration) {
|
|
3089
|
+
if (declaration.property !== "column-rule") return void 0;
|
|
3090
|
+
const parts = splitCssValueList(declaration.value);
|
|
3091
|
+
if (parts.length < 2) return void 0;
|
|
3092
|
+
const ruleStyles = new Set([
|
|
3093
|
+
"none",
|
|
3094
|
+
"solid",
|
|
3095
|
+
"dashed",
|
|
3096
|
+
"dotted",
|
|
3097
|
+
"double",
|
|
3098
|
+
"groove",
|
|
3099
|
+
"ridge",
|
|
3100
|
+
"inset",
|
|
3101
|
+
"outset"
|
|
3102
|
+
]);
|
|
3103
|
+
const expanded = [];
|
|
3104
|
+
for (const part of parts) if (ruleStyles.has(part)) expanded.push({
|
|
3105
|
+
...declaration,
|
|
3106
|
+
property: "column-rule-style",
|
|
3107
|
+
value: part
|
|
3108
|
+
});
|
|
3109
|
+
else if (/^\d/.test(part)) expanded.push({
|
|
3110
|
+
...declaration,
|
|
3111
|
+
property: "column-rule-width",
|
|
3112
|
+
value: part
|
|
3113
|
+
});
|
|
3114
|
+
else expanded.push({
|
|
3115
|
+
...declaration,
|
|
3116
|
+
property: "column-rule-color",
|
|
3117
|
+
value: part
|
|
3118
|
+
});
|
|
3119
|
+
return expanded.length >= 2 ? expanded : void 0;
|
|
3120
|
+
}
|
|
3121
|
+
function expandBorderCombined(declaration) {
|
|
3122
|
+
const longhands = {
|
|
3123
|
+
border: [
|
|
3124
|
+
"border-width",
|
|
3125
|
+
"border-style",
|
|
3126
|
+
"border-color"
|
|
3127
|
+
],
|
|
3128
|
+
"border-top": [
|
|
3129
|
+
"border-top-width",
|
|
3130
|
+
"border-top-style",
|
|
3131
|
+
"border-top-color"
|
|
3132
|
+
],
|
|
3133
|
+
"border-right": [
|
|
3134
|
+
"border-right-width",
|
|
3135
|
+
"border-right-style",
|
|
3136
|
+
"border-right-color"
|
|
3137
|
+
],
|
|
3138
|
+
"border-bottom": [
|
|
3139
|
+
"border-bottom-width",
|
|
3140
|
+
"border-bottom-style",
|
|
3141
|
+
"border-bottom-color"
|
|
3142
|
+
],
|
|
3143
|
+
"border-left": [
|
|
3144
|
+
"border-left-width",
|
|
3145
|
+
"border-left-style",
|
|
3146
|
+
"border-left-color"
|
|
3147
|
+
],
|
|
3148
|
+
"border-inline-start": [
|
|
3149
|
+
"border-inline-start-width",
|
|
3150
|
+
"border-inline-start-style",
|
|
3151
|
+
"border-inline-start-color"
|
|
3152
|
+
],
|
|
3153
|
+
"border-inline-end": [
|
|
3154
|
+
"border-inline-end-width",
|
|
3155
|
+
"border-inline-end-style",
|
|
3156
|
+
"border-inline-end-color"
|
|
3157
|
+
],
|
|
3158
|
+
"border-block": [
|
|
3159
|
+
"border-block-width",
|
|
3160
|
+
"border-block-style",
|
|
3161
|
+
"border-block-color"
|
|
3162
|
+
],
|
|
3163
|
+
"border-block-start": [
|
|
3164
|
+
"border-block-start-width",
|
|
3165
|
+
"border-block-start-style",
|
|
3166
|
+
"border-block-start-color"
|
|
3167
|
+
],
|
|
3168
|
+
"border-block-end": [
|
|
3169
|
+
"border-block-end-width",
|
|
3170
|
+
"border-block-end-style",
|
|
3171
|
+
"border-block-end-color"
|
|
3172
|
+
],
|
|
3173
|
+
"border-inline": [
|
|
3174
|
+
"border-inline-width",
|
|
3175
|
+
"border-inline-style",
|
|
3176
|
+
"border-inline-color"
|
|
3177
|
+
]
|
|
3178
|
+
}[declaration.property];
|
|
3179
|
+
if (!longhands) return void 0;
|
|
3180
|
+
const parts = splitCssValueList(declaration.value);
|
|
3181
|
+
if (parts.length < 2 || parts.length > 3) return void 0;
|
|
3182
|
+
const borderStyles = new Set([
|
|
3183
|
+
"none",
|
|
3184
|
+
"hidden",
|
|
3185
|
+
"solid",
|
|
3186
|
+
"dashed",
|
|
3187
|
+
"dotted",
|
|
3188
|
+
"double",
|
|
3189
|
+
"groove",
|
|
3190
|
+
"ridge",
|
|
3191
|
+
"inset",
|
|
3192
|
+
"outset"
|
|
3193
|
+
]);
|
|
3194
|
+
const expanded = [];
|
|
3195
|
+
for (const part of parts) if (borderStyles.has(part)) expanded.push({
|
|
3196
|
+
...declaration,
|
|
3197
|
+
property: longhands[1],
|
|
3198
|
+
value: part
|
|
3199
|
+
});
|
|
3200
|
+
else if (/^\d/.test(part)) expanded.push({
|
|
3201
|
+
...declaration,
|
|
3202
|
+
property: longhands[0],
|
|
3203
|
+
value: part
|
|
3204
|
+
});
|
|
3205
|
+
else expanded.push({
|
|
3206
|
+
...declaration,
|
|
3207
|
+
property: longhands[2],
|
|
3208
|
+
value: part
|
|
3209
|
+
});
|
|
3210
|
+
return expanded.length >= 2 ? expanded : void 0;
|
|
3211
|
+
}
|
|
3212
|
+
function expandTransition(declaration) {
|
|
3213
|
+
if (declaration.property !== "transition" || declaration.value === "none") return void 0;
|
|
3214
|
+
const parts = declaration.value.split(/\s+/);
|
|
3215
|
+
const expanded = [];
|
|
3216
|
+
for (const part of parts) if (/^\d/.test(part) && (part.endsWith("ms") || part.endsWith("s"))) {
|
|
3217
|
+
if (!expanded.some((d) => d.property === "transition-duration")) expanded.push({
|
|
3218
|
+
...declaration,
|
|
3219
|
+
property: "transition-duration",
|
|
3220
|
+
value: part
|
|
3221
|
+
});
|
|
3222
|
+
else if (!expanded.some((d) => d.property === "transition-delay")) expanded.push({
|
|
3223
|
+
...declaration,
|
|
3224
|
+
property: "transition-delay",
|
|
3225
|
+
value: part
|
|
3226
|
+
});
|
|
3227
|
+
} else if ([
|
|
3228
|
+
"ease",
|
|
3229
|
+
"ease-in",
|
|
3230
|
+
"ease-out",
|
|
3231
|
+
"ease-in-out",
|
|
3232
|
+
"linear"
|
|
3233
|
+
].includes(part)) expanded.push({
|
|
3234
|
+
...declaration,
|
|
3235
|
+
property: "transition-timing-function",
|
|
3236
|
+
value: part
|
|
3237
|
+
});
|
|
3238
|
+
else if ([
|
|
3239
|
+
"all",
|
|
3240
|
+
"none",
|
|
3241
|
+
"color",
|
|
3242
|
+
"opacity",
|
|
3243
|
+
"shadow",
|
|
3244
|
+
"transform"
|
|
3245
|
+
].includes(part)) expanded.push({
|
|
3246
|
+
...declaration,
|
|
3247
|
+
property: "transition-property",
|
|
3248
|
+
value: part
|
|
3249
|
+
});
|
|
3250
|
+
return expanded.length > 0 ? expanded : void 0;
|
|
3251
|
+
}
|
|
3252
|
+
function expandOutline(declaration) {
|
|
3253
|
+
if (declaration.property !== "outline") return void 0;
|
|
3254
|
+
const parts = splitCssValueList(declaration.value);
|
|
3255
|
+
if (parts.length < 2) return void 0;
|
|
3256
|
+
const outlineStyles = new Set([
|
|
3257
|
+
"none",
|
|
3258
|
+
"solid",
|
|
3259
|
+
"dashed",
|
|
3260
|
+
"dotted",
|
|
3261
|
+
"double",
|
|
3262
|
+
"groove",
|
|
3263
|
+
"ridge",
|
|
3264
|
+
"inset",
|
|
3265
|
+
"outset"
|
|
3266
|
+
]);
|
|
3267
|
+
const expanded = [];
|
|
3268
|
+
for (const part of parts) if (outlineStyles.has(part)) expanded.push({
|
|
3269
|
+
...declaration,
|
|
3270
|
+
property: "outline-style",
|
|
3271
|
+
value: part
|
|
3272
|
+
});
|
|
3273
|
+
else if (/^\d/.test(part)) expanded.push({
|
|
3274
|
+
...declaration,
|
|
3275
|
+
property: "outline-width",
|
|
3276
|
+
value: part
|
|
3277
|
+
});
|
|
3278
|
+
else expanded.push({
|
|
3279
|
+
...declaration,
|
|
3280
|
+
property: "outline-color",
|
|
3281
|
+
value: part
|
|
3282
|
+
});
|
|
3283
|
+
return expanded.length > 0 ? expanded : void 0;
|
|
3284
|
+
}
|
|
3285
|
+
function expandTextDecoration(declaration) {
|
|
3286
|
+
if (declaration.property !== "text-decoration") return void 0;
|
|
3287
|
+
const parts = splitCssValueList(declaration.value);
|
|
3288
|
+
if (parts.length < 1) return void 0;
|
|
3289
|
+
const lines = new Set([
|
|
3290
|
+
"underline",
|
|
3291
|
+
"overline",
|
|
3292
|
+
"line-through",
|
|
3293
|
+
"none"
|
|
3294
|
+
]);
|
|
3295
|
+
const styles = new Set([
|
|
3296
|
+
"solid",
|
|
3297
|
+
"double",
|
|
3298
|
+
"dotted",
|
|
3299
|
+
"dashed",
|
|
3300
|
+
"wavy"
|
|
3301
|
+
]);
|
|
3302
|
+
const expanded = [];
|
|
3303
|
+
for (const part of parts) if (lines.has(part)) expanded.push({
|
|
3304
|
+
...declaration,
|
|
3305
|
+
property: "text-decoration-line",
|
|
3306
|
+
value: part
|
|
3307
|
+
});
|
|
3308
|
+
else if (styles.has(part)) expanded.push({
|
|
3309
|
+
...declaration,
|
|
3310
|
+
property: "text-decoration-style",
|
|
3311
|
+
value: part
|
|
3312
|
+
});
|
|
3313
|
+
return expanded.length > 0 ? expanded : void 0;
|
|
3314
|
+
}
|
|
3315
|
+
function expandListStyle(declaration) {
|
|
3316
|
+
if (declaration.property !== "list-style") return void 0;
|
|
3317
|
+
const parts = splitCssValueList(declaration.value);
|
|
3318
|
+
if (parts.length === 0) return void 0;
|
|
3319
|
+
const expanded = parts.flatMap((value) => {
|
|
3320
|
+
if (value === "inside" || value === "outside") return [{
|
|
3321
|
+
...declaration,
|
|
3322
|
+
property: "list-style-position",
|
|
3323
|
+
value
|
|
3324
|
+
}];
|
|
3325
|
+
if (value === "disc" || value === "decimal" || value === "none") return [{
|
|
3326
|
+
...declaration,
|
|
3327
|
+
property: "list-style-type",
|
|
3328
|
+
value
|
|
3329
|
+
}];
|
|
3330
|
+
return [];
|
|
3331
|
+
});
|
|
3332
|
+
return expanded.length > 0 ? expanded : void 0;
|
|
3333
|
+
}
|
|
3334
|
+
function expandGap(declaration) {
|
|
3335
|
+
if (declaration.property !== "gap") return void 0;
|
|
3336
|
+
const parts = splitCssValueList(declaration.value);
|
|
3337
|
+
if (parts.length !== 2 || parts.some((part) => part.length === 0)) return void 0;
|
|
3338
|
+
const [row, col] = parts;
|
|
3339
|
+
if (!row || !col) return void 0;
|
|
3340
|
+
return [{
|
|
3341
|
+
...declaration,
|
|
3342
|
+
property: "row-gap",
|
|
3343
|
+
value: row
|
|
3344
|
+
}, {
|
|
3345
|
+
...declaration,
|
|
3346
|
+
property: "column-gap",
|
|
3347
|
+
value: col
|
|
3348
|
+
}];
|
|
3349
|
+
}
|
|
3350
|
+
function expandPlace(declaration) {
|
|
3351
|
+
const longhands = {
|
|
3352
|
+
"place-items": ["align-items", "justify-items"],
|
|
3353
|
+
"place-content": ["align-content", "justify-content"],
|
|
3354
|
+
"place-self": ["align-self", "justify-self"]
|
|
3355
|
+
}[declaration.property];
|
|
3356
|
+
if (!longhands) return void 0;
|
|
3357
|
+
const parts = splitCssValueList(declaration.value);
|
|
3358
|
+
if (parts.length !== 2 || parts.some((part) => part.length === 0)) return void 0;
|
|
3359
|
+
const [align, justify] = parts;
|
|
3360
|
+
if (!align || !justify) return void 0;
|
|
3361
|
+
return [{
|
|
3362
|
+
...declaration,
|
|
3363
|
+
property: longhands[0],
|
|
3364
|
+
value: align
|
|
3365
|
+
}, {
|
|
3366
|
+
...declaration,
|
|
3367
|
+
property: longhands[1],
|
|
3368
|
+
value: justify
|
|
3369
|
+
}];
|
|
3370
|
+
}
|
|
3371
|
+
function expandLogicalPair(declaration) {
|
|
3372
|
+
const longhands = logicalPairShorthands[declaration.property];
|
|
3373
|
+
if (!longhands) return void 0;
|
|
3374
|
+
const parts = splitCssValueList(declaration.value);
|
|
3375
|
+
if (parts.length !== 2 || parts.some((part) => part.length === 0)) return void 0;
|
|
3376
|
+
const [start, end] = parts;
|
|
3377
|
+
if (!start || !end) return void 0;
|
|
3378
|
+
return [{
|
|
3379
|
+
...declaration,
|
|
3380
|
+
property: longhands[0],
|
|
3381
|
+
value: start
|
|
3382
|
+
}, {
|
|
3383
|
+
...declaration,
|
|
3384
|
+
property: longhands[1],
|
|
3385
|
+
value: end
|
|
3386
|
+
}];
|
|
3387
|
+
}
|
|
3388
|
+
function expandOverflow(declaration) {
|
|
3389
|
+
if (declaration.property !== "overflow") return void 0;
|
|
3390
|
+
const parts = splitCssValueList(declaration.value);
|
|
3391
|
+
if (parts.length !== 2 || parts.some((part) => part.length === 0)) return void 0;
|
|
3392
|
+
const [x, y] = parts;
|
|
3393
|
+
if (!x || !y) return void 0;
|
|
3394
|
+
return [{
|
|
3395
|
+
...declaration,
|
|
3396
|
+
property: "overflow-x",
|
|
3397
|
+
value: x
|
|
3398
|
+
}, {
|
|
3399
|
+
...declaration,
|
|
3400
|
+
property: "overflow-y",
|
|
3401
|
+
value: y
|
|
3402
|
+
}];
|
|
3403
|
+
}
|
|
3404
|
+
function splitBoxValue(value) {
|
|
3405
|
+
const parts = splitCssValueList(value);
|
|
3406
|
+
if (parts.length < 1 || parts.length > 4 || parts.some((part) => part.length === 0)) return void 0;
|
|
3407
|
+
const [top, right = top, bottom = top, left = right] = parts;
|
|
3408
|
+
if (!top || !right || !bottom || !left) return void 0;
|
|
3409
|
+
return [
|
|
3410
|
+
top,
|
|
3411
|
+
right,
|
|
3412
|
+
bottom,
|
|
3413
|
+
left
|
|
3414
|
+
];
|
|
3415
|
+
}
|
|
3416
|
+
//#endregion
|
|
3417
|
+
//#region src/sort.ts
|
|
3418
|
+
const orderIndex = new Map([
|
|
3419
|
+
"display",
|
|
3420
|
+
"position",
|
|
3421
|
+
"top",
|
|
3422
|
+
"right",
|
|
3423
|
+
"bottom",
|
|
3424
|
+
"left",
|
|
3425
|
+
"z-index",
|
|
3426
|
+
"visibility",
|
|
3427
|
+
"overflow",
|
|
3428
|
+
"overflow-x",
|
|
3429
|
+
"overflow-y",
|
|
3430
|
+
"margin",
|
|
3431
|
+
"margin-top",
|
|
3432
|
+
"margin-right",
|
|
3433
|
+
"margin-bottom",
|
|
3434
|
+
"margin-left",
|
|
3435
|
+
"padding",
|
|
3436
|
+
"padding-top",
|
|
3437
|
+
"padding-right",
|
|
3438
|
+
"padding-bottom",
|
|
3439
|
+
"padding-left",
|
|
3440
|
+
"flex-direction",
|
|
3441
|
+
"flex-wrap",
|
|
3442
|
+
"justify-content",
|
|
3443
|
+
"align-items",
|
|
3444
|
+
"align-content",
|
|
3445
|
+
"align-self",
|
|
3446
|
+
"gap",
|
|
3447
|
+
"row-gap",
|
|
3448
|
+
"column-gap",
|
|
3449
|
+
"width",
|
|
3450
|
+
"height",
|
|
3451
|
+
"min-width",
|
|
3452
|
+
"min-height",
|
|
3453
|
+
"max-width",
|
|
3454
|
+
"max-height",
|
|
3455
|
+
"font-size",
|
|
3456
|
+
"font-weight",
|
|
3457
|
+
"line-height",
|
|
3458
|
+
"text-align",
|
|
3459
|
+
"color",
|
|
3460
|
+
"background-color",
|
|
3461
|
+
"border-width",
|
|
3462
|
+
"border-color",
|
|
3463
|
+
"border-radius",
|
|
3464
|
+
"opacity",
|
|
3465
|
+
"box-shadow",
|
|
3466
|
+
"filter",
|
|
3467
|
+
"transform",
|
|
3468
|
+
"transition",
|
|
3469
|
+
"animation"
|
|
3470
|
+
].map((property, index) => [property, index]));
|
|
3471
|
+
function sortConverted(converted, options) {
|
|
3472
|
+
if (options.sort === "input") return converted;
|
|
3473
|
+
return [...converted].sort((left, right) => {
|
|
3474
|
+
return (orderIndex.get(left.property) ?? Number.MAX_SAFE_INTEGER) - (orderIndex.get(right.property) ?? Number.MAX_SAFE_INTEGER);
|
|
3475
|
+
});
|
|
3476
|
+
}
|
|
3477
|
+
//#endregion
|
|
3478
|
+
//#region src/theme.ts
|
|
3479
|
+
const defaultTheme = {
|
|
3480
|
+
spacing: {},
|
|
3481
|
+
colors: tailwindColors
|
|
3482
|
+
};
|
|
3483
|
+
function resolveOptions(options = {}) {
|
|
3484
|
+
return {
|
|
3485
|
+
mode: options.mode ?? "pretty",
|
|
3486
|
+
tailwindVersion: "4",
|
|
3487
|
+
theme: {
|
|
3488
|
+
spacing: {
|
|
3489
|
+
...defaultTheme.spacing,
|
|
3490
|
+
...options.theme?.spacing
|
|
3491
|
+
},
|
|
3492
|
+
colors: {
|
|
3493
|
+
...defaultTheme.colors,
|
|
3494
|
+
...options.theme?.colors
|
|
3495
|
+
}
|
|
3496
|
+
},
|
|
3497
|
+
allowArbitraryValues: options.allowArbitraryValues ?? true,
|
|
3498
|
+
allowArbitraryProperties: options.allowArbitraryProperties ?? true,
|
|
3499
|
+
preferThemeTokens: options.preferThemeTokens ?? true,
|
|
3500
|
+
compression: options.compression ?? "safe",
|
|
3501
|
+
sort: options.sort ?? "grouped",
|
|
3502
|
+
important: options.important ?? false,
|
|
3503
|
+
colorMatch: options.colorMatch ?? "exact",
|
|
3504
|
+
numericMultipliers: options.numericMultipliers ?? "integer"
|
|
3505
|
+
};
|
|
3506
|
+
}
|
|
3507
|
+
//#endregion
|
|
3508
|
+
//#region src/index.ts
|
|
3509
|
+
function styleToTailwind(input, options) {
|
|
3510
|
+
const resolvedOptions = resolveOptions(options);
|
|
3511
|
+
const conversionPairs = expandShorthands(normalizeInput(input)).map((declaration) => ({
|
|
3512
|
+
declaration,
|
|
3513
|
+
converted: convertDeclaration(declaration, resolvedOptions)
|
|
3514
|
+
}));
|
|
3515
|
+
const convertedDeclarations = sortConverted(compressConverted(conversionPairs.flatMap(({ converted }) => {
|
|
3516
|
+
if (!converted) return [];
|
|
3517
|
+
return Array.isArray(converted) ? converted : [converted];
|
|
3518
|
+
}), resolvedOptions), resolvedOptions);
|
|
3519
|
+
const exact = convertedDeclarations.filter((converted) => converted.kind === "exact");
|
|
3520
|
+
const arbitrary = convertedDeclarations.filter((converted) => converted.kind === "arbitrary");
|
|
3521
|
+
const unmatched = conversionPairs.flatMap(({ declaration, converted }) => converted ? [] : [declaration]);
|
|
3522
|
+
const classes = convertedDeclarations.map(({ className }) => className);
|
|
3523
|
+
return {
|
|
3524
|
+
className: classes.join(" "),
|
|
3525
|
+
classes,
|
|
3526
|
+
exact,
|
|
3527
|
+
arbitrary,
|
|
3528
|
+
unmatched,
|
|
3529
|
+
warnings: unmatched.map((declaration) => ({
|
|
3530
|
+
declaration,
|
|
3531
|
+
message: "No Tailwind utility or fallback could be emitted."
|
|
3532
|
+
}))
|
|
3533
|
+
};
|
|
3534
|
+
}
|
|
3535
|
+
function styleToClassName(input, options) {
|
|
3536
|
+
return styleToTailwind(input, options).className;
|
|
3537
|
+
}
|
|
3538
|
+
function styleToClasses(input, options) {
|
|
3539
|
+
return styleToTailwind(input, options).classes;
|
|
3540
|
+
}
|
|
3541
|
+
function cssTextToTailwind(cssText, options) {
|
|
3542
|
+
return styleToTailwind(cssText, options);
|
|
3543
|
+
}
|
|
3544
|
+
//#endregion
|
|
3545
|
+
export { cssTextToTailwind, styleToClassName, styleToClasses, styleToTailwind };
|