fix: theme resolution build time

gluestack · Dec 4, 2023 · 874d323 · 874d323
1 parent a17c4fb
commit 874d323
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 90 deletions.
diff --git a/packages/babel-plugin-styled-resolver/src/index.js b/packages/babel-plugin-styled-resolver/src/index.js
@@ -7,6 +7,11 @@ const traverse = require('@babel/traverse').default;
 const types = require('@babel/types');
 const { getConfig: buildAndGetConfig } = require('./buildConfig');
 
+let CONFIG;
+const isConfigExist = fs.existsSync(
+  `${process.cwd()}/.gluestack/config-${process.ppid}.js`
+);
+
 const {
   convertStyledToStyledVerbosed,
   convertSxToSxVerbosed,
@@ -39,6 +44,8 @@ const IMPORT_NAME = '@gluestack-style/react';
 let configThemePath = [];
 const BUILD_TIME_GLUESTACK_STYLESHEET = new StyleInjector();
 
+let ConfigDefault = CONFIG;
+
 const convertExpressionContainerToStaticObject = (
   properties,
   result = {},
@@ -551,28 +558,13 @@ function isImportFromAbsolutePath(
   return false;
 }
 
-let CONFIG;
-const isConfigExist = fs.existsSync(
-  `${process.cwd()}/.gluestack/config-${process.ppid}.js`
-);
-
-let ConfigDefault = CONFIG;
-
-if (!isConfigExist) {
-  buildAndGetConfig()
-    .then((res) => {
-      CONFIG = res;
-      ConfigDefault = res;
-    })
-    .catch((err) => {
-      // eslint-disable-next-line no-console
-      console.log(err);
-    });
-}
-
-module.exports = function (b) {
+module.exports = async function (b) {
   const { types: t } = b;
 
+  if (!isConfigExist) {
+    ConfigDefault = await buildAndGetConfig();
+  }
+
   function checkWebFileExists(filePath) {
     if (filePath.includes('node_modules')) {
       return false;
@@ -608,22 +600,6 @@ module.exports = function (b) {
 
   return {
     name: 'gluestack-babel-styled-resolver', // not required
-    // async pre(state) {
-    //   let plugin;
-
-    //   state.opts.plugins?.forEach((currentPlugin) => {
-    //     if (currentPlugin.key === 'gluestack-babel-styled-resolver') {
-    //       plugin = currentPlugin;
-    //     }
-    //   });
-
-    //   const configPath = plugin?.options?.configPath;
-
-    //   if (!isConfigExist) {
-    //     const res = await buildAndGetConfig(configPath);
-    //     ConfigDefault = res;
-    //   }
-    // },
     visitor: {
       ImportDeclaration(importPath, state) {
         currentFileName = state.file.opts.filename;
@@ -643,6 +619,8 @@ module.exports = function (b) {
           platform = 'all';
         }
 
+        // console.log('\n\nCONFIG >>>>>>', ConfigDefault, '\n\nCONFIG >>>>>>');
+
         // `${process.cwd()}/.gluestack/config-${process.ppid}.js`
 
         // if (
@@ -899,41 +877,44 @@ module.exports = function (b) {
           */
             const extendedThemeComponents =
               callExpressionPath.node.arguments[0].properties;
-            extendedThemeComponents.forEach((property) => {
-              if (
-                !t.isIdentifier(property.value) &&
-                !t.isTemplateLiteral(property.value) &&
-                !t.isConditionalExpression(property.value)
-              ) {
-                const { themeNode, componentConfigNode } =
-                  findThemeAndComponentConfig(property.value.properties);
-
-                let theme = themeNode
-                  ? getObjectFromAstNode(themeNode?.value)
-                  : {};
-                let componentConfig = componentConfigNode
-                  ? getObjectFromAstNode(componentConfigNode?.value)
-                  : {};
-
-                const resultParamsNode = getBuildTimeParams(
-                  theme,
-                  componentConfig,
-                  {},
-                  outputLibrary,
-                  platform,
-                  'extended'
-                );
 
-                if (resultParamsNode) {
-                  property.value.properties.push(
-                    t.objectProperty(
-                      t.stringLiteral('BUILD_TIME_PARAMS'),
-                      resultParamsNode
-                    )
+            if (Array.isArray(extendedThemeComponents)) {
+              extendedThemeComponents.forEach((property) => {
+                if (
+                  !t.isIdentifier(property.value) &&
+                  !t.isTemplateLiteral(property.value) &&
+                  !t.isConditionalExpression(property.value)
+                ) {
+                  const { themeNode, componentConfigNode } =
+                    findThemeAndComponentConfig(property.value.properties);
+
+                  let theme = themeNode
+                    ? getObjectFromAstNode(themeNode?.value)
+                    : {};
+                  let componentConfig = componentConfigNode
+                    ? getObjectFromAstNode(componentConfigNode?.value)
+                    : {};
+
+                  const resultParamsNode = getBuildTimeParams(
+                    theme,
+                    componentConfig,
+                    {},
+                    outputLibrary,
+                    platform,
+                    'extended'
                   );
+
+                  if (resultParamsNode) {
+                    property.value.properties.push(
+                      t.objectProperty(
+                        t.stringLiteral('BUILD_TIME_PARAMS'),
+                        resultParamsNode
+                      )
+                    );
+                  }
                 }
-              }
-            });
+              });
+            }
           }
         }
       },
@@ -970,16 +951,18 @@ module.exports = function (b) {
 
           const prefixedMediaQueries = {};
 
-          Object.keys(componentExtendedConfig?.tokens?.mediaQueries).forEach(
-            (key) => {
-              prefixedMediaQueries[key] = {
-                key: `@${key}`,
-                isMediaQuery: true,
-              };
-            }
-          );
+          if (componentExtendedConfig?.tokens?.mediaQueries) {
+            Object.keys(componentExtendedConfig?.tokens?.mediaQueries).forEach(
+              (key) => {
+                prefixedMediaQueries[key] = {
+                  key: `@${key}`,
+                  isMediaQuery: true,
+                };
+              }
+            );
 
-          Object.assign(reservedKeys, { ...prefixedMediaQueries });
+            Object.assign(reservedKeys, { ...prefixedMediaQueries });
+          }
 
           const attr = jsxOpeningElementPath.node.attributes;
           attr.forEach((attribute, index) => {

diff --git a/packages/react/src/createConfig.ts b/packages/react/src/createConfig.ts
@@ -132,7 +132,10 @@ export const resolveComponentTheme = (config: any, componentTheme: any) => {
       component?.componentConfig
     );
   } else {
-    GluestackStyleSheet.update(component.BUILD_TIME_PARAMS?.orderedResolved);
+    const toBeInjected = GluestackStyleSheet.update(
+      component.BUILD_TIME_PARAMS?.orderedResolved
+    );
+    component.BUILD_TIME_PARAMS.toBeInjected = toBeInjected;
     resolvedTheme = component;
   }
 

diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx
@@ -985,7 +985,6 @@ export function verboseStyled<P, Variants, ComCon>(
   // END BASE COLOR MODE RESOLUTION
 
   let CONFIG: any = {};
-  let isInjected = false;
   let plugins: any = [];
   let reservedKeys = { ..._reservedKeys };
 
@@ -1269,18 +1268,12 @@ export function verboseStyled<P, Variants, ComCon>(
     const sxStyleIds: any = React.useRef(BUILD_TIME_VERBOSED_STYLE_IDS);
 
     if (BUILD_TIME_ORDERED_RESOLVED.length > 0 && !isClient.current) {
-      if (!isInjected) {
-        const toBeInjected = GluestackStyleSheet.update(
-          BUILD_TIME_ORDERED_RESOLVED
-        );
+      const toBeInjected = GluestackStyleSheet.update(
+        BUILD_TIME_ORDERED_RESOLVED
+      );
 
-        if (Platform.OS === 'web') {
-          GluestackStyleSheet.inject(
-            toBeInjected,
-            styledContext.inlineStyleMap
-          );
-        }
-        isInjected = true;
+      if (Platform.OS === 'web') {
+        GluestackStyleSheet.inject(toBeInjected, styledContext.inlineStyleMap);
       }
       sxStyleIds.current = BUILD_TIME_VERBOSED_STYLE_IDS;