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
@@ -0,0 +1,2 @@
1
+ // nothing to do here
2
+ export const normalizeStyles = <T>(styles: T) => styles as T
@@ -0,0 +1,103 @@
1
+ import { warn } from './common'
2
+
3
+ const preprocessor: Preprocessor = require('react-native-web/src/exports/StyleSheet/preprocess.js')
4
+
5
+ type Preprocessor = {
6
+ createTextShadowValue<T>(styles: any): T,
7
+ createBoxShadowValue<T>(styles: any): T,
8
+ createTransformValue<T>(transforms: any): T,
9
+ }
10
+
11
+ type NormalizedBoxShadow = {
12
+ shadowColor: undefined,
13
+ shadowOffset: undefined,
14
+ shadowOpacity: undefined,
15
+ shadowRadius: undefined,
16
+ boxShadow?: string
17
+ }
18
+
19
+ type NormalizedTextShadow = {
20
+ textShadowColor: undefined
21
+ textShadowOffset: undefined
22
+ textShadowRadius: undefined,
23
+ textShadow?: string
24
+ }
25
+
26
+ const normalizeBoxShadow = <T extends {}>(styles: T): NormalizedBoxShadow => {
27
+ const requiredBoxShadowProperties = [
28
+ 'shadowColor',
29
+ 'shadowOffset',
30
+ 'shadowOpacity',
31
+ 'shadowRadius'
32
+ ]
33
+
34
+ if (!requiredBoxShadowProperties.every(prop => prop in styles)) {
35
+ warn(`can't apply box shadow as you miss at least one of these properties: ${requiredBoxShadowProperties.join(', ')}`)
36
+
37
+ return {
38
+ shadowColor: undefined,
39
+ shadowOffset: undefined,
40
+ shadowOpacity: undefined,
41
+ shadowRadius: undefined
42
+ }
43
+ }
44
+
45
+ return {
46
+ boxShadow: preprocessor.createBoxShadowValue(styles),
47
+ shadowColor: undefined,
48
+ shadowOffset: undefined,
49
+ shadowOpacity: undefined,
50
+ shadowRadius: undefined
51
+ }
52
+ }
53
+
54
+ const normalizeTextShadow = <T extends {}>(styles: T): NormalizedTextShadow => {
55
+ const requiredTextShadowProperties = [
56
+ 'textShadowColor',
57
+ 'textShadowOffset',
58
+ 'textShadowRadius'
59
+ ]
60
+
61
+ if (!requiredTextShadowProperties.every(prop => prop in styles)) {
62
+ warn(`can't apply text shadow as you miss at least one of these properties: ${requiredTextShadowProperties.join(', ')}`)
63
+
64
+ return {
65
+ textShadowColor: undefined,
66
+ textShadowOffset: undefined,
67
+ textShadowRadius: undefined
68
+ }
69
+ }
70
+
71
+ return {
72
+ textShadow: preprocessor.createTextShadowValue(styles),
73
+ textShadowColor: undefined,
74
+ textShadowOffset: undefined,
75
+ textShadowRadius: undefined
76
+ }
77
+ }
78
+
79
+ export const normalizeStyles = <T extends {}>(styles: T): T => {
80
+ const normalizedTransform = ('transform' in styles && Array.isArray(styles.transform))
81
+ ? { transform: preprocessor.createTransformValue(styles.transform) }
82
+ : {}
83
+
84
+ const normalizedBoxShadow = (
85
+ 'shadowColor' in styles ||
86
+ 'shadowOffset' in styles ||
87
+ 'shadowOpacity' in styles ||
88
+ 'shadowRadius' in styles
89
+ ) ? normalizeBoxShadow(styles) : {}
90
+
91
+ const normalizedTextShadow = (
92
+ 'textShadowColor' in styles ||
93
+ 'textShadowOffset' in styles ||
94
+ 'textShadowRadius' in styles
95
+ ) ? normalizeTextShadow(styles) : {}
96
+
97
+ return {
98
+ ...styles,
99
+ ...normalizedTransform,
100
+ ...normalizedBoxShadow,
101
+ ...normalizedTextShadow
102
+ }
103
+ }
@@ -1,5 +1,7 @@
1
- import type { CustomNamedStyles, ScreenSize } from '../types'
1
+ import type { Breakpoints, CustomNamedStyles, ScreenSize, SortedBreakpointEntries } from '../types'
2
2
  import { getValueForBreakpoint } from './breakpoints'
3
+ import { normalizeStyles } from './normalizeStyles'
4
+ import { isWeb } from './common'
3
5
 
