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

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 (74) 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/types/cxx.js.map +1 -1
  9. package/lib/commonjs/useStyles.js +0 -2
  10. package/lib/commonjs/useStyles.js.map +1 -1
  11. package/lib/commonjs/utils/breakpoints.js +11 -68
  12. package/lib/commonjs/utils/breakpoints.js.map +1 -1
  13. package/lib/commonjs/utils/common.js +3 -1
  14. package/lib/commonjs/utils/common.js.map +1 -1
  15. package/lib/commonjs/utils/mediaQueries.js +57 -155
  16. package/lib/commonjs/utils/mediaQueries.js.map +1 -1
  17. package/lib/commonjs/utils/styles.js +11 -51
  18. package/lib/commonjs/utils/styles.js.map +1 -1
  19. package/lib/module/Unistyles.js +2 -2
  20. package/lib/module/Unistyles.js.map +1 -1
  21. package/lib/module/UnistylesEngine.js +7 -3
  22. package/lib/module/UnistylesEngine.js.map +1 -1
  23. package/lib/module/createStyleSheet.js.map +1 -1
  24. package/lib/module/types/cxx.js.map +1 -1
  25. package/lib/module/useStyles.js +0 -3
  26. package/lib/module/useStyles.js.map +1 -1
  27. package/lib/module/utils/breakpoints.js +11 -68
  28. package/lib/module/utils/breakpoints.js.map +1 -1
  29. package/lib/module/utils/common.js +2 -0
  30. package/lib/module/utils/common.js.map +1 -1
  31. package/lib/module/utils/mediaQueries.js +57 -155
  32. package/lib/module/utils/mediaQueries.js.map +1 -1
  33. package/lib/module/utils/styles.js +10 -51
  34. package/lib/module/utils/styles.js.map +1 -1
  35. package/lib/typescript/src/Unistyles.d.ts +2 -2
  36. package/lib/typescript/src/Unistyles.d.ts.map +1 -1
  37. package/lib/typescript/src/UnistylesEngine.d.ts +4 -1
  38. package/lib/typescript/src/UnistylesEngine.d.ts.map +1 -1
  39. package/lib/typescript/src/createStyleSheet.d.ts +2 -5
  40. package/lib/typescript/src/createStyleSheet.d.ts.map +1 -1
  41. package/lib/typescript/src/types/breakpoints.d.ts +2 -1
  42. package/lib/typescript/src/types/breakpoints.d.ts.map +1 -1
  43. package/lib/typescript/src/types/core.d.ts +18 -16
  44. package/lib/typescript/src/types/core.d.ts.map +1 -1
  45. package/lib/typescript/src/types/cxx.d.ts +7 -1
  46. package/lib/typescript/src/types/cxx.d.ts.map +1 -1
  47. package/lib/typescript/src/types/index.d.ts +1 -1
  48. package/lib/typescript/src/types/index.d.ts.map +1 -1
  49. package/lib/typescript/src/types/mediaQueries.d.ts +5 -3
  50. package/lib/typescript/src/types/mediaQueries.d.ts.map +1 -1
  51. package/lib/typescript/src/useStyles.d.ts +1 -3
  52. package/lib/typescript/src/useStyles.d.ts.map +1 -1
  53. package/lib/typescript/src/utils/breakpoints.d.ts +2 -60
  54. package/lib/typescript/src/utils/breakpoints.d.ts.map +1 -1
  55. package/lib/typescript/src/utils/common.d.ts +2 -0
  56. package/lib/typescript/src/utils/common.d.ts.map +1 -1
  57. package/lib/typescript/src/utils/mediaQueries.d.ts +8 -127
  58. package/lib/typescript/src/utils/mediaQueries.d.ts.map +1 -1
  59. package/lib/typescript/src/utils/styles.d.ts +1 -46
  60. package/lib/typescript/src/utils/styles.d.ts.map +1 -1
  61. package/package.json +10 -1
  62. package/src/Unistyles.ts +3 -3
  63. package/src/UnistylesEngine.ts +12 -3
  64. package/src/createStyleSheet.ts +2 -5
  65. package/src/types/breakpoints.ts +6 -3
  66. package/src/types/core.ts +25 -22
  67. package/src/types/cxx.ts +8 -1
  68. package/src/types/index.ts +1 -1
  69. package/src/types/mediaQueries.ts +9 -4
  70. package/src/useStyles.ts +3 -6
  71. package/src/utils/breakpoints.ts +14 -71
  72. package/src/utils/common.ts +2 -0
  73. package/src/utils/mediaQueries.ts +102 -163
  74. package/src/utils/styles.ts +13 -55
