Fix hydratation error with modern API #212

garronej · Apr 25, 2024 · 4f8023d · 4f8023d
1 parent 1fe9174
commit 4f8023d
Showing 1 changed file with 54 additions and 26 deletions.
diff --git a/src/tss.ts b/src/tss.ts
@@ -281,46 +281,74 @@ function createTss_internal<
                                                         assert(false);
                                                     }
 
-                                                    if (isSSR) {
-                                                        {
+                                                    {
+                                                        /* prettier-ignore */
+                                                        let wrap = nestedSelectorUsageTrackRecord.find(wrap => wrap.name === name && wrap.idOfUseStyles === idOfUseStyles);
+
+                                                        /* prettier-ignore */
+                                                        if (wrap === undefined) {
+
                                                             /* prettier-ignore */
-                                                            let wrap = nestedSelectorUsageTrackRecord.find(wrap => wrap.name === name && wrap.idOfUseStyles === idOfUseStyles);
+                                                            wrap = { name, idOfUseStyles, "nestedSelectorRuleNames": new Set() };
 
                                                             /* prettier-ignore */
-                                                            if (wrap === undefined) {
+                                                            nestedSelectorUsageTrackRecord.push(wrap);
+                                                        }
 
-                                                                /* prettier-ignore */
-                                                                wrap = { name, idOfUseStyles, "nestedSelectorRuleNames": new Set() };
+                                                        /* prettier-ignore */
+                                                        wrap.nestedSelectorRuleNames.add(ruleName);
+                                                    }
 
-                                                                /* prettier-ignore */
-                                                                nestedSelectorUsageTrackRecord.push(wrap);
-                                                            }
+                                                    if (
+                                                        isSSR &&
+                                                        name === undefined
+                                                    ) {
+                                                        throw new Error(
+                                                            [
+                                                                `tss-react: In SSR setups, in order to use nested selectors, you must also give a unique name to the useStyle function.`,
+                                                                `Solution: Use tss.withName("ComponentName").withNestedSelectors<...>()... to set a name.`
+                                                            ].join("\n")
+                                                        );
+                                                    }
 
-                                                            /* prettier-ignore */
-                                                            wrap.nestedSelectorRuleNames.add(ruleName);
+                                                    detect_potential_conflicts: {
+                                                        if (
+                                                            name === undefined
+                                                        ) {
+                                                            break detect_potential_conflicts;
                                                         }
 
+                                                        const hasPotentialConflict =
+                                                            nestedSelectorUsageTrackRecord.find(
+                                                                wrap =>
+                                                                    wrap.idOfUseStyles !==
+                                                                        idOfUseStyles &&
+                                                                    wrap.name ===
+                                                                        name &&
+                                                                    wrap.nestedSelectorRuleNames.has(
+                                                                        ruleName
+                                                                    )
+                                                            ) !== undefined;
+
                                                         if (
-                                                            /* prettier-ignore */
-                                                            nestedSelectorUsageTrackRecord.find(wrap => wrap.name === name && wrap.idOfUseStyles !== idOfUseStyles && wrap.nestedSelectorRuleNames.has(ruleName)) !== undefined
+                                                            !hasPotentialConflict
                                                         ) {
-                                                            throw new Error(
-                                                                [
-                                                                    `tss-react: Duplicate nested selector "${ruleName}" detected in ${
-                                                                        name !==
-                                                                        undefined
-                                                                            ? `useStyles named "${name}"`
-                                                                            : "anonymous useStyles function"
-                                                                    }.`,
-                                                                    `In SSR setups, this may lead to CSS class name collisions, causing nested selectors to target elements outside of the intended scope.`,
-                                                                    `Solution: Ensure each useStyles using nested selectors has a unique name. Use tss.withName("UniqueName").withNestedSelectors<...>()... to set a name.`
-                                                                ].join("\n")
-                                                            );
+                                                            break detect_potential_conflicts;
                                                         }
+
+                                                        throw new Error(
+                                                            [
+                                                                `tss-react: There are in your codebase two different useStyles named "${name}" that`,
+                                                                `both use use the nested selector ${ruleName}.\n`,
+                                                                `This may lead to CSS class name collisions, causing nested selectors to target elements outside of the intended scope.\n`,
+                                                                `Solution: Ensure each useStyles using nested selectors has a unique name.\n`,
+                                                                `Use: tss.withName("UniqueName").withNestedSelectors<...>()...`
+                                                            ].join(" ")
+                                                        );
                                                     }
 
                                                     /* prettier-ignore */
-                                                    return (refClassesCache[ruleName] = `${cache.key}-${idOfUseStyles}${name !== undefined ? `-${name}` : ""}-${ruleName}-ref`);
+                                                    return (refClassesCache[ruleName] = `${cache.key}-${name !== undefined ? name : idOfUseStyles}-${ruleName}-ref`);
                                                 }
                                             })
                               })