Merge pull request #2088 from gluestack/fix/font-resolver-utility-pro…

…ps-issue fix: font resolver
gluestack · Apr 23, 2024 · 193be06 · 193be06
2 parents aa6671c + 25420cf
commit 193be06
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 37 deletions.
diff --git a/packages/styled/react/src/plugins/font-resolver.tsx b/packages/styled/react/src/plugins/font-resolver.tsx
@@ -318,17 +318,19 @@ export class FontResolver implements IStyledPlugin, FontPlugin {
 
       let style = rest?.style;
 
-      if (Object.keys(resolvedSxProps).length > 0) {
-        if (Array.isArray(style)) {
-          style = StyleSheet.flatten(style);
-
-          Object.keys(resolvedSxProps).forEach((ele) => {
-            style[ele] = resolvedSxProps[ele];
-          });
-        } else {
-          Object.keys(resolvedSxProps).forEach((ele) => {
-            style[ele] = resolvedSxProps[ele];
-          });
+      if (resolvedSxProps.fontFamily) {
+        if (Object.keys(resolvedSxProps).length > 0) {
+          if (Array.isArray(style)) {
+            style = StyleSheet.flatten(style);
+
+            Object.keys(resolvedSxProps).forEach((ele) => {
+              style[ele] = resolvedSxProps[ele];
+            });
+          } else {
+            Object.keys(resolvedSxProps).forEach((ele) => {
+              style[ele] = resolvedSxProps[ele];
+            });
+          }
         }
       }
 

diff --git a/packages/styled/react/src/styled.tsx b/packages/styled/react/src/styled.tsx
@@ -141,7 +141,11 @@ function convertUtiltiyToSXFromProps(
 
   const resolvedSXVerbosed = convertSxToSxVerbosed(resolvedSxVerbose);
 
-  return { sx: resolvedSXVerbosed, rest: restProps };
+  return {
+    sx: resolvedSXVerbosed,
+    nonVerbosedSx: resolvedSxVerbose,
+    rest: restProps,
+  };
 }
 
 function getStateStyleCSSFromStyleIdsAndProps(
@@ -1589,36 +1593,51 @@ export function verboseStyled<P, Variants, ComCon>(
       applySxStatePassingProps.current
     );
 
-    let { sx: filteredComponentSx, rest: filteredComponentRemainingProps } =
-      convertUtiltiyToSXFromProps(
-        // Object.assign(
-        //   defaultThemePropsWithoutVariants,
-        inlineComponentPropsWithoutVariants,
-        styledSystemProps,
-        { ...componentStyleConfig, uniqueComponentId },
-        reservedKeys,
-        plugins,
-        ignoreKeys,
-        inlineComponentPropsWithoutVariants?.as ?? Component,
-        ExtendedConfig
-      );
+    let {
+      sx: filteredComponentSx,
+      nonVerbosedSx,
+      rest: filteredComponentRemainingProps,
+    } = convertUtiltiyToSXFromProps(
+      // Object.assign(
+      //   defaultThemePropsWithoutVariants,
+      inlineComponentPropsWithoutVariants,
+      styledSystemProps,
+      { ...componentStyleConfig, uniqueComponentId },
+      reservedKeys,
+      plugins,
+      ignoreKeys,
+      inlineComponentPropsWithoutVariants?.as ?? Component,
+      ExtendedConfig
+    );
+
+    let sxToBePassedIntoPlugin = {
+      ...nonVerbosedSx,
+    };
 
     const mergedPassingProps = shallowMerge(
       { ...defaultThemePropsWithoutVariants, ...passingProps },
       applyAncestorPassingProps
     );
 
-    let { sx: filteredPassingSx, rest: filteredPassingRemainingProps } =
-      convertUtiltiyToSXFromProps(
-        mergedPassingProps,
-        styledSystemProps,
-        { ...componentStyleConfig, uniqueComponentId },
-        reservedKeys,
-        plugins,
-        ignoreKeys,
-        mergedPassingProps?.as ?? Component,
-        ExtendedConfig
-      );
+    let {
+      sx: filteredPassingSx,
+      nonVerbosedSx: filteredPassingNonVerbosedSx,
+      rest: filteredPassingRemainingProps,
+    } = convertUtiltiyToSXFromProps(
+      mergedPassingProps,
+      styledSystemProps,
+      { ...componentStyleConfig, uniqueComponentId },
+      reservedKeys,
+      plugins,
+      ignoreKeys,
+      mergedPassingProps?.as ?? Component,
+      ExtendedConfig
+    );
+
+    sxToBePassedIntoPlugin = deepMergeObjects(
+      sxToBePassedIntoPlugin,
+      filteredPassingNonVerbosedSx
+    );
 
     let containsSX = false;
     Object.assign(applyComponentInlineProps, filteredPassingRemainingProps);
@@ -1831,6 +1850,7 @@ export function verboseStyled<P, Variants, ComCon>(
 
         const {
           sx: filteredPassingSxUpdated,
+          nonVerbosedSx: filteredPassingNonVerbosedSxUpdated,
           rest: filteredPassingRemainingPropsUpdated,
         } = convertUtiltiyToSXFromProps(
           passingPropsUpdated,
@@ -1843,6 +1863,11 @@ export function verboseStyled<P, Variants, ComCon>(
           ExtendedConfig
         );
 
+        sxToBePassedIntoPlugin = deepMergeObjects(
+          sxToBePassedIntoPlugin,
+          filteredPassingNonVerbosedSxUpdated
+        );
+
         filteredPassingSx = filteredPassingSxUpdated;
 
         injectAndUpdateSXProps(filteredPassingSx);
@@ -2214,7 +2239,7 @@ export function verboseStyled<P, Variants, ComCon>(
         ? {
             ...variantProps,
             states: states,
-            sx: componentProps.sx,
+            sx: sxToBePassedIntoPlugin,
           }
         : {};