From 9e07c61edb7bdd042d9529a92cfd2ce371aa9f53 Mon Sep 17 00:00:00 2001
From: Viraj Ajay Joshi <virajajayjoshi@Virajs-MacBook-Pro.local>
Date: Tue, 4 Jun 2024 17:06:34 +0530
Subject: [PATCH] fix: multiple style injection

---
 .../nativewind/gluestack-ui-provider/index.web.tsx  | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx b/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx
index 086a7295fc..ab39b596e9 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx
@@ -5,6 +5,14 @@ import { OverlayProvider } from '@gluestack-ui/overlay';
 import { ToastProvider } from '@gluestack-ui/toast';
 import { setFlushStyles } from '@gluestack-ui/nativewind-utils/flush';
 
+const styleTagId = 'gluestack-ui-nativewind';
+const createStyle = (styleTagId: any) => {
+  let style = document.createElement('style');
+  style.id = styleTagId;
+  style.appendChild(document.createTextNode(''));
+  return style;
+};
+
 export function GluestackUIProvider({
   mode = 'light',
   ...props
@@ -22,7 +30,10 @@ export function GluestackUIProvider({
     const element = document.documentElement;
     if (element) {
       const head = element.querySelector('head');
-      const style = document.createElement('style');
+      let style = head?.querySelector(`[id='${styleTagId}']`);
+      if (!style) {
+        style = createStyle(styleTagId);
+      }
       style.innerHTML = `:root {${stringcssvars}} `;
       if (head) head.appendChild(style);
     }