react-native-unistyles 1.0.0-beta.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (84) hide show
  1. package/LICENSE +20 -0
  2. package/README.md +243 -0
  3. package/lib/commonjs/UnistylesTheme.js +21 -0
  4. package/lib/commonjs/UnistylesTheme.js.map +1 -0
  5. package/lib/commonjs/createUnistyles.js +52 -0
  6. package/lib/commonjs/createUnistyles.js.map +1 -0
  7. package/lib/commonjs/index.js +20 -0
  8. package/lib/commonjs/index.js.map +1 -0
  9. package/lib/commonjs/types.js +6 -0
  10. package/lib/commonjs/types.js.map +1 -0
  11. package/lib/commonjs/utils/breakpoints.js +139 -0
  12. package/lib/commonjs/utils/breakpoints.js.map +1 -0
  13. package/lib/commonjs/utils/breakpoints.spec.js +149 -0
  14. package/lib/commonjs/utils/breakpoints.spec.js.map +1 -0
  15. package/lib/commonjs/utils/common.js +11 -0
  16. package/lib/commonjs/utils/common.js.map +1 -0
  17. package/lib/commonjs/utils/index.js +32 -0
  18. package/lib/commonjs/utils/index.js.map +1 -0
  19. package/lib/commonjs/utils/mediaQueries.js +189 -0
  20. package/lib/commonjs/utils/mediaQueries.js.map +1 -0
  21. package/lib/commonjs/utils/mediaQueries.spec.js +220 -0
  22. package/lib/commonjs/utils/mediaQueries.spec.js.map +1 -0
  23. package/lib/commonjs/utils/styles.js +82 -0
  24. package/lib/commonjs/utils/styles.js.map +1 -0
  25. package/lib/commonjs/utils/styles.spec.js +98 -0
  26. package/lib/commonjs/utils/styles.spec.js.map +1 -0
  27. package/lib/module/UnistylesTheme.js +12 -0
  28. package/lib/module/UnistylesTheme.js.map +1 -0
  29. package/lib/module/createUnistyles.js +45 -0
  30. package/lib/module/createUnistyles.js.map +1 -0
  31. package/lib/module/index.js +3 -0
  32. package/lib/module/index.js.map +1 -0
  33. package/lib/module/types.js +2 -0
  34. package/lib/module/types.js.map +1 -0
  35. package/lib/module/utils/breakpoints.js +131 -0
  36. package/lib/module/utils/breakpoints.js.map +1 -0
  37. package/lib/module/utils/breakpoints.spec.js +147 -0
  38. package/lib/module/utils/breakpoints.spec.js.map +1 -0
  39. package/lib/module/utils/common.js +4 -0
  40. package/lib/module/utils/common.js.map +1 -0
  41. package/lib/module/utils/index.js +3 -0
  42. package/lib/module/utils/index.js.map +1 -0
  43. package/lib/module/utils/mediaQueries.js +176 -0
  44. package/lib/module/utils/mediaQueries.js.map +1 -0
  45. package/lib/module/utils/mediaQueries.spec.js +218 -0
  46. package/lib/module/utils/mediaQueries.spec.js.map +1 -0
  47. package/lib/module/utils/styles.js +75 -0
  48. package/lib/module/utils/styles.js.map +1 -0
  49. package/lib/module/utils/styles.spec.js +96 -0
  50. package/lib/module/utils/styles.spec.js.map +1 -0
  51. package/lib/typescript/src/UnistylesTheme.d.ts +9 -0
  52. package/lib/typescript/src/UnistylesTheme.d.ts.map +1 -0
  53. package/lib/typescript/src/createUnistyles.d.ts +9 -0
  54. package/lib/typescript/src/createUnistyles.d.ts.map +1 -0
  55. package/lib/typescript/src/index.d.ts +3 -0
  56. package/lib/typescript/src/index.d.ts.map +1 -0
  57. package/lib/typescript/src/types.d.ts +27 -0
  58. package/lib/typescript/src/types.d.ts.map +1 -0
  59. package/lib/typescript/src/utils/breakpoints.d.ts +63 -0
  60. package/lib/typescript/src/utils/breakpoints.d.ts.map +1 -0
  61. package/lib/typescript/src/utils/breakpoints.spec.d.ts +2 -0
  62. package/lib/typescript/src/utils/breakpoints.spec.d.ts.map +1 -0
  63. package/lib/typescript/src/utils/common.d.ts +2 -0
  64. package/lib/typescript/src/utils/common.d.ts.map +1 -0
  65. package/lib/typescript/src/utils/index.d.ts +3 -0
  66. package/lib/typescript/src/utils/index.d.ts.map +1 -0
  67. package/lib/typescript/src/utils/mediaQueries.d.ts +130 -0
  68. package/lib/typescript/src/utils/mediaQueries.d.ts.map +1 -0
  69. package/lib/typescript/src/utils/mediaQueries.spec.d.ts +2 -0
  70. package/lib/typescript/src/utils/mediaQueries.spec.d.ts.map +1 -0
  71. package/lib/typescript/src/utils/styles.d.ts +56 -0
  72. package/lib/typescript/src/utils/styles.d.ts.map +1 -0
  73. package/lib/typescript/src/utils/styles.spec.d.ts +2 -0
  74. package/lib/typescript/src/utils/styles.spec.d.ts.map +1 -0
  75. package/package.json +132 -0
  76. package/src/UnistylesTheme.tsx +17 -0
  77. package/src/createUnistyles.ts +56 -0
  78. package/src/index.ts +2 -0
  79. package/src/types.ts +52 -0
  80. package/src/utils/breakpoints.ts +140 -0
  81. package/src/utils/common.ts +3 -0
  82. package/src/utils/index.ts +2 -0
  83. package/src/utils/mediaQueries.ts +201 -0
  84. package/src/utils/styles.ts +95 -0
