From bae3842d8eca3294e36ae2eec81066b2cd8100d8 Mon Sep 17 00:00:00 2001
From: Mark Brocato <mark.brocato@moovweb.com>
Date: Mon, 15 Jun 2020 15:53:47 +0300
Subject: [PATCH] Fix lazy browser styles (#107)

* Fix issue with duplicated and conflicting styles in lazy hydrated components

* bump version
---
 package.json       | 2 +-
 src/LazyHydrate.js | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 8227f140..41c682f5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-storefront",
-  "version": "8.10.1",
+  "version": "8.10.2",
   "description": "Build and deploy e-commerce progressive web apps (PWAs) in record time.",
   "module": "./index.js",
   "license": "Apache-2.0",
diff --git a/src/LazyHydrate.js b/src/LazyHydrate.js
index f8b80e70..7d891cb2 100644
--- a/src/LazyHydrate.js
+++ b/src/LazyHydrate.js
@@ -66,7 +66,7 @@ export function LazyStyles() {
 
 function LazyStylesProvider({ id, children }) {
   const generateClassName = createGenerateClassName({
-    productionPrefix: `lazy-${id}`,
+    seed: id,
   })
   const registry = new SheetsRegistry()
   registry.id = id
@@ -211,7 +211,11 @@ function LazyHydrateInstance({ id, className, ssrOnly, children, on, ...props })
 function LazyHydrate({ children, ...props }) {
   return (
     <LazyHydrateInstance {...props}>
-      <LazyStylesProvider {...props}>{children}</LazyStylesProvider>
+      {/* LazyStylesProvider should not be used in the browser. Once components 
+      are hydrated, their styles will automatically be managed by the app's main 
+      StyleProvider. Using LazyStylesProvider in the browser will result in duplicated
+      and conflicting styles in lazy components once they are hydrated. */}
+      {isBrowser() ? children : <LazyStylesProvider {...props}>{children}</LazyStylesProvider>}
     </LazyHydrateInstance>
   )
 }