tailwind-styled-v4 5.1.15 → 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 +26 -5
- package/dist/index.browser.mjs.map +1 -1
- package/dist/index.js +26 -5
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +26 -5
- package/dist/index.mjs.map +1 -1
- package/dist/runtime-css.js +19 -1
- package/dist/runtime-css.js.map +1 -1
- package/dist/runtime-css.mjs +19 -1
- package/dist/runtime-css.mjs.map +1 -1
- package/dist/runtime.js +26 -5
- package/dist/runtime.js.map +1 -1
- package/dist/runtime.mjs +26 -5
- package/dist/runtime.mjs.map +1 -1
- package/dist/theme.js +26 -5
- package/dist/theme.js.map +1 -1
- package/dist/theme.mjs +26 -5
- package/dist/theme.mjs.map +1 -1
- package/package.json +4 -2
package/dist/index.mjs
CHANGED
|
@@ -1823,11 +1823,18 @@ ${vars}
|
|
|
1823
1823
|
var createLiveTokenEngine = () => {
|
|
1824
1824
|
const state = {
|
|
1825
1825
|
currentTokens: {},
|
|
1826
|
-
styleEl: null
|
|
1826
|
+
styleEl: null,
|
|
1827
|
+
// Belum boleh nyentuh live DOM sampai komponen pertama selesai mount.
|
|
1828
|
+
// Ini yang nyegah hydration mismatch: tanpa flag ini, liveToken() yang
|
|
1829
|
+
// dipanggil di module top-level akan langsung document.documentElement
|
|
1830
|
+
// .style.setProperty(...) saat bundle client di-evaluasi — JAUH sebelum
|
|
1831
|
+
// React selesai hydrate — sehingga <html> versi live DOM beda dengan
|
|
1832
|
+
// <html> yang di-render server (yang gak pernah nyentuh `document`).
|
|
1833
|
+
hydrated: false
|
|
1827
1834
|
};
|
|
1828
1835
|
const subscribers = /* @__PURE__ */ new Set();
|
|
1829
1836
|
const syncStyleEl = () => {
|
|
1830
|
-
if (typeof document === "undefined") return;
|
|
1837
|
+
if (!state.hydrated || typeof document === "undefined") return;
|
|
1831
1838
|
if (!state.styleEl) {
|
|
1832
1839
|
const styleEl = document.createElement("style");
|
|
1833
1840
|
styleEl.id = "tw-live-tokens";
|
|
@@ -1848,7 +1855,7 @@ var createLiveTokenEngine = () => {
|
|
|
1848
1855
|
};
|
|
1849
1856
|
const setToken2 = (name, value) => {
|
|
1850
1857
|
state.currentTokens = { ...state.currentTokens, [name]: value };
|
|
1851
|
-
if (typeof document !== "undefined") {
|
|
1858
|
+
if (state.hydrated && typeof document !== "undefined") {
|
|
1852
1859
|
document.documentElement.style.setProperty(tokenVar(name), value);
|
|
1853
1860
|
}
|
|
1854
1861
|
syncStyleEl();
|
|
@@ -1856,7 +1863,7 @@ var createLiveTokenEngine = () => {
|
|
|
1856
1863
|
};
|
|
1857
1864
|
const setTokens2 = (tokens) => {
|
|
1858
1865
|
state.currentTokens = { ...state.currentTokens, ...tokens };
|
|
1859
|
-
if (typeof document !== "undefined") {
|
|
1866
|
+
if (state.hydrated && typeof document !== "undefined") {
|
|
1860
1867
|
const root = document.documentElement;
|
|
1861
1868
|
for (const [name, value] of Object.entries(tokens)) {
|
|
1862
1869
|
root.style.setProperty(tokenVar(name), value);
|
|
@@ -1866,7 +1873,7 @@ var createLiveTokenEngine = () => {
|
|
|
1866
1873
|
notifySubscribers();
|
|
1867
1874
|
};
|
|
1868
1875
|
const applyTokenSet2 = (tokens) => {
|
|
1869
|
-
if (typeof document !== "undefined") {
|
|
1876
|
+
if (state.hydrated && typeof document !== "undefined") {
|
|
1870
1877
|
const root = document.documentElement;
|
|
1871
1878
|
for (const name of Object.keys(state.currentTokens)) {
|
|
1872
1879
|
if (!(name in tokens)) {
|
|
@@ -1881,7 +1888,20 @@ var createLiveTokenEngine = () => {
|
|
|
1881
1888
|
syncStyleEl();
|
|
1882
1889
|
notifySubscribers();
|
|
1883
1890
|
};
|
|
1891
|
+
const markHydrated = () => {
|
|
1892
|
+
if (state.hydrated || typeof document === "undefined") return;
|
|
1893
|
+
state.hydrated = true;
|
|
1894
|
+
const root = document.documentElement;
|
|
1895
|
+
for (const [name, value] of Object.entries(state.currentTokens)) {
|
|
1896
|
+
root.style.setProperty(tokenVar(name), value);
|
|
1897
|
+
}
|
|
1898
|
+
syncStyleEl();
|
|
1899
|
+
};
|
|
1900
|
+
if (typeof window !== "undefined") {
|
|
1901
|
+
requestAnimationFrame(markHydrated);
|
|
1902
|
+
}
|
|
1884
1903
|
return {
|
|
1904
|
+
markHydrated,
|
|
1885
1905
|
liveToken(tokens) {
|
|
1886
1906
|
setTokens2(tokens);
|
|
1887
1907
|
const vars = {};
|
|
@@ -1953,6 +1973,7 @@ function createUseTokens() {
|
|
|
1953
1973
|
return function useTokens() {
|
|
1954
1974
|
const [tokens, setTokensState] = React3.useState({});
|
|
1955
1975
|
React3.useEffect(() => {
|
|
1976
|
+
engine.markHydrated();
|
|
1956
1977
|
setTokensState(engine.getTokens());
|
|
1957
1978
|
return engine.subscribe((nextTokens) => setTokensState(nextTokens));
|
|
1958
1979
|
}, []);
|