4
6
  /**
5
7
  * Proxies a function to parse its return value for custom media queries or breakpoints.
@@ -9,7 +11,7 @@ import { getValueForBreakpoint } from './breakpoints'
9
11
  * @param {Function} fn - The function to be proxified.
10
12
  * @param {keyof B & string} breakpoint - The breakpoint name to check against.
11
13
  * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
12
- * @param {B} breakpoints - An object representing the defined breakpoints.
14
+ * @param breakpointPairs - sorted pairs of breakpoints
13
15
  *
14
16
  * @returns {Function} Returns the proxified function
15
17
  *
@@ -22,13 +24,13 @@ import { getValueForBreakpoint } from './breakpoints'
22
24
  * const proxifiedFunction = proxifyFunction(myFunction, 'sm', screenSize, breakpoints)
23
25
  * proxifiedFunction() // parsed style based on screenSize and breakpoints
24
26
  */
25
- export const proxifyFunction = <B extends Record<string, number>>(
27
+ export const proxifyFunction = <B extends Breakpoints>(
26
28
  fn: Function, breakpoint: keyof B & string,
27
29
  screenSize: ScreenSize,
28
- breakpoints: B
30
+ breakpointPairs: SortedBreakpointEntries<B>
29
31
  ): Function => new Proxy(fn, {
30
32
  apply: (target, thisArg, argumentsList) =>
31
- parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize, breakpoints)
33
+ parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize, breakpointPairs)
32
34
  })
33
35
 
34
36
  /**
@@ -43,7 +45,7 @@ export const proxifyFunction = <B extends Record<string, number>>(
43
45
  * @param {CustomNamedStyles<T, B>} style - The style object to be parsed.
44
46
  * @param {keyof B & string} breakpoint - The breakpoint name to check against.
45
47
  * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
46
- * @param {B} breakpoints - An object representing the defined breakpoints.
48
+ * @param breakpointPairs - sorted pairs of breakpoints
47
49
  *
48
50
  * @returns {Record<string, string | number | Function>} Returns the parsed style object with resolved custom media queries or breakpoints.
49
51
  *
@@ -56,23 +58,26 @@ export const proxifyFunction = <B extends Record<string, number>>(
56
58
  * const parsedStyle = parseStyle(style, 'sm', screenSize, breakpoints)
57
59
  * // { fontSize: '12px' }
58
60
  */
59
- export const parseStyle = <T, B extends Record<string, number>>(
61
+ export const parseStyle = <T, B extends Breakpoints>(
60
62
  style: CustomNamedStyles<T, B>,
61
63
  breakpoint: keyof B & string,
62
64
  screenSize: ScreenSize,
63
- breakpoints: B
65
+ breakpointPairs: SortedBreakpointEntries<B>
64
66
  ): T => {
65
- const entries = Object.entries(style) as [[keyof T, CustomNamedStyles<T, B>]]
67
+ const entries = Object.entries(style) as [[
68
+ keyof T,
69
+ CustomNamedStyles<T, B> | Record<keyof B & string, string | number | undefined>]
70
+ ]
66
71
 
67
- return Object
72
+ const parsedStyles = Object
68
73
  .fromEntries(entries
69
74
  .map(([key, value]) => {
70
- const isNestedStyle = key === 'shadowOffset'
75
+ const hasNestedProperties = key === 'shadowOffset' || key === 'textShadowOffset'
71
76
 
72
- if (isNestedStyle) {
77
+ if (hasNestedProperties) {
73
78
  return [
74
79
  key,
75
- parseStyle(value, breakpoint, screenSize, breakpoints)
80
+ parseStyle(value as CustomNamedStyles<T, B>, breakpoint, screenSize, breakpointPairs)
76
81
  ]
77
82
  }
78
83
 
@@ -81,7 +86,7 @@ export const parseStyle = <T, B extends Record<string, number>>(
81
86
  if (isTransform && Array.isArray(value)) {
82
87
  return [
83
88
  key,
84
- value.map(value => parseStyle(value, breakpoint, screenSize, breakpoints))
89
+ value.map(value => parseStyle(value, breakpoint, screenSize, breakpointPairs))
85
90
  ]
86
91
  }
87
92
 
@@ -92,9 +97,19 @@ export const parseStyle = <T, B extends Record<string, number>>(
92
97
  return [key, value]
93
98
  }
94
99
 
95
- const valueWithBreakpoint = value as Record<keyof B & string, string | number>
96
-
97
- return [key, getValueForBreakpoint<B>(valueWithBreakpoint, breakpoint, screenSize, breakpoints)]
100
+ return [
101
+ key,
102
+ getValueForBreakpoint<B>(
103
+ value as Record<keyof B & string, string | number | undefined>,
104
+ breakpoint,
105
+ screenSize,
106
+ breakpointPairs
107
+ )
108
+ ]
98
109
  })
99
110
  )
111
+
112
+ return isWeb()
113
+ ? normalizeStyles(parsedStyles)
114
+ : parsedStyles
100
115
  }