Merge pull request #432 from gluestack/patch

Patch
gluestack · Sep 14, 2023 · cfc0aa4 · cfc0aa4
2 parents 341dc2f + ac9ef52
commit cfc0aa4
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 47 deletions.
diff --git a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx
@@ -26,56 +26,23 @@ const styleshet = StyleSheet.create({
     padding: 12,
   },
 });
+
 const Pressable = styled(
   RNPressable,
   {
-    bg: '$red500',
+    bg: '$red200',
     p: '$2',
-    // 'bg': '$red600',
-    // 'w': 100,
-    // 'h': 100,
-    // '_light': {
-    //   bg: '$red600',
-    // },
-    // '@base': {
-    //   bg: '$blue500',
-    // },
-    // ':hover': {
-    //   bg: '$red500',
-    // },
-    // '@sm': {
-    //   props: {
-    //     test: 'sm',
-    //   },
-    // },
-    // _dark: {
-    //   // bg: '$amber200',
-    //   props: {
-    //     bg: 3 < 2 ? '$yellow400' : 'blue',
-    //   },
-    // },
-
-    // '@xl': {
-    //   props: {
-    //     bg: '$green500',
-    //   },
-    // },
-
-    // 'props': {
-    //   bg: '$blue400',
-    //   // test: 'hello',
-    // },
   },
   {
     componentName: 'Pressable',
-    // descendantStyle: ['_text'],
+    descendantStyle: ['_text'],
   }
 );
 
 const Pressable1 = styled(
   Pressable,
   {
-    bg: '$red500',
+    bg: '$red200',
     p: '$2',
 
     // 'bg': '$red600',
@@ -106,11 +73,15 @@ const Text = styled(
 );
 
 const StyledIcon = styled(
-  AsForwarder,
+  View,
   {
     bg: '$amber100',
     bgColor: '$amber100',
-
+    variants: {
+      size: {
+        sm: {},
+      },
+    },
     // variants: {
     //   size: {
     //     sm: {
@@ -182,11 +153,48 @@ const Box1 = styled(
   }
 );
 
-const Text1 = styled(Text, {}, { ancestorStyle: ['_text'] });
+const Text1 = styled(
+  Text,
+  {
+    // _dark: {
+    //   color: '$green500',
+    // },
+    // variants: {
+    //   variant: {
+    //     sm: {
+    //       color: '$red500',
+    //     },
+    //     lg: {
+    //       color: '$blue500',
+    //     },
+    //   },
+    // },
+    _dark: {
+      color: '$black',
+    },
+  },
+  { ancestorStyle: ['_text'], componentName: 'TEXT' }
+);
 export function ContextBasedStyles() {
   return (
     <Wrapper colorMode="dark">
-      <MyIcon as={Sun} size={32}></MyIcon>
+      <Pressable
+        focusable={true}
+        sx={{
+          _text: {
+            color: '$blue500',
+            // props: {
+            //   variant: 'sm',
+            // },
+            // _dark: {
+            //   color: '$yellow500',
+            // },
+          },
+        }}
+      >
+        <Text1>Hello world</Text1>
+      </Pressable>
+      {/* <MyIcon as={Sun} size></MyIcon> */}
       {/* <ContextBasedStylesContent></ContextBasedStylesContent> */}
       {/* <Pressable></Pressable> */}
       {/* <Box1

diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx
@@ -300,7 +300,10 @@ const getMergeDescendantsStyleCSSIdsAndPropsWithKey = (
   return descendantStyleObj;
 };
 
-const AncestorStyleContext = React.createContext({});
+const AncestorStyleContext = React.createContext({
+  sx: {},
+  component: {},
+});
 //
 
 // window['globalStyleMap'] = globalStyleMap;
@@ -1118,9 +1121,19 @@ export function verboseStyled<P, Variants, ComCon, PluginType = unknown>(
       passingProps: applyAncestorPassingProps,
       baseStyleCSSIds: applyAncestorBaseStyleCSSIds,
       variantStyleIds: applyAncestorVariantStyleCSSIds,
-    } = getAncestorCSSStyleIds(componentStyleConfig, ancestorStyleContext);
+    } = getAncestorCSSStyleIds(
+      componentStyleConfig,
+      ancestorStyleContext.component
+    );
+
+    const {
+      passingProps: applySxAncestorPassingProps,
+      baseStyleCSSIds: applySxAncestorBaseStyleCSSIds,
+      variantStyleIds: applySxAncestorVariantStyleCSSIds,
+    } = getAncestorCSSStyleIds(componentStyleConfig, ancestorStyleContext.sx);
 
     Object.assign(incomingComponentProps, applyAncestorPassingProps);
+    Object.assign(incomingComponentProps, applySxAncestorPassingProps);
     Object.assign(incomingComponentProps, componentProps);
 
     Object.assign(themeDefaultProps, incomingComponentProps);
@@ -1716,13 +1729,21 @@ export function verboseStyled<P, Variants, ComCon, PluginType = unknown>(
           applySxDescendantStyleCSSIdsAndPropsWithKey ||
           ancestorStyleContext
         ) {
-          return mergeArraysInObjects(
-            applyDescendantsStyleCSSIdsAndPropsWithKey,
-            applyDescendantStateStyleCSSIdsAndPropsWithKey,
+          const sxDescendantCSSIds = mergeArraysInObjects(
             applySxDescendantStyleCSSIdsAndPropsWithKey.current,
             applySxDescendantStateStyleCSSIdsAndPropsWithKey.current,
-            ancestorStyleContext
+            ancestorStyleContext.component
           );
+          const componentDescendantCSSIds = mergeArraysInObjects(
+            applyDescendantsStyleCSSIdsAndPropsWithKey,
+            applyDescendantStateStyleCSSIdsAndPropsWithKey,
+            ancestorStyleContext.sx
+          );
+
+          return {
+            component: componentDescendantCSSIds,
+            sx: sxDescendantCSSIds,
+          };
         } else {
           return {};
         }
@@ -1746,11 +1767,17 @@ export function verboseStyled<P, Variants, ComCon, PluginType = unknown>(
       ...applyAncestorVariantStyleCSSIds,
       ...applyComponentStateBaseStyleIds,
       ...applyComponentStateVariantStyleIds,
+
+      ...applySxAncestorBaseStyleCSSIds,
+      ...applySxAncestorVariantStyleCSSIds,
+
+      // ...applySxAncestorBaseStyleCSSIds,
       ...applySxVariantStyleCSSIds.current,
       ...applySxStateVariantStyleCSSIds.current,
       ...applySxBaseStyleCSSIds.current,
       ...applySxStateBaseStyleCSSIds.current,
     ];
+
     Object.assign(resolvedInlineProps, applyComponentInlineProps);
 
     const resolvedStyleProps = generateStylePropsFromCSSIds(
@@ -1759,6 +1786,7 @@ export function verboseStyled<P, Variants, ComCon, PluginType = unknown>(
       CONFIG,
       activeTheme
     );
+
     const AsComp: any =
       resolvedStyleProps.as || (passingProps.as as any) || undefined;