tailwind-styled-v4 5.1.14 → 5.1.16
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/dist/index.browser.mjs +27 -6
- package/dist/index.browser.mjs.map +1 -1
- package/dist/index.js +27 -6
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +27 -6
- package/dist/index.mjs.map +1 -1
- package/dist/runtime-css.d.mts +1 -2
- package/dist/runtime-css.d.ts +1 -2
- package/dist/runtime-css.js +66 -89
- package/dist/runtime-css.js.map +1 -1
- package/dist/runtime-css.mjs +65 -83
- package/dist/runtime-css.mjs.map +1 -1
- package/dist/runtime.js +27 -6
- package/dist/runtime.js.map +1 -1
- package/dist/runtime.mjs +27 -6
- package/dist/runtime.mjs.map +1 -1
- package/dist/theme.js +27 -6
- package/dist/theme.js.map +1 -1
- package/dist/theme.mjs +27 -6
- package/dist/theme.mjs.map +1 -1
- package/package.json +4 -7
package/dist/index.browser.mjs
CHANGED
|
@@ -1609,11 +1609,18 @@ ${vars}
|
|
|
1609
1609
|
var createLiveTokenEngine = () => {
|
|
1610
1610
|
const state = {
|
|
1611
1611
|
currentTokens: {},
|
|
1612
|
-
styleEl: null
|
|
1612
|
+
styleEl: null,
|
|
1613
|
+
// Belum boleh nyentuh live DOM sampai komponen pertama selesai mount.
|
|
1614
|
+
// Ini yang nyegah hydration mismatch: tanpa flag ini, liveToken() yang
|
|
1615
|
+
// dipanggil di module top-level akan langsung document.documentElement
|
|
1616
|
+
// .style.setProperty(...) saat bundle client di-evaluasi — JAUH sebelum
|
|
1617
|
+
// React selesai hydrate — sehingga <html> versi live DOM beda dengan
|
|
1618
|
+
// <html> yang di-render server (yang gak pernah nyentuh `document`).
|
|
1619
|
+
hydrated: false
|
|
1613
1620
|
};
|
|
1614
1621
|
const subscribers = /* @__PURE__ */ new Set();
|
|
1615
1622
|
const syncStyleEl = () => {
|
|
1616
|
-
if (typeof document === "undefined") return;
|
|
1623
|
+
if (!state.hydrated || typeof document === "undefined") return;
|
|
1617
1624
|
if (!state.styleEl) {
|
|
1618
1625
|
const styleEl = document.createElement("style");
|
|
1619
1626
|
styleEl.id = "tw-live-tokens";
|
|
@@ -1634,7 +1641,7 @@ var createLiveTokenEngine = () => {
|
|
|
1634
1641
|
};
|
|
1635
1642
|
const setToken2 = (name, value) => {
|
|
1636
1643
|
state.currentTokens = { ...state.currentTokens, [name]: value };
|
|
1637
|
-
if (typeof document !== "undefined") {
|
|
1644
|
+
if (state.hydrated && typeof document !== "undefined") {
|
|
1638
1645
|
document.documentElement.style.setProperty(tokenVar(name), value);
|
|
1639
1646
|
}
|
|
1640
1647
|
syncStyleEl();
|
|
@@ -1642,7 +1649,7 @@ var createLiveTokenEngine = () => {
|
|
|
1642
1649
|
};
|
|
1643
1650
|
const setTokens2 = (tokens) => {
|
|
1644
1651
|
state.currentTokens = { ...state.currentTokens, ...tokens };
|
|
1645
|
-
if (typeof document !== "undefined") {
|
|
1652
|
+
if (state.hydrated && typeof document !== "undefined") {
|
|
1646
1653
|
const root = document.documentElement;
|
|
1647
1654
|
for (const [name, value] of Object.entries(tokens)) {
|
|
1648
1655
|
root.style.setProperty(tokenVar(name), value);
|
|
@@ -1652,7 +1659,7 @@ var createLiveTokenEngine = () => {
|
|
|
1652
1659
|
notifySubscribers();
|
|
1653
1660
|
};
|
|
1654
1661
|
const applyTokenSet2 = (tokens) => {
|
|
1655
|
-
if (typeof document !== "undefined") {
|
|
1662
|
+
if (state.hydrated && typeof document !== "undefined") {
|
|
1656
1663
|
const root = document.documentElement;
|
|
1657
1664
|
for (const name of Object.keys(state.currentTokens)) {
|
|
1658
1665
|
if (!(name in tokens)) {
|
|
@@ -1667,7 +1674,20 @@ var createLiveTokenEngine = () => {
|
|
|
1667
1674
|
syncStyleEl();
|
|
1668
1675
|
notifySubscribers();
|
|
1669
1676
|
};
|
|
1677
|
+
const markHydrated = () => {
|
|
1678
|
+
if (state.hydrated || typeof document === "undefined") return;
|
|
1679
|
+
state.hydrated = true;
|
|
1680
|
+
const root = document.documentElement;
|
|
1681
|
+
for (const [name, value] of Object.entries(state.currentTokens)) {
|
|
1682
|
+
root.style.setProperty(tokenVar(name), value);
|
|
1683
|
+
}
|
|
1684
|
+
syncStyleEl();
|
|
1685
|
+
};
|
|
1686
|
+
if (typeof window !== "undefined") {
|
|
1687
|
+
requestAnimationFrame(markHydrated);
|
|
1688
|
+
}
|
|
1670
1689
|
return {
|
|
1690
|
+
markHydrated,
|
|
1671
1691
|
liveToken(tokens) {
|
|
1672
1692
|
setTokens2(tokens);
|
|
1673
1693
|
const vars = {};
|
|
@@ -1737,8 +1757,9 @@ function generateTokenCssString() {
|
|
|
1737
1757
|
}
|
|
1738
1758
|
function createUseTokens() {
|
|
1739
1759
|
return function useTokens() {
|
|
1740
|
-
const [tokens, setTokensState] = React3.useState(
|
|
1760
|
+
const [tokens, setTokensState] = React3.useState({});
|
|
1741
1761
|
React3.useEffect(() => {
|
|
1762
|
+
engine.markHydrated();
|
|
1742
1763
|
setTokensState(engine.getTokens());
|
|
1743
1764
|
return engine.subscribe((nextTokens) => setTokensState(nextTokens));
|
|
1744
1765
|
}, []);
|