Fix global style id conflict.

packages/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-style/react",
   "description": "A universal & performant styling library for React Native, Next.js & React",
-  "version": "0.2.38",
+  "version": "0.2.39-alpha.3",
   "keywords": [
     "React Native",
     "Next.js",

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(orderKey);
+      let wrapperElement = document.getElementById(
+        `gluestack-style-injected-styles-${orderKey}`
+      );
       if (!wrapperElement) {
         wrapperElement = document.createElement('div');
-        wrapperElement.id = orderKey;
+        wrapperElement.id = `gluestack-style-injected-styles-${orderKey}`;
         document.head.appendChild(wrapperElement);
       }
     });
@@ -100,7 +102,6 @@ export const injectCss = (
   styleTagId: string
 ) => {
   // let modifiedStylesheet = {} as any;
-
   if (!toBeFlushedStyles[wrapperType]) {
     toBeFlushedStyles[wrapperType] = {};
   }
@@ -111,8 +112,9 @@ export const injectCss = (
   }
 
   if (typeof window !== 'undefined') {
-    let wrapperElement = document.querySelector('#' + wrapperType);
-
+    let wrapperElement = document.querySelector(
+      '#' + `gluestack-style-injected-styles-${wrapperType}`
+    );
     if (wrapperElement) {
       let style = wrapperElement.querySelector(`[id='${styleTagId}']`);
 
@@ -157,8 +159,8 @@ export const flush = () => {
       React.createElement(
         'div',
         {
-          id: orderKey,
-          key: orderKey,
+          id: `gluestack-style-injected-styles-${orderKey}`,
+          key: `gluestack-style-injected-styles-${orderKey}`,
         },
         styleChildren
       )

yarn.lock

@@ -2505,14 +2505,6 @@
     inline-style-prefixer "^6.0.1"
     normalize-css-color "^1.0.2"
 
-"@gluestack-style/react@^0.2.11-alpha.0", "@gluestack-style/react@^0.2.16", "@gluestack-style/react@^0.2.21":
-  version "0.2.27"
-  resolved "https://registry.yarnpkg.com/@gluestack-style/react/-/react-0.2.27.tgz#9973e14070d4a0ce12ae1c6ac6aa880d71b0c7d4"
-  integrity sha512-GZUC64Pi/raIjji9cXxkqzBcAkPbxxnme//cBV77g/VzpI4eNU+15jFvJMN1fYXEEPu7vSqB2DawtMgzgGa9qQ==
-  dependencies:
-    inline-style-prefixer "^6.0.1"
-    normalize-css-color "^1.0.2"
-
 "@gluestack-ui/actionsheet@^0.2.16", "@gluestack-ui/actionsheet@^0.2.7", "@gluestack-ui/actionsheet@latest":
   version "0.2.16"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/actionsheet/-/actionsheet-0.2.16.tgz#052a733966c517450a3cd6f832932ccf77924867"