Release/@gluestack style/[email protected]

packages/react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @gluestack-style/react
 
+## 1.0.18
+
+### Patch Changes
+
+- Fixed style injection order incase of composed styled component [PR](https://github.com/gluestack/gluestack-style/pull/544)
+
 ## 1.0.17
 
 ### Patch Changes

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": "1.0.17",
+  "version": "1.0.18",
   "keywords": [
     "React Native",
     "Next.js",

packages/react/src/StyledProvider.tsx

@@ -88,9 +88,6 @@ export const StyledProvider: React.FC<{
       documentElement.classList.add(`gs-${currentColorMode}`);
     }
 
-    // GluestackStyleSheet.resolve({ ...config, propertyTokenMap });
-    // GluestackStyleSheet.injectInStyle();
-
     onChange((currentColor: string) => {
       // only for web
       if (Platform.OS === 'web' && !_experimentalNestedProvider) {
@@ -124,6 +121,7 @@ export const StyledProvider: React.FC<{
       Object.keys(inlineStyleMap.current).forEach((key: any) => {
         if (key !== 'initialStyleInjected') {
           const styles = inlineStyleMap.current[key];
+
           if (!toBeInjectedStyles[key]) {
             toBeInjectedStyles[key] = document.createDocumentFragment();
           }
@@ -135,13 +133,15 @@ export const StyledProvider: React.FC<{
           });
         }
       });
+
       Object.keys(toBeInjectedStyles).forEach((key) => {
         let wrapperElement = document.querySelector('#' + key);
         if (wrapperElement) {
           wrapperElement.appendChild(toBeInjectedStyles[key]);
         }
         // delete inlineStyleMap.current[key];
       });
+
       inlineStyleMap.current.initialStyleInjected = true;
     }
   });

packages/react/src/style-sheet/index.ts

@@ -10,9 +10,13 @@ import { inject } from '../utils/css-injector';
 export type DeclarationType = 'boot' | 'forwarded';
 export class StyleInjector {
   #globalStyleMap: any;
+  #toBeInjectedIdsArray: Array<string>;
+  #idCounter: number;
 
   constructor() {
     this.#globalStyleMap = new Map();
+    this.#toBeInjectedIdsArray = [];
+    this.#idCounter = 0;
   }
 
   declare(
@@ -28,8 +32,10 @@ export class StyleInjector {
           ...styledResolved,
           type: _wrapperElementId,
           componentHash: _styleTagId,
+          id: this.#idCounter,
           extendedConfig,
         });
+        this.#idCounter++;
         styleIds.push(styledResolved.meta.cssId);
       }
     });
@@ -68,18 +74,28 @@ export class StyleInjector {
           );
         }
 
