react-native-unistyles 2.0.0-alpha.5 → 2.0.0-alpha.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) hide show
  1. package/cxx/UnistylesRuntime.cpp +262 -0
  2. package/cxx/UnistylesRuntime.h +61 -0
  3. package/lib/commonjs/Unistyles.js +1 -1
  4. package/lib/commonjs/Unistyles.js.map +1 -1
  5. package/lib/commonjs/UnistylesEngine.js +9 -5
  6. package/lib/commonjs/UnistylesEngine.js.map +1 -1
  7. package/lib/commonjs/createStyleSheet.js.map +1 -1
  8. package/lib/commonjs/index.js +7 -0
  9. package/lib/commonjs/index.js.map +1 -1
  10. package/lib/commonjs/types/cxx.js.map +1 -1
  11. package/lib/commonjs/useStyles.js +0 -2
  12. package/lib/commonjs/useStyles.js.map +1 -1
  13. package/lib/commonjs/useUnistyles.js.map +1 -1
  14. package/lib/commonjs/utils/breakpoints.js +11 -68
  15. package/lib/commonjs/utils/breakpoints.js.map +1 -1
  16. package/lib/commonjs/utils/common.js +3 -1
  17. package/lib/commonjs/utils/common.js.map +1 -1
  18. package/lib/commonjs/utils/index.js +8 -0
  19. package/lib/commonjs/utils/index.js.map +1 -1
  20. package/lib/commonjs/utils/mediaQueries.js +57 -155
  21. package/lib/commonjs/utils/mediaQueries.js.map +1 -1
  22. package/lib/commonjs/utils/mq.js +75 -0
  23. package/lib/commonjs/utils/mq.js.map +1 -0
  24. package/lib/commonjs/utils/styles.js +11 -51
  25. package/lib/commonjs/utils/styles.js.map +1 -1
  26. package/lib/module/Unistyles.js +2 -2
  27. package/lib/module/Unistyles.js.map +1 -1
  28. package/lib/module/UnistylesEngine.js +7 -3
  29. package/lib/module/UnistylesEngine.js.map +1 -1
  30. package/lib/module/createStyleSheet.js.map +1 -1
  31. package/lib/module/index.js +1 -0
  32. package/lib/module/index.js.map +1 -1
  33. package/lib/module/types/cxx.js.map +1 -1
  34. package/lib/module/useStyles.js +0 -3
  35. package/lib/module/useStyles.js.map +1 -1
  36. package/lib/module/useUnistyles.js.map +1 -1
  37. package/lib/module/utils/breakpoints.js +11 -68
  38. package/lib/module/utils/breakpoints.js.map +1 -1
  39. package/lib/module/utils/common.js +2 -0
  40. package/lib/module/utils/common.js.map +1 -1
  41. package/lib/module/utils/index.js +1 -0
  42. package/lib/module/utils/index.js.map +1 -1
  43. package/lib/module/utils/mediaQueries.js +57 -155
  44. package/lib/module/utils/mediaQueries.js.map +1 -1
  45. package/lib/module/utils/mq.js +69 -0
  46. package/lib/module/utils/mq.js.map +1 -0
  47. package/lib/module/utils/styles.js +10 -51
  48. package/lib/module/utils/styles.js.map +1 -1
  49. package/lib/typescript/src/Unistyles.d.ts +2 -2
  50. package/lib/typescript/src/Unistyles.d.ts.map +1 -1
  51. package/lib/typescript/src/UnistylesEngine.d.ts +4 -1
  52. package/lib/typescript/src/UnistylesEngine.d.ts.map +1 -1
  53. package/lib/typescript/src/createStyleSheet.d.ts +2 -5
  54. package/lib/typescript/src/createStyleSheet.d.ts.map +1 -1
  55. package/lib/typescript/src/index.d.ts +1 -0
  56. package/lib/typescript/src/index.d.ts.map +1 -1
  57. package/lib/typescript/src/types/breakpoints.d.ts +2 -1
  58. package/lib/typescript/src/types/breakpoints.d.ts.map +1 -1
  59. package/lib/typescript/src/types/core.d.ts +18 -16
  60. package/lib/typescript/src/types/core.d.ts.map +1 -1
  61. package/lib/typescript/src/types/cxx.d.ts +7 -1
  62. package/lib/typescript/src/types/cxx.d.ts.map +1 -1
  63. package/lib/typescript/src/types/index.d.ts +1 -1
  64. package/lib/typescript/src/types/index.d.ts.map +1 -1
  65. package/lib/typescript/src/types/mediaQueries.d.ts +5 -3
  66. package/lib/typescript/src/types/mediaQueries.d.ts.map +1 -1
  67. package/lib/typescript/src/useStyles.d.ts +2 -4
  68. package/lib/typescript/src/useStyles.d.ts.map +1 -1
  69. package/lib/typescript/src/useUnistyles.d.ts +4 -5
  70. package/lib/typescript/src/useUnistyles.d.ts.map +1 -1
  71. package/lib/typescript/src/utils/breakpoints.d.ts +2 -60
  72. package/lib/typescript/src/utils/breakpoints.d.ts.map +1 -1
  73. package/lib/typescript/src/utils/common.d.ts +2 -0
  74. package/lib/typescript/src/utils/common.d.ts.map +1 -1
  75. package/lib/typescript/src/utils/index.d.ts +1 -0
  76. package/lib/typescript/src/utils/index.d.ts.map +1 -1
  77. package/lib/typescript/src/utils/mediaQueries.d.ts +8 -127
  78. package/lib/typescript/src/utils/mediaQueries.d.ts.map +1 -1
  79. package/lib/typescript/src/utils/mq.d.ts +15 -0
  80. package/lib/typescript/src/utils/mq.d.ts.map +1 -0
  81. package/lib/typescript/src/utils/styles.d.ts +1 -46
  82. package/lib/typescript/src/utils/styles.d.ts.map +1 -1
  83. package/package.json +10 -1
  84. package/src/Unistyles.ts +3 -3
  85. package/src/UnistylesEngine.ts +12 -3
  86. package/src/createStyleSheet.ts +2 -5
  87. package/src/index.ts +1 -0
  88. package/src/types/breakpoints.ts +6 -3
  89. package/src/types/core.ts +25 -22
  90. package/src/types/cxx.ts +8 -1
  91. package/src/types/index.ts +1 -1
  92. package/src/types/mediaQueries.ts +9 -4
  93. package/src/useStyles.ts +3 -6
  94. package/src/useUnistyles.ts +11 -4
  95. package/src/utils/breakpoints.ts +14 -71
  96. package/src/utils/common.ts +2 -0
  97. package/src/utils/index.ts +1 -0
  98. package/src/utils/mediaQueries.ts +102 -163
  99. package/src/utils/mq.ts +77 -0
  100. package/src/utils/styles.ts +13 -55
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-unistyles",
3
- "version": "2.0.0-alpha.5",
3
+ "version": "2.0.0-alpha.7",
4
4
  "description": "Level up your React Native StyleSheet",
