Fix/globalstyle refactor

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.3",
+  "version": "0.2.4-alpha.0",
   "keywords": [
     "React Native",
     "Next.js",

packages/react/src/resolver/injectComponentAndDescendantStyles.ts

@@ -12,9 +12,6 @@ export function injectComponentAndDescendantStyles(
   styleTagId?: string,
   type: 'boot' | 'inline' = 'boot'
 ) {
-  // const componentOrderResolved = getComponentResolved(orderedResolved);
-  // const descendantOrderResolved = getDescendantResolved(orderedResolved);
-
   const componentOrderResolvedBaseStyle =
     getComponentResolvedBaseStyle(orderedResolved);
   const componentOrderResolvedVariantStyle =
@@ -25,38 +22,36 @@ export function injectComponentAndDescendantStyles(
   const descendantOrderResolvedVariantStyle =
     getDescendantResolvedVariantStyle(orderedResolved);
 
-  GluestackStyleSheet.resolveByOrderResolved(
+  const componentOrderResolvedBaseStyleIds = GluestackStyleSheet.declare(
     componentOrderResolvedBaseStyle,
     type + '-base',
     styleTagId ? styleTagId : 'css-injected-boot-time',
-    {},
-    {},
     false
   );
-  GluestackStyleSheet.resolveByOrderResolved(
+  const descendantOrderResolvedBaseStyleIds = GluestackStyleSheet.declare(
     descendantOrderResolvedBaseStyle,
     type + '-descendant-base',
     styleTagId ? styleTagId : 'css-injected-boot-time-descendant',
-    {},
-    {},
-    false
+    {}
   );
-  GluestackStyleSheet.resolveByOrderResolved(
+  const componentOrderResolvedVariantStyleIds = GluestackStyleSheet.declare(
     componentOrderResolvedVariantStyle,
     type + '-variant',
     styleTagId ? styleTagId : 'css-injected-boot-time',
-    {},
-    {},
-    false
+    {}
   );
-  GluestackStyleSheet.resolveByOrderResolved(
+  const descendantOrderResolvedVariantStyleIds = GluestackStyleSheet.declare(
     descendantOrderResolvedVariantStyle,
     type + '-descendant-variant',
     styleTagId ? styleTagId : 'css-injected-boot-time-descendant',
-    {},
-    {},
-    false
+    {}
   );
 
-  // GluestackStyleSheet.injectInStyle();
+  const styleCSSIdsArr = [
+    ...componentOrderResolvedBaseStyleIds,
+    ...descendantOrderResolvedBaseStyleIds,
+    ...componentOrderResolvedVariantStyleIds,
+    ...descendantOrderResolvedVariantStyleIds,
+  ];
+  GluestackStyleSheet.resolve(styleCSSIdsArr, {}, {}, false);
 }

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

@@ -1,133 +1,92 @@
 import { injectInStyle } from '../injectInStyle';
 import { StyledValueToCSSObject } from '../resolver';
-import type { OrderedSXResolved, StyledValueResolvedWithMeta } from '../types';
+import type { OrderedSXResolved } from '../types';
 import { getCSSIdAndRuleset } from '../updateCSSStyleInOrderedResolved.web';
 import { deepMerge, resolveTokensFromConfig } from '../utils';
 import { inject } from '../utils/css-injector';
 export type DeclarationType = 'boot' | 'forwarded';
 export class StyleInjector {
-  #stylesMap: any;
   #globalStyleMap: any;
 
   constructor() {
-    this.#stylesMap = new Map();
     this.#globalStyleMap = new Map();
   }
 
   declare(
     orderedSXResolved: OrderedSXResolved,
     _wrapperElementId: string,
     _styleTagId: any = 'css-injected-boot-time',
-    extendedConfig?: any,
-    resolve: boolean = false
+    extendedConfig?: any
   ) {
-    let previousStyleMap: any = new Map();
-    let themeMap = new Map();
-
-    if (this.#globalStyleMap.get(_wrapperElementId)) {
-      previousStyleMap = this.#globalStyleMap.get(_wrapperElementId);
-    }
-
-    if (previousStyleMap) {
-      if (themeMap.get(_styleTagId))
-        themeMap = previousStyleMap.get(_styleTagId);
-    }
-
-    orderedSXResolved.forEach((styleResolved: StyledValueResolvedWithMeta) => {
-      const val = `${styleResolved.meta.cssId}`;
-
-      themeMap.set(val, { ...styleResolved, extendedConfig: extendedConfig });
-
-      if (resolve) {
-        this.#stylesMap.set(styleResolved.meta.cssId, {
-          meta: {
-            queryCondition: styleResolved?.meta?.queryCondition,
-          },
-          value: styleResolved?.resolved,
-        });
-      }
+    const styleIds: any = [];
+    orderedSXResolved.forEach((styledResolved: any) => {
+      this.#globalStyleMap.set(styledResolved.meta.cssId, {
+        ...styledResolved,
+        type: _wrapperElementId,
+        componentHash: _styleTagId,
+        extendedConfig,
+      });
+      styleIds.push(styledResolved.meta.cssId);
     });
 
-    if (themeMap.size > 0) previousStyleMap.set(_styleTagId, themeMap);
-
-    if (previousStyleMap.size > 0)
-      this.#globalStyleMap.set(_wrapperElementId, previousStyleMap);
-
-    // console.log('\n>>>>> declare >>>>>', this.#globalStyleMap);
-
-    // if (!shouldResolve) {
-    //   this.resolveTemp(CONFIG, shouldResolve);
-    // }
+    return styleIds;
   }
 
-  resolveByOrderResolved(
-    orderResolved: any,
-    _wrapperElementType: any,
-    _wrapperElementId: any,
-    ExtendedConfig: any,
+  resolve(
+    cssIds: any = [],
     CONFIG: any,
-    shouldResolve: any = true
+    ExtendedConfig: any,
+    resolve: any = true
   ) {
-    let toBeInjectedCssRules = '';
     let componentExtendedConfig = CONFIG;
 
-    if (shouldResolve && ExtendedConfig) {
+    if (ExtendedConfig) {
       componentExtendedConfig = deepMerge(CONFIG, ExtendedConfig);
     }
 
-    orderResolved.forEach((styledResolved: any) => {
-      if (shouldResolve) {
-        const theme = styledResolved?.original;
-        this.resolveComponentTheme(
-          styledResolved,
-          theme,
-          componentExtendedConfig,
-          _wrapperElementId,
-          CONFIG
-        );
-        delete styledResolved.original;
-      }
-      this.#stylesMap.set(styledResolved.meta.cssId, {
-        meta: {
-          queryCondition: styledResolved?.meta?.queryCondition,
-        },
-        value: styledResolved?.resolved,
-      });
-      this.updateMap(_wrapperElementType, _wrapperElementId, styledResolved);
-      toBeInjectedCssRules += styledResolved.meta.cssRuleset;
-    });
+    const toBeInjected: any = {};
 
-    this.injectStyles(
-      toBeInjectedCssRules,
-      _wrapperElementType,
-      _wrapperElementId
-    );
-  }
-
-  updateMap(
-    _wrapperElementType: any,
-    _wrapperElementId: any,
-    styleResolved: any
-  ) {
-    let previousStyleMap: any = new Map();
-    let themeMap = new Map();
-
-    if (this.#globalStyleMap.get(_wrapperElementType)) {
-      previousStyleMap = this.#globalStyleMap.get(_wrapperElementType);
-    }
+    cssIds.forEach((cssId: string) => {
+      if (this.#globalStyleMap.get(cssId)) {
+        const styledResolved = this.#globalStyleMap.get(cssId);
 
-    if (previousStyleMap) {
-      if (themeMap.get(_wrapperElementId))
-        themeMap = previousStyleMap.get(_wrapperElementId);
-    }
+        const theme = styledResolved?.original;
 
-    themeMap.delete(styleResolved.meta.cssId);
-    themeMap.set(styleResolved.meta.cssId, styleResolved);
+        if (resolve) {
+          this.resolveComponentTheme(
+            styledResolved,
+            theme,
+            componentExtendedConfig,
+            styledResolved.componentHash,
+            CONFIG
+          );
+        }
 
-    if (themeMap.size > 0) previousStyleMap.set(_wrapperElementId, themeMap);
+        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
+        // );
+
+        this.#globalStyleMap.set(styledResolved.meta.cssId, {
+          ...styledResolved,
+          value: styledResolved?.resolved,
+        });
+      }
+    });
 
-    if (previousStyleMap.size > 0)
-      this.#globalStyleMap.set(_wrapperElementType, previousStyleMap);
+    Object.keys(toBeInjected).forEach((type) => {
+      Object.keys(toBeInjected[type]).forEach((styleTag) => {
+        this.injectStyles(toBeInjected[type][styleTag], type, styleTag);
+      });
+    });
   }
 
   resolveComponentTheme(
@@ -157,54 +116,8 @@ export class StyleInjector {
     componentTheme.meta.cssRuleset = cssData.rules.style;
   }
 
-  resolve(CONFIG: any) {
-    if (this.#globalStyleMap) {
-      this.#globalStyleMap.forEach(
-        (componentThemeHash: any, _wrapperElementType: any) => {
-          componentThemeHash.forEach(
-            (componentThemes: any, componentHashKey: any) => {
-              componentThemes.forEach((componentTheme: any) => {
-                const theme = componentTheme?.original;
-                const ExtendedConfig = componentTheme?.extendedConfig;
-
-                let componentExtendedConfig = CONFIG;
-
-                if (ExtendedConfig) {
-                  componentExtendedConfig = deepMerge(CONFIG, ExtendedConfig);
-                }
-
-                this.resolveComponentTheme(
-                  componentTheme,
-                  theme,
-                  componentExtendedConfig,
-                  componentHashKey,
-                  CONFIG
-                );
-
-                this.#stylesMap.set(componentTheme.meta.cssId, {
-                  meta: {
-                    queryCondition: componentTheme?.meta?.queryCondition,
-                  },
-                  value: componentTheme?.resolved,
-                });
-
-                // toBeInjectedCssRules += componentTheme.meta.cssRuleset;
-              });
-
-              // this.inject(
-              //   toBeInjectedCssRules,
-              //   _wrapperElementType,
-              //   componentHashKey
-              // );
-            }
-          );
-        }
-      );
-    }
-  }
-
   getStyleMap() {
-    return this.#stylesMap;
+    return this.#globalStyleMap;
   }
 
   injectStyles(cssRuleset: any, _wrapperType: any, _styleTagId: any) {