From 944ffde666cb76cb8659a90c11885ca1c89cf4e3 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 28 Aug 2023 17:10:37 +0530 Subject: [PATCH 1/3] fix: media query order and multiple media query support --- .../react/src/generateStylePropsFromCSSIds.ts | 35 +++++++++-------- .../resolver/SXResolvedToOrderedSXResolved.ts | 38 +++++++++++++++++-- 2 files changed, 54 insertions(+), 19 deletions(-) diff --git a/packages/react/src/generateStylePropsFromCSSIds.ts b/packages/react/src/generateStylePropsFromCSSIds.ts index 25db284b5..a851825d5 100644 --- a/packages/react/src/generateStylePropsFromCSSIds.ts +++ b/packages/react/src/generateStylePropsFromCSSIds.ts @@ -1,5 +1,6 @@ import { Dimensions, Platform } from 'react-native'; import { GluestackStyleSheet } from './style-sheet'; +import { extractWidthValues } from './utils'; export function getClosestBreakpoint( values: Record, @@ -73,15 +74,6 @@ export function getClosestBreakpointValue( return index; } -function getWidthFromMediaQuery(condition: string) { - var match = condition.match(/\(min-width:\s*(\d+)px\)/); - if (match) { - return parseInt(match[1]); - } else { - return null; - } -} - function isValidBreakpoint(config: any, queryCondition: any) { const windowWidth = Dimensions.get('window')?.width; @@ -90,12 +82,25 @@ function isValidBreakpoint(config: any, queryCondition: any) { windowWidth ); - if ( - getWidthFromMediaQuery(queryCondition) !== null && - // @ts-ignore - getWidthFromMediaQuery(queryCondition) <= currentBreakpointValue - ) { - return true; + const queryWidth = extractWidthValues(queryCondition); + + if (queryWidth.length > 0) { + if (queryWidth.length === 1) { + if ( + queryWidth[0] !== null && + // @ts-ignore + queryWidth[0] <= currentBreakpointValue + ) { + return true; + } + } else { + if ( + currentBreakpointValue >= queryWidth[0] && + currentBreakpointValue <= queryWidth[1] + ) { + return true; + } + } } return false; diff --git a/packages/react/src/resolver/SXResolvedToOrderedSXResolved.ts b/packages/react/src/resolver/SXResolvedToOrderedSXResolved.ts index 0779cb8de..84611a16c 100644 --- a/packages/react/src/resolver/SXResolvedToOrderedSXResolved.ts +++ b/packages/react/src/resolver/SXResolvedToOrderedSXResolved.ts @@ -1,4 +1,5 @@ import type { OrderedSXResolved, VerbosedSxResolved } from '../types'; +import { extractWidthValues } from '../utils'; export function SXResolvedToOrderedSXResolved( sxResolved: VerbosedSxResolved @@ -27,14 +28,43 @@ export function SXResolvedToOrderedSXResolved( }); } if (sxResolved?.queriesResolved) { + const queriesResolved: any = {}; + const breakpoints: any = []; + // order and push based on config media query order sxResolved.queriesResolved.forEach((queryResolved: any) => { - orderedSXResolved.push( - //@ts-ignore + const queryCondition = + queryResolved.resolved.value.styledValueResolvedWithMeta.meta + .queryCondition; + const currentBreakpoint: any = extractWidthValues(queryCondition); - ...SXResolvedToOrderedSXResolved(queryResolved.resolved.value) - ); + if (currentBreakpoint.length === 1) { + breakpoints.push(currentBreakpoint[0]); + if (!queriesResolved[currentBreakpoint]) + queriesResolved[currentBreakpoint] = []; + + queriesResolved[currentBreakpoint].push( + ...SXResolvedToOrderedSXResolved(queryResolved.resolved.value) + ); + } else { + orderedSXResolved.push( + ...SXResolvedToOrderedSXResolved(queryResolved.resolved.value) + ); + } + + // orderedSXResolved.push( + // //@ts-ignore + // ...SXResolvedToOrderedSXResolved(queryResolved.resolved.value) + // ); + }); + + breakpoints.sort((a: any, b: any) => a - b); + + breakpoints.forEach((currentBreakpoint: any) => { + if (queriesResolved[currentBreakpoint]) + orderedSXResolved.push(...queriesResolved[currentBreakpoint]); }); } + if (sxResolved?.state) { Object.keys(sxResolved.state).forEach((key) => { //@ts-ignore From 05a5cbd013efb18bd2bcd16c04fedf5a699ebeb8 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 28 Aug 2023 17:11:21 +0530 Subject: [PATCH 2/3] feat: extract width from media query --- packages/react/src/utils.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/react/src/utils.ts b/packages/react/src/utils.ts index 1c995c3e7..91fa459d7 100644 --- a/packages/react/src/utils.ts +++ b/packages/react/src/utils.ts @@ -364,3 +364,19 @@ export const platformSpecificSpaceUnits = (theme: Config, platform: string) => { }); return newTheme; }; + +export function extractWidthValues(condition: string) { + const widthRegex = /\((min-width|max-width)?\s*:\s*(\d+)\s*(px)?\)/g; + const matches = [...condition.matchAll(widthRegex)]; + + const widthValues = []; + for (const match of matches) { + if (match[1]) { + widthValues.push(parseInt(match[2])); + } else { + widthValues.push(parseInt(match[2])); + } + } + + return widthValues; +} From 97c529c937b5b652dfb6483649793446ef069692 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 28 Aug 2023 17:11:42 +0530 Subject: [PATCH 3/3] fix: state check --- packages/react/src/updateCSSStyleInOrderedResolved.web.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react/src/updateCSSStyleInOrderedResolved.web.ts b/packages/react/src/updateCSSStyleInOrderedResolved.web.ts index 4471046bc..602727181 100644 --- a/packages/react/src/updateCSSStyleInOrderedResolved.web.ts +++ b/packages/react/src/updateCSSStyleInOrderedResolved.web.ts @@ -8,6 +8,7 @@ export function getCSSIdAndRuleset( prefixClassName: string = '' // path: Path ) { + const hasState = styleValueResolvedWithMeta.meta.path?.includes('state'); const toBeInjectedStyle: { style: any; condition?: any; @@ -37,7 +38,8 @@ export function getCSSIdAndRuleset( path: styleValueResolvedWithMeta?.meta?.path, data: styleValueResolvedWithMeta.original, }), - prefixClassName + prefixClassName, + hasState ); // var hr = stableHash({ hello: 'helloworld' });