feat: prefixed ids for style div tags

gluestack · Sep 11, 2023 · ae71ef0 · ae71ef0
1 parent 825e681
commit ae71ef0
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/packages/react/src/utils/css-injector/utils/inject.web.ts b/packages/react/src/utils/css-injector/utils/inject.web.ts
@@ -75,10 +75,12 @@ if (typeof window !== 'undefined') {
   // Test on all the platforms
   if (Platform.OS === 'web') {
     order.forEach((orderKey) => {
-      let wrapperElement = document.getElementById(`gs-${orderKey}`);
+      let wrapperElement = document.getElementById(
+        `gluestack-style-injected-styles-${orderKey}`
+      );
       if (!wrapperElement) {
         wrapperElement = document.createElement('div');
-        wrapperElement.id = `gs-${orderKey}`;
+        wrapperElement.id = `gluestack-style-injected-styles-${orderKey}`;
         document.head.appendChild(wrapperElement);
       }
     });
@@ -110,7 +112,9 @@ export const injectCss = (
   }
 
   if (typeof window !== 'undefined') {
-    let wrapperElement = document.querySelector('#' + `gs-${wrapperType}`);
+    let wrapperElement = document.querySelector(
+      '#' + `gluestack-style-injected-styles-${wrapperType}`
+    );
     if (wrapperElement) {
       let style = wrapperElement.querySelector(`[id='${styleTagId}']`);
 
@@ -155,8 +159,8 @@ export const flush = () => {
       React.createElement(
         'div',
         {
-          id: `gs-${orderKey}`,
-          key: `gs-${orderKey}`,
+          id: `gluestack-style-injected-styles-${orderKey}`,
+          key: `gluestack-style-injected-styles-${orderKey}`,
         },
         styleChildren
       )