From 9625d01301d0cfa94390be09743bb3d9b240cd56 Mon Sep 17 00:00:00 2001 From: Suraj Date: Thu, 21 Sep 2023 13:28:42 +0530 Subject: [PATCH 1/2] fix: resolve inline props specificity --- .../DescendantsStyles/ContextBasedStyles.tsx | 53 ++++++++++++++---- .../react/src/hooks/useBreakpointValue.ts | 3 +- packages/react/src/styled.tsx | 54 +++++++++++++++---- 3 files changed, 89 insertions(+), 21 deletions(-) diff --git a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx index ead6a4b04..3ba5d4dea 100644 --- a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx +++ b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx @@ -11,6 +11,7 @@ import { Pressable as RNPressable, Text as RNText, StyleSheet, + Switch, View, } from 'react-native'; import { @@ -29,6 +30,7 @@ import { AddIcon, Box, Icon } from '@gluestack/design-system'; import { AlertCircle, Circle, Sun } from 'lucide-react-native'; import { AnimationResolver } from '@gluestack-style/animation-plugin'; +import { ScrollView } from 'react-native'; const styleshet = StyleSheet.create({ style: { @@ -194,6 +196,9 @@ const Text1 = styled( }, { ancestorStyle: ['_text'], componentName: 'TEXT' } ); + +const StyledSwitch = styled(ScrollView, {}); + export function ContextBasedStyles() { const [state, setState] = useState(false); @@ -206,7 +211,38 @@ export function ContextBasedStyles() { > color mode: {state ? 'dark' : 'light'} - + + + + + + {/* + */} + {/* */} {/* diff --git a/packages/react/src/hooks/useBreakpointValue.ts b/packages/react/src/hooks/useBreakpointValue.ts index 823a7e276..52447b5d7 100644 --- a/packages/react/src/hooks/useBreakpointValue.ts +++ b/packages/react/src/hooks/useBreakpointValue.ts @@ -28,6 +28,7 @@ export function useBreakpointValue(values: BreakPointValue) { Object.keys(mediaQueries).forEach((key: any) => { const currentBreakpoint: any = extractWidthValues(mediaQueries[key]); const isValid = isValidBreakpoint(theme.config, mediaQueries[key], width); + mediaQueriesBreakpoints.push({ key: key, breakpoint: currentBreakpoint[0], @@ -39,7 +40,7 @@ export function useBreakpointValue(values: BreakPointValue) { mediaQueriesBreakpoints.sort((a: any, b: any) => a.breakpoint - b.breakpoint); mediaQueriesBreakpoints.forEach((breakpoint: any, index: any) => { - breakpoint.value = values[breakpoint.key] + breakpoint.value = values.hasOwnProperty(breakpoint.key) ? values[breakpoint.key] : mediaQueriesBreakpoints[index - 1].value; }); diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index 29d2ef056..fbf97c157 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -1134,10 +1134,17 @@ export function verboseStyled( Object.assign(incomingComponentProps, applySxAncestorPassingProps); Object.assign(incomingComponentProps, componentProps); - Object.assign(themeDefaultProps, incomingComponentProps); + const { + variantProps: defaultVariantProps, + restProps: defaultComponentPropsWithoutVariants, + } = getVariantProps(themeDefaultProps, theme); + + const { + variantProps: inlineVariantProps, + restProps: inlineComponentPropsWithoutVariants, + } = getVariantProps(incomingComponentProps, theme); - const { variantProps, restProps: componentPropsWithoutVariants } = - getVariantProps(themeDefaultProps, theme); + const variantProps = Object.assign(defaultVariantProps, inlineVariantProps); const { baseStyleCSSIds: applyBaseStyleCSSIds, @@ -1309,10 +1316,17 @@ export function verboseStyled( // 520ms // Inline prop based style resolution TODO: Diagram insertion - const resolvedInlineProps = resolveInlineProps( + const defaultResolvedInlineProps = resolveInlineProps( componentStyleConfig, componentExtendedConfig, - componentPropsWithoutVariants, + defaultComponentPropsWithoutVariants, + CONFIG + ); + + const inlineResolvedInlineProps = resolveInlineProps( + componentStyleConfig, + componentExtendedConfig, + inlineComponentPropsWithoutVariants, CONFIG ); @@ -1325,7 +1339,10 @@ export function verboseStyled( const { sx: filteredComponentSx, rest: filteredComponentRemainingProps } = convertUtiltiyToSXFromProps( - componentPropsWithoutVariants, + Object.assign( + defaultComponentPropsWithoutVariants, + inlineComponentPropsWithoutVariants + ), styledSystemProps, componentStyleConfig ); @@ -1339,7 +1356,9 @@ export function verboseStyled( let containsSX = false; Object.assign(applyComponentInlineProps, filteredPassingRemainingProps); - Object.assign(applyComponentInlineProps, resolvedInlineProps); + Object.assign(applyComponentInlineProps, defaultResolvedInlineProps); + + Object.assign(applyComponentInlineProps, inlineResolvedInlineProps); Object.assign(applyComponentInlineProps, filteredComponentRemainingProps); if ( @@ -1552,6 +1571,21 @@ export function verboseStyled( CONFIG ); + // if (componentName === 'Switch') { + // console.log( + // // passingPropsUpdated, + // // resolvedPassingRemainingProps, + // resolvedInlineProps, + // // componentStyleConfig, + // '>>>>>>' + // ); + // } + + // Object.assign(applyComponentInlineProps, defaultResolvedInlineProps); + // Object.assign(applyComponentInlineProps, filteredPassingRemainingProps); + // Object.assign(applyComponentInlineProps, defaultInlineResolvedInlineProps); + // Object.assign(applyComponentInlineProps, filteredComponentRemainingProps); + Object.assign( applyComponentInlineProps, filteredPassingRemainingPropsUpdated @@ -1559,7 +1593,7 @@ export function verboseStyled( Object.assign(applyComponentInlineProps, resolvedPassingRemainingProps); - Object.assign(applyComponentInlineProps, resolvedInlineProps); + Object.assign(applyComponentInlineProps, inlineResolvedInlineProps); Object.assign( applyComponentInlineProps, @@ -1782,10 +1816,10 @@ export function verboseStyled( ...applySxStateBaseStyleCSSIds.current, ]; - Object.assign(resolvedInlineProps, applyComponentInlineProps); + // Object.assign(resolvedInlineProps, applyComponentInlineProps); const resolvedStyleProps = generateStylePropsFromCSSIds( - resolvedInlineProps, + applyComponentInlineProps, styleCSSIds, CONFIG, activeTheme From 2de002e60e8d2c05ec5fd90eb5a952aa9d3e4fd9 Mon Sep 17 00:00:00 2001 From: Suraj Date: Thu, 21 Sep 2023 13:29:21 +0530 Subject: [PATCH 2/2] v0.2.50 --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index 8cdf79445..5ea46cbc0 100644 --- a/packages/react/package.json +++ b/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.49", + "version": "0.2.50", "keywords": [ "React Native", "Next.js",