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.js
CHANGED
|
@@ -1889,11 +1889,18 @@ ${vars}
|
|
|
1889
1889
|
var createLiveTokenEngine = () => {
|
|
1890
1890
|
const state = {
|
|
1891
1891
|
currentTokens: {},
|
|
1892
|
-
styleEl: null
|
|
1892
|
+
styleEl: null,
|
|
1893
|
+
// Belum boleh nyentuh live DOM sampai komponen pertama selesai mount.
|
|
1894
|
+
// Ini yang nyegah hydration mismatch: tanpa flag ini, liveToken() yang
|
|
1895
|
+
// dipanggil di module top-level akan langsung document.documentElement
|
|
1896
|
+
// .style.setProperty(...) saat bundle client di-evaluasi — JAUH sebelum
|
|
1897
|
+
// React selesai hydrate — sehingga <html> versi live DOM beda dengan
|
|
1898
|
+
// <html> yang di-render server (yang gak pernah nyentuh `document`).
|
|
1899
|
+
hydrated: false
|
|
1893
1900
|
};
|
|
1894
1901
|
const subscribers = /* @__PURE__ */ new Set();
|
|
1895
1902
|
const syncStyleEl = () => {
|
|
1896
|
-
if (typeof document === "undefined") return;
|
|
1903
|
+
if (!state.hydrated || typeof document === "undefined") return;
|
|
1897
1904
|
if (!state.styleEl) {
|
|
1898
1905
|
const styleEl = document.createElement("style");
|
|
1899
1906
|
styleEl.id = "tw-live-tokens";
|
|
@@ -1914,7 +1921,7 @@ var createLiveTokenEngine = () => {
|
|
|
1914
1921
|
};
|
|
1915
1922
|
const setToken2 = (name, value) => {
|
|
1916
1923
|
state.currentTokens = { ...state.currentTokens, [name]: value };
|
|
1917
|
-
if (typeof document !== "undefined") {
|
|
1924
|
+
if (state.hydrated && typeof document !== "undefined") {
|
|
1918
1925
|
document.documentElement.style.setProperty(tokenVar(name), value);
|
|
1919
1926
|
}
|
|
1920
1927
|
syncStyleEl();
|
|
@@ -1922,7 +1929,7 @@ var createLiveTokenEngine = () => {
|
|
|
1922
1929
|
};
|
|
1923
1930
|
const setTokens2 = (tokens) => {
|
|
1924
1931
|
state.currentTokens = { ...state.currentTokens, ...tokens };
|
|
1925
|
-
if (typeof document !== "undefined") {
|
|
1932
|
+
if (state.hydrated && typeof document !== "undefined") {
|
|
1926
1933
|
const root = document.documentElement;
|
|
1927
1934
|
for (const [name, value] of Object.entries(tokens)) {
|
|
1928
1935
|
root.style.setProperty(tokenVar(name), value);
|
|
@@ -1932,7 +1939,7 @@ var createLiveTokenEngine = () => {
|
|
|
1932
1939
|
notifySubscribers();
|
|
1933
1940
|
};
|
|
1934
1941
|
const applyTokenSet2 = (tokens) => {
|
|
1935
|
-
if (typeof document !== "undefined") {
|
|
1942
|
+
if (state.hydrated && typeof document !== "undefined") {
|
|
1936
1943
|
const root = document.documentElement;
|
|
1937
1944
|
for (const name of Object.keys(state.currentTokens)) {
|
|
1938
1945
|
if (!(name in tokens)) {
|
|
@@ -1947,7 +1954,20 @@ var createLiveTokenEngine = () => {
|
|
|
1947
1954
|
syncStyleEl();
|
|
1948
1955
|
notifySubscribers();
|
|
1949
1956
|
};
|
|
1957
|
+
const markHydrated = () => {
|
|
1958
|
+
if (state.hydrated || typeof document === "undefined") return;
|
|
1959
|
+
state.hydrated = true;
|
|
1960
|
+
const root = document.documentElement;
|
|
1961
|
+
for (const [name, value] of Object.entries(state.currentTokens)) {
|
|
1962
|
+
root.style.setProperty(tokenVar(name), value);
|
|
1963
|
+
}
|
|
1964
|
+
syncStyleEl();
|
|
1965
|
+
};
|
|
1966
|
+
if (typeof window !== "undefined") {
|
|
1967
|
+
requestAnimationFrame(markHydrated);
|
|
1968
|
+
}
|
|
1950
1969
|
return {
|
|
1970
|
+
markHydrated,
|
|
1951
1971
|
liveToken(tokens) {
|
|
1952
1972
|
setTokens2(tokens);
|
|
1953
1973
|
const vars = {};
|
|
@@ -2017,8 +2037,9 @@ function generateTokenCssString() {
|
|
|
2017
2037
|
}
|
|
2018
2038
|
function createUseTokens() {
|
|
2019
2039
|
return function useTokens() {
|
|
2020
|
-
const [tokens, setTokensState] = import_react3.default.useState(
|
|
2040
|
+
const [tokens, setTokensState] = import_react3.default.useState({});
|
|
2021
2041
|
import_react3.default.useEffect(() => {
|
|
2042
|
+
engine.markHydrated();
|
|
2022
2043
|
setTokensState(engine.getTokens());
|
|
2023
2044
|
return engine.subscribe((nextTokens) => setTokensState(nextTokens));
|
|
2024
2045
|
}, []);
|