5
5
  "scripts": {
6
6
  "test": "jest",
@@ -20,7 +20,16 @@
20
20
  "src",
21
21
  "lib",
22
22
  "ios",
23
+ "android",
24
+ "cxx",
23
25
  "react-native-unistyles.podspec",
26
+ "!lib/typescript/examples",
27
+ "!ios/build",
28
+ "!android/build",
29
+ "!android/gradle",
30
+ "!android/gradlew",
31
+ "!android/gradlew.bat",
32
+ "!android/local.properties",
24
33
  "!**/*.spec.ts",
25
34
  "!**/*.spec.tsx",
26
35
  "!**/.*"
package/src/Unistyles.ts CHANGED
@@ -1,13 +1,13 @@
1
1
  import { UnistylesModule } from './UnistylesModule'
2
2
  import { UnistylesRuntime } from './UnistylesRuntime'
3
- import { UnistylesEngine } from './UnistylesEngine'
3
+ import { UnistylesBuiltInEngine } from './UnistylesEngine'
4
4
  import { UnistyleRegistry } from './UnistyleRegistry'
5
5
  import type { UnistylesBridge } from './types'
6
6
  import { UnistylesError } from './types'
7
7
 
8
8
  class Unistyles {
9
9
  private _runtime: UnistylesRuntime
10
- private _engine: UnistylesEngine
10
+ private _engine: UnistylesBuiltInEngine
11
11
  private _registry: UnistyleRegistry
12
12
  private _bridge: UnistylesBridge
13
13
 
@@ -22,7 +22,7 @@ class Unistyles {
22
22
  this._bridge = global.__UNISTYLES__ as UnistylesBridge
23
23
  this._registry = new UnistyleRegistry(this._bridge)
24
24
  this._runtime = new UnistylesRuntime(this._bridge, this._registry)
25
- this._engine = new UnistylesEngine(this._registry, this._runtime)
25
+ this._engine = new UnistylesBuiltInEngine(this._registry, this._runtime)
26
26
  }
27
27
 
28
28
  public get registry() {
@@ -1,14 +1,23 @@
1
1
  import type { UnistyleRegistry } from './UnistyleRegistry'
2
2
  import type { UnistylesRuntime } from './UnistylesRuntime'
3
+ import { getKeyForCustomMediaQuery } from './utils'
4
+ import type { UnistylesEngine, NestedKeys } from './types'
3
5
 
4
- // todo implement engine
5
- export class UnistylesEngine {
6
- // @ts-ignore
6
+ export class UnistylesBuiltInEngine implements UnistylesEngine {
7
7
  constructor(private registry: UnistyleRegistry, private runtime: UnistylesRuntime) {
8
8
  this.registry = registry
9
9
  this.runtime = runtime
10
10
  }
11
11
 
12
+ public isMediaQuery = (key: string) => {
13
+ const regex = /(:w|:h)/
14
+
15
+ return key.length > 0 && regex.test(key)
16
+ }
17
+
18
+ public didMatchMediaQuery = (keys: NestedKeys) =>
19
+ getKeyForCustomMediaQuery(keys, this.runtime.screen, this.registry.breakpoints)
20
+
12
21
  // UnistylesEngine.parseStyleSheet
13
22
  // UnistylesEngine.parseStyle
14
23
  // UnistylesEngine.proxify
@@ -1,9 +1,6 @@
1
- import type { CustomNamedStyles } from './types'
2
- import type { UnistylesThemes } from './global'
1
+ import type { CustomNamedStyles, UnistylesTheme } from './types'
3
2
 
4
- type T = UnistylesThemes[keyof UnistylesThemes]
5
-
6
- export const createStyleSheet = <S extends CustomNamedStyles<S>, X>(styles: S | CustomNamedStyles<S> | X | ((theme: T) => X | CustomNamedStyles<X>)): S | X => {
3
+ export const createStyleSheet = <S, X>(styles: S | CustomNamedStyles<S> | X | ((theme: UnistylesTheme) => X | CustomNamedStyles<X>)): S | X => {
7
4
  if (typeof styles === 'function') {
8
5
  return styles as X
9
6
  }
package/src/index.ts CHANGED
@@ -2,6 +2,7 @@ import { unistyles } from './Unistyles'
2
2
  import type { UnistylesThemes, UnistylesBreakpoints } from './global'
3
3
  import { ScreenOrientation } from './types'
4
4
 
5
+ export { mq } from './utils'
5
6
  export { useInitialTheme } from './useInitialTheme'
6
7
 
7
8
  export { useStyles } from './useStyles'
@@ -1,3 +1,4 @@
1
+ import type { OpaqueColorValue } from 'react-native'
1
2
  import type { UnistylesBreakpoints } from '../global'
2
3
  import type { MediaQueries } from './mediaQueries'
3
4
 
@@ -25,7 +26,9 @@ export type ExtractBreakpoints<T> = T extends Partial<Record<keyof UnistylesBrea
25
26
  export type RemoveKeysWithPrefix<T> = T extends (...args: Array<any>) => infer R
26
27
  ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R>
27
28
  : T extends object
28
- ? T extends Record<string, infer _V>
29
- ? { [K in keyof T as K extends MediaQueries ? keyof UnistylesBreakpoints & string : K]: RemoveKeysWithPrefix<T[K]> }
30
- : { [K in keyof T]: RemoveKeysWithPrefix<T[K]> }
29
+ ? T extends OpaqueColorValue
30
+ ? string
31
+ : T extends Record<string, infer _V>
32
+ ? { [K in keyof T as K extends MediaQueries ? keyof UnistylesBreakpoints & string : K]: RemoveKeysWithPrefix<T[K]> }
33
+ : { [K in keyof T]: RemoveKeysWithPrefix<T[K]> }
31
34
  : T
package/src/types/core.ts CHANGED
@@ -15,7 +15,7 @@ import type {
15
15
  } from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
16
16
  import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
17
17
  import type { MediaQueries } from './mediaQueries'
18
- import type { UnistylesBreakpoints } from '../global'
18
+ import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
19
19
 
20
20
  type ShadowOffset = {
21
21
  width: number,
@@ -37,37 +37,40 @@ type TransformStyles =
37
37
  & SkewYTransform
38
38
  & MatrixTransform
39
39
 
40
- type UnistyleNested<B> = {
41
- shadowOffset?: DeepUniStyle<ShadowOffset, B>,
42
- textShadowOffset?: DeepUniStyle<ShadowOffset, B>,
43
- transform?: Array<DeepUniStyle<TransformStyles, B>>
40
+ type UnistyleNested = {
41
+ shadowOffset?: DeepUniStyle<ShadowOffset>,
42
+ textShadowOffset?: DeepUniStyle<ShadowOffset>,
43
+ transform?: Array<DeepUniStyle<TransformStyles>>
44
44
  }
45
45
 
46
- type UniStyle<V, B> = {
47
- [innerKey in keyof B]?: V
46
+ type UniStyle<V> = {
47
+ [innerKey in keyof UnistylesBreakpoints]: V
48
48
  } | {
49
- [innerKey in MediaQueries]?: V
50
- } | V
49
+ [innerKey in MediaQueries]: V
50
+ }
51
51
 
52
- type DeepUniStyle<T, B> = {
53
- [K in keyof T]?: UniStyle<T[K], B>
52
+ type DeepUniStyle<T> = {
53
+ [K in keyof T]?: UniStyle<T[K]> | T[K]
54
54
  }
55
55
 
56
56
  // these props are treated differently to nest breakpoints and media queries
57
57
  type NestedTypes = 'shadowOffset' | 'transform' | 'textShadowOffset'
58
58
 
59
- type UnistyleView<B> = DeepUniStyle<Omit<ViewStyle, NestedTypes>, B>
60
- type UnistyleText<B> = DeepUniStyle<Omit<TextStyle, NestedTypes>, B>
61
- type UnistyleImage<B> = DeepUniStyle<Omit<ImageStyle, NestedTypes>, B>
59
+ type UnistyleView = DeepUniStyle<Omit<ViewStyle, NestedTypes>>
60
+ type UnistyleText = DeepUniStyle<Omit<TextStyle, NestedTypes>>
61
+ type UnistyleImage = DeepUniStyle<Omit<ImageStyle, NestedTypes>>
62
62
 
63
- export type StaticStyles<B> =
64
- | UnistyleView<B>
65
- | UnistyleText<B>
66
- | UnistyleImage<B>
67
- & UnistyleNested<B>
63
+ export type StaticStyles =
64
+ | UnistyleView
65
+ | UnistyleText
66
+ | UnistyleImage
67
+ & UnistyleNested
68
68
 
69
69
  export type CustomNamedStyles<T> = {
70
- [K in keyof T]: T[K] extends (...args: infer A) => StaticStyles<UnistylesBreakpoints>
71
- ? (...args: A) => StaticStyles<UnistylesBreakpoints>
72
- : StaticStyles<UnistylesBreakpoints>
70
+ [K in keyof T]: T[K] extends (...args: infer A) => StaticStyles
71
+ ? (...args: A) => StaticStyles
72
+ : StaticStyles
73
73
  }
74
+
75
+ export type NestedKeys = Array<[keyof UnistylesBreakpoints | MediaQueries, string | number | undefined]>
76
+ export type UnistylesTheme = UnistylesThemes[keyof UnistylesThemes]
package/src/types/cxx.ts CHANGED
@@ -1,8 +1,10 @@
1
1
  import type { UnistylesThemes, UnistylesBreakpoints } from '../global'
2
2
  import type { ScreenSize } from './breakpoints'
3
+ import type { NestedKeys } from './core'
3
4
 
5
+ export type Optional<T> = T | undefined
4
6
  export type Nullable<T> = T | null
5
- export type ColorSchemeName = 'light' | 'dark' | undefined
7
+ export type ColorSchemeName = Optional<'light' | 'dark'>
6
8
 
7
9
  export type UnistylesConfig = {
8
10
  adaptiveThemes?: boolean
@@ -64,3 +66,8 @@ export enum UnistylesError {
64
66
  BreakpointsCannotBeEmpty = 'UNISTYLES_ERROR_BREAKPOINTS_CANNOT_BE_EMPTY',
65
67
  BreakpointsMustStartFromZero = 'UNISTYLES_ERROR_BREAKPOINTS_MUST_START_FROM_ZERO',
66
68
  }
69
+
70
+ export interface UnistylesEngine {
71
+ isMediaQuery(key: string): boolean,
72
+ didMatchMediaQuery(keys: NestedKeys): Optional<string>,
73
+ }
@@ -1,6 +1,6 @@
1
1
  export * from './normalizer'
2
2
  export * from './cxx'
3
- export type { CustomNamedStyles } from './core'
3
+ export type { CustomNamedStyles, NestedKeys, UnistylesTheme } from './core'
4
4
  export type { MediaQueries } from './mediaQueries'
5
5
  export type {
6
6
  ScreenSize,
@@ -1,9 +1,14 @@
1
1
  type Optional<TOptional extends string> = TOptional | ''
2
2
  type Separator = ',' | ', '
3
- // this is super weird, but number passes empty string and bigint does not
4
- type MediaQuery = `[${Separator}${bigint}]` | `[${bigint}${Optional<`${Separator}${bigint}`>}]`
5
- type WidthMediaQuery = `:w${MediaQuery}`
6
- type HeightMediaQuery = `:h${MediaQuery}`
3
+ type OpeningBracket = '(' | '['
4
+ type ClosingBracket = ')' | ']'
5
+
6
+ type NumericMediaQuery =
7
+ | `${OpeningBracket}${Separator}${bigint}${ClosingBracket}`
8
+ | `${OpeningBracket}${bigint}${Optional<`${Separator}${bigint}`>}${ClosingBracket}`
9
+
10
+ type WidthMediaQuery = `:w${NumericMediaQuery}`
11
+ type HeightMediaQuery = `:h${NumericMediaQuery}`
7
12
 
8
13
  export type MediaQueries =
9
14
  | `${WidthMediaQuery}${Optional<HeightMediaQuery>}`
package/src/useStyles.ts CHANGED
@@ -3,12 +3,9 @@ import { StyleSheet } from 'react-native'
3
3
  import { parseStyle, proxifyFunction } from './utils'
4
4
  import type { CreateStylesFactory, CustomNamedStyles, ExtractBreakpoints, RemoveKeysWithPrefix } from './types'
5
5
  import { useUnistyles } from './useUnistyles'
6
- import type { UnistylesThemes } from './global'
6
+ import type { UnistylesTheme } from './types'
7
7
 
8
- // todo types
9
- type T = UnistylesThemes[keyof UnistylesThemes]
10
-
11
- export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
8
+ export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | CreateStylesFactory<ST, UnistylesTheme>) => {
12
9
  const { theme, breakpoint, screenSize } = useUnistyles()
13
10
 
14
11
  if (!stylesheet) {
@@ -20,7 +17,7 @@ export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | Cr
20
17
  }
21
18
 
22
19
  const parsedStyles = useMemo(() => typeof stylesheet === 'function'
23
- ? stylesheet(theme!)
20
+ ? stylesheet(theme)
24
21
  : stylesheet, [theme, stylesheet])
25
22
 
26
23
  const dynamicStyleSheet = useMemo(() => Object
@@ -1,16 +1,23 @@
1
1
  import { NativeEventEmitter, NativeModules } from 'react-native'
2
2
  import { useEffect, useState } from 'react'
3
- import type { UnistylesThemeEvent, UnistylesMobileLayoutEvent, UnistylesEvents } from './types'
3
+ import type {
4
+ UnistylesThemeEvent,
5
+ UnistylesMobileLayoutEvent,
6
+ UnistylesEvents,
7
+ ScreenSize,
8
+ UnistylesTheme
9
+ } from './types'
4
10
  import { CxxUnistylesEventTypes, ScreenOrientation } from './types'
5
11
  import { unistyles } from './Unistyles'
12
+ import type { UnistylesBreakpoints } from './global'
6
13
 
7
14
  const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
8
15
 
9
16
  export const useUnistyles = () => {
10
17
  const [orientation, setOrientation] = useState<ScreenOrientation>(unistyles.runtime.orientation)
11
- const [theme, setTheme] = useState(unistyles.runtime.getTheme(unistyles.runtime.themeName))
12
- const [breakpoint, setBreakpoint] = useState(unistyles.runtime.breakpoint)
13
- const [screenSize, setScreenSize] = useState({
18
+ const [theme, setTheme] = useState<UnistylesTheme>(unistyles.runtime.getTheme(unistyles.runtime.themeName))
19
+ const [breakpoint, setBreakpoint] = useState<keyof UnistylesBreakpoints>(unistyles.runtime.breakpoint)
20
+ const [screenSize, setScreenSize] = useState<ScreenSize>({
14
21
  width: unistyles.runtime.screen.width,
15
22
  height: unistyles.runtime.screen.height
16
23
  })
@@ -1,29 +1,9 @@
1
1
  import { unistyles } from '../Unistyles'
2
2
  import { isMobile, Orientation, throwError } from './common'
3
- import type { ScreenSize, MediaQueries } from '../types'
3
+ import type { MediaQueries } from '../types'
4
4
  import { ScreenOrientation } from '../types'
5
- import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries'
6
5
  import type { UnistylesBreakpoints } from '../global'
7
6
 
8
- /**
9
- * Sorts the breakpoints object based on its numeric values in ascending order and validates them.
10
- *
11
- * This function takes an object where keys represent breakpoint names and values are numeric.
12
- * It returns a new object with the same keys but sorted based on their corresponding numeric values.
13
- * Additionally, it validates that:
14
- * 1. The first breakpoint starts with a value of 0.
15
- * 2. No duplicate breakpoint values exist.
16
- *
17
- * If the validation fails, appropriate error messages are logged to the console.
18
- *
19
- * @template B - An object type where keys are strings and values are numbers.
20
- * @param {B} breakpoints - The breakpoints object to be sorted and validated.
21
- * @returns {B} A new object with sorted and validated breakpoints.
22
- *
23
- * @example
24
- * const input = { md: 768, lg: 1024, sm: 0 }
25
- * sortAndValidateBreakpoints(input) // returns { sm: 0, md: 768, lg: 1024 }
26
- */
27
7
  export const sortAndValidateBreakpoints = (breakpoints: UnistylesBreakpoints): UnistylesBreakpoints => {
28
8
  const sortedPairs = Object
29
9
  .entries(breakpoints)
@@ -49,21 +29,6 @@ export const sortAndValidateBreakpoints = (breakpoints: UnistylesBreakpoints): U
49
29
  return sortedBreakpoints
50
30
  }
51
31
 
52
- /**
53
- * Determines the appropriate breakpoint key for a given screen width based on provided breakpoints.
54
- *
55
- * This function takes a screen width and an object of breakpoints. It returns the key of the breakpoint
56
- * that the screen width falls into. The breakpoints are assumed to be sorted in ascending order.
57
- *
58
- * @template B - An object type where keys are strings and values are numbers representing screen widths.
59
- * @param {number} width - The screen width to determine the breakpoint for.
60
- * @param breakpointEntries - sorted pairs of breakpoints
61
- * @returns {keyof B & string} The key of the breakpoint that the screen width falls into.
62
- *
63
- * @example
64
- * const breakpoints = { sm: 0, md: 768, lg: 1024 }
65
- * getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
66
- */
67
32
  export const getBreakpointFromScreenWidth = (width: number, breakpointEntries: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>): keyof UnistylesBreakpoints & string => {
68
33
  const [key] = breakpointEntries
69
34
  .find(([, value], index, otherBreakpoints) => {
@@ -80,40 +45,13 @@ export const getBreakpointFromScreenWidth = (width: number, breakpointEntries: A
80
45
  return key
81
46
  }
82
47
 
83
- /**
84
- * Retrieves the value associated with a given breakpoint or custom media query based on the provided screen size.
85
- *
86
- * The function first checks for custom media queries. If a matching custom media query is found, its associated value is returned.
87
- * If no custom media query matches, the function then checks for a direct breakpoint match.
88
- * If there's no direct breakpoint match, the function simulates CSS cascading to find the closest matching breakpoint.
89
- *
90
- * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
91
- *
92
- * @param {Record<keyof B & string, string | number>} value - An object containing values associated with breakpoints or custom media queries.
93
- * @param {keyof B & string} breakpoint - The breakpoint name to check against.
94
- * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
95
- * @param breakpointPairs - sorted pairs of breakpoints
96
- *
97
- * @returns {string | number | undefined} Returns the value associated with the matching breakpoint or custom media query, or `undefined` if no match is found.
98
- *
99
- * @example
100
- *
101
- * const values = { ':w[200]': 'value1', sm: 'value2', md: 'value3' }
102
- * const screenSize = { width: 250, height: 400 }
103
- * const breakpoints = { sm: 300, md: 600, lg: 900 }
104
- *
105
- * getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
106
- */
107
- export const getValueForBreakpoint = (
108
- value: Record<keyof UnistylesBreakpoints | MediaQueries, string | number | undefined>,
109
- breakpoint: keyof UnistylesBreakpoints,
110
- screenSize: ScreenSize
111
- ): string | number | undefined => {
48
+ export const getValueForBreakpoint = (value: Record<keyof UnistylesBreakpoints | MediaQueries, string | number | undefined>): string | number | undefined => {
112
49
  // the highest priority is for custom media queries
113
50
  const customMediaQueries = Object
114
51
  .entries(value)
115
- .filter(([key]) => isMediaQuery(key))
116
- const customMediaQueryKey = getKeyForCustomMediaQuery(customMediaQueries, screenSize) as keyof typeof value
52
+ .filter(([key]) => unistyles.engine.isMediaQuery(key)) as Array<[keyof UnistylesBreakpoints | MediaQueries, string | number | undefined]>
53
+ // const customMediaQueryKey = getKeyForCustomMediaQuery(customMediaQueries, screenSize) as keyof typeof value
54
+ const customMediaQueryKey = unistyles.engine.didMatchMediaQuery(customMediaQueries) as keyof typeof value
117
55
 
118
56
  if (customMediaQueryKey && customMediaQueryKey in value) {
119
57
  return value[customMediaQueryKey]
@@ -132,19 +70,24 @@ export const getValueForBreakpoint = (
132
70
  ]
133
71
  }
134
72
 
73
+ const breakpoint = unistyles.runtime.breakpoint
74
+
75
+ if (!breakpoint) {
76
+ return undefined
77
+ }
78
+
135
79
  // if user defined breakpoints, then we look for the valid one
136
- const unifiedKey = breakpoint?.toLowerCase() as keyof typeof value
137
- const directBreakpoint = value[unifiedKey]
80
+ const directBreakpoint = value[breakpoint]
138
81
 
139
82
  // if there is a direct key like 'sm' or 'md', or value for this key exists but its undefined
140
- if (directBreakpoint || (unifiedKey in value)) {
83
+ if (directBreakpoint || (breakpoint in value)) {
141
84
  return directBreakpoint
142
85
  }
143
86
 
144
87
  // there is no direct hit for breakpoint nor media-query, let's simulate CSS cascading
145
88
  const breakpointPairs = unistyles.runtime.sortedBreakpoints
146
89
  const currentBreakpoint = breakpointPairs
147
- .findIndex(([key]) => key === unifiedKey)
90
+ .findIndex(([key]) => key === breakpoint)
148
91
 
149
92
  const availableBreakpoints = breakpointPairs
150
93
  .filter(([key], index) => index < currentBreakpoint && key && key in value)
@@ -10,6 +10,8 @@ export const warn = (message: string) => {
10
10
 
11
11
  export const isMobile = Platform.OS === 'android' || Platform.OS === 'ios'
12
12
  export const isWeb = Platform.OS === 'web'
13
+ export const isIOS = Platform.OS === 'ios'
14
+ export const isAndroid = Platform.OS === 'android'
13
15
  export const isServer = typeof window === 'undefined'
14
16
 
15
17
  export const Orientation = {
@@ -1,5 +1,6 @@
1
1
  export { normalizeStyles } from './normalizeStyles'
2
2
  export * from './normalizer'
3
+ export { mq } from './mq'
3
4
  export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForBreakpoint } from './breakpoints'
4
5
  export { proxifyFunction, parseStyle } from './styles'
5
6
  export { isServer, Orientation } from './common'