@kbach/react 0.5.33 → 0.5.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -1
- package/dist/{chunk-VZD4672I.mjs → chunk-65BTN2UR.mjs} +2 -2
- package/dist/{chunk-X6FH5QTD.mjs → chunk-VRYE5CAE.mjs} +1 -1
- package/dist/{chunk-SOBLKZGE.mjs → chunk-YU55J6F6.mjs} +477 -437
- package/dist/index.js +472 -437
- package/dist/index.mjs +2 -2
- package/dist/jsx-dev-runtime.js +472 -437
- package/dist/jsx-dev-runtime.mjs +3 -3
- package/dist/jsx-runtime.js +472 -437
- package/dist/jsx-runtime.mjs +3 -3
- package/dist/vite-plugin.js +489 -450
- package/dist/vite-plugin.mjs +6 -3
- package/kbach-react.md +778 -0
- package/package.json +2 -2
- package/KBACH.md +0 -952
|
@@ -543,6 +543,13 @@ var defaultTheme = {
|
|
|
543
543
|
|
|
544
544
|
// src/core/platform.ts
|
|
545
545
|
var isWeb = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
|
|
546
|
+
var _cssGenMode = false;
|
|
547
|
+
function setCSSGenMode(on) {
|
|
548
|
+
_cssGenMode = on;
|
|
549
|
+
}
|
|
550
|
+
function getEffectiveIsWeb() {
|
|
551
|
+
return isWeb || _cssGenMode;
|
|
552
|
+
}
|
|
546
553
|
function toNativeValue(raw) {
|
|
547
554
|
if (/^-?\d+(\.\d+)?px$/.test(raw)) return parseFloat(raw);
|
|
548
555
|
if (/^-?\d+(\.\d+)?rem$/.test(raw)) return parseFloat(raw) * 16;
|
|
@@ -1242,7 +1249,7 @@ function parseClass(className) {
|
|
|
1242
1249
|
const bracketStart = remaining.lastIndexOf("-[");
|
|
1243
1250
|
if (bracketStart > 0 && remaining.endsWith("]")) {
|
|
1244
1251
|
const utility = remaining.slice(0, bracketStart);
|
|
1245
|
-
const value = remaining.slice(bracketStart + 2, -1);
|
|
1252
|
+
const value = remaining.slice(bracketStart + 2, -1).replace(/_/g, " ");
|
|
1246
1253
|
return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
|
|
1247
1254
|
}
|
|
1248
1255
|
if (STANDALONE_UTILITIES.has(remaining)) {
|
|
@@ -1271,10 +1278,29 @@ function parseClass(className) {
|
|
|
1271
1278
|
}
|
|
1272
1279
|
return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
|
|
1273
1280
|
}
|
|
1281
|
+
function splitClassTokens(classString) {
|
|
1282
|
+
const tokens = [];
|
|
1283
|
+
let current = "";
|
|
1284
|
+
let depth = 0;
|
|
1285
|
+
for (let i = 0; i < classString.length; i++) {
|
|
1286
|
+
const ch = classString[i];
|
|
1287
|
+
if (ch === "[") depth++;
|
|
1288
|
+
else if (ch === "]") depth--;
|
|
1289
|
+
if (/\s/.test(ch) && depth === 0) {
|
|
1290
|
+
if (current) {
|
|
1291
|
+
tokens.push(current);
|
|
1292
|
+
current = "";
|
|
1293
|
+
}
|
|
1294
|
+
} else {
|
|
1295
|
+
current += ch;
|
|
1296
|
+
}
|
|
1297
|
+
}
|
|
1298
|
+
if (current) tokens.push(current);
|
|
1299
|
+
return tokens;
|
|
1300
|
+
}
|
|
1274
1301
|
function parseClasses(classString) {
|
|
1275
1302
|
const results = [];
|
|
1276
|
-
for (const token of classString
|
|
1277
|
-
if (!token) continue;
|
|
1303
|
+
for (const token of splitClassTokens(classString)) {
|
|
1278
1304
|
const parsed = parseClass(token);
|
|
1279
1305
|
if (parsed) results.push(parsed);
|
|
1280
1306
|
}
|
|
@@ -1360,8 +1386,12 @@ function hexToRgba(hex, alpha) {
|
|
|
1360
1386
|
}
|
|
1361
1387
|
function resolveSpacing(value, negative, spacing, isArbitrary) {
|
|
1362
1388
|
if (isArbitrary) {
|
|
1363
|
-
const resolved =
|
|
1364
|
-
|
|
1389
|
+
const resolved = getEffectiveIsWeb() ? value : toNativeValue(value);
|
|
1390
|
+
if (negative) {
|
|
1391
|
+
if (typeof resolved === "number") return -resolved;
|
|
1392
|
+
if (typeof resolved === "string" && /^\d/.test(resolved)) return `-${resolved}`;
|
|
1393
|
+
}
|
|
1394
|
+
return resolved;
|
|
1365
1395
|
}
|
|
1366
1396
|
const raw = spacing[value];
|
|
1367
1397
|
if (raw === void 0) return null;
|
|
@@ -1373,7 +1403,7 @@ function resolveSpacing(value, negative, spacing, isArbitrary) {
|
|
|
1373
1403
|
return raw;
|
|
1374
1404
|
}
|
|
1375
1405
|
function resolveSizing(value, spacing, isArbitrary) {
|
|
1376
|
-
if (isArbitrary) return
|
|
1406
|
+
if (isArbitrary) return getEffectiveIsWeb() ? value : toNativeValue(value);
|
|
1377
1407
|
const raw = spacing[value];
|
|
1378
1408
|
if (raw !== void 0) return raw;
|
|
1379
1409
|
if (/^\d+\/\d+$/.test(value)) {
|
|
@@ -1383,356 +1413,364 @@ function resolveSizing(value, spacing, isArbitrary) {
|
|
|
1383
1413
|
return null;
|
|
1384
1414
|
}
|
|
1385
1415
|
function resolveRadius(value, radii, isArbitrary) {
|
|
1386
|
-
if (isArbitrary) return
|
|
1416
|
+
if (isArbitrary) return getEffectiveIsWeb() ? value : toNativeValue(value);
|
|
1387
1417
|
const key = value === "" ? "DEFAULT" : value;
|
|
1388
1418
|
return radii[key] ?? null;
|
|
1389
1419
|
}
|
|
1390
1420
|
function resolveFontSize(value, fontSizes, isArbitrary) {
|
|
1391
|
-
if (isArbitrary) return
|
|
1421
|
+
if (isArbitrary) return getEffectiveIsWeb() ? value : toNativeValue(value);
|
|
1392
1422
|
return fontSizes[value] ?? null;
|
|
1393
1423
|
}
|
|
1394
1424
|
var FILTER_COMPOSE = "var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)";
|
|
1395
1425
|
var BACKDROP_FILTER_COMPOSE = "var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)";
|
|
1396
|
-
var
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
|
|
1559
|
-
|
|
1560
|
-
|
|
1561
|
-
|
|
1562
|
-
|
|
1563
|
-
|
|
1564
|
-
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
|
|
1605
|
-
|
|
1606
|
-
|
|
1607
|
-
|
|
1608
|
-
|
|
1609
|
-
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
|
|
1620
|
-
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
|
|
1626
|
-
|
|
1627
|
-
|
|
1628
|
-
|
|
1629
|
-
|
|
1630
|
-
|
|
1631
|
-
|
|
1632
|
-
|
|
1633
|
-
|
|
1634
|
-
|
|
1635
|
-
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
|
|
1641
|
-
|
|
1642
|
-
|
|
1643
|
-
|
|
1644
|
-
|
|
1645
|
-
|
|
1646
|
-
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
|
|
1668
|
-
|
|
1669
|
-
|
|
1670
|
-
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
|
|
1677
|
-
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
|
|
1695
|
-
|
|
1696
|
-
|
|
1697
|
-
|
|
1698
|
-
|
|
1699
|
-
|
|
1700
|
-
|
|
1701
|
-
|
|
1702
|
-
|
|
1703
|
-
|
|
1704
|
-
|
|
1705
|
-
|
|
1706
|
-
|
|
1707
|
-
|
|
1708
|
-
|
|
1709
|
-
|
|
1710
|
-
|
|
1711
|
-
|
|
1712
|
-
|
|
1713
|
-
|
|
1714
|
-
|
|
1715
|
-
|
|
1716
|
-
|
|
1717
|
-
|
|
1718
|
-
|
|
1719
|
-
|
|
1720
|
-
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
}
|
|
1426
|
+
var _standalone = null;
|
|
1427
|
+
function buildStandalone() {
|
|
1428
|
+
const web = getEffectiveIsWeb();
|
|
1429
|
+
return {
|
|
1430
|
+
// Display
|
|
1431
|
+
// React Native only supports display:'flex'|'none'. Setting 'flex' explicitly is
|
|
1432
|
+
// a no-op normally, but is needed to re-show an element that was hidden via `hidden`.
|
|
1433
|
+
// `grid`, `inline-*`, `contents`, `flow-root` have no native equivalent.
|
|
1434
|
+
flex: { display: "flex" },
|
|
1435
|
+
block: web ? { display: "block" } : null,
|
|
1436
|
+
"inline-block": web ? { display: "inline-block" } : null,
|
|
1437
|
+
inline: web ? { display: "inline" } : null,
|
|
1438
|
+
grid: web ? { display: "grid" } : null,
|
|
1439
|
+
grd: web ? { display: "grid" } : null,
|
|
1440
|
+
"inline-flex": { display: web ? "inline-flex" : "flex" },
|
|
1441
|
+
"inline-grid": web ? { display: "inline-grid" } : null,
|
|
1442
|
+
hidden: { display: "none" },
|
|
1443
|
+
contents: web ? { display: "contents" } : null,
|
|
1444
|
+
"flow-root": web ? { display: "flow-root" } : null,
|
|
1445
|
+
// Flex direction (both web and native)
|
|
1446
|
+
"flex-row": { flexDirection: "row" },
|
|
1447
|
+
"flex-col": { flexDirection: "column" },
|
|
1448
|
+
"flex-row-reverse": { flexDirection: "row-reverse" },
|
|
1449
|
+
"flex-col-reverse": { flexDirection: "column-reverse" },
|
|
1450
|
+
// Flex wrap (both)
|
|
1451
|
+
"flex-wrap": { flexWrap: "wrap" },
|
|
1452
|
+
"flex-wrap-reverse": { flexWrap: "wrap-reverse" },
|
|
1453
|
+
"flex-nowrap": { flexWrap: "nowrap" },
|
|
1454
|
+
// Flex grow / shrink (both)
|
|
1455
|
+
"flex-grow": { flexGrow: 1 },
|
|
1456
|
+
"flex-grow-0": { flexGrow: 0 },
|
|
1457
|
+
"flex-shrink": { flexShrink: 1 },
|
|
1458
|
+
"flex-shrink-0": { flexShrink: 0 },
|
|
1459
|
+
// Align items (both)
|
|
1460
|
+
"items-start": { alignItems: "flex-start" },
|
|
1461
|
+
"items-end": { alignItems: "flex-end" },
|
|
1462
|
+
"items-center": { alignItems: "center" },
|
|
1463
|
+
"items-baseline": { alignItems: "baseline" },
|
|
1464
|
+
"items-stretch": { alignItems: "stretch" },
|
|
1465
|
+
// Justify content (both)
|
|
1466
|
+
"justify-start": { justifyContent: "flex-start" },
|
|
1467
|
+
"justify-end": { justifyContent: "flex-end" },
|
|
1468
|
+
"justify-center": { justifyContent: "center" },
|
|
1469
|
+
"justify-between": { justifyContent: "space-between" },
|
|
1470
|
+
"justify-around": { justifyContent: "space-around" },
|
|
1471
|
+
"justify-evenly": { justifyContent: "space-evenly" },
|
|
1472
|
+
// Align content (both)
|
|
1473
|
+
"content-start": { alignContent: "flex-start" },
|
|
1474
|
+
"content-end": { alignContent: "flex-end" },
|
|
1475
|
+
"content-center": { alignContent: "center" },
|
|
1476
|
+
"content-between": { alignContent: "space-between" },
|
|
1477
|
+
"content-around": { alignContent: "space-around" },
|
|
1478
|
+
"content-evenly": { alignContent: "space-evenly" },
|
|
1479
|
+
"content-stretch": { alignContent: "stretch" },
|
|
1480
|
+
// Align self (both)
|
|
1481
|
+
"self-auto": { alignSelf: "auto" },
|
|
1482
|
+
"self-start": { alignSelf: "flex-start" },
|
|
1483
|
+
"self-end": { alignSelf: "flex-end" },
|
|
1484
|
+
"self-center": { alignSelf: "center" },
|
|
1485
|
+
"self-stretch": { alignSelf: "stretch" },
|
|
1486
|
+
"self-baseline": { alignSelf: "baseline" },
|
|
1487
|
+
// Text align (both)
|
|
1488
|
+
"text-left": { textAlign: "left" },
|
|
1489
|
+
"text-right": { textAlign: "right" },
|
|
1490
|
+
"text-center": { textAlign: "center" },
|
|
1491
|
+
"text-justify": { textAlign: "justify" },
|
|
1492
|
+
// Font weight shortcuts (both)
|
|
1493
|
+
"font-thin": { fontWeight: "100" },
|
|
1494
|
+
"font-extralight": { fontWeight: "200" },
|
|
1495
|
+
"font-light": { fontWeight: "300" },
|
|
1496
|
+
"font-normal": { fontWeight: "400" },
|
|
1497
|
+
"font-medium": { fontWeight: "500" },
|
|
1498
|
+
"font-semibold": { fontWeight: "600" },
|
|
1499
|
+
"font-bold": { fontWeight: "700" },
|
|
1500
|
+
"font-extrabold": { fontWeight: "800" },
|
|
1501
|
+
"font-black": { fontWeight: "900" },
|
|
1502
|
+
// Text decoration (overline is web-only)
|
|
1503
|
+
underline: { textDecorationLine: "underline" },
|
|
1504
|
+
overline: web ? { textDecorationLine: "overline" } : null,
|
|
1505
|
+
"line-through": { textDecorationLine: "line-through" },
|
|
1506
|
+
"no-underline": { textDecorationLine: "none" },
|
|
1507
|
+
// Text transform (both)
|
|
1508
|
+
uppercase: { textTransform: "uppercase" },
|
|
1509
|
+
lowercase: { textTransform: "lowercase" },
|
|
1510
|
+
capitalize: { textTransform: "capitalize" },
|
|
1511
|
+
"normal-case": { textTransform: "none" },
|
|
1512
|
+
// Font style (both)
|
|
1513
|
+
italic: { fontStyle: "italic" },
|
|
1514
|
+
"non-italic": { fontStyle: "normal" },
|
|
1515
|
+
// Position (fixed/sticky/static are web-only; RN only supports relative/absolute)
|
|
1516
|
+
relative: { position: "relative" },
|
|
1517
|
+
absolute: { position: "absolute" },
|
|
1518
|
+
fixed: web ? { position: "fixed" } : null,
|
|
1519
|
+
sticky: web ? { position: "sticky" } : null,
|
|
1520
|
+
static: web ? { position: "static" } : null,
|
|
1521
|
+
// Visibility (no `visibility` prop on native; use opacity instead)
|
|
1522
|
+
visible: web ? { visibility: "visible" } : null,
|
|
1523
|
+
invisible: web ? { visibility: "hidden" } : { opacity: 0 },
|
|
1524
|
+
// Overflow (RN supports 'hidden' | 'visible' | 'scroll'; not 'auto')
|
|
1525
|
+
"overflow-hidden": { overflow: "hidden" },
|
|
1526
|
+
"overflow-visible": { overflow: "visible" },
|
|
1527
|
+
"overflow-scroll": { overflow: "scroll" },
|
|
1528
|
+
"overflow-auto": web ? { overflow: "auto" } : { overflow: "scroll" },
|
|
1529
|
+
// overflowX / overflowY are web-only
|
|
1530
|
+
"overflow-x-hidden": web ? { overflowX: "hidden" } : null,
|
|
1531
|
+
"overflow-x-scroll": web ? { overflowX: "scroll" } : null,
|
|
1532
|
+
"overflow-x-auto": web ? { overflowX: "auto" } : null,
|
|
1533
|
+
"overflow-y-hidden": web ? { overflowY: "hidden" } : null,
|
|
1534
|
+
"overflow-y-scroll": web ? { overflowY: "scroll" } : null,
|
|
1535
|
+
"overflow-y-auto": web ? { overflowY: "auto" } : null,
|
|
1536
|
+
// Object fit (web-only; use resizeMode prop on RN Image)
|
|
1537
|
+
"object-contain": web ? { objectFit: "contain" } : null,
|
|
1538
|
+
"object-cover": web ? { objectFit: "cover" } : null,
|
|
1539
|
+
"object-fill": web ? { objectFit: "fill" } : null,
|
|
1540
|
+
"object-none": web ? { objectFit: "none" } : null,
|
|
1541
|
+
"object-scale-down": web ? { objectFit: "scale-down" } : null,
|
|
1542
|
+
// Border style (both)
|
|
1543
|
+
"border-solid": { borderStyle: "solid" },
|
|
1544
|
+
"border-dashed": { borderStyle: "dashed" },
|
|
1545
|
+
"border-dotted": { borderStyle: "dotted" },
|
|
1546
|
+
"border-none": { borderWidth: 0 },
|
|
1547
|
+
// Border sides default width (both)
|
|
1548
|
+
"border-t": { borderTopWidth: 1 },
|
|
1549
|
+
"border-r": { borderRightWidth: 1 },
|
|
1550
|
+
"border-b": { borderBottomWidth: 1 },
|
|
1551
|
+
"border-l": { borderLeftWidth: 1 },
|
|
1552
|
+
// Cursor (web-only)
|
|
1553
|
+
"cursor-auto": web ? { cursor: "auto" } : null,
|
|
1554
|
+
"cursor-default": web ? { cursor: "default" } : null,
|
|
1555
|
+
"cursor-pointer": web ? { cursor: "pointer" } : null,
|
|
1556
|
+
"cursor-wait": web ? { cursor: "wait" } : null,
|
|
1557
|
+
"cursor-text": web ? { cursor: "text" } : null,
|
|
1558
|
+
"cursor-move": web ? { cursor: "move" } : null,
|
|
1559
|
+
"cursor-not-allowed": web ? { cursor: "not-allowed" } : null,
|
|
1560
|
+
// User select (web-only)
|
|
1561
|
+
"select-none": web ? { userSelect: "none" } : null,
|
|
1562
|
+
"select-text": web ? { userSelect: "text" } : null,
|
|
1563
|
+
"select-all": web ? { userSelect: "all" } : null,
|
|
1564
|
+
"select-auto": web ? { userSelect: "auto" } : null,
|
|
1565
|
+
// Pointer events (both)
|
|
1566
|
+
"pointer-events-none": { pointerEvents: "none" },
|
|
1567
|
+
"pointer-events-auto": { pointerEvents: "auto" },
|
|
1568
|
+
// Whitespace (web-only; RN Text uses numberOfLines prop instead)
|
|
1569
|
+
"whitespace-normal": web ? { whiteSpace: "normal" } : null,
|
|
1570
|
+
"whitespace-nowrap": web ? { whiteSpace: "nowrap" } : null,
|
|
1571
|
+
"whitespace-pre": web ? { whiteSpace: "pre" } : null,
|
|
1572
|
+
"whitespace-pre-wrap": web ? { whiteSpace: "pre-wrap" } : null,
|
|
1573
|
+
"whitespace-pre-line": web ? { whiteSpace: "pre-line" } : null,
|
|
1574
|
+
// Word break (web-only)
|
|
1575
|
+
"break-normal": web ? { overflowWrap: "normal", wordBreak: "normal" } : null,
|
|
1576
|
+
"break-words": web ? { overflowWrap: "break-word" } : null,
|
|
1577
|
+
"break-all": web ? { wordBreak: "break-all" } : null,
|
|
1578
|
+
// Misc web-only
|
|
1579
|
+
truncate: web ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } : null,
|
|
1580
|
+
"box-border": web ? { boxSizing: "border-box" } : null,
|
|
1581
|
+
"box-content": web ? { boxSizing: "content-box" } : null,
|
|
1582
|
+
"appearance-none": web ? { appearance: "none" } : null,
|
|
1583
|
+
"outline-none": web ? { outline: "none", outlineOffset: "0" } : null,
|
|
1584
|
+
outline: web ? { outline: "2px solid transparent", outlineOffset: "2px" } : null,
|
|
1585
|
+
resize: web ? { resize: "both" } : null,
|
|
1586
|
+
"resize-none": web ? { resize: "none" } : null,
|
|
1587
|
+
"resize-y": web ? { resize: "vertical" } : null,
|
|
1588
|
+
"resize-x": web ? { resize: "horizontal" } : null,
|
|
1589
|
+
antialiased: web ? { WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale" } : null,
|
|
1590
|
+
"subpixel-antialiased": web ? { WebkitFontSmoothing: "subpixel-antialiased", MozOsxFontSmoothing: "auto" } : null,
|
|
1591
|
+
"overflow-ellipsis": web ? { textOverflow: "ellipsis" } : null,
|
|
1592
|
+
"sr-only": web ? {
|
|
1593
|
+
position: "absolute",
|
|
1594
|
+
width: 1,
|
|
1595
|
+
height: 1,
|
|
1596
|
+
padding: 0,
|
|
1597
|
+
margin: -1,
|
|
1598
|
+
overflow: "hidden",
|
|
1599
|
+
clip: "rect(0,0,0,0)",
|
|
1600
|
+
whiteSpace: "nowrap",
|
|
1601
|
+
border: 0
|
|
1602
|
+
} : null,
|
|
1603
|
+
"not-sr-only": web ? {
|
|
1604
|
+
position: "static",
|
|
1605
|
+
width: "auto",
|
|
1606
|
+
height: "auto",
|
|
1607
|
+
padding: 0,
|
|
1608
|
+
margin: 0,
|
|
1609
|
+
overflow: "visible",
|
|
1610
|
+
clip: "auto",
|
|
1611
|
+
whiteSpace: "normal"
|
|
1612
|
+
} : null,
|
|
1613
|
+
// Lists (web-only)
|
|
1614
|
+
"list-none": web ? { listStyleType: "none" } : null,
|
|
1615
|
+
"list-disc": web ? { listStyleType: "disc" } : null,
|
|
1616
|
+
"list-decimal": web ? { listStyleType: "decimal" } : null,
|
|
1617
|
+
// Background clip (web-only)
|
|
1618
|
+
"bg-clip-border": web ? { backgroundClip: "border-box" } : null,
|
|
1619
|
+
"bg-clip-padding": web ? { backgroundClip: "padding-box" } : null,
|
|
1620
|
+
"bg-clip-content": web ? { backgroundClip: "content-box" } : null,
|
|
1621
|
+
"bg-clip-text": web ? { backgroundClip: "text", WebkitBackgroundClip: "text" } : null,
|
|
1622
|
+
// Background image
|
|
1623
|
+
"bg-none": web ? { backgroundImage: "none" } : null,
|
|
1624
|
+
// Background size (web-only)
|
|
1625
|
+
"bg-auto": web ? { backgroundSize: "auto" } : null,
|
|
1626
|
+
"bg-cover": web ? { backgroundSize: "cover" } : null,
|
|
1627
|
+
"bg-contain": web ? { backgroundSize: "contain" } : null,
|
|
1628
|
+
// Background position (web-only)
|
|
1629
|
+
"bg-center": web ? { backgroundPosition: "center" } : null,
|
|
1630
|
+
"bg-top": web ? { backgroundPosition: "top" } : null,
|
|
1631
|
+
"bg-bottom": web ? { backgroundPosition: "bottom" } : null,
|
|
1632
|
+
"bg-left": web ? { backgroundPosition: "left" } : null,
|
|
1633
|
+
"bg-right": web ? { backgroundPosition: "right" } : null,
|
|
1634
|
+
"bg-left-top": web ? { backgroundPosition: "left top" } : null,
|
|
1635
|
+
"bg-left-bottom": web ? { backgroundPosition: "left bottom" } : null,
|
|
1636
|
+
"bg-right-top": web ? { backgroundPosition: "right top" } : null,
|
|
1637
|
+
"bg-right-bottom": web ? { backgroundPosition: "right bottom" } : null,
|
|
1638
|
+
// Background repeat (web-only)
|
|
1639
|
+
"bg-repeat": web ? { backgroundRepeat: "repeat" } : null,
|
|
1640
|
+
"bg-no-repeat": web ? { backgroundRepeat: "no-repeat" } : null,
|
|
1641
|
+
"bg-repeat-x": web ? { backgroundRepeat: "repeat-x" } : null,
|
|
1642
|
+
"bg-repeat-y": web ? { backgroundRepeat: "repeat-y" } : null,
|
|
1643
|
+
"bg-repeat-round": web ? { backgroundRepeat: "round" } : null,
|
|
1644
|
+
"bg-repeat-space": web ? { backgroundRepeat: "space" } : null,
|
|
1645
|
+
// Background attachment (web-only)
|
|
1646
|
+
"bg-fixed": web ? { backgroundAttachment: "fixed" } : null,
|
|
1647
|
+
"bg-local": web ? { backgroundAttachment: "local" } : null,
|
|
1648
|
+
"bg-scroll": web ? { backgroundAttachment: "scroll" } : null,
|
|
1649
|
+
// Object position (web-only)
|
|
1650
|
+
"object-center": web ? { objectPosition: "center" } : null,
|
|
1651
|
+
"object-top": web ? { objectPosition: "top" } : null,
|
|
1652
|
+
"object-bottom": web ? { objectPosition: "bottom" } : null,
|
|
1653
|
+
"object-left": web ? { objectPosition: "left" } : null,
|
|
1654
|
+
"object-right": web ? { objectPosition: "right" } : null,
|
|
1655
|
+
"object-left-top": web ? { objectPosition: "left top" } : null,
|
|
1656
|
+
"object-left-bottom": web ? { objectPosition: "left bottom" } : null,
|
|
1657
|
+
"object-right-top": web ? { objectPosition: "right top" } : null,
|
|
1658
|
+
"object-right-bottom": web ? { objectPosition: "right bottom" } : null,
|
|
1659
|
+
// Table (web-only)
|
|
1660
|
+
table: web ? { display: "table" } : null,
|
|
1661
|
+
"table-auto": web ? { tableLayout: "auto" } : null,
|
|
1662
|
+
"table-fixed": web ? { tableLayout: "fixed" } : null,
|
|
1663
|
+
"caption-top": web ? { captionSide: "top" } : null,
|
|
1664
|
+
"caption-bottom": web ? { captionSide: "bottom" } : null,
|
|
1665
|
+
"border-collapse": web ? { borderCollapse: "collapse" } : null,
|
|
1666
|
+
"border-separate": web ? { borderCollapse: "separate" } : null,
|
|
1667
|
+
// List style position (web-only)
|
|
1668
|
+
"list-inside": web ? { listStylePosition: "inside" } : null,
|
|
1669
|
+
"list-outside": web ? { listStylePosition: "outside" } : null,
|
|
1670
|
+
// Font variant numeric (web-only)
|
|
1671
|
+
"normal-nums": web ? { fontVariantNumeric: "normal" } : null,
|
|
1672
|
+
ordinal: web ? { fontVariantNumeric: "ordinal" } : null,
|
|
1673
|
+
"slashed-zero": web ? { fontVariantNumeric: "slashed-zero" } : null,
|
|
1674
|
+
"lining-nums": web ? { fontVariantNumeric: "lining-nums" } : null,
|
|
1675
|
+
"oldstyle-nums": web ? { fontVariantNumeric: "oldstyle-nums" } : null,
|
|
1676
|
+
"proportional-nums": web ? { fontVariantNumeric: "proportional-nums" } : null,
|
|
1677
|
+
"tabular-nums": web ? { fontVariantNumeric: "tabular-nums" } : null,
|
|
1678
|
+
"diagonal-fractions": web ? { fontVariantNumeric: "diagonal-fractions" } : null,
|
|
1679
|
+
"stacked-fractions": web ? { fontVariantNumeric: "stacked-fractions" } : null,
|
|
1680
|
+
// Isolation (web-only)
|
|
1681
|
+
isolate: web ? { isolation: "isolate" } : null,
|
|
1682
|
+
"isolation-auto": web ? { isolation: "auto" } : null,
|
|
1683
|
+
// Backface visibility (both iOS and Android)
|
|
1684
|
+
"backface-visible": { backfaceVisibility: "visible" },
|
|
1685
|
+
"backface-hidden": { backfaceVisibility: "hidden" },
|
|
1686
|
+
// CSS filters — standalone = default/full effect (web-only)
|
|
1687
|
+
grayscale: web ? { "--tw-grayscale": "grayscale(100%)", filter: FILTER_COMPOSE } : null,
|
|
1688
|
+
invert: web ? { "--tw-invert": "invert(100%)", filter: FILTER_COMPOSE } : null,
|
|
1689
|
+
sepia: web ? { "--tw-sepia": "sepia(100%)", filter: FILTER_COMPOSE } : null,
|
|
1690
|
+
// Divide none
|
|
1691
|
+
"divide-none": web ? { __divideX: 0, __divideY: 0 } : null,
|
|
1692
|
+
// Group / peer markers (no-op: no style emitted; just ensures isKnownUtility returns true)
|
|
1693
|
+
group: web ? {} : null,
|
|
1694
|
+
peer: web ? {} : null,
|
|
1695
|
+
// Text-wrap (web-only)
|
|
1696
|
+
"text-wrap": web ? { textWrap: "wrap" } : null,
|
|
1697
|
+
"text-nowrap": web ? { textWrap: "nowrap" } : null,
|
|
1698
|
+
"text-balance": web ? { textWrap: "balance" } : null,
|
|
1699
|
+
"text-pretty": web ? { textWrap: "pretty" } : null,
|
|
1700
|
+
// Screen sizing (vw values are web-only; vh values work cross-platform via spacing scale for h-*)
|
|
1701
|
+
"w-screen": web ? { width: "100vw" } : null,
|
|
1702
|
+
"min-h-screen": { minHeight: "100vh" },
|
|
1703
|
+
"max-h-screen": { maxHeight: "100vh" },
|
|
1704
|
+
"min-w-screen": web ? { minWidth: "100vw" } : null,
|
|
1705
|
+
"max-w-screen": web ? { maxWidth: "100vw" } : null,
|
|
1706
|
+
// max-w named container sizes (mirrors Tailwind's container scale)
|
|
1707
|
+
"max-w-none": { maxWidth: "none" },
|
|
1708
|
+
"max-w-xs": { maxWidth: 320 },
|
|
1709
|
+
"max-w-sm": { maxWidth: 384 },
|
|
1710
|
+
"max-w-md": { maxWidth: 448 },
|
|
1711
|
+
"max-w-lg": { maxWidth: 512 },
|
|
1712
|
+
"max-w-xl": { maxWidth: 576 },
|
|
1713
|
+
"max-w-2xl": { maxWidth: 672 },
|
|
1714
|
+
"max-w-3xl": { maxWidth: 768 },
|
|
1715
|
+
"max-w-4xl": { maxWidth: 896 },
|
|
1716
|
+
"max-w-5xl": { maxWidth: 1024 },
|
|
1717
|
+
"max-w-6xl": { maxWidth: 1152 },
|
|
1718
|
+
"max-w-7xl": { maxWidth: 1280 },
|
|
1719
|
+
"max-w-prose": web ? { maxWidth: "65ch" } : null,
|
|
1720
|
+
// Extended cursors (web-only)
|
|
1721
|
+
"cursor-grab": web ? { cursor: "grab" } : null,
|
|
1722
|
+
"cursor-grabbing": web ? { cursor: "grabbing" } : null,
|
|
1723
|
+
"cursor-zoom-in": web ? { cursor: "zoom-in" } : null,
|
|
1724
|
+
"cursor-zoom-out": web ? { cursor: "zoom-out" } : null,
|
|
1725
|
+
"cursor-crosshair": web ? { cursor: "crosshair" } : null,
|
|
1726
|
+
"cursor-help": web ? { cursor: "help" } : null,
|
|
1727
|
+
"cursor-none": web ? { cursor: "none" } : null,
|
|
1728
|
+
// Overflow clip (web-only)
|
|
1729
|
+
"overflow-clip": web ? { overflow: "clip" } : null,
|
|
1730
|
+
"overflow-x-clip": web ? { overflowX: "clip" } : null,
|
|
1731
|
+
"overflow-y-clip": web ? { overflowY: "clip" } : null,
|
|
1732
|
+
// Scroll behavior (web-only)
|
|
1733
|
+
"scroll-smooth": web ? { scrollBehavior: "smooth" } : null,
|
|
1734
|
+
"scroll-auto": web ? { scrollBehavior: "auto" } : null,
|
|
1735
|
+
// Float (web-only)
|
|
1736
|
+
"float-left": web ? { float: "left" } : null,
|
|
1737
|
+
"float-right": web ? { float: "right" } : null,
|
|
1738
|
+
"float-start": web ? { float: "inline-start" } : null,
|
|
1739
|
+
"float-end": web ? { float: "inline-end" } : null,
|
|
1740
|
+
"float-none": web ? { float: "none" } : null,
|
|
1741
|
+
// Clear (web-only)
|
|
1742
|
+
"clear-left": web ? { clear: "left" } : null,
|
|
1743
|
+
"clear-right": web ? { clear: "right" } : null,
|
|
1744
|
+
"clear-both": web ? { clear: "both" } : null,
|
|
1745
|
+
"clear-start": web ? { clear: "inline-start" } : null,
|
|
1746
|
+
"clear-end": web ? { clear: "inline-end" } : null,
|
|
1747
|
+
"clear-none": web ? { clear: "none" } : null,
|
|
1748
|
+
// Vertical align (web-only)
|
|
1749
|
+
"align-baseline": web ? { verticalAlign: "baseline" } : null,
|
|
1750
|
+
"align-top": web ? { verticalAlign: "top" } : null,
|
|
1751
|
+
"align-middle": web ? { verticalAlign: "middle" } : null,
|
|
1752
|
+
"align-bottom": web ? { verticalAlign: "bottom" } : null,
|
|
1753
|
+
"align-text-top": web ? { verticalAlign: "text-top" } : null,
|
|
1754
|
+
"align-text-bottom": web ? { verticalAlign: "text-bottom" } : null,
|
|
1755
|
+
"align-sub": web ? { verticalAlign: "sub" } : null,
|
|
1756
|
+
"align-super": web ? { verticalAlign: "super" } : null,
|
|
1757
|
+
// Touch action (web-only)
|
|
1758
|
+
"touch-auto": web ? { touchAction: "auto" } : null,
|
|
1759
|
+
"touch-none": web ? { touchAction: "none" } : null,
|
|
1760
|
+
"touch-pan-x": web ? { touchAction: "pan-x" } : null,
|
|
1761
|
+
"touch-pan-y": web ? { touchAction: "pan-y" } : null,
|
|
1762
|
+
"touch-pan-left": web ? { touchAction: "pan-left" } : null,
|
|
1763
|
+
"touch-pan-right": web ? { touchAction: "pan-right" } : null,
|
|
1764
|
+
"touch-pan-up": web ? { touchAction: "pan-up" } : null,
|
|
1765
|
+
"touch-pan-down": web ? { touchAction: "pan-down" } : null,
|
|
1766
|
+
"touch-pinch-zoom": web ? { touchAction: "pinch-zoom" } : null,
|
|
1767
|
+
"touch-manipulation": web ? { touchAction: "manipulation" } : null
|
|
1768
|
+
};
|
|
1769
|
+
}
|
|
1770
|
+
function getStandalone() {
|
|
1771
|
+
if (!_standalone) _standalone = buildStandalone();
|
|
1772
|
+
return _standalone;
|
|
1773
|
+
}
|
|
1736
1774
|
var RESOLVERS = {
|
|
1737
1775
|
// ── Background ─────────────────────────────────────────────────────────────
|
|
1738
1776
|
bg: ({ value, isArbitrary }, { colors }) => {
|
|
@@ -1740,7 +1778,7 @@ var RESOLVERS = {
|
|
|
1740
1778
|
return color ? { backgroundColor: color } : null;
|
|
1741
1779
|
},
|
|
1742
1780
|
"bg-opacity": ({ value }, _) => {
|
|
1743
|
-
if (!
|
|
1781
|
+
if (!getEffectiveIsWeb()) return null;
|
|
1744
1782
|
const v = parseFloat(value) / 100;
|
|
1745
1783
|
return isNaN(v) ? null : { "--bg-opacity": v };
|
|
1746
1784
|
},
|
|
@@ -1750,7 +1788,7 @@ var RESOLVERS = {
|
|
|
1750
1788
|
if (!isArbitrary && size !== null) return { fontSize: size };
|
|
1751
1789
|
if (isArbitrary) {
|
|
1752
1790
|
if (/^\d/.test(value) || /^(calc|min|max|clamp)/.test(value)) {
|
|
1753
|
-
return { fontSize:
|
|
1791
|
+
return { fontSize: getEffectiveIsWeb() ? value : toNativeValue(value) };
|
|
1754
1792
|
}
|
|
1755
1793
|
return { color: value };
|
|
1756
1794
|
}
|
|
@@ -1758,7 +1796,7 @@ var RESOLVERS = {
|
|
|
1758
1796
|
return color ? { color } : null;
|
|
1759
1797
|
},
|
|
1760
1798
|
"text-opacity": ({ value }, _) => {
|
|
1761
|
-
if (!
|
|
1799
|
+
if (!getEffectiveIsWeb()) return null;
|
|
1762
1800
|
const v = parseFloat(value) / 100;
|
|
1763
1801
|
return isNaN(v) ? null : { "--text-opacity": v };
|
|
1764
1802
|
},
|
|
@@ -1954,7 +1992,7 @@ var RESOLVERS = {
|
|
|
1954
1992
|
},
|
|
1955
1993
|
// ── Grid template columns/rows (Tailwind-style aliases, web-only) ──────────
|
|
1956
1994
|
"grid-cols": ({ value, isArbitrary }) => {
|
|
1957
|
-
if (!
|
|
1995
|
+
if (!getEffectiveIsWeb()) return null;
|
|
1958
1996
|
if (!value) return null;
|
|
1959
1997
|
if (isArbitrary) return { display: "grid", gridTemplateColumns: value };
|
|
1960
1998
|
if (value === "none") return { display: "grid", gridTemplateColumns: "none" };
|
|
@@ -1963,7 +2001,7 @@ var RESOLVERS = {
|
|
|
1963
2001
|
return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
|
|
1964
2002
|
},
|
|
1965
2003
|
"grid-rows": ({ value, isArbitrary }) => {
|
|
1966
|
-
if (!
|
|
2004
|
+
if (!getEffectiveIsWeb()) return null;
|
|
1967
2005
|
if (!value) return null;
|
|
1968
2006
|
if (isArbitrary) return { gridTemplateRows: value };
|
|
1969
2007
|
if (value === "none") return { gridTemplateRows: "none" };
|
|
@@ -1973,7 +2011,7 @@ var RESOLVERS = {
|
|
|
1973
2011
|
},
|
|
1974
2012
|
// ── Grid auto flow (web-only) ─────────────────────────────────────────────
|
|
1975
2013
|
"grid-flow": ({ value }) => {
|
|
1976
|
-
if (!
|
|
2014
|
+
if (!getEffectiveIsWeb()) return null;
|
|
1977
2015
|
const flows = {
|
|
1978
2016
|
row: "row",
|
|
1979
2017
|
col: "column",
|
|
@@ -1986,7 +2024,7 @@ var RESOLVERS = {
|
|
|
1986
2024
|
},
|
|
1987
2025
|
// ── Grid auto sizing (web-only) ───────────────────────────────────────────
|
|
1988
2026
|
"auto-cols": ({ value, isArbitrary }) => {
|
|
1989
|
-
if (!
|
|
2027
|
+
if (!getEffectiveIsWeb()) return null;
|
|
1990
2028
|
if (isArbitrary) return { gridAutoColumns: value };
|
|
1991
2029
|
const presets = {
|
|
1992
2030
|
auto: "auto",
|
|
@@ -1998,7 +2036,7 @@ var RESOLVERS = {
|
|
|
1998
2036
|
return v ? { gridAutoColumns: v } : null;
|
|
1999
2037
|
},
|
|
2000
2038
|
"auto-rows": ({ value, isArbitrary }) => {
|
|
2001
|
-
if (!
|
|
2039
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2002
2040
|
if (isArbitrary) return { gridAutoRows: value };
|
|
2003
2041
|
const presets = {
|
|
2004
2042
|
auto: "auto",
|
|
@@ -2011,54 +2049,54 @@ var RESOLVERS = {
|
|
|
2011
2049
|
},
|
|
2012
2050
|
// ── Grid column placement (web-only) ──────────────────────────────────────
|
|
2013
2051
|
"col-span": ({ value }) => {
|
|
2014
|
-
if (!
|
|
2052
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2015
2053
|
if (value === "full") return { gridColumn: "1 / -1" };
|
|
2016
2054
|
const n = parseInt(value, 10);
|
|
2017
2055
|
return isNaN(n) ? null : { gridColumn: `span ${n} / span ${n}` };
|
|
2018
2056
|
},
|
|
2019
2057
|
"col-start": ({ value, isArbitrary }) => {
|
|
2020
|
-
if (!
|
|
2058
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2021
2059
|
if (value === "auto") return { gridColumnStart: "auto" };
|
|
2022
2060
|
if (isArbitrary) return { gridColumnStart: value };
|
|
2023
2061
|
const n = parseInt(value, 10);
|
|
2024
2062
|
return isNaN(n) ? null : { gridColumnStart: n };
|
|
2025
2063
|
},
|
|
2026
2064
|
"col-end": ({ value, isArbitrary }) => {
|
|
2027
|
-
if (!
|
|
2065
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2028
2066
|
if (value === "auto") return { gridColumnEnd: "auto" };
|
|
2029
2067
|
if (isArbitrary) return { gridColumnEnd: value };
|
|
2030
2068
|
const n = parseInt(value, 10);
|
|
2031
2069
|
return isNaN(n) ? null : { gridColumnEnd: n };
|
|
2032
2070
|
},
|
|
2033
2071
|
col: ({ value, isArbitrary }) => {
|
|
2034
|
-
if (!
|
|
2072
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2035
2073
|
if (!value || value === "auto") return { gridColumn: "auto" };
|
|
2036
2074
|
if (isArbitrary) return { gridColumn: value };
|
|
2037
2075
|
return null;
|
|
2038
2076
|
},
|
|
2039
2077
|
// ── Grid row placement (web-only) ─────────────────────────────────────────
|
|
2040
2078
|
"row-span": ({ value }) => {
|
|
2041
|
-
if (!
|
|
2079
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2042
2080
|
if (value === "full") return { gridRow: "1 / -1" };
|
|
2043
2081
|
const n = parseInt(value, 10);
|
|
2044
2082
|
return isNaN(n) ? null : { gridRow: `span ${n} / span ${n}` };
|
|
2045
2083
|
},
|
|
2046
2084
|
"row-start": ({ value, isArbitrary }) => {
|
|
2047
|
-
if (!
|
|
2085
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2048
2086
|
if (value === "auto") return { gridRowStart: "auto" };
|
|
2049
2087
|
if (isArbitrary) return { gridRowStart: value };
|
|
2050
2088
|
const n = parseInt(value, 10);
|
|
2051
2089
|
return isNaN(n) ? null : { gridRowStart: n };
|
|
2052
2090
|
},
|
|
2053
2091
|
"row-end": ({ value, isArbitrary }) => {
|
|
2054
|
-
if (!
|
|
2092
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2055
2093
|
if (value === "auto") return { gridRowEnd: "auto" };
|
|
2056
2094
|
if (isArbitrary) return { gridRowEnd: value };
|
|
2057
2095
|
const n = parseInt(value, 10);
|
|
2058
2096
|
return isNaN(n) ? null : { gridRowEnd: n };
|
|
2059
2097
|
},
|
|
2060
2098
|
row: ({ value, isArbitrary }) => {
|
|
2061
|
-
if (!
|
|
2099
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2062
2100
|
if (!value || value === "auto") return { gridRow: "auto" };
|
|
2063
2101
|
if (isArbitrary) return { gridRow: value };
|
|
2064
2102
|
return null;
|
|
@@ -2066,7 +2104,7 @@ var RESOLVERS = {
|
|
|
2066
2104
|
// ── Grid alignment (web-only) ──────────────────────────────────────────────
|
|
2067
2105
|
// place-items is shorthand for align-items + justify-items on a grid container
|
|
2068
2106
|
"place-items": ({ value }) => {
|
|
2069
|
-
if (!
|
|
2107
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2070
2108
|
const map = {
|
|
2071
2109
|
start: "start",
|
|
2072
2110
|
end: "end",
|
|
@@ -2078,7 +2116,7 @@ var RESOLVERS = {
|
|
|
2078
2116
|
},
|
|
2079
2117
|
// place-content is shorthand for align-content + justify-content on a grid container
|
|
2080
2118
|
"place-content": ({ value }) => {
|
|
2081
|
-
if (!
|
|
2119
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2082
2120
|
const map = {
|
|
2083
2121
|
start: "start",
|
|
2084
2122
|
end: "end",
|
|
@@ -2093,7 +2131,7 @@ var RESOLVERS = {
|
|
|
2093
2131
|
},
|
|
2094
2132
|
// justify-items controls inline-axis alignment of grid items within their cells
|
|
2095
2133
|
"justify-items": ({ value }) => {
|
|
2096
|
-
if (!
|
|
2134
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2097
2135
|
const map = {
|
|
2098
2136
|
start: "start",
|
|
2099
2137
|
end: "end",
|
|
@@ -2104,7 +2142,7 @@ var RESOLVERS = {
|
|
|
2104
2142
|
},
|
|
2105
2143
|
// place-self is shorthand for align-self + justify-self on a grid item
|
|
2106
2144
|
"place-self": ({ value }) => {
|
|
2107
|
-
if (!
|
|
2145
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2108
2146
|
const map = {
|
|
2109
2147
|
auto: "auto",
|
|
2110
2148
|
start: "start",
|
|
@@ -2116,7 +2154,7 @@ var RESOLVERS = {
|
|
|
2116
2154
|
},
|
|
2117
2155
|
// justify-self controls inline-axis self-alignment of a grid item
|
|
2118
2156
|
"justify-self": ({ value }) => {
|
|
2119
|
-
if (!
|
|
2157
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2120
2158
|
const map = {
|
|
2121
2159
|
auto: "auto",
|
|
2122
2160
|
start: "start",
|
|
@@ -2128,7 +2166,7 @@ var RESOLVERS = {
|
|
|
2128
2166
|
},
|
|
2129
2167
|
// ── CSS Filters (composable via CSS variables, web-only) ─────────────────
|
|
2130
2168
|
blur: ({ value, isArbitrary }) => {
|
|
2131
|
-
if (!
|
|
2169
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2132
2170
|
const sizes = {
|
|
2133
2171
|
"": "blur(8px)",
|
|
2134
2172
|
sm: "blur(4px)",
|
|
@@ -2143,43 +2181,43 @@ var RESOLVERS = {
|
|
|
2143
2181
|
return v !== void 0 ? { "--tw-blur": v, filter: FILTER_COMPOSE } : null;
|
|
2144
2182
|
},
|
|
2145
2183
|
brightness: ({ value, isArbitrary }) => {
|
|
2146
|
-
if (!
|
|
2184
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2147
2185
|
const v = isArbitrary ? `brightness(${value})` : `brightness(${parseFloat(value) / 100})`;
|
|
2148
2186
|
return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-brightness": v, filter: FILTER_COMPOSE };
|
|
2149
2187
|
},
|
|
2150
2188
|
contrast: ({ value, isArbitrary }) => {
|
|
2151
|
-
if (!
|
|
2189
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2152
2190
|
const v = isArbitrary ? `contrast(${value})` : `contrast(${parseFloat(value) / 100})`;
|
|
2153
2191
|
return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-contrast": v, filter: FILTER_COMPOSE };
|
|
2154
2192
|
},
|
|
2155
2193
|
grayscale: ({ value }) => {
|
|
2156
|
-
if (!
|
|
2194
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2157
2195
|
const v = value === "0" ? "grayscale(0)" : "grayscale(100%)";
|
|
2158
2196
|
return { "--tw-grayscale": v, filter: FILTER_COMPOSE };
|
|
2159
2197
|
},
|
|
2160
2198
|
"hue-rotate": ({ value, negative, isArbitrary }) => {
|
|
2161
|
-
if (!
|
|
2199
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2162
2200
|
const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
|
|
2163
2201
|
if (isNaN(parseFloat(deg)) && !isArbitrary) return null;
|
|
2164
2202
|
return { "--tw-hue-rotate": `hue-rotate(${deg})`, filter: FILTER_COMPOSE };
|
|
2165
2203
|
},
|
|
2166
2204
|
invert: ({ value }) => {
|
|
2167
|
-
if (!
|
|
2205
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2168
2206
|
const v = value === "0" ? "invert(0)" : "invert(100%)";
|
|
2169
2207
|
return { "--tw-invert": v, filter: FILTER_COMPOSE };
|
|
2170
2208
|
},
|
|
2171
2209
|
saturate: ({ value, isArbitrary }) => {
|
|
2172
|
-
if (!
|
|
2210
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2173
2211
|
const v = isArbitrary ? `saturate(${value})` : `saturate(${parseFloat(value) / 100})`;
|
|
2174
2212
|
return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-saturate": v, filter: FILTER_COMPOSE };
|
|
2175
2213
|
},
|
|
2176
2214
|
sepia: ({ value }) => {
|
|
2177
|
-
if (!
|
|
2215
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2178
2216
|
const v = value === "0" ? "sepia(0)" : "sepia(100%)";
|
|
2179
2217
|
return { "--tw-sepia": v, filter: FILTER_COMPOSE };
|
|
2180
2218
|
},
|
|
2181
2219
|
"drop-shadow": ({ value, isArbitrary }) => {
|
|
2182
|
-
if (!
|
|
2220
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2183
2221
|
if (isArbitrary) return { "--tw-drop-shadow": `drop-shadow(${value.replace(/_/g, " ")})`, filter: FILTER_COMPOSE };
|
|
2184
2222
|
const presets = {
|
|
2185
2223
|
"": "drop-shadow(0 1px 2px rgb(0 0 0/0.1)) drop-shadow(0 1px 1px rgb(0 0 0/0.06))",
|
|
@@ -2195,14 +2233,14 @@ var RESOLVERS = {
|
|
|
2195
2233
|
},
|
|
2196
2234
|
// Arbitrary full filter string: filter-[blur(4px)_grayscale(1)]
|
|
2197
2235
|
filter: ({ value, isArbitrary }) => {
|
|
2198
|
-
if (!
|
|
2236
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2199
2237
|
if (isArbitrary) return { filter: value.replace(/_/g, " ") };
|
|
2200
2238
|
if (value === "none") return { filter: "none" };
|
|
2201
2239
|
return null;
|
|
2202
2240
|
},
|
|
2203
2241
|
// ── Backdrop Filters (composable via CSS variables, web-only) ────────────
|
|
2204
2242
|
"backdrop-blur": ({ value, isArbitrary }) => {
|
|
2205
|
-
if (!
|
|
2243
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2206
2244
|
const sizes = {
|
|
2207
2245
|
"": "blur(8px)",
|
|
2208
2246
|
sm: "blur(4px)",
|
|
@@ -2217,52 +2255,52 @@ var RESOLVERS = {
|
|
|
2217
2255
|
return v !== void 0 ? { "--tw-backdrop-blur": v, backdropFilter: BACKDROP_FILTER_COMPOSE } : null;
|
|
2218
2256
|
},
|
|
2219
2257
|
"backdrop-brightness": ({ value, isArbitrary }) => {
|
|
2220
|
-
if (!
|
|
2258
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2221
2259
|
const v = isArbitrary ? `brightness(${value})` : `brightness(${parseFloat(value) / 100})`;
|
|
2222
2260
|
return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-backdrop-brightness": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
|
|
2223
2261
|
},
|
|
2224
2262
|
"backdrop-contrast": ({ value, isArbitrary }) => {
|
|
2225
|
-
if (!
|
|
2263
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2226
2264
|
const v = isArbitrary ? `contrast(${value})` : `contrast(${parseFloat(value) / 100})`;
|
|
2227
2265
|
return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-backdrop-contrast": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
|
|
2228
2266
|
},
|
|
2229
2267
|
"backdrop-grayscale": ({ value }) => {
|
|
2230
|
-
if (!
|
|
2268
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2231
2269
|
return { "--tw-backdrop-grayscale": value === "0" ? "grayscale(0)" : "grayscale(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
|
|
2232
2270
|
},
|
|
2233
2271
|
"backdrop-hue-rotate": ({ value, negative, isArbitrary }) => {
|
|
2234
|
-
if (!
|
|
2272
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2235
2273
|
const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
|
|
2236
2274
|
if (isNaN(parseFloat(deg)) && !isArbitrary) return null;
|
|
2237
2275
|
return { "--tw-backdrop-hue-rotate": `hue-rotate(${deg})`, backdropFilter: BACKDROP_FILTER_COMPOSE };
|
|
2238
2276
|
},
|
|
2239
2277
|
"backdrop-invert": ({ value }) => {
|
|
2240
|
-
if (!
|
|
2278
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2241
2279
|
return { "--tw-backdrop-invert": value === "0" ? "invert(0)" : "invert(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
|
|
2242
2280
|
},
|
|
2243
2281
|
"backdrop-opacity": ({ value, isArbitrary }) => {
|
|
2244
|
-
if (!
|
|
2282
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2245
2283
|
const v = isArbitrary ? `opacity(${value})` : `opacity(${parseFloat(value) / 100})`;
|
|
2246
2284
|
return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-backdrop-opacity": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
|
|
2247
2285
|
},
|
|
2248
2286
|
"backdrop-saturate": ({ value, isArbitrary }) => {
|
|
2249
|
-
if (!
|
|
2287
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2250
2288
|
const v = isArbitrary ? `saturate(${value})` : `saturate(${parseFloat(value) / 100})`;
|
|
2251
2289
|
return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-backdrop-saturate": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
|
|
2252
2290
|
},
|
|
2253
2291
|
"backdrop-sepia": ({ value }) => {
|
|
2254
|
-
if (!
|
|
2292
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2255
2293
|
return { "--tw-backdrop-sepia": value === "0" ? "sepia(0)" : "sepia(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
|
|
2256
2294
|
},
|
|
2257
2295
|
"backdrop-filter": ({ value, isArbitrary }) => {
|
|
2258
|
-
if (!
|
|
2296
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2259
2297
|
if (isArbitrary) return { backdropFilter: value.replace(/_/g, " ") };
|
|
2260
2298
|
if (value === "none") return { backdropFilter: "none" };
|
|
2261
2299
|
return null;
|
|
2262
2300
|
},
|
|
2263
2301
|
// ── Background gradient (CSS variable gradient stops, web-only) ──────────
|
|
2264
2302
|
"bg-gradient-to": ({ value }) => {
|
|
2265
|
-
if (!
|
|
2303
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2266
2304
|
const directions = {
|
|
2267
2305
|
t: "to top",
|
|
2268
2306
|
tr: "to top right",
|
|
@@ -2280,7 +2318,7 @@ var RESOLVERS = {
|
|
|
2280
2318
|
};
|
|
2281
2319
|
},
|
|
2282
2320
|
from: ({ value, isArbitrary }, { colors }) => {
|
|
2283
|
-
if (!
|
|
2321
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2284
2322
|
const color = resolveColor(value, colors, isArbitrary);
|
|
2285
2323
|
if (!color) return null;
|
|
2286
2324
|
return {
|
|
@@ -2289,7 +2327,7 @@ var RESOLVERS = {
|
|
|
2289
2327
|
};
|
|
2290
2328
|
},
|
|
2291
2329
|
via: ({ value, isArbitrary }, { colors }) => {
|
|
2292
|
-
if (!
|
|
2330
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2293
2331
|
const color = resolveColor(value, colors, isArbitrary);
|
|
2294
2332
|
if (!color) return null;
|
|
2295
2333
|
return {
|
|
@@ -2298,7 +2336,7 @@ var RESOLVERS = {
|
|
|
2298
2336
|
};
|
|
2299
2337
|
},
|
|
2300
2338
|
to: ({ value, isArbitrary }, { colors }) => {
|
|
2301
|
-
if (!
|
|
2339
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2302
2340
|
const color = resolveColor(value, colors, isArbitrary);
|
|
2303
2341
|
if (!color) return null;
|
|
2304
2342
|
return { "--tw-gradient-to": color };
|
|
@@ -2307,23 +2345,23 @@ var RESOLVERS = {
|
|
|
2307
2345
|
"skew-x": ({ value, negative, isArbitrary }) => {
|
|
2308
2346
|
const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
|
|
2309
2347
|
if (!isArbitrary && isNaN(parseFloat(value))) return null;
|
|
2310
|
-
return
|
|
2348
|
+
return getEffectiveIsWeb() ? { transform: `skewX(${deg})` } : { transform: [{ skewX: deg }] };
|
|
2311
2349
|
},
|
|
2312
2350
|
"skew-y": ({ value, negative, isArbitrary }) => {
|
|
2313
2351
|
const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
|
|
2314
2352
|
if (!isArbitrary && isNaN(parseFloat(value))) return null;
|
|
2315
|
-
return
|
|
2353
|
+
return getEffectiveIsWeb() ? { transform: `skewY(${deg})` } : { transform: [{ skewY: deg }] };
|
|
2316
2354
|
},
|
|
2317
2355
|
// Arbitrary full transform string: transform-[rotate(45deg)_scale(1.5)]
|
|
2318
2356
|
transform: ({ value, isArbitrary }) => {
|
|
2319
|
-
if (!
|
|
2357
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2320
2358
|
if (isArbitrary) return { transform: value.replace(/_/g, " ") };
|
|
2321
2359
|
if (value === "none") return { transform: "none" };
|
|
2322
2360
|
return null;
|
|
2323
2361
|
},
|
|
2324
2362
|
// Transform origin
|
|
2325
2363
|
origin: ({ value, isArbitrary }) => {
|
|
2326
|
-
if (!
|
|
2364
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2327
2365
|
if (isArbitrary) return { transformOrigin: value.replace(/_/g, " ") };
|
|
2328
2366
|
const origins = {
|
|
2329
2367
|
center: "center",
|
|
@@ -2340,7 +2378,7 @@ var RESOLVERS = {
|
|
|
2340
2378
|
},
|
|
2341
2379
|
// ── Text decoration advanced (web-only) ───────────────────────────────────
|
|
2342
2380
|
decoration: ({ value, isArbitrary }, { colors }) => {
|
|
2343
|
-
if (!
|
|
2381
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2344
2382
|
if (isArbitrary) {
|
|
2345
2383
|
if (/^\d/.test(value) || value.startsWith("calc(")) return { textDecorationThickness: value };
|
|
2346
2384
|
return { textDecorationColor: value };
|
|
@@ -2367,7 +2405,7 @@ var RESOLVERS = {
|
|
|
2367
2405
|
return color ? { textDecorationColor: color } : null;
|
|
2368
2406
|
},
|
|
2369
2407
|
"underline-offset": ({ value, isArbitrary }) => {
|
|
2370
|
-
if (!
|
|
2408
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2371
2409
|
if (isArbitrary) return { textUnderlineOffset: value };
|
|
2372
2410
|
const offsets = {
|
|
2373
2411
|
auto: "auto",
|
|
@@ -2381,7 +2419,7 @@ var RESOLVERS = {
|
|
|
2381
2419
|
},
|
|
2382
2420
|
// ── Outline extended (web-only) ───────────────────────────────────────────
|
|
2383
2421
|
outline: ({ value, isArbitrary }, { colors }) => {
|
|
2384
|
-
if (!
|
|
2422
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2385
2423
|
if (!value) return { outline: "2px solid transparent", outlineOffset: "2px" };
|
|
2386
2424
|
if (value === "none") return { outline: "none", outlineOffset: "0" };
|
|
2387
2425
|
if (isArbitrary) {
|
|
@@ -2394,14 +2432,14 @@ var RESOLVERS = {
|
|
|
2394
2432
|
return color ? { outlineColor: color } : null;
|
|
2395
2433
|
},
|
|
2396
2434
|
"outline-offset": ({ value, isArbitrary }) => {
|
|
2397
|
-
if (!
|
|
2435
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2398
2436
|
if (isArbitrary) return { outlineOffset: value };
|
|
2399
2437
|
const offsets = { "0": "0px", "1": "1px", "2": "2px", "4": "4px", "8": "8px" };
|
|
2400
2438
|
return offsets[value] ? { outlineOffset: offsets[value] } : null;
|
|
2401
2439
|
},
|
|
2402
2440
|
// ── Columns (web-only) ─────────────────────────────────────────────────────
|
|
2403
2441
|
columns: ({ value, isArbitrary }) => {
|
|
2404
|
-
if (!
|
|
2442
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2405
2443
|
if (isArbitrary) return { columnCount: value };
|
|
2406
2444
|
if (value === "auto") return { columnCount: "auto" };
|
|
2407
2445
|
const n = parseInt(value, 10);
|
|
@@ -2425,7 +2463,7 @@ var RESOLVERS = {
|
|
|
2425
2463
|
},
|
|
2426
2464
|
// ── Mix / background blend mode (web-only) ───────────────────────────────
|
|
2427
2465
|
"mix-blend": ({ value }) => {
|
|
2428
|
-
if (!
|
|
2466
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2429
2467
|
const modes = [
|
|
2430
2468
|
"normal",
|
|
2431
2469
|
"multiply",
|
|
@@ -2448,7 +2486,7 @@ var RESOLVERS = {
|
|
|
2448
2486
|
return modes.includes(value) ? { mixBlendMode: value } : null;
|
|
2449
2487
|
},
|
|
2450
2488
|
"bg-blend": ({ value }) => {
|
|
2451
|
-
if (!
|
|
2489
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2452
2490
|
const modes = [
|
|
2453
2491
|
"normal",
|
|
2454
2492
|
"multiply",
|
|
@@ -2471,7 +2509,7 @@ var RESOLVERS = {
|
|
|
2471
2509
|
},
|
|
2472
2510
|
// ── Will-change (web-only) ─────────────────────────────────────────────────
|
|
2473
2511
|
"will-change": ({ value, isArbitrary }) => {
|
|
2474
|
-
if (!
|
|
2512
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2475
2513
|
if (isArbitrary) return { willChange: value.replace(/_/g, ", ") };
|
|
2476
2514
|
const presets = {
|
|
2477
2515
|
auto: "auto",
|
|
@@ -2485,21 +2523,21 @@ var RESOLVERS = {
|
|
|
2485
2523
|
// These return special __divide* markers that resolver.ts converts to
|
|
2486
2524
|
// .cls > * + * { border-... } CSS rules. No inline style is applied.
|
|
2487
2525
|
"divide-x": ({ value, isArbitrary }) => {
|
|
2488
|
-
if (!
|
|
2526
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2489
2527
|
if (value === "reverse") return null;
|
|
2490
2528
|
if (!value) return { __divideX: 1 };
|
|
2491
2529
|
const n = parseFloat(value);
|
|
2492
2530
|
return isNaN(n) ? null : { __divideX: n };
|
|
2493
2531
|
},
|
|
2494
2532
|
"divide-y": ({ value, isArbitrary }) => {
|
|
2495
|
-
if (!
|
|
2533
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2496
2534
|
if (value === "reverse") return null;
|
|
2497
2535
|
if (!value) return { __divideY: 1 };
|
|
2498
2536
|
const n = parseFloat(value);
|
|
2499
2537
|
return isNaN(n) ? null : { __divideY: n };
|
|
2500
2538
|
},
|
|
2501
2539
|
divide: ({ value, isArbitrary }, { colors }) => {
|
|
2502
|
-
if (!
|
|
2540
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2503
2541
|
if (isArbitrary) return { __divideColor: value };
|
|
2504
2542
|
const styleTokens = {
|
|
2505
2543
|
solid: "solid",
|
|
@@ -2516,7 +2554,7 @@ var RESOLVERS = {
|
|
|
2516
2554
|
// Named presets give cross-platform shadow; arbitrary is web-only.
|
|
2517
2555
|
"text-shadow": ({ value, isArbitrary }, { colors }) => {
|
|
2518
2556
|
if (value === "none") {
|
|
2519
|
-
return
|
|
2557
|
+
return getEffectiveIsWeb() ? { textShadow: "none" } : { textShadowColor: "transparent", textShadowOffset: { width: 0, height: 0 }, textShadowRadius: 0 };
|
|
2520
2558
|
}
|
|
2521
2559
|
const webPresets = {
|
|
2522
2560
|
"": "0 2px 4px rgba(0,0,0,0.3)",
|
|
@@ -2533,15 +2571,15 @@ var RESOLVERS = {
|
|
|
2533
2571
|
xl: { textShadowColor: "rgba(0,0,0,0.5)", textShadowOffset: { width: 0, height: 16 }, textShadowRadius: 32 }
|
|
2534
2572
|
};
|
|
2535
2573
|
if (value in webPresets) {
|
|
2536
|
-
if (
|
|
2574
|
+
if (getEffectiveIsWeb()) return { textShadow: webPresets[value] };
|
|
2537
2575
|
return nativePresets[value] ?? null;
|
|
2538
2576
|
}
|
|
2539
2577
|
if (isArbitrary) {
|
|
2540
|
-
return
|
|
2578
|
+
return getEffectiveIsWeb() ? { textShadow: value.replace(/_/g, " ") } : null;
|
|
2541
2579
|
}
|
|
2542
2580
|
const color = resolveColor(value, colors, false);
|
|
2543
2581
|
if (color) {
|
|
2544
|
-
return
|
|
2582
|
+
return getEffectiveIsWeb() ? { textShadow: `0 2px 4px ${color}` } : { textShadowColor: color };
|
|
2545
2583
|
}
|
|
2546
2584
|
return null;
|
|
2547
2585
|
},
|
|
@@ -2549,13 +2587,13 @@ var RESOLVERS = {
|
|
|
2549
2587
|
perspective: ({ value, isArbitrary }) => {
|
|
2550
2588
|
if (isArbitrary) {
|
|
2551
2589
|
const numPx = parseFloat(value);
|
|
2552
|
-
if (
|
|
2590
|
+
if (getEffectiveIsWeb()) return { transform: `perspective(${value})` };
|
|
2553
2591
|
return isNaN(numPx) ? null : { transform: [{ perspective: numPx }] };
|
|
2554
2592
|
}
|
|
2555
|
-
if (value === "none") return
|
|
2593
|
+
if (value === "none") return getEffectiveIsWeb() ? { transform: "none" } : null;
|
|
2556
2594
|
const n = parseFloat(value);
|
|
2557
2595
|
if (isNaN(n)) return null;
|
|
2558
|
-
return
|
|
2596
|
+
return getEffectiveIsWeb() ? { transform: `perspective(${n}px)` } : { transform: [{ perspective: n }] };
|
|
2559
2597
|
},
|
|
2560
2598
|
// ── Tint color (native-only, for Image and icon components) ──────────────
|
|
2561
2599
|
tint: ({ value, isArbitrary }, { colors }) => {
|
|
@@ -2573,7 +2611,7 @@ var RESOLVERS = {
|
|
|
2573
2611
|
// resolver.ts detects __keyframe, injects the rule, then strips the marker
|
|
2574
2612
|
// so it never reaches element inline styles.
|
|
2575
2613
|
animate: ({ value, isArbitrary }) => {
|
|
2576
|
-
if (!
|
|
2614
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2577
2615
|
if (isArbitrary) return { animation: value.replace(/_/g, " ") };
|
|
2578
2616
|
const defs = {
|
|
2579
2617
|
none: { animation: "none" },
|
|
@@ -2599,7 +2637,7 @@ var RESOLVERS = {
|
|
|
2599
2637
|
},
|
|
2600
2638
|
// ── Line-clamp (web-only) ─────────────────────────────────────────────────
|
|
2601
2639
|
"line-clamp": ({ value }) => {
|
|
2602
|
-
if (!
|
|
2640
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2603
2641
|
if (value === "none") return { overflow: "visible", display: "block", WebkitLineClamp: "unset" };
|
|
2604
2642
|
const n = parseInt(value, 10);
|
|
2605
2643
|
if (isNaN(n) || n < 1) return null;
|
|
@@ -2612,14 +2650,14 @@ var RESOLVERS = {
|
|
|
2612
2650
|
},
|
|
2613
2651
|
// ── Caret color (web-only) ────────────────────────────────────────────────
|
|
2614
2652
|
caret: ({ value, isArbitrary }, { colors }) => {
|
|
2615
|
-
if (!
|
|
2653
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2616
2654
|
if (value === "auto" || value === "transparent") return { caretColor: value };
|
|
2617
2655
|
const color = resolveColor(value, colors, isArbitrary);
|
|
2618
2656
|
return color ? { caretColor: color } : null;
|
|
2619
2657
|
},
|
|
2620
2658
|
// ── Accent color (web-only) ───────────────────────────────────────────────
|
|
2621
2659
|
accent: ({ value, isArbitrary }, { colors }) => {
|
|
2622
|
-
if (!
|
|
2660
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2623
2661
|
if (value === "auto") return { accentColor: "auto" };
|
|
2624
2662
|
const color = resolveColor(value, colors, isArbitrary);
|
|
2625
2663
|
return color ? { accentColor: color } : null;
|
|
@@ -2703,7 +2741,7 @@ var RESOLVERS = {
|
|
|
2703
2741
|
}
|
|
2704
2742
|
const v = zIndex[value];
|
|
2705
2743
|
if (v !== void 0) {
|
|
2706
|
-
if (v === "auto") return
|
|
2744
|
+
if (v === "auto") return getEffectiveIsWeb() ? { zIndex: "auto" } : null;
|
|
2707
2745
|
return { zIndex: v };
|
|
2708
2746
|
}
|
|
2709
2747
|
const n = parseInt(value);
|
|
@@ -2732,13 +2770,13 @@ var RESOLVERS = {
|
|
|
2732
2770
|
},
|
|
2733
2771
|
// ── Line height ────────────────────────────────────────────────────────────
|
|
2734
2772
|
leading: ({ value, isArbitrary }, { lineHeight }) => {
|
|
2735
|
-
if (isArbitrary) return { lineHeight:
|
|
2773
|
+
if (isArbitrary) return { lineHeight: getEffectiveIsWeb() ? value : toNativeValue(value) };
|
|
2736
2774
|
const v = lineHeight[value];
|
|
2737
2775
|
return v !== void 0 ? { lineHeight: v } : null;
|
|
2738
2776
|
},
|
|
2739
2777
|
// ── Letter spacing ─────────────────────────────────────────────────────────
|
|
2740
2778
|
tracking: ({ value, isArbitrary }, { letterSpacing }) => {
|
|
2741
|
-
if (isArbitrary) return { letterSpacing:
|
|
2779
|
+
if (isArbitrary) return { letterSpacing: getEffectiveIsWeb() ? value : toNativeValue(value) };
|
|
2742
2780
|
const v = letterSpacing[value];
|
|
2743
2781
|
return v !== void 0 ? { letterSpacing: v } : null;
|
|
2744
2782
|
},
|
|
@@ -2753,34 +2791,34 @@ var RESOLVERS = {
|
|
|
2753
2791
|
scale: ({ value, isArbitrary }) => {
|
|
2754
2792
|
const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
|
|
2755
2793
|
if (isNaN(n)) return null;
|
|
2756
|
-
return
|
|
2794
|
+
return getEffectiveIsWeb() ? { transform: `scale(${n})` } : { transform: [{ scale: n }] };
|
|
2757
2795
|
},
|
|
2758
2796
|
"scale-x": ({ value, isArbitrary }) => {
|
|
2759
2797
|
const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
|
|
2760
2798
|
if (isNaN(n)) return null;
|
|
2761
|
-
return
|
|
2799
|
+
return getEffectiveIsWeb() ? { transform: `scaleX(${n})` } : { transform: [{ scaleX: n }] };
|
|
2762
2800
|
},
|
|
2763
2801
|
"scale-y": ({ value, isArbitrary }) => {
|
|
2764
2802
|
const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
|
|
2765
2803
|
if (isNaN(n)) return null;
|
|
2766
|
-
return
|
|
2804
|
+
return getEffectiveIsWeb() ? { transform: `scaleY(${n})` } : { transform: [{ scaleY: n }] };
|
|
2767
2805
|
},
|
|
2768
2806
|
// ── Rotate ─────────────────────────────────────────────────────────────────
|
|
2769
2807
|
rotate: ({ value, negative, isArbitrary }) => {
|
|
2770
2808
|
if (isArbitrary) {
|
|
2771
2809
|
const finalValue = negative ? `-${value}` : value;
|
|
2772
|
-
return
|
|
2810
|
+
return getEffectiveIsWeb() ? { transform: `rotate(${finalValue})` } : { transform: [{ rotate: finalValue }] };
|
|
2773
2811
|
}
|
|
2774
2812
|
const deg = parseFloat(value);
|
|
2775
2813
|
if (isNaN(deg)) return null;
|
|
2776
2814
|
const finalDeg = negative ? -deg : deg;
|
|
2777
|
-
return
|
|
2815
|
+
return getEffectiveIsWeb() ? { transform: `rotate(${finalDeg}deg)` } : { transform: [{ rotate: `${finalDeg}deg` }] };
|
|
2778
2816
|
},
|
|
2779
2817
|
// ── Translate ──────────────────────────────────────────────────────────────
|
|
2780
2818
|
"translate-x": ({ value, negative, isArbitrary }, { spacing }) => {
|
|
2781
2819
|
const v = resolveSpacing(value, negative, spacing, isArbitrary);
|
|
2782
2820
|
if (v === null) return null;
|
|
2783
|
-
if (
|
|
2821
|
+
if (getEffectiveIsWeb()) return { transform: `translateX(${v})` };
|
|
2784
2822
|
if (typeof v === "string") {
|
|
2785
2823
|
const n = parseFloat(v);
|
|
2786
2824
|
return isNaN(n) ? null : { transform: [{ translateX: n }] };
|
|
@@ -2790,7 +2828,7 @@ var RESOLVERS = {
|
|
|
2790
2828
|
"translate-y": ({ value, negative, isArbitrary }, { spacing }) => {
|
|
2791
2829
|
const v = resolveSpacing(value, negative, spacing, isArbitrary);
|
|
2792
2830
|
if (v === null) return null;
|
|
2793
|
-
if (
|
|
2831
|
+
if (getEffectiveIsWeb()) return { transform: `translateY(${v})` };
|
|
2794
2832
|
if (typeof v === "string") {
|
|
2795
2833
|
const n = parseFloat(v);
|
|
2796
2834
|
return isNaN(n) ? null : { transform: [{ translateY: n }] };
|
|
@@ -2803,12 +2841,12 @@ var RESOLVERS = {
|
|
|
2803
2841
|
const presets = { auto: "auto", square: 1, video: 16 / 9 };
|
|
2804
2842
|
if (!(value in presets)) return null;
|
|
2805
2843
|
const v = presets[value];
|
|
2806
|
-
if (v === "auto") return
|
|
2844
|
+
if (v === "auto") return getEffectiveIsWeb() ? { aspectRatio: "auto" } : null;
|
|
2807
2845
|
return { aspectRatio: v };
|
|
2808
2846
|
},
|
|
2809
2847
|
// ── Transition (web-only; use Animated API on native) ─────────────────────
|
|
2810
2848
|
transition: ({ value }) => {
|
|
2811
|
-
if (!
|
|
2849
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2812
2850
|
const presets = {
|
|
2813
2851
|
"": "color 150ms, background-color 150ms, border-color 150ms, opacity 150ms, box-shadow 150ms",
|
|
2814
2852
|
all: "all 150ms",
|
|
@@ -2822,18 +2860,18 @@ var RESOLVERS = {
|
|
|
2822
2860
|
return v !== void 0 ? { transition: v } : null;
|
|
2823
2861
|
},
|
|
2824
2862
|
duration: ({ value, isArbitrary }) => {
|
|
2825
|
-
if (!
|
|
2863
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2826
2864
|
const ms = isArbitrary ? value : `${value}ms`;
|
|
2827
2865
|
return { transitionDuration: ms };
|
|
2828
2866
|
},
|
|
2829
2867
|
delay: ({ value, isArbitrary }) => {
|
|
2830
|
-
if (!
|
|
2868
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2831
2869
|
const ms = isArbitrary ? value : `${value}ms`;
|
|
2832
2870
|
return { transitionDelay: ms };
|
|
2833
2871
|
},
|
|
2834
2872
|
// ── Ring (web-only: box-shadow outline ring) ──────────────────────────────
|
|
2835
2873
|
ring: ({ value, isArbitrary }, { colors }) => {
|
|
2836
|
-
if (!
|
|
2874
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2837
2875
|
const DEFAULT_COLOR = "rgba(59, 130, 246, 0.5)";
|
|
2838
2876
|
const DEFAULT_WIDTH = 3;
|
|
2839
2877
|
if (!value) {
|
|
@@ -2860,7 +2898,7 @@ var RESOLVERS = {
|
|
|
2860
2898
|
return null;
|
|
2861
2899
|
},
|
|
2862
2900
|
"ring-offset": ({ value, isArbitrary }, _theme) => {
|
|
2863
|
-
if (!
|
|
2901
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2864
2902
|
const DEFAULT_RING_COLOR = "rgba(59, 130, 246, 0.5)";
|
|
2865
2903
|
const DEFAULT_RING_WIDTH = 3;
|
|
2866
2904
|
const offsetTokens = { "0": 0, "1": 1, "2": 2, "4": 4, "8": 8 };
|
|
@@ -2889,7 +2927,7 @@ function resolveUtility(parsed, theme) {
|
|
|
2889
2927
|
if (parsed.utility === "inline-grid") {
|
|
2890
2928
|
return { display: "inline-grid" };
|
|
2891
2929
|
}
|
|
2892
|
-
if (parsed.utility in
|
|
2930
|
+
if (parsed.utility in getStandalone()) return getStandalone()[parsed.utility] ?? null;
|
|
2893
2931
|
}
|
|
2894
2932
|
const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
|
|
2895
2933
|
if (resolver) return resolver(parsed, theme);
|
|
@@ -2905,7 +2943,7 @@ function getPluginStandaloneMap() {
|
|
|
2905
2943
|
return PLUGIN_STANDALONE;
|
|
2906
2944
|
}
|
|
2907
2945
|
function isKnownUtility(utility) {
|
|
2908
|
-
return utility in
|
|
2946
|
+
return utility in getStandalone() || utility in RESOLVERS || utility in PLUGIN_STANDALONE || utility in PLUGIN_RESOLVERS;
|
|
2909
2947
|
}
|
|
2910
2948
|
|
|
2911
2949
|
// src/core/cache.ts
|
|
@@ -3538,7 +3576,9 @@ export {
|
|
|
3538
3576
|
defaultColors,
|
|
3539
3577
|
defaultTheme,
|
|
3540
3578
|
isWeb,
|
|
3579
|
+
setCSSGenMode,
|
|
3541
3580
|
parseClass,
|
|
3581
|
+
splitClassTokens,
|
|
3542
3582
|
parseClasses,
|
|
3543
3583
|
syncGlobalWidth,
|
|
3544
3584
|
syncGlobalScreens,
|