feat: add support for open and closed ranges

examples/expo/src/App.tsx

@@ -28,6 +28,8 @@ export const App: React.FunctionComponent = () => (
                 <Stack.Screen name={DemoNames.WithBreakpoints} component={Screens.WithBreakpointsScreen} />
                 <Stack.Screen name={DemoNames.OrientationBreakpoints} component={Screens.OrientationBreakpoints} />
                 <Stack.Screen name={DemoNames.MediaQueriesWidthHeight} component={Screens.MediaQueriesWidthHeight} />
+                <Stack.Screen name={DemoNames.MediaQueriesOpenRanges} component={Screens.MediaQueriesOpenRanges} />
+                <Stack.Screen name={DemoNames.MixedMediaQueries} component={Screens.MixedMediaQueries} />
             </Stack.Navigator>
         </NavigationContainer>
     </SafeAreaProvider>

examples/expo/src/common/navigation.ts

@@ -11,7 +11,9 @@ export enum DemoNames {
     NoBreakpoints = 'NoBreakpoints',
     WithBreakpoints = 'WithBreakpoints',
     MediaQueriesWidthHeight = 'MediaQueriesWidthHeight',
-    OrientationBreakpoints = 'OrientationBreakpoints'
+    OrientationBreakpoints = 'OrientationBreakpoints',
+    MediaQueriesOpenRanges = 'MediaQueriesOpenRanges',
+    MixedMediaQueries = 'MixedMediaQueries'
 }
 
 export type DemoStackParams = {
@@ -25,7 +27,9 @@ export type DemoStackParams = {
     [DemoNames.NoBreakpoints]: undefined,
     [DemoNames.WithBreakpoints]: undefined,
     [DemoNames.MediaQueriesWidthHeight]: undefined,
-    [DemoNames.OrientationBreakpoints]: undefined
+    [DemoNames.OrientationBreakpoints]: undefined,
+    [DemoNames.MediaQueriesOpenRanges]: undefined,
+    [DemoNames.MixedMediaQueries]: undefined
 }
 
 export type NavigationProps<S extends DemoNames = DemoNames.Home> = NavigationProp<DemoStackParams, S>

examples/expo/src/examples/HomeScreen.tsx

@@ -74,6 +74,14 @@ export const HomeScreen = () => {
                         description="Width and Height"
                         onPress={() => navigation.navigate(DemoNames.MediaQueriesWidthHeight)}
                     />
+                    <DemoLink
+                        description="Open ranges"
+                        onPress={() => navigation.navigate(DemoNames.MediaQueriesOpenRanges)}
+                    />
+                    <DemoLink
+                        description="Mixed with breakpoints"
+                        onPress={() => navigation.navigate(DemoNames.MixedMediaQueries)}
+                    />
                 </DemoGroup>
             </ScrollView>
         </View>

examples/expo/src/examples/MediaQueriesOpenRanges.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+import { createStyleSheet, useStyles, UnistylesRegistry, UnistylesRuntime } from 'react-native-unistyles'
+import { DemoScreen } from '../components'
+import { darkTheme, lightTheme, premiumTheme } from '../styles'
+import { useLazyRegistryForDemo } from '../hooks'
+
+export const MediaQueriesOpenRanges: React.FunctionComponent = () => {
+    useLazyRegistryForDemo(() => {
+        UnistylesRegistry
+            .addThemes({
+                light: lightTheme,
+                dark: darkTheme,
+                premium: premiumTheme
+            })
+            .addConfig({
+                adaptiveThemes: true
+            })
+    })
+
+    const { styles } = useStyles(stylesheet)
+
+    return (
+        <DemoScreen>
+            <View style={styles.container}>
+                <Text style={styles.text}>
+                    This demo has media queries for width and height with open ranges
+                </Text>
+                <Text style={styles.text}>
+                    Open range uses `(` or `)` instead of `[` or `]`
+                </Text>
+                <Text style={styles.text}>
+                    Your window dimensions are: {UnistylesRuntime.screen.width}x{UnistylesRuntime.screen.height}
+                </Text>
+                <Text>
+                    Rotate or resize the window to see the changes
+                </Text>
+            </View>
+        </DemoScreen>
+    )
+}
+
+const stylesheet = createStyleSheet(theme => ({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingHorizontal: 20,
+        backgroundColor: {
+            ':w[, 430):h[, 932)': theme.colors.backgroundColor,
+            ':w[430]:h[, 932]': theme.colors.aloes
+        },
+        rowGap: 20
+    },
+    text: {
+        textAlign: 'center',
+        color: theme.colors.typography
+    }
+}))

examples/expo/src/examples/MixedMediaQueries.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+import { createStyleSheet, useStyles, UnistylesRegistry, UnistylesRuntime } from 'react-native-unistyles'
+import { DemoScreen } from '../components'
+import { breakpoints, darkTheme, lightTheme, premiumTheme } from '../styles'
+import { useLazyRegistryForDemo } from '../hooks'
+
+export const MixedMediaQueries: React.FunctionComponent = () => {
+    useLazyRegistryForDemo(() => {
+        UnistylesRegistry
+            .addThemes({
+                light: lightTheme,
+                dark: darkTheme,
+                premium: premiumTheme
+            })
+            .addBreakpoints(breakpoints)
+            .addConfig({
+                adaptiveThemes: true
+            })
+    })
+
+    const { styles } = useStyles(stylesheet)
+
+    return (
+        <DemoScreen>
+            <View style={styles.container}>
+                <Text style={styles.text}>
+                    This demo has media queries for width and height and user defined breakpoints
+                </Text>
+                <Text style={styles.text}>
+                    Media queries have bigger priority than user defined breakpoints!
+                </Text>
+                <Text style={styles.text}>
+                    Your window dimensions are: {UnistylesRuntime.screen.width}x{UnistylesRuntime.screen.height}
+                </Text>
+                <Text>
+                    Rotate or resize the window to see the changes
+                </Text>
+            </View>
+        </DemoScreen>
+    )
+}
+
+const stylesheet = createStyleSheet(theme => ({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingHorizontal: 20,
+        backgroundColor: {
+            ':w[, 430]:h[, 1000]': theme.colors.barbie,
+            // xs will could also be applied here, but it has lower priority than media queries
+            xs: theme.colors.aloes
+        },
+        rowGap: 20
+    },
+    text: {
+        textAlign: 'center',
+        color: theme.colors.typography
+    }
+}))

examples/expo/src/examples/index.ts

@@ -9,3 +9,5 @@ export { NoBreakpointsScreen } from './NoBreakpointsScreen'
 export { WithBreakpointsScreen } from './WithBreakpointsScreen'
 export { OrientationBreakpoints } from './OrientationBreakpoints'
 export { MediaQueriesWidthHeight } from './MediaQueriesWidthHeight'
+export { MediaQueriesOpenRanges } from './MediaQueriesOpenRanges'
+export { MixedMediaQueries } from './MixedMediaQueries'

src/utils/mediaQueries.ts

@@ -16,13 +16,25 @@ import type { ScreenSize } from '../types'
  * extractValues("h[100,]")    // returns [100]
  */
 export const extractValues = (codedValue: string): Array<number> => {
-    const [lh, rh] = codedValue
-        .replace(/[wh[\]]/g, '')
-        .split(',')
+    const cleanedValue = codedValue.replace(/[wh ]/g, '')
+    const [left, right] = cleanedValue.split(',') as [string, string | undefined]
 
-    return rh
-        ? [Number(lh), Number(rh)]
-        : [Number(lh)]
+    if (!right) {
+        const lh = left.startsWith('[')
+            ? Number(left.replace(/[[\]()]/g, ''))
+            : Number(left.replace(/[[\]()]/g, '')) + 1
+
+        return [lh]
+    }
+
+    const lh = left.startsWith('[')
+        ? Number(left.replace('[', ''))
+        : Number(left.replace('(', '')) + 1
+    const rh = right.endsWith(']')
+        ? Number(right.replace(']', ''))
+        : Number(right.replace(')', '')) - 1
+
+    return [lh, rh]
 }
 
 /**