Problems with SSR

[rfdomingues98]

Hello,
I was using this in a Turborepo + Tanstack Start project and noticed some hydration errors due to CSS filename hash differing on build.

After some digging, it traces back to this plugin. It seems like the issue is related to css variable names that this package randomly generates every time for the createToggle method. Since the name changes every time, it causes hydration problems when using SSR.

Would it be possible to avoid generating random strings every time?

[rfdomingues98]

Applying the following patch helped me work around this:

diff --git a/dist/index.js b/dist/index.js
index 0b33c39bed281a3ca6f4652e52e65ab955103f59..157e265b9bb1927071368ab64a32f8528455c01e 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -418,17 +418,15 @@ const encoding = {
 		return decodedChars.join("");
 	}
 };
-const generateRandomString = (length = 10) => {
-	const charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-	let result = "";
-	for (let i = 0; i < length; i++) {
-		const randomIndex = Math.floor(Math.random() * charset.length);
-		result += charset[randomIndex];
-	}
-	return result;
+const hashToggleKey = (str) => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = Math.imul(31, hash) + str.charCodeAt(i) | 0;
+  }
+  return Math.abs(hash).toString(36);
 };
 const createToggle = (property, on, off) => {
-	const varName = `--toolwind-toggle-${generateRandomString()}`;
+	const varName = `--toolwind-toggle-${hashToggleKey(`${property}:${on}:${off}`)}`;
 	return [{ [property]: `var(${varName}, ${off})` }, {
 		on: { [varName]: on },
 		off: { [varName]: off }

[brandonmcconnell]

@rfdomingues98, thanks for the report and fix! Would you mind opening a request for this?