-        if (!toBeInjected[styledResolved.type])
-          toBeInjected[styledResolved.type] = {};
-        if (!toBeInjected[styledResolved.type][styledResolved.componentHash])
-          toBeInjected[styledResolved.type][styledResolved.componentHash] = '';
-        toBeInjected[styledResolved.type][styledResolved.componentHash] +=
-          styledResolved.meta.cssRuleset;
-
-        // this.injectStyles(
-        //   styledResolved.meta.cssRuleset,
-        //   styledResolved?.type,
-        //   styledResolved?.componentHash
-        // );
+        const type = styledResolved?.type;
+        const styleTag = styledResolved?.componentHash;
+        const cssRuleset = styledResolved?.meta?.cssRuleset;
+
+        if (!toBeInjected[type]) {
+          toBeInjected[type] = new Map();
+        }
+
+        const cummialtiveCssRuleset = toBeInjected[type].get(styleTag);
+
+        if (!cummialtiveCssRuleset) {
+          toBeInjected[type].set(styleTag, {
+            id: styledResolved.id,
+            cssRuleset: cssRuleset ?? '',
+          });
+        } else {
+          toBeInjected[type].set(styleTag, {
+            id: cummialtiveCssRuleset?.id,
+            cssRuleset: cummialtiveCssRuleset?.cssRuleset + cssRuleset,
+          });
+        }
+
         if (styledResolved) {
           this.#globalStyleMap.set(styledResolved.meta.cssId, {
             ...styledResolved,
@@ -98,26 +114,38 @@ export class StyleInjector {
     orderResolvedStyleMap.forEach((styledResolved: any) => {
       this.#globalStyleMap.set(styledResolved.meta.cssId, styledResolved);
 
-      if (!toBeInjected[styledResolved.type])
-        toBeInjected[styledResolved.type] = {};
-      if (!toBeInjected[styledResolved.type][styledResolved.componentHash])
-        toBeInjected[styledResolved.type][styledResolved.componentHash] = '';
-      toBeInjected[styledResolved.type][styledResolved.componentHash] +=
-        styledResolved.meta.cssRuleset;
+      this.#toBeInjectedIdsArray.push(styledResolved.meta.cssId);
+
+      const type = styledResolved?.type;
+      const styleTag = styledResolved?.componentHash;
+      const cssRuleset = styledResolved?.meta?.cssRuleset;
+
+      if (!toBeInjected[type]) {
+        toBeInjected[type] = new Map();
+      }
+
+      const cummialtiveCssRuleset = toBeInjected[type].get(styleTag);
+
+      if (!cummialtiveCssRuleset) {
+        toBeInjected[type].set(styleTag, {
+          id: styledResolved.id,
+          cssRuleset: cssRuleset ?? '',
+        });
+      } else {
+        toBeInjected[type].set(styleTag, {
+          id: cummialtiveCssRuleset?.id,
+          cssRuleset: cummialtiveCssRuleset?.cssRuleset + cssRuleset,
+        });
+      }
     });
 
     return toBeInjected;
   }
 
   inject(toBeInjected: any = {}, inlineStyleMap: any) {
     Object.keys(toBeInjected).forEach((type) => {
-      Object.keys(toBeInjected[type]).forEach((styleTag) => {
-        this.injectStyles(
-          toBeInjected[type][styleTag],
-          type,
-          styleTag,
-          inlineStyleMap
-        );
+      toBeInjected[type].forEach(({ id, cssRuleset }: any, styleTag: any) => {
+        this.injectStyles(cssRuleset, type, styleTag, inlineStyleMap, id);
       });
     });
   }
@@ -171,14 +199,16 @@ export class StyleInjector {
     cssRuleset: any,
     _wrapperType: any,
     _styleTagId: any,
-    inlineStyleMap: any
+    inlineStyleMap: any,
+    id: any
   ) {
     if (cssRuleset) {
       inject(
         `@media screen {${cssRuleset}}`,
         _wrapperType as any,
         _styleTagId,
-        inlineStyleMap
+        inlineStyleMap,
+        id
       );
     }
   }

packages/react/src/styled.tsx

@@ -1070,6 +1070,8 @@ export function verboseStyled<P, Variants, ComCon>(
 
       // middleware logic
 
+      let componentExtendedTheme = {};
+
       // Injecting style
       if (EXTENDED_THEME) {
         // RUN Middlewares
@@ -1081,11 +1083,10 @@ export function verboseStyled<P, Variants, ComCon>(
           EXTENDED_THEME
         );
 
+        componentExtendedTheme = resolvedComponentExtendedTheme.theme;
+
         // const resolvedComponentExtendedTheme = EXTENDED_THEME;
 
-        theme = deepMerge(theme, resolvedComponentExtendedTheme.theme);
-        // @ts-ignore
-        Object.assign(themeDefaultProps, theme?.baseStyle?.props);
         if (Object.keys(EXTENDED_THEME?.BUILD_TIME_PARAMS ?? {}).length > 0) {
           const EXTENDED_THEME_BUILD_TIME_PARAMS =
             EXTENDED_THEME?.BUILD_TIME_PARAMS;
@@ -1181,6 +1182,10 @@ export function verboseStyled<P, Variants, ComCon>(
         }
       }
 
+      theme = deepMerge(theme, componentExtendedTheme);
+      // @ts-ignore
+      Object.assign(themeDefaultProps, theme?.baseStyle?.props);
+
       Object.assign(styledSystemProps, CONFIG?.aliases);
 
       const {

packages/react/src/utils/css-injector/utils/inject.ts

@@ -10,11 +10,13 @@ export const WRAPPER_BLOCK_PREFIX = 'gs-injected';
 export const hasCss = (_id: any, _text: any) => {};
 
 export const addCss = (_id: any, _text: any) => {};
+
 export const injectCss = (
   _css: any,
   _wrapperType: IWrapperType,
   _styleTagId: string,
-  _inlineStyleMap?: any
+  _inlineStyleMap?: any,
+  _id?: any
 ) => {};
 export const injectGlobalCss = (
   _css: any,

packages/react/src/utils/css-injector/utils/inject.web.ts

@@ -118,9 +118,9 @@ export const injectCss = (
   css: any,
   wrapperType: IWrapperType,
   styleTagId: string,
-  inlineStyleMap?: any
+  inlineStyleMap?: any,
+  id?: any
 ) => {
-  // let modifiedStylesheet = {} as any;
   if (!toBeFlushedStyles[wrapperType]) {
     toBeFlushedStyles[wrapperType] = {};
   }
@@ -146,9 +146,10 @@ export const injectCss = (
             const inlineMapStyles = inlineStyleMap[styleMapId];
 
             if (inlineMapStyles) {
-              inlineMapStyles.push(style);
+              inlineMapStyles[id] = style;
             } else {
-              inlineStyleMap[styleMapId] = [style];
+              inlineStyleMap[styleMapId] = [];
+              inlineStyleMap[styleMapId][id] = style;
             }
             // console.log('hello here >>>> there');
           } else {