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