react-native-unistyles 1.0.0-beta.3 → 1.0.0-beta.5

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 (73) hide show
  1. package/README.md +342 -35
  2. package/lib/commonjs/createUnistyles.js +25 -13
  3. package/lib/commonjs/createUnistyles.js.map +1 -1
  4. package/lib/commonjs/mediaQueries.js +2 -0
  5. package/lib/commonjs/mediaQueries.js.map +1 -0
  6. package/lib/commonjs/utils/breakpoints.js +12 -16
  7. package/lib/commonjs/utils/breakpoints.js.map +1 -1
  8. package/lib/commonjs/utils/breakpoints.spec.js +20 -15
  9. package/lib/commonjs/utils/breakpoints.spec.js.map +1 -1
  10. package/lib/commonjs/utils/common.js +8 -1
  11. package/lib/commonjs/utils/common.js.map +1 -1
  12. package/lib/commonjs/utils/index.js +7 -0
  13. package/lib/commonjs/utils/index.js.map +1 -1
  14. package/lib/commonjs/utils/mediaQueries.spec.js +1 -1
  15. package/lib/commonjs/utils/mediaQueries.spec.js.map +1 -1
  16. package/lib/commonjs/utils/normalizeStyles.js +10 -0
  17. package/lib/commonjs/utils/normalizeStyles.js.map +1 -0
  18. package/lib/commonjs/utils/normalizeStyles.web.js +59 -0
  19. package/lib/commonjs/utils/normalizeStyles.web.js.map +1 -0
  20. package/lib/commonjs/utils/styles.js +14 -12
  21. package/lib/commonjs/utils/styles.js.map +1 -1
  22. package/lib/commonjs/utils/styles.spec.js +17 -7
  23. package/lib/commonjs/utils/styles.spec.js.map +1 -1
  24. package/lib/module/createUnistyles.js +25 -13
  25. package/lib/module/createUnistyles.js.map +1 -1
  26. package/lib/module/mediaQueries.js +2 -0
  27. package/lib/module/mediaQueries.js.map +1 -0
  28. package/lib/module/utils/breakpoints.js +12 -16
  29. package/lib/module/utils/breakpoints.js.map +1 -1
  30. package/lib/module/utils/breakpoints.spec.js +20 -15
  31. package/lib/module/utils/breakpoints.spec.js.map +1 -1
  32. package/lib/module/utils/common.js +5 -0
  33. package/lib/module/utils/common.js.map +1 -1
  34. package/lib/module/utils/index.js +1 -0
  35. package/lib/module/utils/index.js.map +1 -1
  36. package/lib/module/utils/mediaQueries.spec.js +1 -1
  37. package/lib/module/utils/mediaQueries.spec.js.map +1 -1
  38. package/lib/module/utils/normalizeStyles.js +3 -0
  39. package/lib/module/utils/normalizeStyles.js.map +1 -0
  40. package/lib/module/utils/normalizeStyles.web.js +52 -0
  41. package/lib/module/utils/normalizeStyles.web.js.map +1 -0
  42. package/lib/module/utils/styles.js +14 -12
  43. package/lib/module/utils/styles.js.map +1 -1
  44. package/lib/module/utils/styles.spec.js +17 -7
  45. package/lib/module/utils/styles.spec.js.map +1 -1
  46. package/lib/typescript/src/createUnistyles.d.ts +7 -3
  47. package/lib/typescript/src/createUnistyles.d.ts.map +1 -1
  48. package/lib/typescript/src/mediaQueries.d.ts +2 -0
  49. package/lib/typescript/src/mediaQueries.d.ts.map +1 -0
  50. package/lib/typescript/src/types.d.ts +53 -13
  51. package/lib/typescript/src/types.d.ts.map +1 -1
  52. package/lib/typescript/src/utils/breakpoints.d.ts +6 -6
  53. package/lib/typescript/src/utils/breakpoints.d.ts.map +1 -1
  54. package/lib/typescript/src/utils/common.d.ts +2 -0
  55. package/lib/typescript/src/utils/common.d.ts.map +1 -1
  56. package/lib/typescript/src/utils/index.d.ts +1 -0
  57. package/lib/typescript/src/utils/index.d.ts.map +1 -1
  58. package/lib/typescript/src/utils/normalizeStyles.d.ts +2 -0
  59. package/lib/typescript/src/utils/normalizeStyles.d.ts.map +1 -0
  60. package/lib/typescript/src/utils/normalizeStyles.web.d.ts +2 -0
  61. package/lib/typescript/src/utils/normalizeStyles.web.d.ts.map +1 -0
  62. package/lib/typescript/src/utils/styles.d.ts +5 -5
  63. package/lib/typescript/src/utils/styles.d.ts.map +1 -1
  64. package/package.json +9 -2
  65. package/src/createUnistyles.ts +38 -16
  66. package/src/mediaQueries.ts +33 -0
  67. package/src/types.ts +96 -25
  68. package/src/utils/breakpoints.ts +15 -15
  69. package/src/utils/common.ts +8 -0
  70. package/src/utils/index.ts +1 -0
  71. package/src/utils/normalizeStyles.ts +2 -0
  72. package/src/utils/normalizeStyles.web.ts +103 -0
  73. package/src/utils/styles.ts +32 -17
