From 6fd888078e5acd4e15e5280c9185fa31c618caef Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Mon, 12 Jun 2023 03:24:23 +0330
Subject: [PATCH] fix(lsd-react): use theme's name as the cache key when
 generating global styles

---
 packages/lsd-react/.storybook/themes.ts                 | 2 +-
 packages/lsd-react/src/components/Theme/createTheme.ts  | 6 +++++-
 packages/lsd-react/src/components/Theme/globalStyles.ts | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/lsd-react/.storybook/themes.ts b/packages/lsd-react/.storybook/themes.ts
index e1ef4f2..c22bd07 100644
--- a/packages/lsd-react/.storybook/themes.ts
+++ b/packages/lsd-react/.storybook/themes.ts
@@ -17,7 +17,7 @@ const createThemes = () => {
   const themes = fonts.map((font) => [
     createTheme(
       {
-        name: `${defaultThemes.light.name} (${font})`,
+        // name: `${defaultThemes.light.name} (${font})`,
         ...themeProps,
         typographyGlobal: {
           genericFontFamily: font,
diff --git a/packages/lsd-react/src/components/Theme/createTheme.ts b/packages/lsd-react/src/components/Theme/createTheme.ts
index 815617c..418f921 100644
--- a/packages/lsd-react/src/components/Theme/createTheme.ts
+++ b/packages/lsd-react/src/components/Theme/createTheme.ts
@@ -1,4 +1,5 @@
 import { css } from '@emotion/react'
+import { createCounter } from '../../utils/counter.util'
 import { pairs } from '../../utils/object.utils'
 import { baseTheme } from './baseTheme'
 import { THEME_BREAKPOINTS, THEME_TYPOGRAPHY_VARIANTS } from './constants'
@@ -13,6 +14,9 @@ import type {
   VariantThemeProperties,
 } from './types'
 
+const counter = createCounter()
+const generateName = (prefix: string) => `${prefix}-${counter()}`
+
 const createTypographyStyles = (theme: CreateThemeProps, defaultTheme: Theme) =>
   pairs<TypographyVariants>(THEME_TYPOGRAPHY_VARIANTS, (variant) => ({
     ...defaultTheme.typography[variant],
@@ -130,7 +134,7 @@ export const createTheme = (
   from = baseTheme,
 ): Theme => {
   const theme: Theme = {
-    name: props.name ?? from.name,
+    name: props.name ?? generateName(from.name),
     typography: createTypographyStyles(props, from),
     typographyGlobal: createTypographyGlobalStyles(props, from),
     breakpoints: createBreakpointStyles(props, from),
diff --git a/packages/lsd-react/src/components/Theme/globalStyles.ts b/packages/lsd-react/src/components/Theme/globalStyles.ts
index a6f2ca5..72b97d9 100644
--- a/packages/lsd-react/src/components/Theme/globalStyles.ts
+++ b/packages/lsd-react/src/components/Theme/globalStyles.ts
@@ -117,7 +117,7 @@ export const createThemeGlobalStyles = (() => {
   const cache: any = {}
 
   return (theme: Theme): ReturnType<typeof generateThemeGlobalStyles> => {
-    const key = theme as any as string
+    const key = theme.name
 
     if (
       cache[key] &&