@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
package/dist/jsx-dev-runtime.js
CHANGED
|
@@ -613,6 +613,10 @@ var LRUCache = class {
|
|
|
613
613
|
|
|
614
614
|
// src/core/platform.ts
|
|
615
615
|
var isWeb = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
|
|
616
|
+
var _cssGenMode = false;
|
|
617
|
+
function getEffectiveIsWeb() {
|
|
618
|
+
return isWeb || _cssGenMode;
|
|
619
|
+
}
|
|
616
620
|
function toNativeValue(raw) {
|
|
617
621
|
if (/^-?\d+(\.\d+)?px$/.test(raw)) return parseFloat(raw);
|
|
618
622
|
if (/^-?\d+(\.\d+)?rem$/.test(raw)) return parseFloat(raw) * 16;
|
|
@@ -1312,7 +1316,7 @@ function parseClass(className) {
|
|
|
1312
1316
|
const bracketStart = remaining.lastIndexOf("-[");
|
|
1313
1317
|
if (bracketStart > 0 && remaining.endsWith("]")) {
|
|
1314
1318
|
const utility = remaining.slice(0, bracketStart);
|
|
1315
|
-
const value = remaining.slice(bracketStart + 2, -1);
|
|
1319
|
+
const value = remaining.slice(bracketStart + 2, -1).replace(/_/g, " ");
|
|
1316
1320
|
return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
|
|
1317
1321
|
}
|
|
1318
1322
|
if (STANDALONE_UTILITIES.has(remaining)) {
|
|
@@ -1341,10 +1345,29 @@ function parseClass(className) {
|
|
|
1341
1345
|
}
|
|
1342
1346
|
return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
|
|
1343
1347
|
}
|
|
1348
|
+
function splitClassTokens(classString) {
|
|
1349
|
+
const tokens = [];
|
|
1350
|
+
let current = "";
|
|
1351
|
+
let depth = 0;
|
|
1352
|
+
for (let i = 0; i < classString.length; i++) {
|
|
1353
|
+
const ch = classString[i];
|
|
1354
|
+
if (ch === "[") depth++;
|
|
1355
|
+
else if (ch === "]") depth--;
|
|
1356
|
+
if (/\s/.test(ch) && depth === 0) {
|
|
1357
|
+
if (current) {
|
|
1358
|
+
tokens.push(current);
|
|
1359
|
+
current = "";
|
|
1360
|
+
}
|
|
1361
|
+
} else {
|
|
1362
|
+
current += ch;
|
|
1363
|
+
}
|
|
1364
|
+
}
|
|
1365
|
+
if (current) tokens.push(current);
|
|
1366
|
+
return tokens;
|
|
1367
|
+
}
|
|
1344
1368
|
function parseClasses(classString) {
|
|
1345
1369
|
const results = [];
|
|
1346
|
-
for (const token of classString
|
|
1347
|
-
if (!token) continue;
|
|
1370
|
+
for (const token of splitClassTokens(classString)) {
|
|
1348
1371
|
const parsed = parseClass(token);
|
|
1349
1372
|
if (parsed) results.push(parsed);
|
|
1350
1373
|
}
|
|
@@ -1430,8 +1453,12 @@ function hexToRgba(hex, alpha) {
|
|
|
1430
1453
|
}
|
|
1431
1454
|
function resolveSpacing(value, negative, spacing, isArbitrary) {
|
|
1432
1455
|
if (isArbitrary) {
|
|
1433
|
-
const resolved =
|
|
1434
|
-
|
|
1456
|
+
const resolved = getEffectiveIsWeb() ? value : toNativeValue(value);
|
|
1457
|
+
if (negative) {
|
|
1458
|
+
if (typeof resolved === "number") return -resolved;
|
|
1459
|
+
if (typeof resolved === "string" && /^\d/.test(resolved)) return `-${resolved}`;
|
|
1460
|
+
}
|
|
1461
|
+
return resolved;
|
|
1435
1462
|
}
|
|
1436
1463
|
const raw = spacing[value];
|
|
1437
1464
|
if (raw === void 0) return null;
|
|
@@ -1443,7 +1470,7 @@ function resolveSpacing(value, negative, spacing, isArbitrary) {
|
|
|
1443
1470
|
return raw;
|
|
1444
1471
|
}
|
|
1445
1472
|
function resolveSizing(value, spacing, isArbitrary) {
|
|
1446
|
-
if (isArbitrary) return
|
|
1473
|
+
if (isArbitrary) return getEffectiveIsWeb() ? value : toNativeValue(value);
|
|
1447
1474
|
const raw = spacing[value];
|
|
1448
1475
|
if (raw !== void 0) return raw;
|
|
1449
1476
|
if (/^\d+\/\d+$/.test(value)) {
|
|
@@ -1453,356 +1480,364 @@ function resolveSizing(value, spacing, isArbitrary) {
|
|
|
1453
1480
|
return null;
|
|
1454
1481
|
}
|
|
1455
1482
|
function resolveRadius(value, radii, isArbitrary) {
|
|
1456
|
-
if (isArbitrary) return
|
|
1483
|
+
if (isArbitrary) return getEffectiveIsWeb() ? value : toNativeValue(value);
|
|
1457
1484
|
const key = value === "" ? "DEFAULT" : value;
|
|
1458
1485
|
return radii[key] ?? null;
|
|
1459
1486
|
}
|
|
1460
1487
|
function resolveFontSize(value, fontSizes, isArbitrary) {
|
|
1461
|
-
if (isArbitrary) return
|
|
1488
|
+
if (isArbitrary) return getEffectiveIsWeb() ? value : toNativeValue(value);
|
|
1462
1489
|
return fontSizes[value] ?? null;
|
|
1463
1490
|
}
|
|
1464
1491
|
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,)";
|
|
1465
1492
|
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,)";
|
|
1466
|
-
var
|
|
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
|
-
|
|
1736
|
-
|
|
1737
|
-
|
|
1738
|
-
|
|
1739
|
-
|
|
1740
|
-
|
|
1741
|
-
|
|
1742
|
-
|
|
1743
|
-
|
|
1744
|
-
|
|
1745
|
-
|
|
1746
|
-
|
|
1747
|
-
|
|
1748
|
-
|
|
1749
|
-
|
|
1750
|
-
|
|
1751
|
-
|
|
1752
|
-
|
|
1753
|
-
|
|
1754
|
-
|
|
1755
|
-
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
|
|
1759
|
-
|
|
1760
|
-
|
|
1761
|
-
|
|
1762
|
-
|
|
1763
|
-
|
|
1764
|
-
|
|
1765
|
-
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
|
-
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
|
|
1774
|
-
|
|
1775
|
-
|
|
1776
|
-
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
|
|
1787
|
-
|
|
1788
|
-
|
|
1789
|
-
|
|
1790
|
-
|
|
1791
|
-
|
|
1792
|
-
|
|
1793
|
-
|
|
1794
|
-
|
|
1795
|
-
|
|
1796
|
-
|
|
1797
|
-
|
|
1798
|
-
|
|
1799
|
-
|
|
1800
|
-
|
|
1801
|
-
|
|
1802
|
-
|
|
1803
|
-
|
|
1804
|
-
|
|
1805
|
-
}
|
|
1493
|
+
var _standalone = null;
|
|
1494
|
+
function buildStandalone() {
|
|
1495
|
+
const web = getEffectiveIsWeb();
|
|
1496
|
+
return {
|
|
1497
|
+
// Display
|
|
1498
|
+
// React Native only supports display:'flex'|'none'. Setting 'flex' explicitly is
|
|
1499
|
+
// a no-op normally, but is needed to re-show an element that was hidden via `hidden`.
|
|
1500
|
+
// `grid`, `inline-*`, `contents`, `flow-root` have no native equivalent.
|
|
1501
|
+
flex: { display: "flex" },
|
|
1502
|
+
block: web ? { display: "block" } : null,
|
|
1503
|
+
"inline-block": web ? { display: "inline-block" } : null,
|
|
1504
|
+
inline: web ? { display: "inline" } : null,
|
|
1505
|
+
grid: web ? { display: "grid" } : null,
|
|
1506
|
+
grd: web ? { display: "grid" } : null,
|
|
1507
|
+
"inline-flex": { display: web ? "inline-flex" : "flex" },
|
|
1508
|
+
"inline-grid": web ? { display: "inline-grid" } : null,
|
|
1509
|
+
hidden: { display: "none" },
|
|
1510
|
+
contents: web ? { display: "contents" } : null,
|
|
1511
|
+
"flow-root": web ? { display: "flow-root" } : null,
|
|
1512
|
+
// Flex direction (both web and native)
|
|
1513
|
+
"flex-row": { flexDirection: "row" },
|
|
1514
|
+
"flex-col": { flexDirection: "column" },
|
|
1515
|
+
"flex-row-reverse": { flexDirection: "row-reverse" },
|
|
1516
|
+
"flex-col-reverse": { flexDirection: "column-reverse" },
|
|
1517
|
+
// Flex wrap (both)
|
|
1518
|
+
"flex-wrap": { flexWrap: "wrap" },
|
|
1519
|
+
"flex-wrap-reverse": { flexWrap: "wrap-reverse" },
|
|
1520
|
+
"flex-nowrap": { flexWrap: "nowrap" },
|
|
1521
|
+
// Flex grow / shrink (both)
|
|
1522
|
+
"flex-grow": { flexGrow: 1 },
|
|
1523
|
+
"flex-grow-0": { flexGrow: 0 },
|
|
1524
|
+
"flex-shrink": { flexShrink: 1 },
|
|
1525
|
+
"flex-shrink-0": { flexShrink: 0 },
|
|
1526
|
+
// Align items (both)
|
|
1527
|
+
"items-start": { alignItems: "flex-start" },
|
|
1528
|
+
"items-end": { alignItems: "flex-end" },
|
|
1529
|
+
"items-center": { alignItems: "center" },
|
|
1530
|
+
"items-baseline": { alignItems: "baseline" },
|
|
1531
|
+
"items-stretch": { alignItems: "stretch" },
|
|
1532
|
+
// Justify content (both)
|
|
1533
|
+
"justify-start": { justifyContent: "flex-start" },
|
|
1534
|
+
"justify-end": { justifyContent: "flex-end" },
|
|
1535
|
+
"justify-center": { justifyContent: "center" },
|
|
1536
|
+
"justify-between": { justifyContent: "space-between" },
|
|
1537
|
+
"justify-around": { justifyContent: "space-around" },
|
|
1538
|
+
"justify-evenly": { justifyContent: "space-evenly" },
|
|
1539
|
+
// Align content (both)
|
|
1540
|
+
"content-start": { alignContent: "flex-start" },
|
|
1541
|
+
"content-end": { alignContent: "flex-end" },
|
|
1542
|
+
"content-center": { alignContent: "center" },
|
|
1543
|
+
"content-between": { alignContent: "space-between" },
|
|
1544
|
+
"content-around": { alignContent: "space-around" },
|
|
1545
|
+
"content-evenly": { alignContent: "space-evenly" },
|
|
1546
|
+
"content-stretch": { alignContent: "stretch" },
|
|
1547
|
+
// Align self (both)
|
|
1548
|
+
"self-auto": { alignSelf: "auto" },
|
|
1549
|
+
"self-start": { alignSelf: "flex-start" },
|
|
1550
|
+
"self-end": { alignSelf: "flex-end" },
|
|
1551
|
+
"self-center": { alignSelf: "center" },
|
|
1552
|
+
"self-stretch": { alignSelf: "stretch" },
|
|
1553
|
+
"self-baseline": { alignSelf: "baseline" },
|
|
1554
|
+
// Text align (both)
|
|
1555
|
+
"text-left": { textAlign: "left" },
|
|
1556
|
+
"text-right": { textAlign: "right" },
|
|
1557
|
+
"text-center": { textAlign: "center" },
|
|
1558
|
+
"text-justify": { textAlign: "justify" },
|
|
1559
|
+
// Font weight shortcuts (both)
|
|
1560
|
+
"font-thin": { fontWeight: "100" },
|
|
1561
|
+
"font-extralight": { fontWeight: "200" },
|
|
1562
|
+
"font-light": { fontWeight: "300" },
|
|
1563
|
+
"font-normal": { fontWeight: "400" },
|
|
1564
|
+
"font-medium": { fontWeight: "500" },
|
|
1565
|
+
"font-semibold": { fontWeight: "600" },
|
|
1566
|
+
"font-bold": { fontWeight: "700" },
|
|
1567
|
+
"font-extrabold": { fontWeight: "800" },
|
|
1568
|
+
"font-black": { fontWeight: "900" },
|
|
1569
|
+
// Text decoration (overline is web-only)
|
|
1570
|
+
underline: { textDecorationLine: "underline" },
|
|
1571
|
+
overline: web ? { textDecorationLine: "overline" } : null,
|
|
1572
|
+
"line-through": { textDecorationLine: "line-through" },
|
|
1573
|
+
"no-underline": { textDecorationLine: "none" },
|
|
1574
|
+
// Text transform (both)
|
|
1575
|
+
uppercase: { textTransform: "uppercase" },
|
|
1576
|
+
lowercase: { textTransform: "lowercase" },
|
|
1577
|
+
capitalize: { textTransform: "capitalize" },
|
|
1578
|
+
"normal-case": { textTransform: "none" },
|
|
1579
|
+
// Font style (both)
|
|
1580
|
+
italic: { fontStyle: "italic" },
|
|
1581
|
+
"non-italic": { fontStyle: "normal" },
|
|
1582
|
+
// Position (fixed/sticky/static are web-only; RN only supports relative/absolute)
|
|
1583
|
+
relative: { position: "relative" },
|
|
1584
|
+
absolute: { position: "absolute" },
|
|
1585
|
+
fixed: web ? { position: "fixed" } : null,
|
|
1586
|
+
sticky: web ? { position: "sticky" } : null,
|
|
1587
|
+
static: web ? { position: "static" } : null,
|
|
1588
|
+
// Visibility (no `visibility` prop on native; use opacity instead)
|
|
1589
|
+
visible: web ? { visibility: "visible" } : null,
|
|
1590
|
+
invisible: web ? { visibility: "hidden" } : { opacity: 0 },
|
|
1591
|
+
// Overflow (RN supports 'hidden' | 'visible' | 'scroll'; not 'auto')
|
|
1592
|
+
"overflow-hidden": { overflow: "hidden" },
|
|
1593
|
+
"overflow-visible": { overflow: "visible" },
|
|
1594
|
+
"overflow-scroll": { overflow: "scroll" },
|
|
1595
|
+
"overflow-auto": web ? { overflow: "auto" } : { overflow: "scroll" },
|
|
1596
|
+
// overflowX / overflowY are web-only
|
|
1597
|
+
"overflow-x-hidden": web ? { overflowX: "hidden" } : null,
|
|
1598
|
+
"overflow-x-scroll": web ? { overflowX: "scroll" } : null,
|
|
1599
|
+
"overflow-x-auto": web ? { overflowX: "auto" } : null,
|
|
1600
|
+
"overflow-y-hidden": web ? { overflowY: "hidden" } : null,
|
|
1601
|
+
"overflow-y-scroll": web ? { overflowY: "scroll" } : null,
|
|
1602
|
+
"overflow-y-auto": web ? { overflowY: "auto" } : null,
|
|
1603
|
+
// Object fit (web-only; use resizeMode prop on RN Image)
|
|
1604
|
+
"object-contain": web ? { objectFit: "contain" } : null,
|
|
1605
|
+
"object-cover": web ? { objectFit: "cover" } : null,
|
|
1606
|
+
"object-fill": web ? { objectFit: "fill" } : null,
|
|
1607
|
+
"object-none": web ? { objectFit: "none" } : null,
|
|
1608
|
+
"object-scale-down": web ? { objectFit: "scale-down" } : null,
|
|
1609
|
+
// Border style (both)
|
|
1610
|
+
"border-solid": { borderStyle: "solid" },
|
|
1611
|
+
"border-dashed": { borderStyle: "dashed" },
|
|
1612
|
+
"border-dotted": { borderStyle: "dotted" },
|
|
1613
|
+
"border-none": { borderWidth: 0 },
|
|
1614
|
+
// Border sides default width (both)
|
|
1615
|
+
"border-t": { borderTopWidth: 1 },
|
|
1616
|
+
"border-r": { borderRightWidth: 1 },
|
|
1617
|
+
"border-b": { borderBottomWidth: 1 },
|
|
1618
|
+
"border-l": { borderLeftWidth: 1 },
|
|
1619
|
+
// Cursor (web-only)
|
|
1620
|
+
"cursor-auto": web ? { cursor: "auto" } : null,
|
|
1621
|
+
"cursor-default": web ? { cursor: "default" } : null,
|
|
1622
|
+
"cursor-pointer": web ? { cursor: "pointer" } : null,
|
|
1623
|
+
"cursor-wait": web ? { cursor: "wait" } : null,
|
|
1624
|
+
"cursor-text": web ? { cursor: "text" } : null,
|
|
1625
|
+
"cursor-move": web ? { cursor: "move" } : null,
|
|
1626
|
+
"cursor-not-allowed": web ? { cursor: "not-allowed" } : null,
|
|
1627
|
+
// User select (web-only)
|
|
1628
|
+
"select-none": web ? { userSelect: "none" } : null,
|
|
1629
|
+
"select-text": web ? { userSelect: "text" } : null,
|
|
1630
|
+
"select-all": web ? { userSelect: "all" } : null,
|
|
1631
|
+
"select-auto": web ? { userSelect: "auto" } : null,
|
|
1632
|
+
// Pointer events (both)
|
|
1633
|
+
"pointer-events-none": { pointerEvents: "none" },
|
|
1634
|
+
"pointer-events-auto": { pointerEvents: "auto" },
|
|
1635
|
+
// Whitespace (web-only; RN Text uses numberOfLines prop instead)
|
|
1636
|
+
"whitespace-normal": web ? { whiteSpace: "normal" } : null,
|
|
1637
|
+
"whitespace-nowrap": web ? { whiteSpace: "nowrap" } : null,
|
|
1638
|
+
"whitespace-pre": web ? { whiteSpace: "pre" } : null,
|
|
1639
|
+
"whitespace-pre-wrap": web ? { whiteSpace: "pre-wrap" } : null,
|
|
1640
|
+
"whitespace-pre-line": web ? { whiteSpace: "pre-line" } : null,
|
|
1641
|
+
// Word break (web-only)
|
|
1642
|
+
"break-normal": web ? { overflowWrap: "normal", wordBreak: "normal" } : null,
|
|
1643
|
+
"break-words": web ? { overflowWrap: "break-word" } : null,
|
|
1644
|
+
"break-all": web ? { wordBreak: "break-all" } : null,
|
|
1645
|
+
// Misc web-only
|
|
1646
|
+
truncate: web ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } : null,
|
|
1647
|
+
"box-border": web ? { boxSizing: "border-box" } : null,
|
|
1648
|
+
"box-content": web ? { boxSizing: "content-box" } : null,
|
|
1649
|
+
"appearance-none": web ? { appearance: "none" } : null,
|
|
1650
|
+
"outline-none": web ? { outline: "none", outlineOffset: "0" } : null,
|
|
1651
|
+
outline: web ? { outline: "2px solid transparent", outlineOffset: "2px" } : null,
|
|
1652
|
+
resize: web ? { resize: "both" } : null,
|
|
1653
|
+
"resize-none": web ? { resize: "none" } : null,
|
|
1654
|
+
"resize-y": web ? { resize: "vertical" } : null,
|
|
1655
|
+
"resize-x": web ? { resize: "horizontal" } : null,
|
|
1656
|
+
antialiased: web ? { WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale" } : null,
|
|
1657
|
+
"subpixel-antialiased": web ? { WebkitFontSmoothing: "subpixel-antialiased", MozOsxFontSmoothing: "auto" } : null,
|
|
1658
|
+
"overflow-ellipsis": web ? { textOverflow: "ellipsis" } : null,
|
|
1659
|
+
"sr-only": web ? {
|
|
1660
|
+
position: "absolute",
|
|
1661
|
+
width: 1,
|
|
1662
|
+
height: 1,
|
|
1663
|
+
padding: 0,
|
|
1664
|
+
margin: -1,
|
|
1665
|
+
overflow: "hidden",
|
|
1666
|
+
clip: "rect(0,0,0,0)",
|
|
1667
|
+
whiteSpace: "nowrap",
|
|
1668
|
+
border: 0
|
|
1669
|
+
} : null,
|
|
1670
|
+
"not-sr-only": web ? {
|
|
1671
|
+
position: "static",
|
|
1672
|
+
width: "auto",
|
|
1673
|
+
height: "auto",
|
|
1674
|
+
padding: 0,
|
|
1675
|
+
margin: 0,
|
|
1676
|
+
overflow: "visible",
|
|
1677
|
+
clip: "auto",
|
|
1678
|
+
whiteSpace: "normal"
|
|
1679
|
+
} : null,
|
|
1680
|
+
// Lists (web-only)
|
|
1681
|
+
"list-none": web ? { listStyleType: "none" } : null,
|
|
1682
|
+
"list-disc": web ? { listStyleType: "disc" } : null,
|
|
1683
|
+
"list-decimal": web ? { listStyleType: "decimal" } : null,
|
|
1684
|
+
// Background clip (web-only)
|
|
1685
|
+
"bg-clip-border": web ? { backgroundClip: "border-box" } : null,
|
|
1686
|
+
"bg-clip-padding": web ? { backgroundClip: "padding-box" } : null,
|
|
1687
|
+
"bg-clip-content": web ? { backgroundClip: "content-box" } : null,
|
|
1688
|
+
"bg-clip-text": web ? { backgroundClip: "text", WebkitBackgroundClip: "text" } : null,
|
|
1689
|
+
// Background image
|
|
1690
|
+
"bg-none": web ? { backgroundImage: "none" } : null,
|
|
1691
|
+
// Background size (web-only)
|
|
1692
|
+
"bg-auto": web ? { backgroundSize: "auto" } : null,
|
|
1693
|
+
"bg-cover": web ? { backgroundSize: "cover" } : null,
|
|
1694
|
+
"bg-contain": web ? { backgroundSize: "contain" } : null,
|
|
1695
|
+
// Background position (web-only)
|
|
1696
|
+
"bg-center": web ? { backgroundPosition: "center" } : null,
|
|
1697
|
+
"bg-top": web ? { backgroundPosition: "top" } : null,
|
|
1698
|
+
"bg-bottom": web ? { backgroundPosition: "bottom" } : null,
|
|
1699
|
+
"bg-left": web ? { backgroundPosition: "left" } : null,
|
|
1700
|
+
"bg-right": web ? { backgroundPosition: "right" } : null,
|
|
1701
|
+
"bg-left-top": web ? { backgroundPosition: "left top" } : null,
|
|
1702
|
+
"bg-left-bottom": web ? { backgroundPosition: "left bottom" } : null,
|
|
1703
|
+
"bg-right-top": web ? { backgroundPosition: "right top" } : null,
|
|
1704
|
+
"bg-right-bottom": web ? { backgroundPosition: "right bottom" } : null,
|
|
1705
|
+
// Background repeat (web-only)
|
|
1706
|
+
"bg-repeat": web ? { backgroundRepeat: "repeat" } : null,
|
|
1707
|
+
"bg-no-repeat": web ? { backgroundRepeat: "no-repeat" } : null,
|
|
1708
|
+
"bg-repeat-x": web ? { backgroundRepeat: "repeat-x" } : null,
|
|
1709
|
+
"bg-repeat-y": web ? { backgroundRepeat: "repeat-y" } : null,
|
|
1710
|
+
"bg-repeat-round": web ? { backgroundRepeat: "round" } : null,
|
|
1711
|
+
"bg-repeat-space": web ? { backgroundRepeat: "space" } : null,
|
|
1712
|
+
// Background attachment (web-only)
|
|
1713
|
+
"bg-fixed": web ? { backgroundAttachment: "fixed" } : null,
|
|
1714
|
+
"bg-local": web ? { backgroundAttachment: "local" } : null,
|
|
1715
|
+
"bg-scroll": web ? { backgroundAttachment: "scroll" } : null,
|
|
1716
|
+
// Object position (web-only)
|
|
1717
|
+
"object-center": web ? { objectPosition: "center" } : null,
|
|
1718
|
+
"object-top": web ? { objectPosition: "top" } : null,
|
|
1719
|
+
"object-bottom": web ? { objectPosition: "bottom" } : null,
|
|
1720
|
+
"object-left": web ? { objectPosition: "left" } : null,
|
|
1721
|
+
"object-right": web ? { objectPosition: "right" } : null,
|
|
1722
|
+
"object-left-top": web ? { objectPosition: "left top" } : null,
|
|
1723
|
+
"object-left-bottom": web ? { objectPosition: "left bottom" } : null,
|
|
1724
|
+
"object-right-top": web ? { objectPosition: "right top" } : null,
|
|
1725
|
+
"object-right-bottom": web ? { objectPosition: "right bottom" } : null,
|
|
1726
|
+
// Table (web-only)
|
|
1727
|
+
table: web ? { display: "table" } : null,
|
|
1728
|
+
"table-auto": web ? { tableLayout: "auto" } : null,
|
|
1729
|
+
"table-fixed": web ? { tableLayout: "fixed" } : null,
|
|
1730
|
+
"caption-top": web ? { captionSide: "top" } : null,
|
|
1731
|
+
"caption-bottom": web ? { captionSide: "bottom" } : null,
|
|
1732
|
+
"border-collapse": web ? { borderCollapse: "collapse" } : null,
|
|
1733
|
+
"border-separate": web ? { borderCollapse: "separate" } : null,
|
|
1734
|
+
// List style position (web-only)
|
|
1735
|
+
"list-inside": web ? { listStylePosition: "inside" } : null,
|
|
1736
|
+
"list-outside": web ? { listStylePosition: "outside" } : null,
|
|
1737
|
+
// Font variant numeric (web-only)
|
|
1738
|
+
"normal-nums": web ? { fontVariantNumeric: "normal" } : null,
|
|
1739
|
+
ordinal: web ? { fontVariantNumeric: "ordinal" } : null,
|
|
1740
|
+
"slashed-zero": web ? { fontVariantNumeric: "slashed-zero" } : null,
|
|
1741
|
+
"lining-nums": web ? { fontVariantNumeric: "lining-nums" } : null,
|
|
1742
|
+
"oldstyle-nums": web ? { fontVariantNumeric: "oldstyle-nums" } : null,
|
|
1743
|
+
"proportional-nums": web ? { fontVariantNumeric: "proportional-nums" } : null,
|
|
1744
|
+
"tabular-nums": web ? { fontVariantNumeric: "tabular-nums" } : null,
|
|
1745
|
+
"diagonal-fractions": web ? { fontVariantNumeric: "diagonal-fractions" } : null,
|
|
1746
|
+
"stacked-fractions": web ? { fontVariantNumeric: "stacked-fractions" } : null,
|
|
1747
|
+
// Isolation (web-only)
|
|
1748
|
+
isolate: web ? { isolation: "isolate" } : null,
|
|
1749
|
+
"isolation-auto": web ? { isolation: "auto" } : null,
|
|
1750
|
+
// Backface visibility (both iOS and Android)
|
|
1751
|
+
"backface-visible": { backfaceVisibility: "visible" },
|
|
1752
|
+
"backface-hidden": { backfaceVisibility: "hidden" },
|
|
1753
|
+
// CSS filters — standalone = default/full effect (web-only)
|
|
1754
|
+
grayscale: web ? { "--tw-grayscale": "grayscale(100%)", filter: FILTER_COMPOSE } : null,
|
|
1755
|
+
invert: web ? { "--tw-invert": "invert(100%)", filter: FILTER_COMPOSE } : null,
|
|
1756
|
+
sepia: web ? { "--tw-sepia": "sepia(100%)", filter: FILTER_COMPOSE } : null,
|
|
1757
|
+
// Divide none
|
|
1758
|
+
"divide-none": web ? { __divideX: 0, __divideY: 0 } : null,
|
|
1759
|
+
// Group / peer markers (no-op: no style emitted; just ensures isKnownUtility returns true)
|
|
1760
|
+
group: web ? {} : null,
|
|
1761
|
+
peer: web ? {} : null,
|
|
1762
|
+
// Text-wrap (web-only)
|
|
1763
|
+
"text-wrap": web ? { textWrap: "wrap" } : null,
|
|
1764
|
+
"text-nowrap": web ? { textWrap: "nowrap" } : null,
|
|
1765
|
+
"text-balance": web ? { textWrap: "balance" } : null,
|
|
1766
|
+
"text-pretty": web ? { textWrap: "pretty" } : null,
|
|
1767
|
+
// Screen sizing (vw values are web-only; vh values work cross-platform via spacing scale for h-*)
|
|
1768
|
+
"w-screen": web ? { width: "100vw" } : null,
|
|
1769
|
+
"min-h-screen": { minHeight: "100vh" },
|
|
1770
|
+
"max-h-screen": { maxHeight: "100vh" },
|
|
1771
|
+
"min-w-screen": web ? { minWidth: "100vw" } : null,
|
|
1772
|
+
"max-w-screen": web ? { maxWidth: "100vw" } : null,
|
|
1773
|
+
// max-w named container sizes (mirrors Tailwind's container scale)
|
|
1774
|
+
"max-w-none": { maxWidth: "none" },
|
|
1775
|
+
"max-w-xs": { maxWidth: 320 },
|
|
1776
|
+
"max-w-sm": { maxWidth: 384 },
|
|
1777
|
+
"max-w-md": { maxWidth: 448 },
|
|
1778
|
+
"max-w-lg": { maxWidth: 512 },
|
|
1779
|
+
"max-w-xl": { maxWidth: 576 },
|
|
1780
|
+
"max-w-2xl": { maxWidth: 672 },
|
|
1781
|
+
"max-w-3xl": { maxWidth: 768 },
|
|
1782
|
+
"max-w-4xl": { maxWidth: 896 },
|
|
1783
|
+
"max-w-5xl": { maxWidth: 1024 },
|
|
1784
|
+
"max-w-6xl": { maxWidth: 1152 },
|
|
1785
|
+
"max-w-7xl": { maxWidth: 1280 },
|
|
1786
|
+
"max-w-prose": web ? { maxWidth: "65ch" } : null,
|
|
1787
|
+
// Extended cursors (web-only)
|
|
1788
|
+
"cursor-grab": web ? { cursor: "grab" } : null,
|
|
1789
|
+
"cursor-grabbing": web ? { cursor: "grabbing" } : null,
|
|
1790
|
+
"cursor-zoom-in": web ? { cursor: "zoom-in" } : null,
|
|
1791
|
+
"cursor-zoom-out": web ? { cursor: "zoom-out" } : null,
|
|
1792
|
+
"cursor-crosshair": web ? { cursor: "crosshair" } : null,
|
|
1793
|
+
"cursor-help": web ? { cursor: "help" } : null,
|
|
1794
|
+
"cursor-none": web ? { cursor: "none" } : null,
|
|
1795
|
+
// Overflow clip (web-only)
|
|
1796
|
+
"overflow-clip": web ? { overflow: "clip" } : null,
|
|
1797
|
+
"overflow-x-clip": web ? { overflowX: "clip" } : null,
|
|
1798
|
+
"overflow-y-clip": web ? { overflowY: "clip" } : null,
|
|
1799
|
+
// Scroll behavior (web-only)
|
|
1800
|
+
"scroll-smooth": web ? { scrollBehavior: "smooth" } : null,
|
|
1801
|
+
"scroll-auto": web ? { scrollBehavior: "auto" } : null,
|
|
1802
|
+
// Float (web-only)
|
|
1803
|
+
"float-left": web ? { float: "left" } : null,
|
|
1804
|
+
"float-right": web ? { float: "right" } : null,
|
|
1805
|
+
"float-start": web ? { float: "inline-start" } : null,
|
|
1806
|
+
"float-end": web ? { float: "inline-end" } : null,
|
|
1807
|
+
"float-none": web ? { float: "none" } : null,
|
|
1808
|
+
// Clear (web-only)
|
|
1809
|
+
"clear-left": web ? { clear: "left" } : null,
|
|
1810
|
+
"clear-right": web ? { clear: "right" } : null,
|
|
1811
|
+
"clear-both": web ? { clear: "both" } : null,
|
|
1812
|
+
"clear-start": web ? { clear: "inline-start" } : null,
|
|
1813
|
+
"clear-end": web ? { clear: "inline-end" } : null,
|
|
1814
|
+
"clear-none": web ? { clear: "none" } : null,
|
|
1815
|
+
// Vertical align (web-only)
|
|
1816
|
+
"align-baseline": web ? { verticalAlign: "baseline" } : null,
|
|
1817
|
+
"align-top": web ? { verticalAlign: "top" } : null,
|
|
1818
|
+
"align-middle": web ? { verticalAlign: "middle" } : null,
|
|
1819
|
+
"align-bottom": web ? { verticalAlign: "bottom" } : null,
|
|
1820
|
+
"align-text-top": web ? { verticalAlign: "text-top" } : null,
|
|
1821
|
+
"align-text-bottom": web ? { verticalAlign: "text-bottom" } : null,
|
|
1822
|
+
"align-sub": web ? { verticalAlign: "sub" } : null,
|
|
1823
|
+
"align-super": web ? { verticalAlign: "super" } : null,
|
|
1824
|
+
// Touch action (web-only)
|
|
1825
|
+
"touch-auto": web ? { touchAction: "auto" } : null,
|
|
1826
|
+
"touch-none": web ? { touchAction: "none" } : null,
|
|
1827
|
+
"touch-pan-x": web ? { touchAction: "pan-x" } : null,
|
|
1828
|
+
"touch-pan-y": web ? { touchAction: "pan-y" } : null,
|
|
1829
|
+
"touch-pan-left": web ? { touchAction: "pan-left" } : null,
|
|
1830
|
+
"touch-pan-right": web ? { touchAction: "pan-right" } : null,
|
|
1831
|
+
"touch-pan-up": web ? { touchAction: "pan-up" } : null,
|
|
1832
|
+
"touch-pan-down": web ? { touchAction: "pan-down" } : null,
|
|
1833
|
+
"touch-pinch-zoom": web ? { touchAction: "pinch-zoom" } : null,
|
|
1834
|
+
"touch-manipulation": web ? { touchAction: "manipulation" } : null
|
|
1835
|
+
};
|
|
1836
|
+
}
|
|
1837
|
+
function getStandalone() {
|
|
1838
|
+
if (!_standalone) _standalone = buildStandalone();
|
|
1839
|
+
return _standalone;
|
|
1840
|
+
}
|
|
1806
1841
|
var RESOLVERS = {
|
|
1807
1842
|
// ── Background ─────────────────────────────────────────────────────────────
|
|
1808
1843
|
bg: ({ value, isArbitrary }, { colors }) => {
|
|
@@ -1810,7 +1845,7 @@ var RESOLVERS = {
|
|
|
1810
1845
|
return color ? { backgroundColor: color } : null;
|
|
1811
1846
|
},
|
|
1812
1847
|
"bg-opacity": ({ value }, _) => {
|
|
1813
|
-
if (!
|
|
1848
|
+
if (!getEffectiveIsWeb()) return null;
|
|
1814
1849
|
const v = parseFloat(value) / 100;
|
|
1815
1850
|
return isNaN(v) ? null : { "--bg-opacity": v };
|
|
1816
1851
|
},
|
|
@@ -1820,7 +1855,7 @@ var RESOLVERS = {
|
|
|
1820
1855
|
if (!isArbitrary && size !== null) return { fontSize: size };
|
|
1821
1856
|
if (isArbitrary) {
|
|
1822
1857
|
if (/^\d/.test(value) || /^(calc|min|max|clamp)/.test(value)) {
|
|
1823
|
-
return { fontSize:
|
|
1858
|
+
return { fontSize: getEffectiveIsWeb() ? value : toNativeValue(value) };
|
|
1824
1859
|
}
|
|
1825
1860
|
return { color: value };
|
|
1826
1861
|
}
|
|
@@ -1828,7 +1863,7 @@ var RESOLVERS = {
|
|
|
1828
1863
|
return color ? { color } : null;
|
|
1829
1864
|
},
|
|
1830
1865
|
"text-opacity": ({ value }, _) => {
|
|
1831
|
-
if (!
|
|
1866
|
+
if (!getEffectiveIsWeb()) return null;
|
|
1832
1867
|
const v = parseFloat(value) / 100;
|
|
1833
1868
|
return isNaN(v) ? null : { "--text-opacity": v };
|
|
1834
1869
|
},
|
|
@@ -2024,7 +2059,7 @@ var RESOLVERS = {
|
|
|
2024
2059
|
},
|
|
2025
2060
|
// ── Grid template columns/rows (Tailwind-style aliases, web-only) ──────────
|
|
2026
2061
|
"grid-cols": ({ value, isArbitrary }) => {
|
|
2027
|
-
if (!
|
|
2062
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2028
2063
|
if (!value) return null;
|
|
2029
2064
|
if (isArbitrary) return { display: "grid", gridTemplateColumns: value };
|
|
2030
2065
|
if (value === "none") return { display: "grid", gridTemplateColumns: "none" };
|
|
@@ -2033,7 +2068,7 @@ var RESOLVERS = {
|
|
|
2033
2068
|
return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
|
|
2034
2069
|
},
|
|
2035
2070
|
"grid-rows": ({ value, isArbitrary }) => {
|
|
2036
|
-
if (!
|
|
2071
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2037
2072
|
if (!value) return null;
|
|
2038
2073
|
if (isArbitrary) return { gridTemplateRows: value };
|
|
2039
2074
|
if (value === "none") return { gridTemplateRows: "none" };
|
|
@@ -2043,7 +2078,7 @@ var RESOLVERS = {
|
|
|
2043
2078
|
},
|
|
2044
2079
|
// ── Grid auto flow (web-only) ─────────────────────────────────────────────
|
|
2045
2080
|
"grid-flow": ({ value }) => {
|
|
2046
|
-
if (!
|
|
2081
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2047
2082
|
const flows = {
|
|
2048
2083
|
row: "row",
|
|
2049
2084
|
col: "column",
|
|
@@ -2056,7 +2091,7 @@ var RESOLVERS = {
|
|
|
2056
2091
|
},
|
|
2057
2092
|
// ── Grid auto sizing (web-only) ───────────────────────────────────────────
|
|
2058
2093
|
"auto-cols": ({ value, isArbitrary }) => {
|
|
2059
|
-
if (!
|
|
2094
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2060
2095
|
if (isArbitrary) return { gridAutoColumns: value };
|
|
2061
2096
|
const presets = {
|
|
2062
2097
|
auto: "auto",
|
|
@@ -2068,7 +2103,7 @@ var RESOLVERS = {
|
|
|
2068
2103
|
return v ? { gridAutoColumns: v } : null;
|
|
2069
2104
|
},
|
|
2070
2105
|
"auto-rows": ({ value, isArbitrary }) => {
|
|
2071
|
-
if (!
|
|
2106
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2072
2107
|
if (isArbitrary) return { gridAutoRows: value };
|
|
2073
2108
|
const presets = {
|
|
2074
2109
|
auto: "auto",
|
|
@@ -2081,54 +2116,54 @@ var RESOLVERS = {
|
|
|
2081
2116
|
},
|
|
2082
2117
|
// ── Grid column placement (web-only) ──────────────────────────────────────
|
|
2083
2118
|
"col-span": ({ value }) => {
|
|
2084
|
-
if (!
|
|
2119
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2085
2120
|
if (value === "full") return { gridColumn: "1 / -1" };
|
|
2086
2121
|
const n = parseInt(value, 10);
|
|
2087
2122
|
return isNaN(n) ? null : { gridColumn: `span ${n} / span ${n}` };
|
|
2088
2123
|
},
|
|
2089
2124
|
"col-start": ({ value, isArbitrary }) => {
|
|
2090
|
-
if (!
|
|
2125
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2091
2126
|
if (value === "auto") return { gridColumnStart: "auto" };
|
|
2092
2127
|
if (isArbitrary) return { gridColumnStart: value };
|
|
2093
2128
|
const n = parseInt(value, 10);
|
|
2094
2129
|
return isNaN(n) ? null : { gridColumnStart: n };
|
|
2095
2130
|
},
|
|
2096
2131
|
"col-end": ({ value, isArbitrary }) => {
|
|
2097
|
-
if (!
|
|
2132
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2098
2133
|
if (value === "auto") return { gridColumnEnd: "auto" };
|
|
2099
2134
|
if (isArbitrary) return { gridColumnEnd: value };
|
|
2100
2135
|
const n = parseInt(value, 10);
|
|
2101
2136
|
return isNaN(n) ? null : { gridColumnEnd: n };
|
|
2102
2137
|
},
|
|
2103
2138
|
col: ({ value, isArbitrary }) => {
|
|
2104
|
-
if (!
|
|
2139
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2105
2140
|
if (!value || value === "auto") return { gridColumn: "auto" };
|
|
2106
2141
|
if (isArbitrary) return { gridColumn: value };
|
|
2107
2142
|
return null;
|
|
2108
2143
|
},
|
|
2109
2144
|
// ── Grid row placement (web-only) ─────────────────────────────────────────
|
|
2110
2145
|
"row-span": ({ value }) => {
|
|
2111
|
-
if (!
|
|
2146
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2112
2147
|
if (value === "full") return { gridRow: "1 / -1" };
|
|
2113
2148
|
const n = parseInt(value, 10);
|
|
2114
2149
|
return isNaN(n) ? null : { gridRow: `span ${n} / span ${n}` };
|
|
2115
2150
|
},
|
|
2116
2151
|
"row-start": ({ value, isArbitrary }) => {
|
|
2117
|
-
if (!
|
|
2152
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2118
2153
|
if (value === "auto") return { gridRowStart: "auto" };
|
|
2119
2154
|
if (isArbitrary) return { gridRowStart: value };
|
|
2120
2155
|
const n = parseInt(value, 10);
|
|
2121
2156
|
return isNaN(n) ? null : { gridRowStart: n };
|
|
2122
2157
|
},
|
|
2123
2158
|
"row-end": ({ value, isArbitrary }) => {
|
|
2124
|
-
if (!
|
|
2159
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2125
2160
|
if (value === "auto") return { gridRowEnd: "auto" };
|
|
2126
2161
|
if (isArbitrary) return { gridRowEnd: value };
|
|
2127
2162
|
const n = parseInt(value, 10);
|
|
2128
2163
|
return isNaN(n) ? null : { gridRowEnd: n };
|
|
2129
2164
|
},
|
|
2130
2165
|
row: ({ value, isArbitrary }) => {
|
|
2131
|
-
if (!
|
|
2166
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2132
2167
|
if (!value || value === "auto") return { gridRow: "auto" };
|
|
2133
2168
|
if (isArbitrary) return { gridRow: value };
|
|
2134
2169
|
return null;
|
|
@@ -2136,7 +2171,7 @@ var RESOLVERS = {
|
|
|
2136
2171
|
// ── Grid alignment (web-only) ──────────────────────────────────────────────
|
|
2137
2172
|
// place-items is shorthand for align-items + justify-items on a grid container
|
|
2138
2173
|
"place-items": ({ value }) => {
|
|
2139
|
-
if (!
|
|
2174
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2140
2175
|
const map = {
|
|
2141
2176
|
start: "start",
|
|
2142
2177
|
end: "end",
|
|
@@ -2148,7 +2183,7 @@ var RESOLVERS = {
|
|
|
2148
2183
|
},
|
|
2149
2184
|
// place-content is shorthand for align-content + justify-content on a grid container
|
|
2150
2185
|
"place-content": ({ value }) => {
|
|
2151
|
-
if (!
|
|
2186
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2152
2187
|
const map = {
|
|
2153
2188
|
start: "start",
|
|
2154
2189
|
end: "end",
|
|
@@ -2163,7 +2198,7 @@ var RESOLVERS = {
|
|
|
2163
2198
|
},
|
|
2164
2199
|
// justify-items controls inline-axis alignment of grid items within their cells
|
|
2165
2200
|
"justify-items": ({ value }) => {
|
|
2166
|
-
if (!
|
|
2201
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2167
2202
|
const map = {
|
|
2168
2203
|
start: "start",
|
|
2169
2204
|
end: "end",
|
|
@@ -2174,7 +2209,7 @@ var RESOLVERS = {
|
|
|
2174
2209
|
},
|
|
2175
2210
|
// place-self is shorthand for align-self + justify-self on a grid item
|
|
2176
2211
|
"place-self": ({ value }) => {
|
|
2177
|
-
if (!
|
|
2212
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2178
2213
|
const map = {
|
|
2179
2214
|
auto: "auto",
|
|
2180
2215
|
start: "start",
|
|
@@ -2186,7 +2221,7 @@ var RESOLVERS = {
|
|
|
2186
2221
|
},
|
|
2187
2222
|
// justify-self controls inline-axis self-alignment of a grid item
|
|
2188
2223
|
"justify-self": ({ value }) => {
|
|
2189
|
-
if (!
|
|
2224
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2190
2225
|
const map = {
|
|
2191
2226
|
auto: "auto",
|
|
2192
2227
|
start: "start",
|
|
@@ -2198,7 +2233,7 @@ var RESOLVERS = {
|
|
|
2198
2233
|
},
|
|
2199
2234
|
// ── CSS Filters (composable via CSS variables, web-only) ─────────────────
|
|
2200
2235
|
blur: ({ value, isArbitrary }) => {
|
|
2201
|
-
if (!
|
|
2236
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2202
2237
|
const sizes = {
|
|
2203
2238
|
"": "blur(8px)",
|
|
2204
2239
|
sm: "blur(4px)",
|
|
@@ -2213,43 +2248,43 @@ var RESOLVERS = {
|
|
|
2213
2248
|
return v !== void 0 ? { "--tw-blur": v, filter: FILTER_COMPOSE } : null;
|
|
2214
2249
|
},
|
|
2215
2250
|
brightness: ({ value, isArbitrary }) => {
|
|
2216
|
-
if (!
|
|
2251
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2217
2252
|
const v = isArbitrary ? `brightness(${value})` : `brightness(${parseFloat(value) / 100})`;
|
|
2218
2253
|
return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-brightness": v, filter: FILTER_COMPOSE };
|
|
2219
2254
|
},
|
|
2220
2255
|
contrast: ({ value, isArbitrary }) => {
|
|
2221
|
-
if (!
|
|
2256
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2222
2257
|
const v = isArbitrary ? `contrast(${value})` : `contrast(${parseFloat(value) / 100})`;
|
|
2223
2258
|
return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-contrast": v, filter: FILTER_COMPOSE };
|
|
2224
2259
|
},
|
|
2225
2260
|
grayscale: ({ value }) => {
|
|
2226
|
-
if (!
|
|
2261
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2227
2262
|
const v = value === "0" ? "grayscale(0)" : "grayscale(100%)";
|
|
2228
2263
|
return { "--tw-grayscale": v, filter: FILTER_COMPOSE };
|
|
2229
2264
|
},
|
|
2230
2265
|
"hue-rotate": ({ value, negative, isArbitrary }) => {
|
|
2231
|
-
if (!
|
|
2266
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2232
2267
|
const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
|
|
2233
2268
|
if (isNaN(parseFloat(deg)) && !isArbitrary) return null;
|
|
2234
2269
|
return { "--tw-hue-rotate": `hue-rotate(${deg})`, filter: FILTER_COMPOSE };
|
|
2235
2270
|
},
|
|
2236
2271
|
invert: ({ value }) => {
|
|
2237
|
-
if (!
|
|
2272
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2238
2273
|
const v = value === "0" ? "invert(0)" : "invert(100%)";
|
|
2239
2274
|
return { "--tw-invert": v, filter: FILTER_COMPOSE };
|
|
2240
2275
|
},
|
|
2241
2276
|
saturate: ({ value, isArbitrary }) => {
|
|
2242
|
-
if (!
|
|
2277
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2243
2278
|
const v = isArbitrary ? `saturate(${value})` : `saturate(${parseFloat(value) / 100})`;
|
|
2244
2279
|
return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-saturate": v, filter: FILTER_COMPOSE };
|
|
2245
2280
|
},
|
|
2246
2281
|
sepia: ({ value }) => {
|
|
2247
|
-
if (!
|
|
2282
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2248
2283
|
const v = value === "0" ? "sepia(0)" : "sepia(100%)";
|
|
2249
2284
|
return { "--tw-sepia": v, filter: FILTER_COMPOSE };
|
|
2250
2285
|
},
|
|
2251
2286
|
"drop-shadow": ({ value, isArbitrary }) => {
|
|
2252
|
-
if (!
|
|
2287
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2253
2288
|
if (isArbitrary) return { "--tw-drop-shadow": `drop-shadow(${value.replace(/_/g, " ")})`, filter: FILTER_COMPOSE };
|
|
2254
2289
|
const presets = {
|
|
2255
2290
|
"": "drop-shadow(0 1px 2px rgb(0 0 0/0.1)) drop-shadow(0 1px 1px rgb(0 0 0/0.06))",
|
|
@@ -2265,14 +2300,14 @@ var RESOLVERS = {
|
|
|
2265
2300
|
},
|
|
2266
2301
|
// Arbitrary full filter string: filter-[blur(4px)_grayscale(1)]
|
|
2267
2302
|
filter: ({ value, isArbitrary }) => {
|
|
2268
|
-
if (!
|
|
2303
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2269
2304
|
if (isArbitrary) return { filter: value.replace(/_/g, " ") };
|
|
2270
2305
|
if (value === "none") return { filter: "none" };
|
|
2271
2306
|
return null;
|
|
2272
2307
|
},
|
|
2273
2308
|
// ── Backdrop Filters (composable via CSS variables, web-only) ────────────
|
|
2274
2309
|
"backdrop-blur": ({ value, isArbitrary }) => {
|
|
2275
|
-
if (!
|
|
2310
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2276
2311
|
const sizes = {
|
|
2277
2312
|
"": "blur(8px)",
|
|
2278
2313
|
sm: "blur(4px)",
|
|
@@ -2287,52 +2322,52 @@ var RESOLVERS = {
|
|
|
2287
2322
|
return v !== void 0 ? { "--tw-backdrop-blur": v, backdropFilter: BACKDROP_FILTER_COMPOSE } : null;
|
|
2288
2323
|
},
|
|
2289
2324
|
"backdrop-brightness": ({ value, isArbitrary }) => {
|
|
2290
|
-
if (!
|
|
2325
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2291
2326
|
const v = isArbitrary ? `brightness(${value})` : `brightness(${parseFloat(value) / 100})`;
|
|
2292
2327
|
return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-backdrop-brightness": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
|
|
2293
2328
|
},
|
|
2294
2329
|
"backdrop-contrast": ({ value, isArbitrary }) => {
|
|
2295
|
-
if (!
|
|
2330
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2296
2331
|
const v = isArbitrary ? `contrast(${value})` : `contrast(${parseFloat(value) / 100})`;
|
|
2297
2332
|
return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-backdrop-contrast": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
|
|
2298
2333
|
},
|
|
2299
2334
|
"backdrop-grayscale": ({ value }) => {
|
|
2300
|
-
if (!
|
|
2335
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2301
2336
|
return { "--tw-backdrop-grayscale": value === "0" ? "grayscale(0)" : "grayscale(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
|
|
2302
2337
|
},
|
|
2303
2338
|
"backdrop-hue-rotate": ({ value, negative, isArbitrary }) => {
|
|
2304
|
-
if (!
|
|
2339
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2305
2340
|
const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
|
|
2306
2341
|
if (isNaN(parseFloat(deg)) && !isArbitrary) return null;
|
|
2307
2342
|
return { "--tw-backdrop-hue-rotate": `hue-rotate(${deg})`, backdropFilter: BACKDROP_FILTER_COMPOSE };
|
|
2308
2343
|
},
|
|
2309
2344
|
"backdrop-invert": ({ value }) => {
|
|
2310
|
-
if (!
|
|
2345
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2311
2346
|
return { "--tw-backdrop-invert": value === "0" ? "invert(0)" : "invert(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
|
|
2312
2347
|
},
|
|
2313
2348
|
"backdrop-opacity": ({ value, isArbitrary }) => {
|
|
2314
|
-
if (!
|
|
2349
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2315
2350
|
const v = isArbitrary ? `opacity(${value})` : `opacity(${parseFloat(value) / 100})`;
|
|
2316
2351
|
return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-backdrop-opacity": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
|
|
2317
2352
|
},
|
|
2318
2353
|
"backdrop-saturate": ({ value, isArbitrary }) => {
|
|
2319
|
-
if (!
|
|
2354
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2320
2355
|
const v = isArbitrary ? `saturate(${value})` : `saturate(${parseFloat(value) / 100})`;
|
|
2321
2356
|
return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-backdrop-saturate": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
|
|
2322
2357
|
},
|
|
2323
2358
|
"backdrop-sepia": ({ value }) => {
|
|
2324
|
-
if (!
|
|
2359
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2325
2360
|
return { "--tw-backdrop-sepia": value === "0" ? "sepia(0)" : "sepia(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
|
|
2326
2361
|
},
|
|
2327
2362
|
"backdrop-filter": ({ value, isArbitrary }) => {
|
|
2328
|
-
if (!
|
|
2363
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2329
2364
|
if (isArbitrary) return { backdropFilter: value.replace(/_/g, " ") };
|
|
2330
2365
|
if (value === "none") return { backdropFilter: "none" };
|
|
2331
2366
|
return null;
|
|
2332
2367
|
},
|
|
2333
2368
|
// ── Background gradient (CSS variable gradient stops, web-only) ──────────
|
|
2334
2369
|
"bg-gradient-to": ({ value }) => {
|
|
2335
|
-
if (!
|
|
2370
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2336
2371
|
const directions = {
|
|
2337
2372
|
t: "to top",
|
|
2338
2373
|
tr: "to top right",
|
|
@@ -2350,7 +2385,7 @@ var RESOLVERS = {
|
|
|
2350
2385
|
};
|
|
2351
2386
|
},
|
|
2352
2387
|
from: ({ value, isArbitrary }, { colors }) => {
|
|
2353
|
-
if (!
|
|
2388
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2354
2389
|
const color = resolveColor(value, colors, isArbitrary);
|
|
2355
2390
|
if (!color) return null;
|
|
2356
2391
|
return {
|
|
@@ -2359,7 +2394,7 @@ var RESOLVERS = {
|
|
|
2359
2394
|
};
|
|
2360
2395
|
},
|
|
2361
2396
|
via: ({ value, isArbitrary }, { colors }) => {
|
|
2362
|
-
if (!
|
|
2397
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2363
2398
|
const color = resolveColor(value, colors, isArbitrary);
|
|
2364
2399
|
if (!color) return null;
|
|
2365
2400
|
return {
|
|
@@ -2368,7 +2403,7 @@ var RESOLVERS = {
|
|
|
2368
2403
|
};
|
|
2369
2404
|
},
|
|
2370
2405
|
to: ({ value, isArbitrary }, { colors }) => {
|
|
2371
|
-
if (!
|
|
2406
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2372
2407
|
const color = resolveColor(value, colors, isArbitrary);
|
|
2373
2408
|
if (!color) return null;
|
|
2374
2409
|
return { "--tw-gradient-to": color };
|
|
@@ -2377,23 +2412,23 @@ var RESOLVERS = {
|
|
|
2377
2412
|
"skew-x": ({ value, negative, isArbitrary }) => {
|
|
2378
2413
|
const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
|
|
2379
2414
|
if (!isArbitrary && isNaN(parseFloat(value))) return null;
|
|
2380
|
-
return
|
|
2415
|
+
return getEffectiveIsWeb() ? { transform: `skewX(${deg})` } : { transform: [{ skewX: deg }] };
|
|
2381
2416
|
},
|
|
2382
2417
|
"skew-y": ({ value, negative, isArbitrary }) => {
|
|
2383
2418
|
const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
|
|
2384
2419
|
if (!isArbitrary && isNaN(parseFloat(value))) return null;
|
|
2385
|
-
return
|
|
2420
|
+
return getEffectiveIsWeb() ? { transform: `skewY(${deg})` } : { transform: [{ skewY: deg }] };
|
|
2386
2421
|
},
|
|
2387
2422
|
// Arbitrary full transform string: transform-[rotate(45deg)_scale(1.5)]
|
|
2388
2423
|
transform: ({ value, isArbitrary }) => {
|
|
2389
|
-
if (!
|
|
2424
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2390
2425
|
if (isArbitrary) return { transform: value.replace(/_/g, " ") };
|
|
2391
2426
|
if (value === "none") return { transform: "none" };
|
|
2392
2427
|
return null;
|
|
2393
2428
|
},
|
|
2394
2429
|
// Transform origin
|
|
2395
2430
|
origin: ({ value, isArbitrary }) => {
|
|
2396
|
-
if (!
|
|
2431
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2397
2432
|
if (isArbitrary) return { transformOrigin: value.replace(/_/g, " ") };
|
|
2398
2433
|
const origins = {
|
|
2399
2434
|
center: "center",
|
|
@@ -2410,7 +2445,7 @@ var RESOLVERS = {
|
|
|
2410
2445
|
},
|
|
2411
2446
|
// ── Text decoration advanced (web-only) ───────────────────────────────────
|
|
2412
2447
|
decoration: ({ value, isArbitrary }, { colors }) => {
|
|
2413
|
-
if (!
|
|
2448
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2414
2449
|
if (isArbitrary) {
|
|
2415
2450
|
if (/^\d/.test(value) || value.startsWith("calc(")) return { textDecorationThickness: value };
|
|
2416
2451
|
return { textDecorationColor: value };
|
|
@@ -2437,7 +2472,7 @@ var RESOLVERS = {
|
|
|
2437
2472
|
return color ? { textDecorationColor: color } : null;
|
|
2438
2473
|
},
|
|
2439
2474
|
"underline-offset": ({ value, isArbitrary }) => {
|
|
2440
|
-
if (!
|
|
2475
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2441
2476
|
if (isArbitrary) return { textUnderlineOffset: value };
|
|
2442
2477
|
const offsets = {
|
|
2443
2478
|
auto: "auto",
|
|
@@ -2451,7 +2486,7 @@ var RESOLVERS = {
|
|
|
2451
2486
|
},
|
|
2452
2487
|
// ── Outline extended (web-only) ───────────────────────────────────────────
|
|
2453
2488
|
outline: ({ value, isArbitrary }, { colors }) => {
|
|
2454
|
-
if (!
|
|
2489
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2455
2490
|
if (!value) return { outline: "2px solid transparent", outlineOffset: "2px" };
|
|
2456
2491
|
if (value === "none") return { outline: "none", outlineOffset: "0" };
|
|
2457
2492
|
if (isArbitrary) {
|
|
@@ -2464,14 +2499,14 @@ var RESOLVERS = {
|
|
|
2464
2499
|
return color ? { outlineColor: color } : null;
|
|
2465
2500
|
},
|
|
2466
2501
|
"outline-offset": ({ value, isArbitrary }) => {
|
|
2467
|
-
if (!
|
|
2502
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2468
2503
|
if (isArbitrary) return { outlineOffset: value };
|
|
2469
2504
|
const offsets = { "0": "0px", "1": "1px", "2": "2px", "4": "4px", "8": "8px" };
|
|
2470
2505
|
return offsets[value] ? { outlineOffset: offsets[value] } : null;
|
|
2471
2506
|
},
|
|
2472
2507
|
// ── Columns (web-only) ─────────────────────────────────────────────────────
|
|
2473
2508
|
columns: ({ value, isArbitrary }) => {
|
|
2474
|
-
if (!
|
|
2509
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2475
2510
|
if (isArbitrary) return { columnCount: value };
|
|
2476
2511
|
if (value === "auto") return { columnCount: "auto" };
|
|
2477
2512
|
const n = parseInt(value, 10);
|
|
@@ -2495,7 +2530,7 @@ var RESOLVERS = {
|
|
|
2495
2530
|
},
|
|
2496
2531
|
// ── Mix / background blend mode (web-only) ───────────────────────────────
|
|
2497
2532
|
"mix-blend": ({ value }) => {
|
|
2498
|
-
if (!
|
|
2533
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2499
2534
|
const modes = [
|
|
2500
2535
|
"normal",
|
|
2501
2536
|
"multiply",
|
|
@@ -2518,7 +2553,7 @@ var RESOLVERS = {
|
|
|
2518
2553
|
return modes.includes(value) ? { mixBlendMode: value } : null;
|
|
2519
2554
|
},
|
|
2520
2555
|
"bg-blend": ({ value }) => {
|
|
2521
|
-
if (!
|
|
2556
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2522
2557
|
const modes = [
|
|
2523
2558
|
"normal",
|
|
2524
2559
|
"multiply",
|
|
@@ -2541,7 +2576,7 @@ var RESOLVERS = {
|
|
|
2541
2576
|
},
|
|
2542
2577
|
// ── Will-change (web-only) ─────────────────────────────────────────────────
|
|
2543
2578
|
"will-change": ({ value, isArbitrary }) => {
|
|
2544
|
-
if (!
|
|
2579
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2545
2580
|
if (isArbitrary) return { willChange: value.replace(/_/g, ", ") };
|
|
2546
2581
|
const presets = {
|
|
2547
2582
|
auto: "auto",
|
|
@@ -2555,21 +2590,21 @@ var RESOLVERS = {
|
|
|
2555
2590
|
// These return special __divide* markers that resolver.ts converts to
|
|
2556
2591
|
// .cls > * + * { border-... } CSS rules. No inline style is applied.
|
|
2557
2592
|
"divide-x": ({ value, isArbitrary }) => {
|
|
2558
|
-
if (!
|
|
2593
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2559
2594
|
if (value === "reverse") return null;
|
|
2560
2595
|
if (!value) return { __divideX: 1 };
|
|
2561
2596
|
const n = parseFloat(value);
|
|
2562
2597
|
return isNaN(n) ? null : { __divideX: n };
|
|
2563
2598
|
},
|
|
2564
2599
|
"divide-y": ({ value, isArbitrary }) => {
|
|
2565
|
-
if (!
|
|
2600
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2566
2601
|
if (value === "reverse") return null;
|
|
2567
2602
|
if (!value) return { __divideY: 1 };
|
|
2568
2603
|
const n = parseFloat(value);
|
|
2569
2604
|
return isNaN(n) ? null : { __divideY: n };
|
|
2570
2605
|
},
|
|
2571
2606
|
divide: ({ value, isArbitrary }, { colors }) => {
|
|
2572
|
-
if (!
|
|
2607
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2573
2608
|
if (isArbitrary) return { __divideColor: value };
|
|
2574
2609
|
const styleTokens = {
|
|
2575
2610
|
solid: "solid",
|
|
@@ -2586,7 +2621,7 @@ var RESOLVERS = {
|
|
|
2586
2621
|
// Named presets give cross-platform shadow; arbitrary is web-only.
|
|
2587
2622
|
"text-shadow": ({ value, isArbitrary }, { colors }) => {
|
|
2588
2623
|
if (value === "none") {
|
|
2589
|
-
return
|
|
2624
|
+
return getEffectiveIsWeb() ? { textShadow: "none" } : { textShadowColor: "transparent", textShadowOffset: { width: 0, height: 0 }, textShadowRadius: 0 };
|
|
2590
2625
|
}
|
|
2591
2626
|
const webPresets = {
|
|
2592
2627
|
"": "0 2px 4px rgba(0,0,0,0.3)",
|
|
@@ -2603,15 +2638,15 @@ var RESOLVERS = {
|
|
|
2603
2638
|
xl: { textShadowColor: "rgba(0,0,0,0.5)", textShadowOffset: { width: 0, height: 16 }, textShadowRadius: 32 }
|
|
2604
2639
|
};
|
|
2605
2640
|
if (value in webPresets) {
|
|
2606
|
-
if (
|
|
2641
|
+
if (getEffectiveIsWeb()) return { textShadow: webPresets[value] };
|
|
2607
2642
|
return nativePresets[value] ?? null;
|
|
2608
2643
|
}
|
|
2609
2644
|
if (isArbitrary) {
|
|
2610
|
-
return
|
|
2645
|
+
return getEffectiveIsWeb() ? { textShadow: value.replace(/_/g, " ") } : null;
|
|
2611
2646
|
}
|
|
2612
2647
|
const color = resolveColor(value, colors, false);
|
|
2613
2648
|
if (color) {
|
|
2614
|
-
return
|
|
2649
|
+
return getEffectiveIsWeb() ? { textShadow: `0 2px 4px ${color}` } : { textShadowColor: color };
|
|
2615
2650
|
}
|
|
2616
2651
|
return null;
|
|
2617
2652
|
},
|
|
@@ -2619,13 +2654,13 @@ var RESOLVERS = {
|
|
|
2619
2654
|
perspective: ({ value, isArbitrary }) => {
|
|
2620
2655
|
if (isArbitrary) {
|
|
2621
2656
|
const numPx = parseFloat(value);
|
|
2622
|
-
if (
|
|
2657
|
+
if (getEffectiveIsWeb()) return { transform: `perspective(${value})` };
|
|
2623
2658
|
return isNaN(numPx) ? null : { transform: [{ perspective: numPx }] };
|
|
2624
2659
|
}
|
|
2625
|
-
if (value === "none") return
|
|
2660
|
+
if (value === "none") return getEffectiveIsWeb() ? { transform: "none" } : null;
|
|
2626
2661
|
const n = parseFloat(value);
|
|
2627
2662
|
if (isNaN(n)) return null;
|
|
2628
|
-
return
|
|
2663
|
+
return getEffectiveIsWeb() ? { transform: `perspective(${n}px)` } : { transform: [{ perspective: n }] };
|
|
2629
2664
|
},
|
|
2630
2665
|
// ── Tint color (native-only, for Image and icon components) ──────────────
|
|
2631
2666
|
tint: ({ value, isArbitrary }, { colors }) => {
|
|
@@ -2643,7 +2678,7 @@ var RESOLVERS = {
|
|
|
2643
2678
|
// resolver.ts detects __keyframe, injects the rule, then strips the marker
|
|
2644
2679
|
// so it never reaches element inline styles.
|
|
2645
2680
|
animate: ({ value, isArbitrary }) => {
|
|
2646
|
-
if (!
|
|
2681
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2647
2682
|
if (isArbitrary) return { animation: value.replace(/_/g, " ") };
|
|
2648
2683
|
const defs = {
|
|
2649
2684
|
none: { animation: "none" },
|
|
@@ -2669,7 +2704,7 @@ var RESOLVERS = {
|
|
|
2669
2704
|
},
|
|
2670
2705
|
// ── Line-clamp (web-only) ─────────────────────────────────────────────────
|
|
2671
2706
|
"line-clamp": ({ value }) => {
|
|
2672
|
-
if (!
|
|
2707
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2673
2708
|
if (value === "none") return { overflow: "visible", display: "block", WebkitLineClamp: "unset" };
|
|
2674
2709
|
const n = parseInt(value, 10);
|
|
2675
2710
|
if (isNaN(n) || n < 1) return null;
|
|
@@ -2682,14 +2717,14 @@ var RESOLVERS = {
|
|
|
2682
2717
|
},
|
|
2683
2718
|
// ── Caret color (web-only) ────────────────────────────────────────────────
|
|
2684
2719
|
caret: ({ value, isArbitrary }, { colors }) => {
|
|
2685
|
-
if (!
|
|
2720
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2686
2721
|
if (value === "auto" || value === "transparent") return { caretColor: value };
|
|
2687
2722
|
const color = resolveColor(value, colors, isArbitrary);
|
|
2688
2723
|
return color ? { caretColor: color } : null;
|
|
2689
2724
|
},
|
|
2690
2725
|
// ── Accent color (web-only) ───────────────────────────────────────────────
|
|
2691
2726
|
accent: ({ value, isArbitrary }, { colors }) => {
|
|
2692
|
-
if (!
|
|
2727
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2693
2728
|
if (value === "auto") return { accentColor: "auto" };
|
|
2694
2729
|
const color = resolveColor(value, colors, isArbitrary);
|
|
2695
2730
|
return color ? { accentColor: color } : null;
|
|
@@ -2773,7 +2808,7 @@ var RESOLVERS = {
|
|
|
2773
2808
|
}
|
|
2774
2809
|
const v = zIndex[value];
|
|
2775
2810
|
if (v !== void 0) {
|
|
2776
|
-
if (v === "auto") return
|
|
2811
|
+
if (v === "auto") return getEffectiveIsWeb() ? { zIndex: "auto" } : null;
|
|
2777
2812
|
return { zIndex: v };
|
|
2778
2813
|
}
|
|
2779
2814
|
const n = parseInt(value);
|
|
@@ -2802,13 +2837,13 @@ var RESOLVERS = {
|
|
|
2802
2837
|
},
|
|
2803
2838
|
// ── Line height ────────────────────────────────────────────────────────────
|
|
2804
2839
|
leading: ({ value, isArbitrary }, { lineHeight }) => {
|
|
2805
|
-
if (isArbitrary) return { lineHeight:
|
|
2840
|
+
if (isArbitrary) return { lineHeight: getEffectiveIsWeb() ? value : toNativeValue(value) };
|
|
2806
2841
|
const v = lineHeight[value];
|
|
2807
2842
|
return v !== void 0 ? { lineHeight: v } : null;
|
|
2808
2843
|
},
|
|
2809
2844
|
// ── Letter spacing ─────────────────────────────────────────────────────────
|
|
2810
2845
|
tracking: ({ value, isArbitrary }, { letterSpacing }) => {
|
|
2811
|
-
if (isArbitrary) return { letterSpacing:
|
|
2846
|
+
if (isArbitrary) return { letterSpacing: getEffectiveIsWeb() ? value : toNativeValue(value) };
|
|
2812
2847
|
const v = letterSpacing[value];
|
|
2813
2848
|
return v !== void 0 ? { letterSpacing: v } : null;
|
|
2814
2849
|
},
|
|
@@ -2823,34 +2858,34 @@ var RESOLVERS = {
|
|
|
2823
2858
|
scale: ({ value, isArbitrary }) => {
|
|
2824
2859
|
const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
|
|
2825
2860
|
if (isNaN(n)) return null;
|
|
2826
|
-
return
|
|
2861
|
+
return getEffectiveIsWeb() ? { transform: `scale(${n})` } : { transform: [{ scale: n }] };
|
|
2827
2862
|
},
|
|
2828
2863
|
"scale-x": ({ value, isArbitrary }) => {
|
|
2829
2864
|
const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
|
|
2830
2865
|
if (isNaN(n)) return null;
|
|
2831
|
-
return
|
|
2866
|
+
return getEffectiveIsWeb() ? { transform: `scaleX(${n})` } : { transform: [{ scaleX: n }] };
|
|
2832
2867
|
},
|
|
2833
2868
|
"scale-y": ({ value, isArbitrary }) => {
|
|
2834
2869
|
const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
|
|
2835
2870
|
if (isNaN(n)) return null;
|
|
2836
|
-
return
|
|
2871
|
+
return getEffectiveIsWeb() ? { transform: `scaleY(${n})` } : { transform: [{ scaleY: n }] };
|
|
2837
2872
|
},
|
|
2838
2873
|
// ── Rotate ─────────────────────────────────────────────────────────────────
|
|
2839
2874
|
rotate: ({ value, negative, isArbitrary }) => {
|
|
2840
2875
|
if (isArbitrary) {
|
|
2841
2876
|
const finalValue = negative ? `-${value}` : value;
|
|
2842
|
-
return
|
|
2877
|
+
return getEffectiveIsWeb() ? { transform: `rotate(${finalValue})` } : { transform: [{ rotate: finalValue }] };
|
|
2843
2878
|
}
|
|
2844
2879
|
const deg = parseFloat(value);
|
|
2845
2880
|
if (isNaN(deg)) return null;
|
|
2846
2881
|
const finalDeg = negative ? -deg : deg;
|
|
2847
|
-
return
|
|
2882
|
+
return getEffectiveIsWeb() ? { transform: `rotate(${finalDeg}deg)` } : { transform: [{ rotate: `${finalDeg}deg` }] };
|
|
2848
2883
|
},
|
|
2849
2884
|
// ── Translate ──────────────────────────────────────────────────────────────
|
|
2850
2885
|
"translate-x": ({ value, negative, isArbitrary }, { spacing }) => {
|
|
2851
2886
|
const v = resolveSpacing(value, negative, spacing, isArbitrary);
|
|
2852
2887
|
if (v === null) return null;
|
|
2853
|
-
if (
|
|
2888
|
+
if (getEffectiveIsWeb()) return { transform: `translateX(${v})` };
|
|
2854
2889
|
if (typeof v === "string") {
|
|
2855
2890
|
const n = parseFloat(v);
|
|
2856
2891
|
return isNaN(n) ? null : { transform: [{ translateX: n }] };
|
|
@@ -2860,7 +2895,7 @@ var RESOLVERS = {
|
|
|
2860
2895
|
"translate-y": ({ value, negative, isArbitrary }, { spacing }) => {
|
|
2861
2896
|
const v = resolveSpacing(value, negative, spacing, isArbitrary);
|
|
2862
2897
|
if (v === null) return null;
|
|
2863
|
-
if (
|
|
2898
|
+
if (getEffectiveIsWeb()) return { transform: `translateY(${v})` };
|
|
2864
2899
|
if (typeof v === "string") {
|
|
2865
2900
|
const n = parseFloat(v);
|
|
2866
2901
|
return isNaN(n) ? null : { transform: [{ translateY: n }] };
|
|
@@ -2873,12 +2908,12 @@ var RESOLVERS = {
|
|
|
2873
2908
|
const presets = { auto: "auto", square: 1, video: 16 / 9 };
|
|
2874
2909
|
if (!(value in presets)) return null;
|
|
2875
2910
|
const v = presets[value];
|
|
2876
|
-
if (v === "auto") return
|
|
2911
|
+
if (v === "auto") return getEffectiveIsWeb() ? { aspectRatio: "auto" } : null;
|
|
2877
2912
|
return { aspectRatio: v };
|
|
2878
2913
|
},
|
|
2879
2914
|
// ── Transition (web-only; use Animated API on native) ─────────────────────
|
|
2880
2915
|
transition: ({ value }) => {
|
|
2881
|
-
if (!
|
|
2916
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2882
2917
|
const presets = {
|
|
2883
2918
|
"": "color 150ms, background-color 150ms, border-color 150ms, opacity 150ms, box-shadow 150ms",
|
|
2884
2919
|
all: "all 150ms",
|
|
@@ -2892,18 +2927,18 @@ var RESOLVERS = {
|
|
|
2892
2927
|
return v !== void 0 ? { transition: v } : null;
|
|
2893
2928
|
},
|
|
2894
2929
|
duration: ({ value, isArbitrary }) => {
|
|
2895
|
-
if (!
|
|
2930
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2896
2931
|
const ms = isArbitrary ? value : `${value}ms`;
|
|
2897
2932
|
return { transitionDuration: ms };
|
|
2898
2933
|
},
|
|
2899
2934
|
delay: ({ value, isArbitrary }) => {
|
|
2900
|
-
if (!
|
|
2935
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2901
2936
|
const ms = isArbitrary ? value : `${value}ms`;
|
|
2902
2937
|
return { transitionDelay: ms };
|
|
2903
2938
|
},
|
|
2904
2939
|
// ── Ring (web-only: box-shadow outline ring) ──────────────────────────────
|
|
2905
2940
|
ring: ({ value, isArbitrary }, { colors }) => {
|
|
2906
|
-
if (!
|
|
2941
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2907
2942
|
const DEFAULT_COLOR = "rgba(59, 130, 246, 0.5)";
|
|
2908
2943
|
const DEFAULT_WIDTH = 3;
|
|
2909
2944
|
if (!value) {
|
|
@@ -2930,7 +2965,7 @@ var RESOLVERS = {
|
|
|
2930
2965
|
return null;
|
|
2931
2966
|
},
|
|
2932
2967
|
"ring-offset": ({ value, isArbitrary }, _theme) => {
|
|
2933
|
-
if (!
|
|
2968
|
+
if (!getEffectiveIsWeb()) return null;
|
|
2934
2969
|
const DEFAULT_RING_COLOR = "rgba(59, 130, 246, 0.5)";
|
|
2935
2970
|
const DEFAULT_RING_WIDTH = 3;
|
|
2936
2971
|
const offsetTokens = { "0": 0, "1": 1, "2": 2, "4": 4, "8": 8 };
|
|
@@ -2959,7 +2994,7 @@ function resolveUtility(parsed, theme) {
|
|
|
2959
2994
|
if (parsed.utility === "inline-grid") {
|
|
2960
2995
|
return { display: "inline-grid" };
|
|
2961
2996
|
}
|
|
2962
|
-
if (parsed.utility in
|
|
2997
|
+
if (parsed.utility in getStandalone()) return getStandalone()[parsed.utility] ?? null;
|
|
2963
2998
|
}
|
|
2964
2999
|
const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
|
|
2965
3000
|
if (resolver) return resolver(parsed, theme);
|
|
@@ -2975,7 +3010,7 @@ function getPluginStandaloneMap() {
|
|
|
2975
3010
|
return PLUGIN_STANDALONE;
|
|
2976
3011
|
}
|
|
2977
3012
|
function isKnownUtility(utility) {
|
|
2978
|
-
return utility in
|
|
3013
|
+
return utility in getStandalone() || utility in RESOLVERS || utility in PLUGIN_STANDALONE || utility in PLUGIN_RESOLVERS;
|
|
2979
3014
|
}
|
|
2980
3015
|
|
|
2981
3016
|
// src/core/responsiveStore.ts
|