Merge pull request #354 from gluestack/fix/media-query-order

Fix/media query order
gluestack · Aug 28, 2023 · 6dda3fb · 6dda3fb
2 parents 6685167 + 97c529c
commit 6dda3fb
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 20 deletions.
diff --git 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<string, any>,
@@ -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
@@ -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

diff --git 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' });

diff --git 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;
+}