@@ -1,25 +1,65 @@
1
- import type { ImageStyle, TextStyle, TransformsStyle, ViewStyle } from 'react-native';
2
- import type { CSSProperties } from 'react';
1
+ import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
2
+ import type { MatrixTransform, PerpectiveTransform, RotateTransform, RotateXTransform, RotateYTransform, RotateZTransform, ScaleTransform, ScaleXTransform, ScaleYTransform, SkewXTransform, SkewYTransform, TranslateXTransform, TranslateYTransform } from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
3
+ import type { MediaQueries } from './mediaQueries';
4
+ export type Breakpoints = Record<string, number>;
5
+ export type SortedBreakpointEntries<B extends Breakpoints> = [[keyof B & string, number]];
3
6
  export type ScreenSize = {
4
7
  width: number;
5
8
  height: number;
6
9
  };
7
- export type CreateStylesFactory<T, Theme> = (theme: Theme) => T;
8
- type StyleProperty<T, B extends Record<string, number>> = {
9
- [key in keyof T]?: {
10
- [innerKey in keyof B]?: T[key];
10
+ export type CreateStylesFactory<ST, Theme> = (theme: Theme) => ST;
11
+ type StyleProperty<T, B extends Breakpoints> = {
12
+ [K in keyof T]: {
13
+ [innerKey in keyof B]?: T[K];
11
14
  } | {
12
- [innerKey in `:w${string}` | `:h${string}`]?: T[key];
13
- } | T[key];
15
+ [innerKey in MediaQueries]?: T[K];
16
+ } | T[K];
14
17
  };
15
- export type CustomNamedStyles<T, B extends Record<string, number>> = {
16
- [P in keyof T]: ViewStyle | TextStyle | ImageStyle | TransformsStyle | CSSProperties | StyleProperty<ViewStyle, B> | StyleProperty<ImageStyle, B> | StyleProperty<TextStyle, B> | ((...args: Array<never>) => ViewStyle | TextStyle | ImageStyle | TransformsStyle | CSSProperties | StyleProperty<ViewStyle, B> | StyleProperty<ImageStyle, B> | StyleProperty<TextStyle, B>);
18
+ type ShadowOffsetProps<B> = {
19
+ shadowOffset: {
20
+ width: number | {
21
+ [innerKey in keyof B]?: number;
22
+ } | {
23
+ [innerKey in MediaQueries]: number;
24
+ };
25
+ height: number | {
26
+ [innerKey in keyof B]?: number;
27
+ } | {
28
+ [innerKey in MediaQueries]: number;
29
+ };
30
+ };
17
31
  };
18
- export type ExtractBreakpoints<T, B extends Record<string, number>> = T extends Partial<Record<keyof B & string, infer V>> ? V : T extends (...args: infer A) => infer R ? (...args: A) => ExtractBreakpoints<R, B> : {
32
+ type TextShadowOffsetProps<B> = {
33
+ textShadowOffset: {
34
+ width: number | {
35
+ [innerKey in keyof B]?: number;
36
+ } | {
37
+ [innerKey in MediaQueries]: number;
38
+ };
39
+ height: number | {
40
+ [innerKey in keyof B]?: number;
41
+ } | {
42
+ [innerKey in MediaQueries]: number;
43
+ };
44
+ };
45
+ };
46
+ type TransformStyles<B extends Breakpoints> = PerpectiveTransform | StyleProperty<PerpectiveTransform, B> | RotateTransform | StyleProperty<RotateTransform, B> | RotateXTransform | StyleProperty<RotateXTransform, B> | RotateYTransform | StyleProperty<RotateYTransform, B> | RotateZTransform | StyleProperty<RotateZTransform, B> | ScaleTransform | StyleProperty<ScaleTransform, B> | ScaleXTransform | StyleProperty<ScaleXTransform, B> | ScaleYTransform | StyleProperty<ScaleYTransform, B> | TranslateXTransform | StyleProperty<TranslateXTransform, B> | TranslateYTransform | StyleProperty<TranslateYTransform, B> | SkewXTransform | StyleProperty<SkewXTransform, B> | SkewYTransform | StyleProperty<SkewYTransform, B> | MatrixTransform | StyleProperty<MatrixTransform, B>;
47
+ type TransformProps<B extends Breakpoints> = {
48
+ transform: Array<TransformStyles<B>>;
49
+ };
50
+ type UnistyleView = Omit<Omit<Omit<ViewStyle, 'shadowOffset'>, 'transform'>, 'textShadowOffset'>;
51
+ type UnistyleText = Omit<Omit<Omit<TextStyle, 'shadowOffset'>, 'transform'>, 'textShadowOffset'>;
52
+ type UnistyleImage = Omit<Omit<Omit<ImageStyle, 'shadowOffset'>, 'transform'>, 'textShadowOffset'>;
53
+ export type StaticStyles<B extends Breakpoints> = (UnistyleView | StyleProperty<UnistyleView, B>) | (UnistyleText | StyleProperty<UnistyleText, B>) | (UnistyleImage | StyleProperty<UnistyleImage, B>) & TransformProps<B> & ShadowOffsetProps<B> & TextShadowOffsetProps<B>;
54
+ export type CustomNamedStyles<T, B extends Breakpoints> = {
55
+ [K in keyof T]: T[K] extends (...args: infer A) => unknown ? (...args: A) => StaticStyles<B> : StaticStyles<B>;
56
+ };
57
+ type WithEmptyObject<V> = keyof V extends never ? {} : V;
58
+ export type ExtractBreakpoints<T, B extends Breakpoints> = T extends Partial<Record<keyof B & string, infer V>> ? WithEmptyObject<V> : T extends (...args: infer A) => infer R ? (...args: A) => ExtractBreakpoints<R, B> : {
19
59
  [K in keyof T]: T[K] extends (...args: infer A) => infer R ? (...args: A) => ExtractBreakpoints<R, B> : T[K] extends object ? ExtractBreakpoints<T[K], B> : T[K];
20
60
  };
21
- export type RemoveKeysWithPrefix<T, B extends Record<string, number>> = T extends (...args: Array<any>) => infer R ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R, B> : T extends object ? T extends Record<string, infer _V> ? {
22
- [K in keyof T as K extends `:w${string}` | `:h${string}` ? keyof B & string : K]: RemoveKeysWithPrefix<T[K], B>;
61
+ export type RemoveKeysWithPrefix<T, B extends Breakpoints> = T extends (...args: Array<any>) => infer R ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R, B> : T extends object ? T extends Record<string, infer _V> ? {
62
+ [K in keyof T as K extends MediaQueries ? keyof B & string : K]: RemoveKeysWithPrefix<T[K], B>;
23
63
  } : {
24
64
  [K in keyof T]: RemoveKeysWithPrefix<T[K], B>;
25
65
  } : T;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- import type { ScreenSize } from '../types';
1
+ import type { Breakpoints, ScreenSize, SortedBreakpointEntries } from '../types';
2
2
  /**
3
3
  * Sorts the breakpoints object based on its numeric values in ascending order and validates them.
4
4
  *
@@ -18,7 +18,7 @@ import type { ScreenSize } from '../types';
18
18
  * const input = { md: 768, lg: 1024, sm: 0 }
19
19
  * sortAndValidateBreakpoints(input) // returns { sm: 0, md: 768, lg: 1024 }
20
20
  */
21
- export declare const sortAndValidateBreakpoints: <B extends Record<string, number>>(breakpoints: B) => B;
21
+ export declare const sortAndValidateBreakpoints: <B extends Breakpoints>(breakpoints: B) => B;
22
22
  /**
23
23
  * Determines the appropriate breakpoint key for a given screen width based on provided breakpoints.
24
24
  *
@@ -27,14 +27,14 @@ export declare const sortAndValidateBreakpoints: <B extends Record<string, numbe
27
27
  *
28
28
  * @template B - An object type where keys are strings and values are numbers representing screen widths.
29
29
  * @param {number} width - The screen width to determine the breakpoint for.
30
- * @param {B} breakpoints - The breakpoints object to use for determination.
30
+ * @param breakpointEntries - sorted pairs of breakpoints
31
31
  * @returns {keyof B & string} The key of the breakpoint that the screen width falls into.
32
32
  *
33
33
  * @example
34
34
  * const breakpoints = { sm: 0, md: 768, lg: 1024 }
35
35
  * getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
36
36
  */
37
- export declare const getBreakpointFromScreenWidth: <B extends Record<string, number>>(width: number, breakpoints: B) => keyof B & string;
37
+ export declare const getBreakpointFromScreenWidth: <B extends Breakpoints>(width: number, breakpointEntries: SortedBreakpointEntries<B>) => keyof B & string;
38
38
  /**
39
39
  * Retrieves the value associated with a given breakpoint or custom media query based on the provided screen size.
40
40
  *
@@ -47,7 +47,7 @@ export declare const getBreakpointFromScreenWidth: <B extends Record<string, num
47
47
  * @param {Record<keyof B & string, string | number>} value - An object containing values associated with breakpoints or custom media queries.
48
48
  * @param {keyof B & string} breakpoint - The breakpoint name to check against.
49
49
  * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
50
- * @param {B} breakpoints - An object representing the defined breakpoints.
50
+ * @param breakpointPairs - sorted pairs of breakpoints
51
51
  *
52
52
  * @returns {string | number | undefined} Returns the value associated with the matching breakpoint or custom media query, or `undefined` if no match is found.
53
53
  *
@@ -59,5 +59,5 @@ export declare const getBreakpointFromScreenWidth: <B extends Record<string, num
59
59
  *
60
60
  * getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
61
61
  */
62
- export declare const getValueForBreakpoint: <B extends Record<string, number>>(value: Record<keyof B & string, string | number | undefined>, breakpoint: keyof B & string, screenSize: ScreenSize, breakpoints: B) => string | number | Record<keyof B & string, string | number | undefined>[keyof B & string] | undefined;
62
+ export declare const getValueForBreakpoint: <B extends Breakpoints>(value: Record<keyof B & string, string | number | undefined>, breakpoint: keyof B & string, screenSize: ScreenSize, breakpointPairs: SortedBreakpointEntries<B>) => string | number | undefined;
63
63
  //# sourceMappingURL=breakpoints.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../src/utils/breakpoints.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAG1C;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,0BAA0B,yDAuBtC,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,4BAA4B,4CAA6C,MAAM,qCAe3F,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,qBAAqB,6IAA8I,UAAU,0HAmCzL,CAAA"}
1
+ {"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../src/utils/breakpoints.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAGhF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,0BAA0B,8CAuBtC,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,4BAA4B,iCAAkC,MAAM,oEAchF,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,qBAAqB,kIAGlB,UAAU,kDAEvB,MAAM,GAAG,MAAM,GAAG,SA+BpB,CAAA"}
@@ -1,2 +1,4 @@
1
1
  export declare const throwError: (message: string) => never;
2
+ export declare const warn: (message: string) => void;
3
+ export declare const isWeb: () => boolean;
2
4
  //# sourceMappingURL=common.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/utils/common.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,YAAa,MAAM,UAEzC,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,KAAK,eAA8B,CAAA"}
@@ -1,3 +1,4 @@
1
+ export { normalizeStyles } from './normalizeStyles';
1
2
  export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints } from './breakpoints';
2
3
  export { proxifyFunction, parseStyle } from './styles';
3
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;AACxF,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;AACxF,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA"}
@@ -0,0 +1,2 @@
1
+ export declare const normalizeStyles: <T>(styles: T) => T;
2
+ //# sourceMappingURL=normalizeStyles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"normalizeStyles.d.ts","sourceRoot":"","sources":["../../../../src/utils/normalizeStyles.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,eAAe,qBAAgC,CAAA"}
@@ -0,0 +1,2 @@
1
+ export declare const normalizeStyles: <T extends {}>(styles: T) => T;
2
+ //# sourceMappingURL=normalizeStyles.web.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"normalizeStyles.web.d.ts","sourceRoot":"","sources":["../../../../src/utils/normalizeStyles.web.ts"],"names":[],"mappings":"AA8EA,eAAO,MAAM,eAAe,gCAwB3B,CAAA"}
@@ -1,4 +1,4 @@
1
- import type { CustomNamedStyles, ScreenSize } from '../types';
1
+ import type { Breakpoints, CustomNamedStyles, ScreenSize, SortedBreakpointEntries } from '../types';
2
2
  /**
3
3
  * Proxies a function to parse its return value for custom media queries or breakpoints.
4
4
  *
@@ -7,7 +7,7 @@ import type { CustomNamedStyles, ScreenSize } from '../types';
7
7
  * @param {Function} fn - The function to be proxified.
8
8
  * @param {keyof B & string} breakpoint - The breakpoint name to check against.
9
9
  * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
10
- * @param {B} breakpoints - An object representing the defined breakpoints.
10
+ * @param breakpointPairs - sorted pairs of breakpoints
11
11
  *
12
12
  * @returns {Function} Returns the proxified function
13
13
  *
@@ -20,7 +20,7 @@ import type { CustomNamedStyles, ScreenSize } from '../types';
20
20
  * const proxifiedFunction = proxifyFunction(myFunction, 'sm', screenSize, breakpoints)
21
21
  * proxifiedFunction() // parsed style based on screenSize and breakpoints
22
22
  */
23
- export declare const proxifyFunction: <B extends Record<string, number>>(fn: Function, breakpoint: keyof B & string, screenSize: ScreenSize, breakpoints: B) => Function;
23
+ export declare const proxifyFunction: <B extends Breakpoints>(fn: Function, breakpoint: keyof B & string, screenSize: ScreenSize, breakpointPairs: SortedBreakpointEntries<B>) => Function;
24
24
  /**
25
25
  * Parses a style object to resolve custom media queries or breakpoints based on the provided screen size and breakpoints.
26
26
  *
@@ -33,7 +33,7 @@ export declare const proxifyFunction: <B extends Record<string, number>>(fn: Fun
33
33
  * @param {CustomNamedStyles<T, B>} style - The style object to be parsed.
34
34
  * @param {keyof B & string} breakpoint - The breakpoint name to check against.
35
35
  * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
36
- * @param {B} breakpoints - An object representing the defined breakpoints.
36
+ * @param breakpointPairs - sorted pairs of breakpoints
37
37
  *
38
38
  * @returns {Record<string, string | number | Function>} Returns the parsed style object with resolved custom media queries or breakpoints.
39
39
  *
@@ -46,5 +46,5 @@ export declare const proxifyFunction: <B extends Record<string, number>>(fn: Fun
46
46
  * const parsedStyle = parseStyle(style, 'sm', screenSize, breakpoints)
47
47
  * // { fontSize: '12px' }
48
48
  */
49
- export declare const parseStyle: <T, B extends Record<string, number>>(style: CustomNamedStyles<T, B>, breakpoint: keyof B & string, screenSize: ScreenSize, breakpoints: B) => T;
49
+ export declare const parseStyle: <T, B extends Breakpoints>(style: CustomNamedStyles<T, B>, breakpoint: keyof B & string, screenSize: ScreenSize, breakpointPairs: SortedBreakpointEntries<B>) => T;
50
50
  //# 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;AAG7D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,yCACpB,QAAQ,4CACA,UAAU,qBAEvB,QAGD,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,UAAU,kHAGP,UAAU,sBAsCzB,CAAA"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAKnG;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,8BACpB,QAAQ,4CACA,UAAU,kDAEvB,QAGD,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,UAAU,uGAGP,UAAU,mDAmDzB,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-unistyles",
3
- "version": "1.0.0-beta.3",
3
+ "version": "1.0.0-beta.5",
4
4
  "description": "Level up your React Native StyleSheet",
5
5
  "scripts": {
6
6
  "test": "jest",
@@ -68,12 +68,19 @@
68
68
  "react": "18.2.0",
69
69
  "react-native": "0.72.5",
70
70
  "react-native-builder-bob": "0.23.0",
71
+ "react-native-web": "0.19.9",
71
72
  "release-it": "16.2.1",
72
73
  "typescript": "5.2.2"
73
74
  },
74
75
  "peerDependencies": {
75
76
  "react": "*",
76
- "react-native": "*"
77
+ "react-native": "*",
78
+ "react-native-web": "*"
79
+ },
80
+ "peerDependenciesMeta": {
81
+ "react-native-web": {
82
+ "optional": true
83
+ }
77
84
  },
78
85
  "workspaces": [
79
86
  "example"
@@ -1,22 +1,43 @@
1
1
  import { useContext } from 'react'
2
- import type { CreateStylesFactory, CustomNamedStyles, ScreenSize, ExtractBreakpoints, RemoveKeysWithPrefix } from './types'
2
+ import { StyleSheet } from 'react-native'
3
+ import type {
4
+ Breakpoints,
5
+ CreateStylesFactory,
6
+ CustomNamedStyles,
7
+ ExtractBreakpoints,
8
+ RemoveKeysWithPrefix,
9
+ SortedBreakpointEntries
10
+ } from './types'
3
11
  import { UnistylesContext } from './UnistylesTheme'
4
- import { getBreakpointFromScreenWidth, proxifyFunction, parseStyle, sortAndValidateBreakpoints } from './utils'
5
12
  import { useDimensions } from './hooks'
13
+ import { getBreakpointFromScreenWidth, proxifyFunction, parseStyle, sortAndValidateBreakpoints } from './utils'
6
14
 
7
- export const createUnistyles = <B extends Record<string, number>, T = {}>(breakpoints: B) => {
8
- const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints) as B
15
+ export const createUnistyles = <B extends Breakpoints, T = {}>(breakpoints: B) => {
16
+ const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints)
17
+ const sortedBreakpointEntries = Object
18
+ .entries(sortedBreakpoints) as SortedBreakpointEntries<B>
9
19
 
10
20
  return {
11
- createStyles: <S extends CustomNamedStyles<S, B>>(styles: S | CreateStylesFactory<S, T>) => styles as S,
21
+ /**
22
+ * @deprecated The method should not be used, proposed version by the community is createStyleSheet, will be removed in RC
23
+ */
24
+ createStyles: <S extends CustomNamedStyles<S, B>, X>(styles: S | CustomNamedStyles<S, B> | X | ((theme: T) => X | CustomNamedStyles<X, B>)): S | X => {
25
+ if (typeof styles === 'function') {
26
+ return styles as X
27
+ }
28
+
29
+ return styles as S
30
+ },
31
+ createStyleSheet: <S extends CustomNamedStyles<S, B>, X>(styles: S | CustomNamedStyles<S, B> | X | ((theme: T) => X | CustomNamedStyles<X, B>)): S | X => {
32
+ if (typeof styles === 'function') {
33
+ return styles as X
34
+ }
35
+
36
+ return styles as S
37
+ },
12
38
  useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
13
39
  const theme = useContext(UnistylesContext) as T
14
- const dimensions = useDimensions()
15
- const breakpoint = getBreakpointFromScreenWidth<B>(dimensions.width, sortedBreakpoints)
16
- const screenSize: ScreenSize = {
17
- width: dimensions.width,
18
- height: dimensions.height
19
- }
40
+ const screenSize = useDimensions()
20
41
 
21
42
  if (!stylesheet) {
22
43
  return {
@@ -28,23 +49,24 @@ export const createUnistyles = <B extends Record<string, number>, T = {}>(breakp
28
49
  const parsedStyles = typeof stylesheet === 'function'
29
50
  ? stylesheet(theme)
30
51
  : stylesheet
52
+ const breakpoint = getBreakpointFromScreenWidth<B>(screenSize.width, sortedBreakpointEntries)
31
53
 
32
54
  const dynamicStyleSheet = Object
33
55
  .entries(parsedStyles)
34
56
  .reduce((acc, [key, value]) => {
35
- const x = value as CustomNamedStyles<ST, B>
57
+ const style = value as CustomNamedStyles<ST, B>
36
58
 
37
59
  if (typeof value === 'function') {
38
60
  return {
39
61
  ...acc,
40
- [key]: proxifyFunction<B>(value, breakpoint, screenSize, sortedBreakpoints)
62
+ [key]: proxifyFunction<B>(value, breakpoint, screenSize, sortedBreakpointEntries)
41
63
  }
42
64
  }
43
65
 
44
- return {
66
+ return StyleSheet.create({
45
67
  ...acc,
46
- [key]: parseStyle<ST, B>(x, breakpoint, screenSize, sortedBreakpoints)
47
- }
68
+ [key]: parseStyle<ST, B>(style, breakpoint, screenSize, sortedBreakpointEntries)
69
+ })
48
70
  }, {} as ST)
49
71
 
50
72
  return {
@@ -0,0 +1,33 @@
1
+ // this is super weird, but number passes empty string and bigint does not
2
+ export type MediaQueries =
3
+ // For :w
4
+ `:w[${bigint}]` |
5
+ `:w[,${bigint}]` |
6
+ `:w[${bigint},${bigint}]` |
7
+
8
+ // For :h
9
+ `:h[${bigint}]` |
10
+ `:h[,${bigint}]` |
11
+ `:h[${bigint},${bigint}]` |
12
+
13
+ // Combinations of :w and :h
14
+ `:w[${bigint}]:h[${bigint}]` |
15
+ `:w[${bigint},${bigint}]:h[${bigint}]` |
16
+ `:w[${bigint}]:h[${bigint},${bigint}]` |
17
+ `:w[${bigint},${bigint}]:h[${bigint},${bigint}]` |
18
+ `:w[,${bigint}]:h[,${bigint}]` |
19
+ `:w[,${bigint}]:h[${bigint}]` |
20
+ `:w[${bigint}]:h[,${bigint}]` |
21
+ `:w[,${bigint}]:h[${bigint},${bigint}]` |
22
+ `:w[${bigint},${bigint}]:h[,${bigint}]` |
23
+
24
+ // Combinations of :h and :w
25
+ `:h[${bigint}]:w[${bigint}]` |
26
+ `:h[${bigint},${bigint}]:w[${bigint}]` |
27
+ `:h[${bigint}]:w[${bigint},${bigint}]` |
28
+ `:h[${bigint},${bigint}]:w[${bigint},${bigint}]` |
29
+ `:h[,${bigint}]:w[,${bigint}]` |
30
+ `:h[,${bigint}]:w[${bigint}]` |
31
+ `:h[${bigint}]:w[,${bigint}]` |
32
+ `:h[,${bigint}]:w[${bigint},${bigint}]` |
33
+ `:h[${bigint},${bigint}]:w[,${bigint}]`
package/src/types.ts CHANGED
@@ -1,38 +1,109 @@
1
- import type { ImageStyle, TextStyle, TransformsStyle, ViewStyle } from 'react-native'
2
- import type { CSSProperties } from 'react'
1
+ import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
2
+ import type {
3
+ MatrixTransform,
4
+ PerpectiveTransform,
5
+ RotateTransform,
6
+ RotateXTransform,
7
+ RotateYTransform,
8
+ RotateZTransform,
9
+ ScaleTransform,
10
+ ScaleXTransform,
11
+ ScaleYTransform,
12
+ SkewXTransform,
13
+ SkewYTransform,
14
+ TranslateXTransform,
15
+ TranslateYTransform
16
+ } from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
17
+ import type { MediaQueries } from './mediaQueries'
18
+
19
+ export type Breakpoints = Record<string, number>
20
+
21
+ export type SortedBreakpointEntries<B extends Breakpoints> = [[keyof B & string, number]]
3
22
 
4
23
  export type ScreenSize = {
5
24
  width: number,
6
25
  height: number
7
26
  }
8
27
 
9
- export type CreateStylesFactory<T, Theme> = (theme: Theme) => T
28
+ export type CreateStylesFactory<ST, Theme> = (theme: Theme) => ST
10
29
 
11
- type StyleProperty<T, B extends Record<string, number>> = {
12
- [key in keyof T]?: {
13
- [innerKey in keyof B]?: T[key]
30
+ type StyleProperty<T, B extends Breakpoints> = {
31
+ [K in keyof T]: {
32
+ [innerKey in keyof B]?: T[K]
14
33
  } | {
15
- [innerKey in `:w${string}` | `:h${string}`]?: T[key]
16
- } | T[key]
34
+ [innerKey in MediaQueries]?: T[K]
35
+ } | T[K]
36
+ }
37
+
38
+ type ShadowOffsetProps<B> = {
39
+ shadowOffset: {
40
+ width: number | {
41
+ [innerKey in keyof B]?: number
42
+ } | {
43
+ [innerKey in MediaQueries]: number
44
+ },
45
+ height: number | {
46
+ [innerKey in keyof B]?: number
47
+ } | {
48
+ [innerKey in MediaQueries]: number
49
+ }
50
+ }
51
+ }
52
+
53
+ type TextShadowOffsetProps<B> = {
54
+ textShadowOffset: {
55
+ width: number | {
56
+ [innerKey in keyof B]?: number
57
+ } | {
58
+ [innerKey in MediaQueries]: number
59
+ },
60
+ height: number | {
61
+ [innerKey in keyof B]?: number
62
+ } | {
63
+ [innerKey in MediaQueries]: number
64
+ }
65
+ }
17
66
  }
18
67
 
19
- export type CustomNamedStyles<T, B extends Record<string, number>> = {
20
- [P in keyof T]:
21
- | ViewStyle
22
- | TextStyle
23
- | ImageStyle
24
- | TransformsStyle
25
- | CSSProperties
26
- | StyleProperty<ViewStyle, B>
27
- | StyleProperty<ImageStyle, B>
28
- | StyleProperty<TextStyle, B>
29
- | (
30
- (...args: Array<never>) => ViewStyle | TextStyle | ImageStyle | TransformsStyle | CSSProperties | StyleProperty<ViewStyle, B> | StyleProperty<ImageStyle, B> | StyleProperty<TextStyle, B>
31
- )
68
+ type TransformStyles<B extends Breakpoints> =
69
+ PerpectiveTransform | StyleProperty<PerpectiveTransform, B>
70
+ | RotateTransform | StyleProperty<RotateTransform, B>
71
+ | RotateXTransform | StyleProperty<RotateXTransform, B>
72
+ | RotateYTransform | StyleProperty<RotateYTransform, B>
73
+ | RotateZTransform | StyleProperty<RotateZTransform, B>
74
+ | ScaleTransform | StyleProperty<ScaleTransform, B>
75
+ | ScaleXTransform | StyleProperty<ScaleXTransform, B>
76
+ | ScaleYTransform | StyleProperty<ScaleYTransform, B>
77
+ | TranslateXTransform | StyleProperty<TranslateXTransform, B>
78
+ | TranslateYTransform | StyleProperty<TranslateYTransform, B>
79
+ | SkewXTransform | StyleProperty<SkewXTransform, B>
80
+ | SkewYTransform | StyleProperty<SkewYTransform, B>
81
+ | MatrixTransform | StyleProperty<MatrixTransform, B>
82
+
83
+ type TransformProps<B extends Breakpoints> = {
84
+ transform: Array<TransformStyles<B>>
32
85
  }
33
86
 
34
- export type ExtractBreakpoints<T, B extends Record<string, number>> = T extends Partial<Record<keyof B & string, infer V>>
35
- ? V
87
+ type UnistyleView = Omit<Omit<Omit<ViewStyle, 'shadowOffset'>, 'transform'>, 'textShadowOffset'>
88
+ type UnistyleText = Omit<Omit<Omit<TextStyle, 'shadowOffset'>, 'transform'>, 'textShadowOffset'>
89
+ type UnistyleImage = Omit<Omit<Omit<ImageStyle, 'shadowOffset'>, 'transform'>, 'textShadowOffset'>
90
+
91
+ export type StaticStyles<B extends Breakpoints> =
92
+ | (UnistyleView | StyleProperty<UnistyleView, B>)
93
+ | (UnistyleText | StyleProperty<UnistyleText, B>)
94
+ | (UnistyleImage | StyleProperty<UnistyleImage, B>)
95
+ & TransformProps<B> & ShadowOffsetProps<B> & TextShadowOffsetProps<B>
96
+
97
+ export type CustomNamedStyles<T, B extends Breakpoints> = {
98
+ [K in keyof T]: T[K] extends (...args: infer A) => unknown
99
+ ? (...args: A) => StaticStyles<B>
100
+ : StaticStyles<B>
101
+ }
102
+
103
+ type WithEmptyObject<V> = keyof V extends never ? {} : V
104
+
105
+ export type ExtractBreakpoints<T, B extends Breakpoints> = T extends Partial<Record<keyof B & string, infer V>>
106
+ ? WithEmptyObject<V>
36
107
  : T extends (...args: infer A) => infer R
37
108
  ? (...args: A) => ExtractBreakpoints<R, B>
38
109
  : {
@@ -43,10 +114,10 @@ export type ExtractBreakpoints<T, B extends Record<string, number>> = T extends
43
114
  : T[K]
44
115
  }
45
116
 
46
- export type RemoveKeysWithPrefix<T, B extends Record<string, number>> = T extends (...args: Array<any>) => infer R
117
+ export type RemoveKeysWithPrefix<T, B extends Breakpoints> = T extends (...args: Array<any>) => infer R
47
118
  ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R, B>
48
119
  : T extends object
49
120
  ? T extends Record<string, infer _V>
50
- ? { [K in keyof T as K extends `:w${string}` | `:h${string}` ? keyof B & string : K]: RemoveKeysWithPrefix<T[K], B> }
121
+ ? { [K in keyof T as K extends MediaQueries ? keyof B & string : K]: RemoveKeysWithPrefix<T[K], B> }
51
122
  : { [K in keyof T]: RemoveKeysWithPrefix<T[K], B> }
52
123
  : T
@@ -1,5 +1,5 @@
1
1
  import { throwError } from './common'
2
- import type { ScreenSize } from '../types'
2
+ import type { Breakpoints, ScreenSize, SortedBreakpointEntries } from '../types'
3
3
  import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries'
4
4
 
5
5
  /**
@@ -21,7 +21,7 @@ import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries'
21
21
  * const input = { md: 768, lg: 1024, sm: 0 }
22
22
  * sortAndValidateBreakpoints(input) // returns { sm: 0, md: 768, lg: 1024 }
23
23
  */
24
- export const sortAndValidateBreakpoints = <B extends Record<string, number>>(breakpoints: B): B => {
24
+ export const sortAndValidateBreakpoints = <B extends Breakpoints>(breakpoints: B): B => {
25
25
  const sortedPairs = Object
26
26
  .entries(breakpoints)
27
27
  .sort((breakpoint1, breakpoint2) => {
@@ -54,16 +54,15 @@ export const sortAndValidateBreakpoints = <B extends Record<string, number>>(bre
54
54
  *
55
55
  * @template B - An object type where keys are strings and values are numbers representing screen widths.
56
56
  * @param {number} width - The screen width to determine the breakpoint for.
57
- * @param {B} breakpoints - The breakpoints object to use for determination.
57
+ * @param breakpointEntries - sorted pairs of breakpoints
58
58
  * @returns {keyof B & string} The key of the breakpoint that the screen width falls into.
59
59
  *
60
60
  * @example
61
61
  * const breakpoints = { sm: 0, md: 768, lg: 1024 }
62
62
  * getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
63
63
  */
64
- export const getBreakpointFromScreenWidth = <B extends Record<string, number>>(width: number, breakpoints: B): keyof B & string => {
65
- const [key] = Object
66
- .entries(breakpoints)
64
+ export const getBreakpointFromScreenWidth = <B extends Breakpoints>(width: number, breakpointEntries: SortedBreakpointEntries<B>): keyof B & string => {
65
+ const [key] = breakpointEntries
67
66
  .find(([, value], index, otherBreakpoints) => {
68
67
  const minVal = value
69
68
  const maxVal = otherBreakpoints[index + 1]?.[1]
@@ -90,7 +89,7 @@ export const getBreakpointFromScreenWidth = <B extends Record<string, number>>(w
90
89
  * @param {Record<keyof B & string, string | number>} value - An object containing values associated with breakpoints or custom media queries.
91
90
  * @param {keyof B & string} breakpoint - The breakpoint name to check against.
92
91
  * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
93
- * @param {B} breakpoints - An object representing the defined breakpoints.
92
+ * @param breakpointPairs - sorted pairs of breakpoints
94
93
  *
95
94
  * @returns {string | number | undefined} Returns the value associated with the matching breakpoint or custom media query, or `undefined` if no match is found.
96
95
  *
@@ -102,7 +101,12 @@ export const getBreakpointFromScreenWidth = <B extends Record<string, number>>(w
102
101
  *
103
102
  * getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
104
103
  */
105
- export const getValueForBreakpoint = <B extends Record<string, number>>(value: Record<keyof B & string, string | number | undefined>, breakpoint: keyof B & string, screenSize: ScreenSize, breakpoints: B) => {
104
+ export const getValueForBreakpoint = <B extends Breakpoints>(
105
+ value: Record<keyof B & string, string | number | undefined>,
106
+ breakpoint: keyof B & string,
107
+ screenSize: ScreenSize,
108
+ breakpointPairs: SortedBreakpointEntries<B>
109
+ ): string | number | undefined => {
106
110
  // the highest priority is for custom media queries
107
111
  const customMediaQueries = Object
108
112
  .entries(value)
@@ -123,18 +127,14 @@ export const getValueForBreakpoint = <B extends Record<string, number>>(value: R
123
127
  }
124
128
 
125
129
  // there is no direct hit for breakpoint nor media-query, so let's simulate CSS cascading
126
- const allBreakpoints = Object
127
- .entries(breakpoints)
128
- .map(([key, bpValue]) => [key.toLowerCase(), bpValue])
129
-
130
- const currentBreakpoint = allBreakpoints
130
+ const currentBreakpoint = breakpointPairs
131
131
  .findIndex(([key]) => key === unifiedKey)
132
132
 
133
- const availableBreakpoints = allBreakpoints
133
+ const availableBreakpoints = breakpointPairs
134
134
  .filter(([key], index) => index < currentBreakpoint && key && key in value)
135
135
  .map(([key]) => key)
136
136
 
137
- return allBreakpoints.length > 0
137
+ return breakpointPairs.length > 0
138
138
  ? value[availableBreakpoints[availableBreakpoints.length - 1] as keyof B & string]
139
139
  : undefined
140
140
  }
@@ -1,3 +1,11 @@
1
+ import { Platform } from 'react-native'
2
+
1
3
  export const throwError = (message: string) => {
2
4
  throw new Error(`🦄 [react-native-unistyles]: ${message}`)
3
5
  }
6
+
7
+ export const warn = (message: string) => {
8
+ console.warn(`🦄 [react-native-unistyles]: ${message}`)
9
+ }
10
+
11
+ export const isWeb = () => Platform.OS === 'web'
@@ -1,2 +1,3 @@
1
+ export { normalizeStyles } from './normalizeStyles'
1
2
  export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints } from './breakpoints'
2
3
  export { proxifyFunction, parseStyle } from './styles'