@@ -0,0 +1,176 @@
1
+ /**
2
+ * Extracts numeric values from a coded string.
3
+ *
4
+ * The function is designed to process strings that have a format like "w[100,200]" or "h[300]".
5
+ * It removes characters 'w', 'h', '[', and ']' from the input string and then extracts the numbers.
6
+ *
7
+ * @param {string} codedValue - The input string to extract values from.
8
+ * @returns {Array<number>} An array of extracted numbers. Can contain one or two numbers based on the input format.
9
+ *
10
+ * @example
11
+ * extractValues("w[100,200]") // returns [100, 200]
12
+ * extractValues("h[300]") // returns [300]
13
+ * extractValues("h[,300]") // returns [0,300]
14
+ * extractValues("h[100,]") // returns [100]
15
+ */
16
+ export const extractValues = codedValue => {
17
+ const [lh, rh] = codedValue.replace(/[wh[\]]/g, '').split(',');
18
+ return rh ? [Number(lh), Number(rh)] : [Number(lh)];
19
+ };
20
+
21
+ /**
22
+ * Determines if the given screen size matches the specified breakpoint query.
23
+ *
24
+ * The function checks if the screen size (width and/or height) falls within the range
25
+ * specified by the breakpoint query. The query can specify width (using 'w'), height (using 'h'),
26
+ * or both.
27
+ *
28
+ * @param {string} query - The breakpoint query string. Examples: 'w[100,200]', 'h[300]', 'w[100,200]h[300,400]'.
29
+ * @param {ScreenSize} screenSize - The screen size to check against the breakpoint query.
30
+ * @returns {boolean} True if the screen size matches the breakpoint query, false otherwise.
31
+ *
32
+ * @example
33
+ * const screenSize = { width: 150, height: 350 }
34
+ * isWithinBreakpoint('w[100,200]', screenSize) // returns true
35
+ * isWithinBreakpoint('h[400]', screenSize) // returns false
36
+ */
37
+ export const isWithinBreakpoint = (query, screenSize) => {
38
+ if (query.includes('w') && query.includes('h')) {
39
+ return isWithinTheWidthAndHeight(query, screenSize);
40
+ }
41
+ if (query.charAt(0) === 'w') {
42
+ return isWithinTheWidth(query, screenSize.width);
43
+ }
44
+ if (query.charAt(0) === 'h') {
45
+ return isWithinTheHeight(query, screenSize.height);
46
+ }
47
+ return false;
48
+ };
49
+
50
+ /**
51
+ * Determines if the given width matches the specified width range in the query.
52
+ *
53
+ * The function checks if the provided width falls within the range specified by the query.
54
+ * The query specifies a width range using a format like 'w[100,200]'. If only one value is provided,
55
+ * it's treated as a minimum width.
56
+ *
57
+ * @param {string} query - The width query string. Examples: 'w[100,200]' or 'w[100]'.
58
+ * @param {number} width - The width to check against the query.
59
+ * @returns {boolean} True if the width matches the query range, false otherwise.
60
+ *
61
+ * @example
62
+ * isWithinTheWidth('w[100,200]', 150) // returns true
63
+ * isWithinTheWidth('w[100]', 50) // returns false
64
+ * isWithinTheWidth('w[100]', 150) // returns true
65
+ */
66
+ export const isWithinTheWidth = (query, width) => {
67
+ const [minWidth, maxWidth] = extractValues(query);
68
+ if (maxWidth && width >= minWidth && width <= maxWidth) {
69
+ return true;
70
+ }
71
+ return !maxWidth && width >= minWidth;
72
+ };
73
+
74
+ /**
75
+ * Determines if the given height matches the specified height range in the query.
76
+ *
77
+ * The function checks if the provided height falls within the range specified by the query.
78
+ * The query specifies a height range using a format like 'h[100,200]'. If only one value is provided,
79
+ * it's treated as a minimum height.
80
+ *
81
+ * @param {string} query - The height query string. Examples: 'h[100,200]' or 'h[100]'.
82
+ * @param {number} height - The height to check against the query.
83
+ * @returns {boolean} True if the height matches the query range, false otherwise.
84
+ *
85
+ * @example
86
+ * isWithinTheHeight('h[100,200]', 150) // returns true
87
+ * isWithinTheHeight('h[100]', 50) // returns false
88
+ * isWithinTheHeight('h[100]', 150) // returns true
89
+ */
90
+ export const isWithinTheHeight = (query, height) => {
91
+ const [minHeight, maxHeight] = extractValues(query);
92
+ if (maxHeight && height >= minHeight && height <= maxHeight) {
93
+ return true;
94
+ }
95
+ return !maxHeight && height >= minHeight;
96
+ };
97
+
98
+ /**
99
+ * Determines if the given screen size matches both the specified width and height ranges in the query.
100
+ *
101
+ * The function checks if the provided screen size (both width and height) falls within the ranges
102
+ * specified by the query. The query can specify both width and height using a format like 'w[100,200]:h[300,400]'.
103
+ *
104
+ * @param {string} query - The combined width and height query string. Example: 'w[100,200]:h[300,400]'.
105
+ * @param {ScreenSize} screenSize - The screen size to check against the query.
106
+ * @returns {boolean} True if the screen size matches both the width and height ranges in the query, false otherwise.
107
+ *
108
+ * @example
109
+ * const screenSize = { width: 150, height: 350 }
110
+ * isWithinTheWidthAndHeight('w[100,200]:h[300,400]', screenSize) // returns true
111
+ * isWithinTheWidthAndHeight('w[100,200]:h[400,500]', screenSize) // returns false
112
+ */
113
+ export const isWithinTheWidthAndHeight = (query, screenSize) => {
114
+ const result = query.split(':').filter(Boolean).map(q => isWithinBreakpoint(q, screenSize)).filter(Boolean);
115
+ return result.length === 2;
116
+ };
117
+
118
+ /**
119
+ * Checks if the given query string is a valid custom media query.
120
+ *
121
+ * The valid custom media query formats include:
122
+ * - :w[200]
123
+ * - :w[0, 200]
124
+ * - :w[, 300]
125
+ * - :h[200]
126
+ * - :h[0, 500]
127
+ * - :h[,200]
128
+ * - :w[100, 300]:h[200,500]
129
+ * - :h[200,500]:w[100, 300]
130
+ *
131
+ * @param {string} query - The query string to be checked.
132
+ * @returns {boolean} Returns `true` if the query is a valid custom media query, otherwise `false`.
133
+ * @example
134
+ *
135
+ * isMediaQuery(':w[200]') // true
136
+ * isMediaQuery(':w100]') // false
137
+ */
138
+ export const isMediaQuery = query => {
139
+ const regex = /^(?:(:w\[\d*(?:,\s?\d+)?])?(:h\[\d*(?:,\s?\d+)?])?|(:h\[\d*(?:,\s?\d+)?])?(:w\[\d*(?:,\s?\d+)?])?)$/;
140
+ return query.length > 0 && regex.test(query);
141
+ };
142
+
143
+ /**
144
+ * Retrieves the first matching custom media query key based on the provided screen size.
145
+ *
146
+ * The function processes an array of media queries and returns the first query that matches
147
+ * the given screen size. The media queries can be in formats like:
148
+ * - w[200]
149
+ * - w[0, 200]
150
+ * - w[, 300]
151
+ * - h[200]
152
+ * - h[0, 500]
153
+ * - h[,200]
154
+ * - w[100, 300]:h[200,500]
155
+ * - h[200,500]:w[100, 300]
156
+ *
157
+ * @param {Array<[string, string | number]>} mediaQueries - An array of tuples containing media query keys and associated values.
158
+ * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
159
+ * @returns {string | undefined} Returns the first matching media query key or `undefined` if no match is found.
160
+ * @example
161
+ *
162
+ * const queries = [[':w[200]', 'value1'], [':h[300,500]', 'value2']]
163
+ * const size = { width: 250, height: 400 }
164
+ * getKeyForCustomMediaQuery(queries, size) // ':w[200]
165
+ */
166
+ export const getKeyForCustomMediaQuery = (mediaQueries, screenSize) => {
167
+ const [matchedQuery] = mediaQueries.flatMap(_ref => {
168
+ let [key] = _ref;
169
+ if (key.includes('w') && key.includes('h')) {
170
+ return isWithinBreakpoint(key, screenSize) ? key : undefined;
171
+ }
172
+ return key.split(':').filter(Boolean).map(query => isWithinBreakpoint(query, screenSize) ? key : undefined);
173
+ }).filter(Boolean);
174
+ return matchedQuery;
175
+ };
176
+ //# sourceMappingURL=mediaQueries.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["extractValues","codedValue","lh","rh","replace","split","Number","isWithinBreakpoint","query","screenSize","includes","isWithinTheWidthAndHeight","charAt","isWithinTheWidth","width","isWithinTheHeight","height","minWidth","maxWidth","minHeight","maxHeight","result","filter","Boolean","map","q","length","isMediaQuery","regex","test","getKeyForCustomMediaQuery","mediaQueries","matchedQuery","flatMap","_ref","key","undefined"],"sourceRoot":"../../../src","sources":["utils/mediaQueries.ts"],"mappings":"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"}
@@ -0,0 +1,218 @@
1
+ import { extractValues, getKeyForCustomMediaQuery, isMediaQuery, isWithinTheHeight, isWithinTheWidth, isWithinTheWidthAndHeight } from './mediaQueries';
2
+ describe('utils', () => {
3
+ describe('extractValues', () => {
4
+ it('should correctly extract a width with both bounds', () => {
5
+ const mediaQuery = 'w[100, 600]';
6
+ expect(extractValues(mediaQuery)).toEqual([100, 600]);
7
+ });
8
+ it('should correctly extract a width with lower bound equal to 0', () => {
9
+ const mediaQuery = 'w[0, 400]';
10
+ expect(extractValues(mediaQuery)).toEqual([0, 400]);
11
+ });
12
+ it('should correctly extract a height with single value', () => {
13
+ const mediaQuery = 'h[700]';
14
+ expect(extractValues(mediaQuery)).toEqual([700]);
15
+ });
16
+ it('should correctly extract a height with lower bound equal to 0', () => {
17
+ const mediaQuery = 'h[0,]';
18
+ expect(extractValues(mediaQuery)).toEqual([0]);
19
+ });
20
+ it('should correctly extract a width with no lower bound', () => {
21
+ const mediaQuery = 'w[,100]';
22
+ expect(extractValues(mediaQuery)).toEqual([0, 100]);
23
+ });
24
+ });
25
+ describe('isWithinTheWidth', () => {
26
+ it('should return true if the screen width is within the media query', () => {
27
+ const pairs = [{
28
+ width: 200,
29
+ query: 'w[120]'
30
+ }, {
31
+ width: 100,
32
+ query: 'w[,500]'
33
+ }, {
34
+ width: 0,
35
+ query: 'w[,500]'
36
+ }, {
37
+ width: 300,
38
+ query: 'w[300,500]'
39
+ }];
40
+ pairs.forEach(_ref => {
41
+ let {
42
+ width,
43
+ query
44
+ } = _ref;
45
+ expect(isWithinTheWidth(query, width)).toEqual(true);
46
+ });
47
+ });
48
+ it('should return false if the screen width is outside the media query', () => {
49
+ const pairs = [{
50
+ width: 120,
51
+ query: 'w[200]'
52
+ }, {
53
+ width: 501,
54
+ query: 'w[,500]'
55
+ }, {
56
+ width: 700,
57
+ query: 'w[200,500]'
58
+ }];
59
+ pairs.forEach(_ref2 => {
60
+ let {
61
+ width,
62
+ query
63
+ } = _ref2;
64
+ expect(isWithinTheWidth(query, width)).toEqual(false);
65
+ });
66
+ });
67
+ });
68
+ describe('isWithinTheHeight', () => {
69
+ it('should return true if the screen height is within the media query', () => {
70
+ const pairs = [{
71
+ height: 200,
72
+ query: 'h[120]'
73
+ }, {
74
+ height: 100,
75
+ query: 'h[,500]'
76
+ }, {
77
+ height: 0,
78
+ query: 'h[,500]'
79
+ }, {
80
+ height: 300,
81
+ query: 'h[300,500]'
82
+ }];
83
+ pairs.forEach(_ref3 => {
84
+ let {
85
+ height,
86
+ query
87
+ } = _ref3;
88
+ expect(isWithinTheHeight(query, height)).toEqual(true);
89
+ });
90
+ });
91
+ it('should return false if the screen height is outside the media query', () => {
92
+ const pairs = [{
93
+ height: 120,
94
+ query: 'h[200]'
95
+ }, {
96
+ height: 501,
97
+ query: 'h[,500]'
98
+ }, {
99
+ height: 700,
100
+ query: 'h[200,500]'
101
+ }];
102
+ pairs.forEach(_ref4 => {
103
+ let {
104
+ height,
105
+ query
106
+ } = _ref4;
107
+ expect(isWithinTheHeight(query, height)).toEqual(false);
108
+ });
109
+ });
110
+ });
111
+ describe('isWithinTheWidthAndHeight', () => {
112
+ it('should return true if the screen width and height are within the media query', () => {
113
+ const pairs = [{
114
+ screenSize: {
115
+ width: 200,
116
+ height: 600
117
+ },
118
+ query: 'w[, 200]:h[600]'
119
+ }, {
120
+ screenSize: {
121
+ width: 200,
122
+ height: 600
123
+ },
124
+ query: 'w[110]:h[400]'
125
+ }, {
126
+ screenSize: {
127
+ width: 400,
128
+ height: 800
129
+ },
130
+ query: 'w[400, 800]:h[400, 800]'
131
+ }];
132
+ pairs.forEach(_ref5 => {
133
+ let {
134
+ screenSize,
135
+ query
136
+ } = _ref5;
137
+ expect(isWithinTheWidthAndHeight(query, screenSize)).toEqual(true);
138
+ });
139
+ });
140
+ it('should return false if the screen width and height are outside the media query', () => {
141
+ const pairs = [{
142
+ screenSize: {
143
+ width: 200,
144
+ height: 600
145
+ },
146
+ query: 'w[, 220]:h[620]'
147
+ }, {
148
+ screenSize: {
149
+ width: 200,
150
+ height: 600
151
+ },
152
+ query: 'w[290]:h[400]'
153
+ }, {
154
+ screenSize: {
155
+ width: 400,
156
+ height: 800
157
+ },
158
+ query: 'w[, 800]:h[, 700]'
159
+ }];
160
+ pairs.forEach(_ref6 => {
161
+ let {
162
+ screenSize,
163
+ query
164
+ } = _ref6;
165
+ expect(isWithinTheWidthAndHeight(query, screenSize)).toEqual(false);
166
+ });
167
+ });
168
+ });
169
+ describe('isMediaQuery', () => {
170
+ it('should detect correct media queries', () => {
171
+ const correctMediaQueries = [':w[100]', ':w[100, 200]', ':w[, 300]', ':h[200]', ':h[0, 500]', ':h[, 750]', ':w[100]:h[200]', ':h[100]:w[200]', ':h[100, 200]:w[,400]', ':w[200]:h[200, 400]'];
172
+ correctMediaQueries.forEach(query => {
173
+ expect(isMediaQuery(query)).toEqual(true);
174
+ });
175
+ });
176
+ it('should detect incorrect media queries', () => {
177
+ const incorrectMediaQueries = [':w100]', ':w[100, 200', ':p[, 300]', ':&[200]', ':h[0 500]', ':h[p, 750]', ':w[0]:l[200]', ':[100]:w[200]', ':h(100, 200):w[400]', ':w[2OO]:h[200, 400]', '', 'x', '>300', ']]w200[['];
178
+ incorrectMediaQueries.forEach(query => {
179
+ expect(isMediaQuery(query)).toEqual(false);
180
+ });
181
+ });
182
+ });
183
+ describe('getKeyForCustomMediaQuery', () => {
184
+ it('should return a key for string value based on media query', () => {
185
+ const mediaQueries = [['w[,200]', 'orange'], ['w[300, 400]', 'pink'], ['w[500, 600]', 'red']];
186
+ const screenSize = {
187
+ width: 300,
188
+ height: 700
189
+ };
190
+ expect(getKeyForCustomMediaQuery(mediaQueries, screenSize)).toEqual('w[300, 400]');
191
+ });
192
+ it('should return a key for number value based on media query', () => {
193
+ const mediaQueries = [['w[,200]', 200], ['w[250]', 300]];
194
+ const screenSize = {
195
+ width: 300,
196
+ height: 700
197
+ };
198
+ expect(getKeyForCustomMediaQuery(mediaQueries, screenSize)).toEqual('w[250]');
199
+ });
200
+ it('should return undefined for no match', () => {
201
+ const mediaQueries = [['w[,400]', 'green'], ['w[500, 999]', 'olive'], ['w[1000]', 'red']];
202
+ const screenSize = {
203
+ width: 450,
204
+ height: 1000
205
+ };
206
+ expect(getKeyForCustomMediaQuery(mediaQueries, screenSize)).toEqual(undefined);
207
+ });
208
+ it('should handle correctly complex media queries', () => {
209
+ const mediaQueries = [['w[,300]:h[200,700]', 200], ['w[250]:h[701]', 300], ['w[200]', 500]];
210
+ const screenSize = {
211
+ width: 300,
212
+ height: 700
213
+ };
214
+ expect(getKeyForCustomMediaQuery(mediaQueries, screenSize)).toEqual('w[,300]:h[200,700]');
215
+ });
216
+ });
217
+ });
218
+ //# sourceMappingURL=mediaQueries.spec.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["extractValues","getKeyForCustomMediaQuery","isMediaQuery","isWithinTheHeight","isWithinTheWidth","isWithinTheWidthAndHeight","describe","it","mediaQuery","expect","toEqual","pairs","width","query","forEach","_ref","_ref2","height","_ref3","_ref4","screenSize","_ref5","_ref6","correctMediaQueries","incorrectMediaQueries","mediaQueries","undefined"],"sourceRoot":"../../../src","sources":["utils/mediaQueries.spec.ts"],"mappings":"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"}
@@ -0,0 +1,75 @@
1
+ import { getValueForBreakpoint } from './breakpoints';
2
+
3
+ /**
4
+ * Proxies a function to parse its return value for custom media queries or breakpoints.
5
+ *
6
+ * If the function's string representation contains a custom media query or a defined breakpoint,
7
+ * the returned function will be proxied to parse its return value based on the provided screen size and breakpoints.
8
+ * If neither is found, the original function is returned.
9
+ *
10
+ * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
11
+ *
12
+ * @param {Function} fn - The function to be proxified.
13
+ * @param {keyof B & string} breakpoint - The breakpoint name to check against.
14
+ * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
15
+ * @param {B} breakpoints - An object representing the defined breakpoints.
16
+ *
17
+ * @returns {Function} Returns the proxified function or the original function if no custom media query or breakpoint is found in its string representation.
18
+ *
19
+ * @example
20
+ *
21
+ * const myFunction = () => ({ ':w[200]': 'value1', sm: 'value2' })
22
+ * const screenSize = { width: 250, height: 400 }
23
+ * const breakpoints = { sm: 300, md: 600 }
24
+ *
25
+ * const proxifiedFunction = proxifyFunction(myFunction, 'sm', screenSize, breakpoints)
26
+ * proxifiedFunction() // parsed style based on screenSize and breakpoints
27
+ */
28
+ export const proxifyFunction = (fn, breakpoint, screenSize, breakpoints) => {
29
+ const stringifiedFunction = fn.toString();
30
+ const hasCustomMediaQuery = stringifiedFunction.includes(':w[') || stringifiedFunction.includes(':h[');
31
+ const hasBreakpoint = Object.keys(breakpoints).some(bp => stringifiedFunction.includes(bp));
32
+ if (!hasCustomMediaQuery && !hasBreakpoint) {
33
+ return fn;
34
+ }
35
+ return new Proxy(fn, {
36
+ apply: (target, thisArg, argumentsList) => parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize, breakpoints)
37
+ });
38
+ };
39
+
40
+ /**
41
+ * Parses a style object to resolve custom media queries or breakpoints based on the provided screen size and breakpoints.
42
+ *
43
+ * 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),
44
+ * it is returned as-is. Otherwise, the function attempts to resolve the value based on the provided breakpoint, screen size, and defined breakpoints.
45
+ *
46
+ * @template T - The type of the style object.
47
+ * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
48
+ *
49
+ * @param {CustomNamedStyles<T, B>} style - The style object to be parsed.
50
+ * @param {keyof B & string} breakpoint - The breakpoint name to check against.
51
+ * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
52
+ * @param {B} breakpoints - An object representing the defined breakpoints.
53
+ *
54
+ * @returns {Record<string, string | number | Function>} Returns the parsed style object with resolved custom media queries or breakpoints.
55
+ *
56
+ * @example
57
+ *
58
+ * const style = { fontSize: { sm: '12px', md: '16px' } }
59
+ * const screenSize = { width: 300, height: 400 }
60
+ * const breakpoints = { xs: 0, sm: 300, md: 600 }
61
+ *
62
+ * const parsedStyle = parseStyle(style, 'sm', screenSize, breakpoints)
63
+ * // { fontSize: '12px' }
64
+ */
65
+ export const parseStyle = (style, breakpoint, screenSize, breakpoints) => Object.fromEntries(Object.entries(style).map(_ref => {
66
+ let [key, value] = _ref;
67
+ const isDynamicFunction = typeof value === 'function';
68
+ const isValidStyle = typeof value !== 'object' || key === 'transform';
69
+ if (isDynamicFunction || isValidStyle) {
70
+ return [key, value];
71
+ }
72
+ const valueWithBreakpoint = value;
73
+ return [key, getValueForBreakpoint(valueWithBreakpoint, breakpoint, screenSize, breakpoints)];
74
+ }));
75
+ //# sourceMappingURL=styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["getValueForBreakpoint","proxifyFunction","fn","breakpoint","screenSize","breakpoints","stringifiedFunction","toString","hasCustomMediaQuery","includes","hasBreakpoint","Object","keys","some","bp","Proxy","apply","target","thisArg","argumentsList","parseStyle","style","fromEntries","entries","map","_ref","key","value","isDynamicFunction","isValidStyle","valueWithBreakpoint"],"sourceRoot":"../../../src","sources":["utils/styles.ts"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,eAAe;;AAErD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,eAAe,GAAGA,CAC3BC,EAAY,EAAEC,UAA4B,EAC1CC,UAAsB,EACtBC,WAAc,KACH;EACX,MAAMC,mBAAmB,GAAGJ,EAAE,CAACK,QAAQ,CAAC,CAAC;EACzC,MAAMC,mBAAmB,GAAGF,mBAAmB,CAACG,QAAQ,CAAC,KAAK,CAAC,IAAIH,mBAAmB,CAACG,QAAQ,CAAC,KAAK,CAAC;EACtG,MAAMC,aAAa,GAAGC,MAAM,CACvBC,IAAI,CAACP,WAAW,CAAC,CACjBQ,IAAI,CAACC,EAAE,IAAIR,mBAAmB,CAACG,QAAQ,CAACK,EAAE,CAAC,CAAC;EAEjD,IAAI,CAACN,mBAAmB,IAAI,CAACE,aAAa,EAAE;IACxC,OAAOR,EAAE;EACb;EAEA,OAAO,IAAIa,KAAK,CAACb,EAAE,EAAE;IACjBc,KAAK,EAAEA,CAACC,MAAM,EAAEC,OAAO,EAAEC,aAAa,KAClCC,UAAU,CAACH,MAAM,CAACD,KAAK,CAACE,OAAO,EAAEC,aAAa,CAAC,EAAEhB,UAAU,EAAEC,UAAU,EAAEC,WAAW;EAC5F,CAAC,CAAC;AACN,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMe,UAAU,GAAGA,CACtBC,KAA8B,EAC9BlB,UAA4B,EAC5BC,UAAsB,EACtBC,WAAc,KACbM,MAAM,CACNW,WAAW,CAACX,MAAM,CACdY,OAAO,CAACF,KAAK,CAAC,CACdG,GAAG,CAACC,IAAA,IAAkB;EAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;EACd,MAAMG,iBAAiB,GAAG,OAAOD,KAAK,KAAK,UAAU;EACrD,MAAME,YAAY,GAAG,OAAOF,KAAK,KAAK,QAAQ,IAAID,GAAG,KAAK,WAAW;EAErE,IAAIE,iBAAiB,IAAIC,YAAY,EAAE;IACnC,OAAO,CAACH,GAAG,EAAEC,KAAK,CAAC;EACvB;EAEA,MAAMG,mBAAmB,GAAGH,KAAkD;EAE9E,OAAO,CAACD,GAAG,EAAE1B,qBAAqB,CAAI8B,mBAAmB,EAAE3B,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CAAC;AACpG,CAAC,CACL,CAAC"}
@@ -0,0 +1,96 @@
1
+ import { parseStyle, proxifyFunction } from './styles';
2
+ describe('styles', () => {
3
+ describe('proxifyFunction', () => {
4
+ it('should parse style for dynamic function', () => {
5
+ const screenSize = {
6
+ width: 400,
7
+ height: 800
8
+ };
9
+ const breakpoint = 'sm';
10
+ const breakpoints = {
11
+ xs: 0,
12
+ sm: 400,
13
+ md: 800
14
+ };
15
+ const dynamicFunction = isEven => ({
16
+ backgroundColor: {
17
+ sm: isEven ? 'green' : 'red',
18
+ md: isEven ? 'orange' : 'pink'
19
+ }
20
+ });
21
+ expect(proxifyFunction(dynamicFunction, breakpoint, screenSize, breakpoints)(true)).toEqual({
22
+ backgroundColor: 'green'
23
+ });
24
+ });
25
+ it('should return proxified function for custom media query', () => {
26
+ const screenSize = {
27
+ width: 400,
28
+ height: 800
29
+ };
30
+ const breakpoint = 'sm';
31
+ const breakpoints = {
32
+ xs: 0,
33
+ sm: 400,
34
+ md: 800
35
+ };
36
+ const dynamicFunction = isEven => ({
37
+ backgroundColor: {
38
+ ':w[,399]': isEven ? 'green' : 'red',
39
+ ':w[400]': isEven ? 'orange' : 'pink'
40
+ }
41
+ });
42
+ expect(proxifyFunction(dynamicFunction, breakpoint, screenSize, breakpoints)(false)).toEqual({
43
+ backgroundColor: 'pink'
44
+ });
45
+ });
46
+ it('should return same function for no breakpoints nor media queries', () => {
47
+ const screenSize = {
48
+ width: 400,
49
+ height: 800
50
+ };
51
+ const breakpoint = 'sm';
52
+ const breakpoints = {
53
+ xs: 0,
54
+ sm: 400,
55
+ md: 800
56
+ };
57
+ const dynamicFunction = isEven => ({
58
+ backgroundColor: isEven ? 'pink' : 'purple'
59
+ });
60
+ expect(proxifyFunction(dynamicFunction, breakpoint, screenSize, breakpoints)(false)).toEqual({
61
+ backgroundColor: 'purple'
62
+ });
63
+ });
64
+ });
65
+ describe('parseStyle', () => {
66
+ it('should correctly parse styles', () => {
67
+ const screenSize = {
68
+ width: 400,
69
+ height: 800
70
+ };
71
+ const breakpoint = 'sm';
72
+ const breakpoints = {
73
+ xs: 0,
74
+ sm: 400,
75
+ md: 800
76
+ };
77
+ const style = {
78
+ fontSize: {
79
+ sm: 12,
80
+ md: 20
81
+ },
82
+ backgroundColor: {
83
+ xs: 'pink',
84
+ md: 'orange'
85
+ },
86
+ fontWeight: 'bold'
87
+ };
88
+ expect(parseStyle(style, breakpoint, screenSize, breakpoints)).toEqual({
89
+ fontSize: 12,
90
+ backgroundColor: 'pink',
91
+ fontWeight: 'bold'
92
+ });
93
+ });
94
+ });
95
+ });
96
+ //# sourceMappingURL=styles.spec.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["parseStyle","proxifyFunction","describe","it","screenSize","width","height","breakpoint","breakpoints","xs","sm","md","dynamicFunction","isEven","backgroundColor","expect","toEqual","style","fontSize","fontWeight"],"sourceRoot":"../../../src","sources":["utils/styles.spec.ts"],"mappings":"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"}
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import type { PropsWithChildren } from 'react';
3
+ interface UnistylesThemeProps extends PropsWithChildren {
4
+ theme: any;
5
+ }
6
+ export declare const UnistylesContext: React.Context<{}>;
7
+ export declare const UnistylesTheme: React.FunctionComponent<UnistylesThemeProps>;
8
+ export {};
9
+ //# sourceMappingURL=UnistylesTheme.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"UnistylesTheme.d.ts","sourceRoot":"","sources":["../../../src/UnistylesTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAE9C,UAAU,mBAAoB,SAAQ,iBAAiB;IACnD,KAAK,EAAE,GAAG,CAAA;CACb;AAED,eAAO,MAAM,gBAAgB,mBAAoB,CAAA;AAEjD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAOvE,CAAA"}
@@ -0,0 +1,9 @@
1
+ import type { CreateStylesFactory, CustomNamedStyles, ExtractBreakpoints, RemoveKeysWithPrefix } from './types';
2
+ export declare const createUnistyles: <B extends Record<string, number>, T = {}>(breakpoints: B) => {
3
+ createStyles: <S extends CustomNamedStyles<S, B>>(styles: S | CreateStylesFactory<S, T>) => S;
4
+ useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T> | undefined) => {
5
+ theme: T;
6
+ styles: ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>;
7
+ };
8
+ };
9
+ //# sourceMappingURL=createUnistyles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"createUnistyles.d.ts","sourceRoot":"","sources":["../../../src/createUnistyles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAc,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAI3H,eAAO,MAAM,eAAe;;;;;;CAiD3B,CAAA"}
@@ -0,0 +1,3 @@
1
+ export { UnistylesTheme } from './UnistylesTheme';
2
+ export { createUnistyles } from './createUnistyles';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA"}