Merge pull request #324 from gluestack/release/@gluestack-style/react…

…@0.2.3

Release/@gluestack style/[email protected]

packages/react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @gluestack-style/react
 
+## 0.2.3
+
+### Patch Changes
+
+- Reduced DOM size for injected style tags [PR](https://github.com/gluestack/gluestack-style/pull/323)
+
 ## 0.2.1
 
 ### 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": "0.2.1",
+  "version": "0.2.3",
   "keywords": [
     "React Native",
     "Next.js",

packages/react/src/StyledProvider.tsx

@@ -6,10 +6,8 @@ import type { COLORMODES } from './types';
 import { platformSpecificSpaceUnits } from './utils';
 import { createGlobalStylesWeb } from './createGlobalStylesWeb';
 import { createGlobalStyles } from './createGlobalStyles';
-import { GluestackStyleSheet } from './style-sheet';
 type Config = any;
 let colorModeSet = false;
-let styleInjected = false;
 
 export const defaultConfig: { config: Config; colorMode: COLORMODES } = {
   config: {},
@@ -50,23 +48,6 @@ export const StyledProvider: React.FC<{
     globalStyleInjector({ ...currentConfig, propertyTokenMap });
   }
 
-  if (!styleInjected) {
-    // setTimeout(() => {
-    GluestackStyleSheet.resolve({ ...config, propertyTokenMap });
-    GluestackStyleSheet.injectInStyle();
-    styleInjected = true;
-    // }, 1000);
-  }
-  const [styleInjectedOnMount, setState] = React.useState(false);
-
-  React.useEffect(() => {
-    if (!styleInjectedOnMount) {
-      GluestackStyleSheet.resolve({ ...config, propertyTokenMap });
-      GluestackStyleSheet.injectInStyle();
-      setState(true);
-    }
-  }, []);
-
   const currentColorMode = React.useMemo(() => {
     return colorMode ?? get() ?? 'light';
   }, [colorMode]);

packages/react/src/resolver/injectComponentAndDescendantStyles.ts

@@ -25,34 +25,38 @@ export function injectComponentAndDescendantStyles(
   const descendantOrderResolvedVariantStyle =
     getDescendantResolvedVariantStyle(orderedResolved);
 
-  GluestackStyleSheet.declare(
+  GluestackStyleSheet.resolveByOrderResolved(
     componentOrderResolvedBaseStyle,
     type + '-base',
     styleTagId ? styleTagId : 'css-injected-boot-time',
     {},
-    true
+    {},
+    false
   );
-  GluestackStyleSheet.declare(
+  GluestackStyleSheet.resolveByOrderResolved(
     descendantOrderResolvedBaseStyle,
     type + '-descendant-base',
     styleTagId ? styleTagId : 'css-injected-boot-time-descendant',
     {},
-    true
+    {},
+    false
   );
-  GluestackStyleSheet.declare(
+  GluestackStyleSheet.resolveByOrderResolved(
     componentOrderResolvedVariantStyle,
     type + '-variant',
     styleTagId ? styleTagId : 'css-injected-boot-time',
     {},
-    true
+    {},
+    false
   );
-  GluestackStyleSheet.declare(
+  GluestackStyleSheet.resolveByOrderResolved(
     descendantOrderResolvedVariantStyle,
     type + '-descendant-variant',
     styleTagId ? styleTagId : 'css-injected-boot-time-descendant',
     {},
-    true
+    {},
+    false
   );
 
-  GluestackStyleSheet.injectInStyle();
+  // GluestackStyleSheet.injectInStyle();
 }

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

@@ -60,15 +60,109 @@ export class StyleInjector {
     // }
   }
 
-  resolve(CONFIG: any) {
-    // console.log('\n>>>>> resolve >>>>>', this.#globalStyleMap);
+  resolveByOrderResolved(
+    orderResolved: any,
+    _wrapperElementType: any,
+    _wrapperElementId: any,
+    ExtendedConfig: any,
+    CONFIG: any,
+    shouldResolve: any = true
+  ) {
+    let toBeInjectedCssRules = '';
+    let componentExtendedConfig = CONFIG;
+
+    if (shouldResolve && 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;
+    });
+
+    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);
+    }
+
+    if (previousStyleMap) {
+      if (themeMap.get(_wrapperElementId))
+        themeMap = previousStyleMap.get(_wrapperElementId);
+    }
+
+    themeMap.delete(styleResolved.meta.cssId);
+    themeMap.set(styleResolved.meta.cssId, styleResolved);
+
+    if (themeMap.size > 0) previousStyleMap.set(_wrapperElementId, themeMap);
+
+    if (previousStyleMap.size > 0)
+      this.#globalStyleMap.set(_wrapperElementType, previousStyleMap);
+  }
+
+  resolveComponentTheme(
+    componentTheme: any,
+    theme: any,
+    componentExtendedConfig: any,
+    componentHashKey: any,
+    CONFIG: any
+  ) {
+    componentTheme.resolved = StyledValueToCSSObject(
+      theme,
+      componentExtendedConfig
+    );
+
+    delete componentTheme.meta.cssRuleset;
+
+    if (componentTheme.meta && componentTheme.meta.queryCondition) {
+      const queryCondition = resolveTokensFromConfig(CONFIG, {
+        condition: componentTheme.meta.queryCondition,
+      })?.condition;
+
+      componentTheme.meta.queryCondition = queryCondition;
+    }
+
+    const cssData: any = getCSSIdAndRuleset(componentTheme, componentHashKey);
+
+    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) => {
-              // let toBeInjectedCssRules = '';
               componentThemes.forEach((componentTheme: any) => {
                 const theme = componentTheme?.original;
                 const ExtendedConfig = componentTheme?.extendedConfig;
@@ -79,28 +173,14 @@ export class StyleInjector {
                   componentExtendedConfig = deepMerge(CONFIG, ExtendedConfig);
                 }
 
-                componentTheme.resolved = StyledValueToCSSObject(
-                  theme,
-                  componentExtendedConfig
-                );
-
-                delete componentTheme.meta.cssRuleset;
-
-                if (componentTheme?.meta?.queryCondition) {
-                  const queryCondition = resolveTokensFromConfig(CONFIG, {
-                    condition: componentTheme?.meta?.queryCondition,
-                  }).condition;
-
-                  componentTheme.meta.queryCondition = queryCondition;
-                }
-
-                const cssData: any = getCSSIdAndRuleset(
+                this.resolveComponentTheme(
                   componentTheme,
-                  componentHashKey
+                  theme,
+                  componentExtendedConfig,
+                  componentHashKey,
+                  CONFIG
                 );
 
-                componentTheme.meta.cssRuleset = cssData.rules.style;
-
                 this.#stylesMap.set(componentTheme.meta.cssId, {
                   meta: {
                     queryCondition: componentTheme?.meta?.queryCondition,
@@ -127,7 +207,7 @@ export class StyleInjector {
     return this.#stylesMap;
   }
 
-  inject(cssRuleset: any, _wrapperType: any, _styleTagId: any) {
+  injectStyles(cssRuleset: any, _wrapperType: any, _styleTagId: any) {
     if (cssRuleset) {
       inject(`@media screen {${cssRuleset}}`, _wrapperType as any, _styleTagId);
     }

packages/react/src/styled.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable no-console */
 import React, {
@@ -813,7 +814,13 @@ function updateOrderUnResolvedMap(
     ExtendedConfig
   );
 
-  return orderedUnResolvedTheme;
+  return {
+    orderedUnResolvedTheme,
+    componentOrderResolvedBaseStyle,
+    componentOrderResolvedVariantStyle,
+    descendantOrderResolvedBaseStyle,
+    descendantOrderResolvedVariantStyle,
+  };
 }
 
 const getStyleIdsFromMap = (
@@ -935,6 +942,10 @@ export function verboseStyled<P, Variants>(
     component: StyleIds;
     descendant: StyleIds;
   };
+  let componentOrderResolvedBaseStyle: any = {};
+  let componentOrderResolvedVariantStyle: any = {};
+  let descendantOrderResolvedBaseStyle: any = {};
+  let descendantOrderResolvedVariantStyle: any = {};
   // const orderedUnResolvedTheme = updateOrderUnResolvedMap(
   //   theme,
   //   componentHash,
@@ -956,14 +967,25 @@ export function verboseStyled<P, Variants>(
       );
     }
   } else {
-    const orderedUnResolvedTheme = updateOrderUnResolvedMap(
+    const {
+      orderedUnResolvedTheme: a,
+      componentOrderResolvedBaseStyle: b,
+      componentOrderResolvedVariantStyle: c,
+      descendantOrderResolvedBaseStyle: d,
+      descendantOrderResolvedVariantStyle: f,
+    } = updateOrderUnResolvedMap(
       theme,
       componentHash,
       declarationType,
       ExtendedConfig
     );
 
-    styleIds = getStyleIds(orderedUnResolvedTheme, componentStyleConfig);
+    componentOrderResolvedBaseStyle = b;
+    componentOrderResolvedVariantStyle = c;
+    descendantOrderResolvedBaseStyle = d;
+    descendantOrderResolvedVariantStyle = f;
+
+    styleIds = getStyleIds(a, componentStyleConfig);
   }
 
   if (BUILD_TIME_PARAMS?.styleIds) {
@@ -1068,8 +1090,37 @@ export function verboseStyled<P, Variants>(
         propertyTokenMap,
       };
 
-      GluestackStyleSheet.resolve(CONFIG);
-      GluestackStyleSheet.injectInStyle();
+      // GluestackStyleSheet.resolve(CONFIG);
+      // GluestackStyleSheet.injectInStyle();
+
+      GluestackStyleSheet.resolveByOrderResolved(
+        componentOrderResolvedBaseStyle,
+        'boot-base',
+        componentHash,
+        componentExtendedConfig,
+        CONFIG
+      );
+      GluestackStyleSheet.resolveByOrderResolved(
+        componentOrderResolvedVariantStyle,
+        'boot-variant',
+        componentHash,
+        componentExtendedConfig,
+        CONFIG
+      );
+      GluestackStyleSheet.resolveByOrderResolved(
+        descendantOrderResolvedBaseStyle,
+        'boot-descendant-base',
+        componentHash,
+        componentExtendedConfig,
+        CONFIG
+      );
+      GluestackStyleSheet.resolveByOrderResolved(
+        descendantOrderResolvedVariantStyle,
+        'boot-descendant-variant',
+        componentHash,
+        componentExtendedConfig,
+        CONFIG
+      );
       Object.assign(styledSystemProps, CONFIG?.aliases);
 
       //@ts-ignore
@@ -1376,8 +1427,8 @@ export function verboseStyled<P, Variants>(
       mergedSXVariantStyleCSSIds = e;
       mergedSxStateProps = f;
       mergedSxDescendantsStyle = g;
-      setComponentStatePassingProps(stateProps);
-      setSxStatePassingProps(mergedSxStateProps);
+      // setComponentStatePassingProps(stateProps);
+      // setSxStatePassingProps(mergedSxStateProps);
 
       mergedDescendantsStyle = h;
     }