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.
- package/README.md +342 -35
- package/lib/commonjs/createUnistyles.js +25 -13
- package/lib/commonjs/createUnistyles.js.map +1 -1
- package/lib/commonjs/mediaQueries.js +2 -0
- package/lib/commonjs/mediaQueries.js.map +1 -0
- package/lib/commonjs/utils/breakpoints.js +12 -16
- package/lib/commonjs/utils/breakpoints.js.map +1 -1
- package/lib/commonjs/utils/breakpoints.spec.js +20 -15
- package/lib/commonjs/utils/breakpoints.spec.js.map +1 -1
- package/lib/commonjs/utils/common.js +8 -1
- package/lib/commonjs/utils/common.js.map +1 -1
- package/lib/commonjs/utils/index.js +7 -0
- package/lib/commonjs/utils/index.js.map +1 -1
- package/lib/commonjs/utils/mediaQueries.spec.js +1 -1
- package/lib/commonjs/utils/mediaQueries.spec.js.map +1 -1
- package/lib/commonjs/utils/normalizeStyles.js +10 -0
- package/lib/commonjs/utils/normalizeStyles.js.map +1 -0
- package/lib/commonjs/utils/normalizeStyles.web.js +59 -0
- package/lib/commonjs/utils/normalizeStyles.web.js.map +1 -0
- package/lib/commonjs/utils/styles.js +14 -12
- package/lib/commonjs/utils/styles.js.map +1 -1
- package/lib/commonjs/utils/styles.spec.js +17 -7
- package/lib/commonjs/utils/styles.spec.js.map +1 -1
- package/lib/module/createUnistyles.js +25 -13
- package/lib/module/createUnistyles.js.map +1 -1
- package/lib/module/mediaQueries.js +2 -0
- package/lib/module/mediaQueries.js.map +1 -0
- package/lib/module/utils/breakpoints.js +12 -16
- package/lib/module/utils/breakpoints.js.map +1 -1
- package/lib/module/utils/breakpoints.spec.js +20 -15
- package/lib/module/utils/breakpoints.spec.js.map +1 -1
- package/lib/module/utils/common.js +5 -0
- package/lib/module/utils/common.js.map +1 -1
- package/lib/module/utils/index.js +1 -0
- package/lib/module/utils/index.js.map +1 -1
- package/lib/module/utils/mediaQueries.spec.js +1 -1
- package/lib/module/utils/mediaQueries.spec.js.map +1 -1
- package/lib/module/utils/normalizeStyles.js +3 -0
- package/lib/module/utils/normalizeStyles.js.map +1 -0
- package/lib/module/utils/normalizeStyles.web.js +52 -0
- package/lib/module/utils/normalizeStyles.web.js.map +1 -0
- package/lib/module/utils/styles.js +14 -12
- package/lib/module/utils/styles.js.map +1 -1
- package/lib/module/utils/styles.spec.js +17 -7
- package/lib/module/utils/styles.spec.js.map +1 -1
- package/lib/typescript/src/createUnistyles.d.ts +7 -3
- package/lib/typescript/src/createUnistyles.d.ts.map +1 -1
- package/lib/typescript/src/mediaQueries.d.ts +2 -0
- package/lib/typescript/src/mediaQueries.d.ts.map +1 -0
- package/lib/typescript/src/types.d.ts +53 -13
- package/lib/typescript/src/types.d.ts.map +1 -1
- package/lib/typescript/src/utils/breakpoints.d.ts +6 -6
- package/lib/typescript/src/utils/breakpoints.d.ts.map +1 -1
- package/lib/typescript/src/utils/common.d.ts +2 -0
- package/lib/typescript/src/utils/common.d.ts.map +1 -1
- package/lib/typescript/src/utils/index.d.ts +1 -0
- package/lib/typescript/src/utils/index.d.ts.map +1 -1
- package/lib/typescript/src/utils/normalizeStyles.d.ts +2 -0
- package/lib/typescript/src/utils/normalizeStyles.d.ts.map +1 -0
- package/lib/typescript/src/utils/normalizeStyles.web.d.ts +2 -0
- package/lib/typescript/src/utils/normalizeStyles.web.d.ts.map +1 -0
- package/lib/typescript/src/utils/styles.d.ts +5 -5
- package/lib/typescript/src/utils/styles.d.ts.map +1 -1
- package/package.json +9 -2
- package/src/createUnistyles.ts +38 -16
- package/src/mediaQueries.ts +33 -0
- package/src/types.ts +96 -25
- package/src/utils/breakpoints.ts +15 -15
- package/src/utils/common.ts +8 -0
- package/src/utils/index.ts +1 -0
- package/src/utils/normalizeStyles.ts +2 -0
- package/src/utils/normalizeStyles.web.ts +103 -0
- package/src/utils/styles.ts +32 -17
@@ -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
|
+
}
|
package/src/utils/styles.ts
CHANGED
@@ -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
|
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
|
27
|
+
export const proxifyFunction = <B extends Breakpoints>(
|
26
28
|
fn: Function, breakpoint: keyof B & string,
|
27
29
|
screenSize: ScreenSize,
|
28
|
-
|
30
|
+
breakpointPairs: SortedBreakpointEntries<B>
|
29
31
|
): Function => new Proxy(fn, {
|
30
32
|
apply: (target, thisArg, argumentsList) =>
|
31
|
-
parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize,
|
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
|
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
|
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
|
-
|
65
|
+
breakpointPairs: SortedBreakpointEntries<B>
|
64
66
|
): T => {
|
65
|
-
const entries = Object.entries(style) as [[
|
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
|
-
|
72
|
+
const parsedStyles = Object
|
68
73
|
.fromEntries(entries
|
69
74
|
.map(([key, value]) => {
|
70
|
-
const
|
75
|
+
const hasNestedProperties = key === 'shadowOffset' || key === 'textShadowOffset'
|
71
76
|
|
72
|
-
if (
|
77
|
+
if (hasNestedProperties) {
|
73
78
|
return [
|
74
79
|
key,
|
75
|
-
parseStyle(value, breakpoint, screenSize,
|
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,
|
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
|
-
|
96
|
-
|
97
|
-
|
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
|
}
|