@@ -1 +1 @@
1
- {"version":3,"file":"useStyles.d.ts","sourceRoot":"","sources":["../../../src/useStyles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAE/G,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG/C,KAAK,CAAC,GAAG,eAAe,CAAC,MAAM,eAAe,CAAC,CAAA;AAE/C,eAAO,MAAM,SAAS;;;;CAsCrB,CAAA"}
1
+ {"version":3,"file":"useStyles.d.ts","sourceRoot":"","sources":["../../../src/useStyles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAE/G,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C,eAAO,MAAM,SAAS;;;;CAsCrB,CAAA"}
@@ -1,64 +1,6 @@
1
- import type { ScreenSize, MediaQueries } from '../types';
1
+ import type { MediaQueries } from '../types';
2
2
  import type { UnistylesBreakpoints } from '../global';
3
- /**
4
- * Sorts the breakpoints object based on its numeric values in ascending order and validates them.
5
- *
6
- * This function takes an object where keys represent breakpoint names and values are numeric.
7
- * It returns a new object with the same keys but sorted based on their corresponding numeric values.
8
- * Additionally, it validates that:
9
- * 1. The first breakpoint starts with a value of 0.
10
- * 2. No duplicate breakpoint values exist.
11
- *
12
- * If the validation fails, appropriate error messages are logged to the console.
13
- *
14
- * @template B - An object type where keys are strings and values are numbers.
15
- * @param {B} breakpoints - The breakpoints object to be sorted and validated.
16
- * @returns {B} A new object with sorted and validated breakpoints.
17
- *
18
- * @example
19
- * const input = { md: 768, lg: 1024, sm: 0 }
20
- * sortAndValidateBreakpoints(input) // returns { sm: 0, md: 768, lg: 1024 }
21
- */
22
3
  export declare const sortAndValidateBreakpoints: (breakpoints: UnistylesBreakpoints) => UnistylesBreakpoints;
23
- /**
24
- * Determines the appropriate breakpoint key for a given screen width based on provided breakpoints.
25
- *
26
- * This function takes a screen width and an object of breakpoints. It returns the key of the breakpoint
27
- * that the screen width falls into. The breakpoints are assumed to be sorted in ascending order.
28
- *
29
- * @template B - An object type where keys are strings and values are numbers representing screen widths.
30
- * @param {number} width - The screen width to determine the breakpoint for.
31
- * @param breakpointEntries - sorted pairs of breakpoints
32
- * @returns {keyof B & string} The key of the breakpoint that the screen width falls into.
33
- *
34
- * @example
35
- * const breakpoints = { sm: 0, md: 768, lg: 1024 }
36
- * getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
37
- */
38
4
  export declare const getBreakpointFromScreenWidth: (width: number, breakpointEntries: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>) => keyof UnistylesBreakpoints & string;
39
- /**
40
- * Retrieves the value associated with a given breakpoint or custom media query based on the provided screen size.
41
- *
42
- * The function first checks for custom media queries. If a matching custom media query is found, its associated value is returned.
43
- * If no custom media query matches, the function then checks for a direct breakpoint match.
44
- * If there's no direct breakpoint match, the function simulates CSS cascading to find the closest matching breakpoint.
45
- *
46
- * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
47
- *
48
- * @param {Record<keyof B & string, string | number>} value - An object containing values associated with breakpoints or custom media queries.
49
- * @param {keyof B & string} breakpoint - The breakpoint name to check against.
50
- * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
51
- * @param breakpointPairs - sorted pairs of breakpoints
52
- *
53
- * @returns {string | number | undefined} Returns the value associated with the matching breakpoint or custom media query, or `undefined` if no match is found.
54
- *
55
- * @example
56
- *
57
- * const values = { ':w[200]': 'value1', sm: 'value2', md: 'value3' }
58
- * const screenSize = { width: 250, height: 400 }
59
- * const breakpoints = { sm: 300, md: 600, lg: 900 }
60
- *
61
- * getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
62
- */
63
- export declare const getValueForBreakpoint: (value: Record<keyof UnistylesBreakpoints | MediaQueries, string | number | undefined>, breakpoint: keyof UnistylesBreakpoints, screenSize: ScreenSize) => string | number | undefined;
5
+ export declare const getValueForBreakpoint: (value: Record<keyof UnistylesBreakpoints | MediaQueries, string | number | undefined>) => string | number | undefined;
64
6
  //# sourceMappingURL=breakpoints.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../src/utils/breakpoints.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAGxD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAErD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,0BAA0B,gBAAiB,oBAAoB,KAAG,oBAuB9E,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,4BAA4B,UAAW,MAAM,qBAAqB,MAAM,CAAC,MAAM,oBAAoB,EAAE,oBAAoB,CAAC,MAAM,oBAAoB,CAAC,CAAC,CAAC,KAAG,MAAM,oBAAoB,GAAG,MAcnM,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,qBAAqB,UACvB,OAAO,MAAM,oBAAoB,GAAG,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,cACzE,MAAM,oBAAoB,cAC1B,UAAU,KACvB,MAAM,GAAG,MAAM,GAAG,SA6CpB,CAAA"}
1
+ {"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../src/utils/breakpoints.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAE5C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAErD,eAAO,MAAM,0BAA0B,gBAAiB,oBAAoB,KAAG,oBAuB9E,CAAA;AAED,eAAO,MAAM,4BAA4B,UAAW,MAAM,qBAAqB,MAAM,CAAC,MAAM,oBAAoB,EAAE,oBAAoB,CAAC,MAAM,oBAAoB,CAAC,CAAC,CAAC,KAAG,MAAM,oBAAoB,GAAG,MAcnM,CAAA;AAED,eAAO,MAAM,qBAAqB,UAAW,OAAO,MAAM,oBAAoB,GAAG,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,KAAG,MAAM,GAAG,MAAM,GAAG,SAmD/I,CAAA"}
@@ -2,6 +2,8 @@ export declare const throwError: (message: string) => never;
2
2
  export declare const warn: (message: string) => void;
3
3
  export declare const isMobile: boolean;
4
4
  export declare const isWeb: boolean;
5
+ export declare const isIOS: boolean;
6
+ export declare const isAndroid: boolean;
5
7
  export declare const isServer: boolean;
6
8
  export declare const Orientation: {
7
9
  readonly Landscape: "landscape";
@@ -1 +1 @@
1
- {"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/utils/common.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,YAAa,MAAM,UAEzC,CAAA;AAED,eAAO,MAAM,IAAI,YAAa,MAAM,SAEnC,CAAA;AAED,eAAO,MAAM,QAAQ,SAAqD,CAAA;AAC1E,eAAO,MAAM,KAAK,SAAwB,CAAA;AAC1C,eAAO,MAAM,QAAQ,SAAgC,CAAA;AAErD,eAAO,MAAM,WAAW;;;CAGd,CAAA"}
1
+ {"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/utils/common.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,YAAa,MAAM,UAEzC,CAAA;AAED,eAAO,MAAM,IAAI,YAAa,MAAM,SAEnC,CAAA;AAED,eAAO,MAAM,QAAQ,SAAqD,CAAA;AAC1E,eAAO,MAAM,KAAK,SAAwB,CAAA;AAC1C,eAAO,MAAM,KAAK,SAAwB,CAAA;AAC1C,eAAO,MAAM,SAAS,SAA4B,CAAA;AAClD,eAAO,MAAM,QAAQ,SAAgC,CAAA;AAErD,eAAO,MAAM,WAAW;;;CAGd,CAAA"}
@@ -1,130 +1,11 @@
1
+ import type { UnistylesBreakpoints } from 'react-native-unistyles';
1
2
  import type { ScreenSize } from '../types';
2
- /**
3
- * Extracts numeric values from a coded string.
4
- *
5
- * The function is designed to process strings that have a format like "w[100,200]" or "h[300]".
6
- * It removes characters 'w', 'h', '[', and ']' from the input string and then extracts the numbers.
7
- *
8
- * @param {string} codedValue - The input string to extract values from.
9
- * @returns {Array<number>} An array of extracted numbers. Can contain one or two numbers based on the input format.
10
- *
11
- * @example
12
- * extractValues("w[100,200]") // returns [100, 200]
13
- * extractValues("h[300]") // returns [300]
14
- * extractValues("h[,300]") // returns [0,300]
15
- * extractValues("h[100,]") // returns [100]
16
- */
17
- export declare const extractValues: (codedValue: string) => Array<number>;
18
- /**
19
- * Determines if the given screen size matches the specified breakpoint query.
20
- *
21
- * The function checks if the screen size (width and/or height) falls within the range
22
- * specified by the breakpoint query. The query can specify width (using 'w'), height (using 'h'),
23
- * or both.
24
- *
25
- * @param {string} query - The breakpoint query string. Examples: 'w[100,200]', 'h[300]', 'w[100,200]h[300,400]'.
26
- * @param {ScreenSize} screenSize - The screen size to check against the breakpoint query.
27
- * @returns {boolean} True if the screen size matches the breakpoint query, false otherwise.
28
- *
29
- * @example
30
- * const screenSize = { width: 150, height: 350 }
31
- * isWithinBreakpoint('w[100,200]', screenSize) // returns true
32
- * isWithinBreakpoint('h[400]', screenSize) // returns false
33
- */
34
- export declare const isWithinBreakpoint: (query: string, screenSize: ScreenSize) => boolean;
35
- /**
36
- * Determines if the given width matches the specified width range in the query.
37
- *
38
- * The function checks if the provided width falls within the range specified by the query.
39
- * The query specifies a width range using a format like 'w[100,200]'. If only one value is provided,
40
- * it's treated as a minimum width.
41
- *
42
- * @param {string} query - The width query string. Examples: 'w[100,200]' or 'w[100]'.
43
- * @param {number} width - The width to check against the query.
44
- * @returns {boolean} True if the width matches the query range, false otherwise.
45
- *
46
- * @example
47
- * isWithinTheWidth('w[100,200]', 150) // returns true
48
- * isWithinTheWidth('w[100]', 50) // returns false
49
- * isWithinTheWidth('w[100]', 150) // returns true
50
- */
51
- export declare const isWithinTheWidth: (query: string, width: number) => boolean;
52
- /**
53
- * Determines if the given height matches the specified height range in the query.
54
- *
55
- * The function checks if the provided height falls within the range specified by the query.
56
- * The query specifies a height range using a format like 'h[100,200]'. If only one value is provided,
57
- * it's treated as a minimum height.
58
- *
59
- * @param {string} query - The height query string. Examples: 'h[100,200]' or 'h[100]'.
60
- * @param {number} height - The height to check against the query.
61
- * @returns {boolean} True if the height matches the query range, false otherwise.
62
- *
63
- * @example
64
- * isWithinTheHeight('h[100,200]', 150) // returns true
65
- * isWithinTheHeight('h[100]', 50) // returns false
66
- * isWithinTheHeight('h[100]', 150) // returns true
67
- */
68
- export declare const isWithinTheHeight: (query: string, height: number) => boolean;
69
- /**
70
- * Determines if the given screen size matches both the specified width and height ranges in the query.
71
- *
72
- * The function checks if the provided screen size (both width and height) falls within the ranges
73
- * specified by the query. The query can specify both width and height using a format like 'w[100,200]:h[300,400]'.
74
- *
75
- * @param {string} query - The combined width and height query string. Example: 'w[100,200]:h[300,400]'.
76
- * @param {ScreenSize} screenSize - The screen size to check against the query.
77
- * @returns {boolean} True if the screen size matches both the width and height ranges in the query, false otherwise.
78
- *
79
- * @example
80
- * const screenSize = { width: 150, height: 350 }
81
- * isWithinTheWidthAndHeight('w[100,200]:h[300,400]', screenSize) // returns true
82
- * isWithinTheWidthAndHeight('w[100,200]:h[400,500]', screenSize) // returns false
83
- */
84
- export declare const isWithinTheWidthAndHeight: (query: string, screenSize: ScreenSize) => boolean;
85
- /**
86
- * Checks if the given query string is a valid custom media query.
87
- *
88
- * The valid custom media query formats include:
89
- * - :w[200]
90
- * - :w[0, 200]
91
- * - :w[, 300]
92
- * - :h[200]
93
- * - :h[0, 500]
94
- * - :h[,200]
95
- * - :w[100, 300]:h[200,500]
96
- * - :h[200,500]:w[100, 300]
97
- *
98
- * @param {string} query - The query string to be checked.
99
- * @returns {boolean} Returns `true` if the query is a valid custom media query, otherwise `false`.
100
- * @example
101
- *
102
- * isMediaQuery(':w[200]') // true
103
- * isMediaQuery(':w100]') // false
104
- */
3
+ import type { MediaQueries } from '../types';
4
+ export declare const extractValues: (pattern: string, breakpoints: UnistylesBreakpoints) => Array<number>;
5
+ export declare const isWithinBreakpoint: (query: string, screenSize: ScreenSize, breakpoints: UnistylesBreakpoints) => boolean;
6
+ export declare const isWithinTheWidth: (query: string, width: number, breakpoints: UnistylesBreakpoints) => boolean;
7
+ export declare const isWithinTheHeight: (query: string, height: number, breakpoints: UnistylesBreakpoints) => boolean;
8
+ export declare const isWithinTheWidthAndHeight: (query: string, screenSize: ScreenSize, breakpoints: UnistylesBreakpoints) => boolean;
105
9
  export declare const isMediaQuery: (query: string) => boolean;
106
- /**
107
- * Retrieves the first matching custom media query key based on the provided screen size.
108
- *
109
- * The function processes an array of media queries and returns the first query that matches
110
- * the given screen size. The media queries can be in formats like:
111
- * - w[200]
112
- * - w[0, 200]
113
- * - w[, 300]
114
- * - h[200]
115
- * - h[0, 500]
116
- * - h[,200]
117
- * - w[100, 300]:h[200,500]
118
- * - h[200,500]:w[100, 300]
119
- *
120
- * @param {Array<[string, string | number]>} mediaQueries - An array of tuples containing media query keys and associated values.
121
- * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
122
- * @returns {string | undefined} Returns the first matching media query key or `undefined` if no match is found.
123
- * @example
124
- *
125
- * const queries = [[':w[200]', 'value1'], [':h[300,500]', 'value2']]
126
- * const size = { width: 250, height: 400 }
127
- * getKeyForCustomMediaQuery(queries, size) // ':w[200]
128
- */
129
- export declare const getKeyForCustomMediaQuery: (mediaQueries: Array<[string, string | number | undefined]>, screenSize: ScreenSize) => string | undefined;
10
+ export declare const getKeyForCustomMediaQuery: (mediaQueries: Array<[keyof UnistylesBreakpoints | MediaQueries, string | number | undefined]>, screenSize: ScreenSize, breakpoints: UnistylesBreakpoints) => string | undefined;
130
11
  //# sourceMappingURL=mediaQueries.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"mediaQueries.d.ts","sourceRoot":"","sources":["../../../../src/utils/mediaQueries.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,eAAgB,MAAM,KAAG,MAAM,MAAM,CAoB9D,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,kBAAkB,UAAW,MAAM,cAAc,UAAU,KAAG,OAc1E,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,gBAAgB,UAAW,MAAM,SAAS,MAAM,KAAG,OAQ/D,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,iBAAiB,UAAW,MAAM,UAAU,MAAM,KAAG,OAQjE,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,yBAAyB,UAAW,MAAM,cAAc,UAAU,KAAG,OAQjF,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,YAAY,UAAW,MAAM,KAAG,OAI5C,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,yBAAyB,iBAAkB,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC,cAAc,UAAU,KAAG,MAAM,GAAG,SAevI,CAAA"}
1
+ {"version":3,"file":"mediaQueries.d.ts","sourceRoot":"","sources":["../../../../src/utils/mediaQueries.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAC1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAyD5C,eAAO,MAAM,aAAa,YAAa,MAAM,eAAe,oBAAoB,KAAG,MAAM,MAAM,CAyB9F,CAAA;AAED,eAAO,MAAM,kBAAkB,UAAW,MAAM,cAAc,UAAU,eAAe,oBAAoB,KAAG,OAiB7G,CAAA;AAED,eAAO,MAAM,gBAAgB,UAAW,MAAM,SAAS,MAAM,eAAe,oBAAoB,KAAG,OAQlG,CAAA;AAED,eAAO,MAAM,iBAAiB,UAAW,MAAM,UAAU,MAAM,eAAe,oBAAoB,KAAG,OAQpG,CAAA;AAED,eAAO,MAAM,yBAAyB,UAAW,MAAM,cAAc,UAAU,eAAe,oBAAoB,KAAG,OAQpH,CAAA;AAED,eAAO,MAAM,YAAY,UAAW,MAAM,KAAG,OAI5C,CAAA;AAED,eAAO,MAAM,yBAAyB,iBACpB,MAAM,CAAC,MAAM,oBAAoB,GAAG,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC,cACjF,UAAU,eACT,oBAAoB,KAClC,MAAM,GAAG,SAMX,CAAA"}
@@ -1,51 +1,6 @@
1
1
  import type { CustomNamedStyles, ScreenSize } from '../types';
2
2
  import type { UnistylesBreakpoints } from '../global';
3
- /**
4
- * Proxies a function to parse its return value for custom media queries or breakpoints.
5
- *
6
- * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
7
- *
8
- * @param {Function} fn - The function to be proxified.
9
- * @param {keyof B & string} breakpoint - The breakpoint name to check against.
10
- * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
11
- * @param breakpointPairs - sorted pairs of breakpoints
12
- *
13
- * @returns {Function} Returns the proxified function
14
- *
15
- * @example
16
- *
17
- * const myFunction = () => ({ ':w[200]': 'value1', sm: 'value2' })
18
- * const screenSize = { width: 250, height: 400 }
19
- * const breakpoints = { sm: 300, md: 600 }
20
- *
21
- * const proxifiedFunction = proxifyFunction(myFunction, 'sm', screenSize, breakpoints)
22
- * proxifiedFunction() // parsed style based on screenSize and breakpoints
23
- */
24
3
  export declare const proxifyFunction: (fn: Function, breakpoint: keyof UnistylesBreakpoints & string, screenSize: ScreenSize) => Function;
25
- /**
26
- * Parses a style object to resolve custom media queries or breakpoints based on the provided screen size and breakpoints.
27
- *
28
- * The function processes each key-value pair in the style object. If the value is a function or a valid style (not an object or a 'transform' key),
29
- * it is returned as-is. Otherwise, the function attempts to resolve the value based on the provided breakpoint, screen size, and defined breakpoints.
30
- *
31
- * @template T - The type of the style object.
32
- * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
33
- *
34
- * @param {CustomNamedStyles<T, B>} style - The style object to be parsed.
35
- * @param {keyof B & string} breakpoint - The breakpoint name to check against.
36
- * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
37
- * @param breakpointPairs - sorted pairs of breakpoints
38
- *
39
- * @returns {Record<string, string | number | Function>} Returns the parsed style object with resolved custom media queries or breakpoints.
40
- *
41
- * @example
42
- *
43
- * const style = { fontSize: { sm: '12px', md: '16px' } }
44
- * const screenSize = { width: 300, height: 400 }
45
- * const breakpoints = { xs: 0, sm: 300, md: 600 }
46
- *
47
- * const parsedStyle = parseStyle(style, 'sm', screenSize, breakpoints)
48
- * // { fontSize: '12px' }
49
- */
4
+ export declare const isPlatformColor: <T extends {}>(value: T) => boolean;
50
5
  export declare const parseStyle: <T>(style: CustomNamedStyles<T>, breakpoint: keyof UnistylesBreakpoints & string, screenSize: ScreenSize) => T;
51
6
  //# sourceMappingURL=styles.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAI7D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAErD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,OACpB,QAAQ,cAAc,MAAM,oBAAoB,GAAG,MAAM,cACjD,UAAU,KACvB,QAGD,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,UAAU,+CAEP,MAAM,oBAAoB,GAAG,MAAM,cACnC,UAAU,MAiDzB,CAAA"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAgB,UAAU,EAAE,MAAM,UAAU,CAAA;AAG3E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAGrD,eAAO,MAAM,eAAe,OACpB,QAAQ,cAAc,MAAM,oBAAoB,GAAG,MAAM,cACjD,UAAU,KACvB,QAGD,CAAA;AAEF,eAAO,MAAM,eAAe,8BAA6B,OAMxD,CAAA;AAED,eAAO,MAAM,UAAU,+CAEP,MAAM,oBAAoB,GAAG,MAAM,cACnC,UAAU,MA6CzB,CAAA"}
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.6",
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
  }
@@ -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