Merge pull request #1606 from gluestack/fix/inline-theme-performance

Fix/inline theme performance
gluestack · Jan 11, 2024 · c0e5a85 · c0e5a85
2 parents ebde6ab + 607260c
commit c0e5a85
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 25 deletions.
diff --git a/packages/styled/react/src/StyledProvider.tsx b/packages/styled/react/src/StyledProvider.tsx
@@ -5,6 +5,7 @@ import { propertyTokenMap } from './propertyTokenMap';
 import type { COLORMODES } from './types';
 import {
   convertTokensToCssVariables,
+  generateMergedThemeTokens,
   platformSpecificSpaceUnits,
 } from './utils';
 import { createGlobalStylesWeb } from './createGlobalStylesWeb';
@@ -45,6 +46,7 @@ const setCurrentColorMode = (inputColorMode: string | undefined) => {
   //   colorModeSet = true;
   // }
 };
+
 export const StyledProvider: React.FC<{
   config: Config;
   colorMode?: COLORMODES;
@@ -98,6 +100,10 @@ export const StyledProvider: React.FC<{
       );
     }
 
+    configWithPlatformSpecificUnits = generateMergedThemeTokens(
+      configWithPlatformSpecificUnits
+    );
+
     return configWithPlatformSpecificUnits;
   }, [config]);
 

diff --git a/packages/styled/react/src/resolver/StyledValueToCSSObject.ts b/packages/styled/react/src/resolver/StyledValueToCSSObject.ts
@@ -1,6 +1,5 @@
 import type { CSSObject, StyledValue } from '../types';
-import { deepMerge, resolvedTokenization } from '../utils';
-import { deepClone } from '../utils/cssify/utils/common';
+import { resolvedTokenization } from '../utils';
 
 export function StyledValueToCSSObject(
   input: StyledValue | undefined,
@@ -11,6 +10,7 @@ export function StyledValueToCSSObject(
   if (!input) {
     return {};
   }
+
   return resolvedTokenization(input, CONFIG, ignoreKeys, deleteIfTokenNotExist);
 }
 export function themeStyledValueToCSSObject(
@@ -20,34 +20,36 @@ export function themeStyledValueToCSSObject(
 ) {
   let themeResolved1: any = {};
   if (CONFIG?.themes) {
-    const tokens = deepClone(CONFIG.tokens);
-    Object.keys(CONFIG?.themes).forEach((key: any) => {
-      const themeTokens = CONFIG?.themes[key];
-      Object.keys(themeTokens).forEach((tokenKey1: any) => {
-        Object.keys(themeTokens[tokenKey1]).forEach((tokenKey: any) => {
-          delete tokens[tokenKey1][tokenKey];
-        });
-      });
-    });
+    // const tokens = deepClone(CONFIG.tokens);
+    // Object.keys(CONFIG?.themes).forEach((key: any) => {
+    //   const themeTokens = CONFIG?.themes[key];
+    //   Object.keys(themeTokens).forEach((tokenKey1: any) => {
+    //     Object.keys(themeTokens[tokenKey1]).forEach((tokenKey: any) => {
+    //       delete tokens[tokenKey1][tokenKey];
+    //     });
+    //   });
+    // });
 
     // debugger;
 
-    Object.keys(CONFIG?.themes).forEach((key: any) => {
-      const themeResolved = StyledValueToCSSObject(
-        input,
-        {
-          ...CONFIG,
-          tokens: deepMerge(deepClone(tokens), CONFIG.themes[key]),
-        },
-        ignoreKeys,
-        true
-      );
+    Object.keys(CONFIG?.themes).forEach((themeName: any) => {
+      if (themeName !== 'tokens') {
+        const themeResolved = StyledValueToCSSObject(
+          input,
+          {
+            ...CONFIG,
+            tokens: CONFIG?.themes?.tokens[themeName],
+          },
+          ignoreKeys,
+          true
+        );
 
-      Object.keys(themeResolved).forEach((key) =>
-        themeResolved[key] === undefined ? delete themeResolved[key] : {}
-      );
+        Object.keys(themeResolved).forEach((key: any) =>
+          themeResolved[key] === undefined ? delete themeResolved[key] : {}
+        );
 
-      themeResolved1[key] = themeResolved;
+        themeResolved1[themeName] = themeResolved;
+      }
     });
   }
 

diff --git a/packages/styled/react/src/utils.ts b/packages/styled/react/src/utils.ts
@@ -1,7 +1,30 @@
 import type { Config } from './types';
+import { deepClone } from './utils/cssify/utils/common';
 
 const propsNotToConvertToCSSVariables = ['shadowColor', 'textShadowColor'];
 
+export function generateMergedThemeTokens(CONFIG: any) {
+  const mergedTokens: any = CONFIG;
+  const tokens = deepClone(CONFIG.tokens);
+  const themeTokens: any = {};
+
+  if (CONFIG?.themes) {
+    Object.keys(CONFIG.themes).forEach((key) => {
+      // tokens is a reserved key to merge theme tokens
+      if (key !== 'tokens') {
+        themeTokens[key] = deepMerge(tokens, CONFIG.themes[key]);
+      }
+    });
+
+    if (themeTokens) {
+      mergedTokens.themes.tokens = {};
+      Object.assign(mergedTokens.themes.tokens, themeTokens);
+    }
+  }
+
+  return mergedTokens;
+}
+
 export function convertToUnicodeString(inputString: any) {
   let result = '';
   if (!inputString) {