react-native-unistyles 3.0.0-alpha.7 → 3.0.0-alpha.9

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 (218) hide show
  1. package/cxx/common/Helpers.h +58 -0
  2. package/cxx/core/Unistyle.h +0 -6
  3. package/cxx/core/UnistyleData.h +3 -2
  4. package/cxx/core/UnistyleWrapper.h +6 -6
  5. package/cxx/core/UnistylesRegistry.cpp +11 -10
  6. package/cxx/core/UnistylesRegistry.h +4 -3
  7. package/cxx/hybridObjects/HybridShadowRegistry.cpp +4 -2
  8. package/cxx/parser/Parser.cpp +24 -78
  9. package/cxx/parser/Parser.h +1 -2
  10. package/lib/commonjs/specs/ShadowRegistry/index.js +2 -2
  11. package/lib/commonjs/specs/ShadowRegistry/index.js.map +1 -1
  12. package/lib/commonjs/specs/index.web.js +1 -1
  13. package/lib/commonjs/web/convert/boxShadow.js +77 -0
  14. package/lib/commonjs/web/convert/boxShadow.js.map +1 -0
  15. package/lib/commonjs/web/convert/breakpoint.js +25 -0
  16. package/lib/commonjs/web/convert/breakpoint.js.map +1 -0
  17. package/lib/commonjs/web/convert/index.js +76 -0
  18. package/lib/commonjs/web/convert/index.js.map +1 -0
  19. package/lib/commonjs/web/convert/module.d.js +2 -0
  20. package/lib/commonjs/web/convert/module.d.js.map +1 -0
  21. package/lib/commonjs/web/convert/shadow.js +68 -0
  22. package/lib/commonjs/web/convert/shadow.js.map +1 -0
  23. package/lib/commonjs/web/convert/style.js +89 -0
  24. package/lib/commonjs/web/convert/style.js.map +1 -0
  25. package/lib/commonjs/web/convert/textShadow.js +73 -0
  26. package/lib/commonjs/web/convert/textShadow.js.map +1 -0
  27. package/lib/commonjs/web/convert/transform.js +72 -0
  28. package/lib/commonjs/web/convert/transform.js.map +1 -0
  29. package/lib/commonjs/web/convert/types.js +9 -0
  30. package/lib/commonjs/web/convert/types.js.map +1 -0
  31. package/lib/commonjs/web/convert/utils.js +55 -0
  32. package/lib/commonjs/web/convert/utils.js.map +1 -0
  33. package/lib/commonjs/web/create.js +89 -0
  34. package/lib/commonjs/web/create.js.map +1 -0
  35. package/lib/commonjs/web/index.js +51 -0
  36. package/lib/commonjs/web/index.js.map +1 -0
  37. package/lib/commonjs/web/listener/index.js +13 -0
  38. package/lib/commonjs/web/listener/index.js.map +1 -0
  39. package/lib/commonjs/web/listener/listener.js +36 -0
  40. package/lib/commonjs/web/listener/listener.js.map +1 -0
  41. package/lib/commonjs/web/mock.js +37 -0
  42. package/lib/commonjs/web/mock.js.map +1 -0
  43. package/lib/commonjs/web/mq.js +23 -0
  44. package/lib/commonjs/web/mq.js.map +1 -0
  45. package/lib/commonjs/web/pseudo.js +11 -0
  46. package/lib/commonjs/web/pseudo.js.map +1 -0
  47. package/lib/commonjs/web/registry.js +37 -0
  48. package/lib/commonjs/web/registry.js.map +1 -0
  49. package/lib/commonjs/web/runtime.js +164 -0
  50. package/lib/commonjs/web/runtime.js.map +1 -0
  51. package/lib/commonjs/web/state.js +121 -0
  52. package/lib/commonjs/web/state.js.map +1 -0
  53. package/lib/commonjs/web/utils.js +78 -0
  54. package/lib/commonjs/web/utils.js.map +1 -0
  55. package/lib/commonjs/web/variants/getVariants.js +39 -0
  56. package/lib/commonjs/web/variants/getVariants.js.map +1 -0
  57. package/lib/commonjs/web/variants/index.js +28 -0
  58. package/lib/commonjs/web/variants/index.js.map +1 -0
  59. package/lib/commonjs/web/variants/useVariants.js +75 -0
  60. package/lib/commonjs/web/variants/useVariants.js.map +1 -0
  61. package/lib/module/specs/ShadowRegistry/index.js +2 -2
  62. package/lib/module/specs/ShadowRegistry/index.js.map +1 -1
  63. package/lib/module/specs/index.web.js +1 -1
  64. package/lib/module/specs/index.web.js.map +1 -1
  65. package/lib/module/web/convert/boxShadow.js +72 -0
  66. package/lib/module/web/convert/boxShadow.js.map +1 -0
  67. package/lib/module/web/convert/breakpoint.js +20 -0
  68. package/lib/module/web/convert/breakpoint.js.map +1 -0
  69. package/lib/module/web/convert/index.js +71 -0
  70. package/lib/module/web/convert/index.js.map +1 -0
  71. package/lib/module/web/convert/module.d.js +2 -0
  72. package/lib/module/web/convert/module.d.js.map +1 -0
  73. package/lib/module/web/convert/shadow.js +63 -0
  74. package/lib/module/web/convert/shadow.js.map +1 -0
  75. package/lib/module/web/convert/style.js +84 -0
  76. package/lib/module/web/convert/style.js.map +1 -0
  77. package/lib/module/web/convert/textShadow.js +68 -0
  78. package/lib/module/web/convert/textShadow.js.map +1 -0
  79. package/lib/module/web/convert/transform.js +67 -0
  80. package/lib/module/web/convert/transform.js.map +1 -0
  81. package/lib/module/web/convert/types.js +5 -0
  82. package/lib/module/web/convert/types.js.map +1 -0
  83. package/lib/module/web/convert/utils.js +43 -0
  84. package/lib/module/web/convert/utils.js.map +1 -0
  85. package/lib/module/web/create.js +84 -0
  86. package/lib/module/web/create.js.map +1 -0
  87. package/lib/module/web/index.js +24 -0
  88. package/lib/module/web/index.js.map +1 -0
  89. package/lib/module/web/listener/index.js +4 -0
  90. package/lib/module/web/listener/index.js.map +1 -0
  91. package/lib/module/web/listener/listener.js +31 -0
  92. package/lib/module/web/listener/listener.js.map +1 -0
  93. package/lib/module/web/mock.js +33 -0
  94. package/lib/module/web/mock.js.map +1 -0
  95. package/lib/module/web/mq.js +17 -0
  96. package/lib/module/web/mq.js.map +1 -0
  97. package/lib/module/web/pseudo.js +6 -0
  98. package/lib/module/web/pseudo.js.map +1 -0
  99. package/lib/module/web/registry.js +33 -0
  100. package/lib/module/web/registry.js.map +1 -0
  101. package/lib/module/web/runtime.js +160 -0
  102. package/lib/module/web/runtime.js.map +1 -0
  103. package/lib/module/web/state.js +117 -0
  104. package/lib/module/web/state.js.map +1 -0
  105. package/lib/module/web/utils.js +65 -0
  106. package/lib/module/web/utils.js.map +1 -0
  107. package/lib/module/web/variants/getVariants.js +34 -0
  108. package/lib/module/web/variants/getVariants.js.map +1 -0
  109. package/lib/module/web/variants/index.js +5 -0
  110. package/lib/module/web/variants/index.js.map +1 -0
  111. package/lib/module/web/variants/useVariants.js +70 -0
  112. package/lib/module/web/variants/useVariants.js.map +1 -0
  113. package/lib/typescript/src/specs/ShadowRegistry/index.d.ts +2 -2
  114. package/lib/typescript/src/specs/ShadowRegistry/index.d.ts.map +1 -1
  115. package/lib/typescript/src/specs/index.web.d.ts +1 -1
  116. package/lib/typescript/src/specs/index.web.d.ts.map +1 -1
  117. package/lib/typescript/src/types/stylesheet.d.ts +1 -1
  118. package/lib/typescript/src/types/stylesheet.d.ts.map +1 -1
  119. package/lib/typescript/src/web/convert/boxShadow.d.ts.map +1 -0
  120. package/lib/typescript/src/web/convert/breakpoint.d.ts.map +1 -0
  121. package/lib/typescript/{web → src/web}/convert/index.d.ts +1 -1
  122. package/lib/typescript/src/web/convert/index.d.ts.map +1 -0
  123. package/lib/typescript/src/web/convert/shadow.d.ts.map +1 -0
  124. package/lib/typescript/src/web/convert/style.d.ts.map +1 -0
  125. package/lib/typescript/src/web/convert/textShadow.d.ts.map +1 -0
  126. package/lib/typescript/src/web/convert/transform.d.ts.map +1 -0
  127. package/lib/typescript/{web → src/web}/convert/types.d.ts +1 -1
  128. package/lib/typescript/src/web/convert/types.d.ts.map +1 -0
  129. package/lib/typescript/src/web/convert/utils.d.ts.map +1 -0
  130. package/lib/typescript/{web → src/web}/create.d.ts +11 -11
  131. package/lib/typescript/{web → src/web}/create.d.ts.map +1 -1
  132. package/lib/typescript/{web → src/web}/index.d.ts +12 -12
  133. package/lib/typescript/{web → src/web}/index.d.ts.map +1 -1
  134. package/lib/typescript/src/web/listener/index.d.ts.map +1 -0
  135. package/lib/typescript/{web → src/web}/listener/listener.d.ts +1 -1
  136. package/lib/typescript/src/web/listener/listener.d.ts.map +1 -0
  137. package/lib/typescript/{web → src/web}/mock.d.ts +2 -2
  138. package/lib/typescript/src/web/mock.d.ts.map +1 -0
  139. package/lib/typescript/src/web/mq.d.ts.map +1 -0
  140. package/lib/typescript/src/web/pseudo.d.ts.map +1 -0
  141. package/lib/typescript/{web → src/web}/registry.d.ts +1 -1
  142. package/lib/typescript/src/web/registry.d.ts.map +1 -0
  143. package/lib/typescript/{web → src/web}/runtime.d.ts +6 -6
  144. package/lib/typescript/src/web/runtime.d.ts.map +1 -0
  145. package/lib/typescript/{web → src/web}/state.d.ts +4 -4
  146. package/lib/typescript/src/web/state.d.ts.map +1 -0
  147. package/lib/typescript/{web → src/web}/utils.d.ts +5 -3
  148. package/lib/typescript/src/web/utils.d.ts.map +1 -0
  149. package/lib/typescript/src/web/variants/getVariants.d.ts +3 -0
  150. package/lib/typescript/src/web/variants/getVariants.d.ts.map +1 -0
  151. package/lib/typescript/src/web/variants/index.d.ts +3 -0
  152. package/lib/typescript/src/web/variants/index.d.ts.map +1 -0
  153. package/lib/typescript/src/web/variants/useVariants.d.ts +3 -0
  154. package/lib/typescript/src/web/variants/useVariants.d.ts.map +1 -0
  155. package/package.json +1 -1
  156. package/plugin/__tests__/dependencies.spec.js +5 -5
  157. package/plugin/__tests__/ref.spec.js +132 -17
  158. package/plugin/__tests__/stylesheet.spec.js +9 -9
  159. package/plugin/index.js +12 -13
  160. package/plugin/ref.js +18 -14
  161. package/plugin/style.js +13 -7
  162. package/src/specs/ShadowRegistry/index.ts +4 -4
  163. package/src/specs/index.web.ts +1 -1
  164. package/src/types/stylesheet.ts +1 -1
  165. package/{web → src/web}/convert/breakpoint.ts +1 -1
  166. package/{web → src/web}/convert/index.ts +1 -1
  167. package/{web → src/web}/convert/types.ts +1 -1
  168. package/{web → src/web}/create.ts +36 -33
  169. package/{web → src/web}/listener/listener.ts +1 -1
  170. package/{web → src/web}/mock.ts +2 -2
  171. package/{web → src/web}/registry.ts +1 -1
  172. package/{web → src/web}/runtime.ts +4 -4
  173. package/{web → src/web}/state.ts +5 -5
  174. package/{web → src/web}/utils.ts +5 -5
  175. package/src/web/variants/getVariants.ts +42 -0
  176. package/src/web/variants/index.ts +2 -0
  177. package/{web → src/web/variants}/useVariants.ts +24 -44
  178. package/lib/typescript/web/convert/boxShadow.d.ts.map +0 -1
  179. package/lib/typescript/web/convert/breakpoint.d.ts.map +0 -1
  180. package/lib/typescript/web/convert/index.d.ts.map +0 -1
  181. package/lib/typescript/web/convert/shadow.d.ts.map +0 -1
  182. package/lib/typescript/web/convert/style.d.ts.map +0 -1
  183. package/lib/typescript/web/convert/textShadow.d.ts.map +0 -1
  184. package/lib/typescript/web/convert/transform.d.ts.map +0 -1
  185. package/lib/typescript/web/convert/types.d.ts.map +0 -1
  186. package/lib/typescript/web/convert/utils.d.ts.map +0 -1
  187. package/lib/typescript/web/listener/index.d.ts.map +0 -1
  188. package/lib/typescript/web/listener/listener.d.ts.map +0 -1
  189. package/lib/typescript/web/mock.d.ts.map +0 -1
  190. package/lib/typescript/web/mq.d.ts.map +0 -1
  191. package/lib/typescript/web/pseudo.d.ts.map +0 -1
  192. package/lib/typescript/web/registry.d.ts.map +0 -1
  193. package/lib/typescript/web/runtime.d.ts.map +0 -1
  194. package/lib/typescript/web/state.d.ts.map +0 -1
  195. package/lib/typescript/web/useVariants.d.ts +0 -3
  196. package/lib/typescript/web/useVariants.d.ts.map +0 -1
  197. package/lib/typescript/web/utils.d.ts.map +0 -1
  198. /package/lib/typescript/{web → src/web}/convert/boxShadow.d.ts +0 -0
  199. /package/lib/typescript/{web → src/web}/convert/breakpoint.d.ts +0 -0
  200. /package/lib/typescript/{web → src/web}/convert/shadow.d.ts +0 -0
  201. /package/lib/typescript/{web → src/web}/convert/style.d.ts +0 -0
  202. /package/lib/typescript/{web → src/web}/convert/textShadow.d.ts +0 -0
  203. /package/lib/typescript/{web → src/web}/convert/transform.d.ts +0 -0
  204. /package/lib/typescript/{web → src/web}/convert/utils.d.ts +0 -0
  205. /package/lib/typescript/{web → src/web}/listener/index.d.ts +0 -0
  206. /package/lib/typescript/{web → src/web}/mq.d.ts +0 -0
  207. /package/lib/typescript/{web → src/web}/pseudo.d.ts +0 -0
  208. /package/{web → src/web}/convert/boxShadow.ts +0 -0
  209. /package/{web → src/web}/convert/module.d.ts +0 -0
  210. /package/{web → src/web}/convert/shadow.ts +0 -0
  211. /package/{web → src/web}/convert/style.ts +0 -0
  212. /package/{web → src/web}/convert/textShadow.ts +0 -0
  213. /package/{web → src/web}/convert/transform.ts +0 -0
  214. /package/{web → src/web}/convert/utils.ts +0 -0
  215. /package/{web → src/web}/index.ts +0 -0
  216. /package/{web → src/web}/listener/index.ts +0 -0
  217. /package/{web → src/web}/mq.ts +0 -0
  218. /package/{web → src/web}/pseudo.ts +0 -0
@@ -1,5 +1,5 @@
1
1
  import type { NestedCSSProperties } from 'typestyle/lib/types'
2
- import type { UnistylesValues } from '../../src/types'
2
+ import type { UnistylesValues } from '../../types'
3
3
  import { media } from 'typestyle'
4
4
  import { isPseudo } from '../pseudo'
5
5
  import { convertBreakpoint } from './breakpoint'
@@ -1,5 +1,5 @@
1
1
  import type { TextStyle, ViewStyle } from 'react-native'
2
- import type { ToDeepUnistyles } from '../../src/types/stylesheet'
2
+ import type { ToDeepUnistyles } from '../../types/stylesheet'
3
3
 
4
4
  export type ShadowOffset = ToDeepUnistyles<{ width: number, height: number }>
5
5
 
@@ -1,12 +1,12 @@
1
1
  import type { TypeStyle } from 'typestyle'
2
- import type { ReactNativeStyleSheet } from '../src/types'
3
- import type { StyleSheetWithSuperPowers, StyleSheet } from '../src/types/stylesheet'
2
+ import type { ReactNativeStyleSheet } from '../types'
3
+ import type { StyleSheetWithSuperPowers, StyleSheet } from '../types/stylesheet'
4
4
  import { UnistylesRegistry } from './registry'
5
5
  import { keyInObject, reduceObject, toReactNativeClassName } from './utils'
6
6
  import { UnistylesRuntime } from './runtime'
7
- import { createUseVariants } from './useVariants'
7
+ import { createUseVariants, getVariants } from './variants'
8
8
  import { UnistylesListener } from './listener'
9
- import type { UnistyleDependency } from '../src/specs/NativePlatform'
9
+ import type { UnistyleDependency } from '../specs/NativePlatform'
10
10
 
11
11
  type ListenToDependenciesProps = {
12
12
  value: StyleSheet[keyof StyleSheet],
@@ -16,10 +16,13 @@ type ListenToDependenciesProps = {
16
16
  args?: Array<any>
17
17
  }
18
18
 
19
+ type WebUnistyle = ReturnType<typeof UnistylesRegistry.createStyles>
20
+
19
21
  export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>) => {
20
22
  const computedStylesheet = typeof stylesheet === 'function'
21
23
  ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
22
24
  : stylesheet
25
+ let lastlySelectedVariants: Record<string, any> = {}
23
26
 
24
27
  const listenToDependencies = ({ key, className, unistyles, value, args = [] } : ListenToDependenciesProps) => {
25
28
  const dependencies = ('uni__dependencies' in value ? value['uni__dependencies'] : []) as Array<UnistyleDependency>
@@ -48,44 +51,42 @@ export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>) => {
48
51
 
49
52
  const styles = reduceObject(computedStylesheet, (value, key) => {
50
53
  if (typeof value === 'function') {
51
- const classNameMap = new Map<number, string>()
52
- const unistylesMap = new Map<number, TypeStyle>()
53
- const disposeMap = new Map<number, VoidFunction | undefined>()
54
+ const webUnistyleByRef = new Map<HTMLElement, WebUnistyle>()
55
+ const disposeByRef = new Map<HTMLElement, VoidFunction | undefined>()
54
56
 
55
57
  return (...args: Array<any>) => {
56
- const [id] = args.slice(-1)
57
- const result = value(...args.slice(0, -1))
58
- const dispose = disposeMap.get(id)
59
- const unistyles = unistylesMap.get(id)
60
- const className = classNameMap.get(id)
61
-
62
- if (unistyles && className && dispose) {
63
- dispose()
64
- UnistylesRegistry.updateStyles(unistyles, result, className)
65
- disposeMap.set(id, listenToDependencies({
58
+ const [ref] = args.slice(-1)
59
+ const result = value(...args)
60
+ const variants = Object.fromEntries(getVariants({ [key]: result } as ReactNativeStyleSheet<StyleSheet>, lastlySelectedVariants))
61
+ const resultWithVariants = {
62
+ ...result,
63
+ ...variants[key]
64
+ }
65
+
66
+ if (ref instanceof HTMLElement) {
67
+ const storedWebUnistyle = webUnistyleByRef.get(ref)
68
+ const webUnistyle = storedWebUnistyle ?? UnistylesRegistry.createStyles(resultWithVariants, key)
69
+
70
+ webUnistyleByRef.set(ref, webUnistyle)
71
+ disposeByRef.get(ref)?.()
72
+ disposeByRef.set(ref, listenToDependencies({
66
73
  key,
67
74
  value,
68
- unistyles,
69
- className,
75
+ unistyles: webUnistyle.unistyles,
76
+ className: webUnistyle.className,
70
77
  args
71
78
  }))
79
+ ref.classList.add(webUnistyle.className)
72
80
 
73
- return toReactNativeClassName(className, result)
74
- }
81
+ if (storedWebUnistyle) {
82
+ UnistylesRegistry.updateStyles(webUnistyle.unistyles, resultWithVariants, webUnistyle.className)
83
+ }
75
84
 
76
- const entry = UnistylesRegistry.createStyles(result, key)
77
85
 
78
- classNameMap.set(id, entry.className)
79
- unistylesMap.set(id, entry.unistyles)
80
- disposeMap.set(id, listenToDependencies({
81
- key,
82
- value,
83
- unistyles: entry.unistyles,
84
- className: entry.className,
85
- args
86
- }))
86
+ return
87
+ }
87
88
 
88
- return toReactNativeClassName(entry.className, result)
89
+ return toReactNativeClassName(null, resultWithVariants)
89
90
  }
90
91
  }
91
92
 
@@ -96,7 +97,9 @@ export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>) => {
96
97
  return toReactNativeClassName(className, value)
97
98
  }) as ReactNativeStyleSheet<StyleSheet>
98
99
 
99
- createUseVariants(styles)
100
+ createUseVariants(styles, newVariants => {
101
+ lastlySelectedVariants = newVariants
102
+ })
100
103
 
101
104
  return styles
102
105
  }
@@ -1,4 +1,4 @@
1
- import { UnistyleDependency } from '../../src/specs/NativePlatform'
1
+ import { UnistyleDependency } from '../../specs/NativePlatform'
2
2
  import { UnistylesRuntime } from '../runtime'
3
3
 
4
4
  export class UnistylesListenerBuilder {
@@ -1,5 +1,5 @@
1
- import type { UnistylesNavigationBar as NavigationBarSpec } from '../src/specs/NavigtionBar'
2
- import type { UnistylesStatusBar as StatusBarSpec } from '../src/specs/StatusBar'
1
+ import type { UnistylesNavigationBar as NavigationBarSpec } from '../specs/NavigtionBar'
2
+ import type { UnistylesStatusBar as StatusBarSpec } from '../specs/StatusBar'
3
3
 
4
4
  export const StatusBar: StatusBarSpec = {
5
5
  width: 0,
@@ -1,5 +1,5 @@
1
1
  import { createTypeStyle, TypeStyle } from 'typestyle'
2
- import type { UnistylesValues } from '../src/types'
2
+ import type { UnistylesValues } from '../types'
3
3
  import { convertToTypeStyle } from './convert'
4
4
  import { UnistylesState } from './state'
5
5
 
@@ -1,7 +1,7 @@
1
- import { UnistyleDependency } from '../src/specs/NativePlatform'
2
- import { ColorScheme, Orientation, type AppTheme, type AppThemeName } from '../src/specs/types'
3
- import type { UnistylesMiniRuntime } from '../src/specs/UnistylesRuntime'
4
- import { WebContentSizeCategory } from '../src/types'
1
+ import { UnistyleDependency } from '../specs/NativePlatform'
2
+ import { ColorScheme, Orientation, type AppTheme, type AppThemeName } from '../specs/types'
3
+ import type { UnistylesMiniRuntime } from '../specs/UnistylesRuntime'
4
+ import { WebContentSizeCategory } from '../types'
5
5
  import { UnistylesListener } from './listener'
6
6
  import { NavigationBar, StatusBar } from './mock'
7
7
  import { UnistylesState } from './state'
@@ -1,12 +1,12 @@
1
1
  import { type ReactElement, createElement, createRef } from 'react'
2
- import type { UnistylesTheme } from '../src/types'
3
- import type { UnistylesConfig } from '../src/specs/StyleSheet'
4
- import type { AppBreakpoint, AppThemeName } from '../src/specs/types'
5
- import type { UnistylesBreakpoints, UnistylesThemes } from '../src/global'
2
+ import type { UnistylesTheme } from '../types'
3
+ import type { UnistylesConfig } from '../specs/StyleSheet'
4
+ import type { AppBreakpoint, AppThemeName } from '../specs/types'
5
+ import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
6
6
  import { UnistylesRuntime } from './runtime'
7
7
  import { isServer, schemeToTheme } from './utils'
8
8
  import { UnistylesListener } from './listener'
9
- import { UnistyleDependency } from '../src/specs/NativePlatform'
9
+ import { UnistyleDependency } from '../specs/NativePlatform'
10
10
 
11
11
  class UnistylesStateBuilder {
12
12
  private readonly isSSR = isServer()
@@ -1,16 +1,16 @@
1
- import { ColorScheme, type AppThemeName} from '../src/specs/types'
2
- import type { UnistylesValues } from '../src/types'
1
+ import { ColorScheme, type AppThemeName} from '../specs/types'
2
+ import type { UnistylesValues } from '../types'
3
3
 
4
4
  export const reduceObject = <TObj extends Record<string, any>, TReducer>(
5
5
  obj: TObj,
6
6
  reducer: (value: TObj[keyof TObj], key: keyof TObj) => TReducer,
7
7
  ) => Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, reducer(value as TObj[keyof TObj], key)])) as { [K in keyof TObj]: TReducer }
8
8
 
9
- export const toReactNativeClassName = (className: string, values: UnistylesValues) => {
10
- const returnValue = {
9
+ export const toReactNativeClassName = (className: string | null, values: UnistylesValues) => {
10
+ const returnValue = className ? {
11
11
  $$css: true,
12
12
  [className]: className
13
- }
13
+ } : {}
14
14
 
15
15
  Object.defineProperties(returnValue, reduceObject(values, value => ({
16
16
  value,
@@ -0,0 +1,42 @@
1
+ import type { ReactNativeStyleSheet, StyleSheet } from '../../types'
2
+ import { deepMergeObjects } from '../utils'
3
+
4
+ type StylesWithVariants = {
5
+ variants: Record<string, any>,
6
+ compoundVariants?: Array<Record<string, any> & {
7
+ styles: Record<string, any>
8
+ }>
9
+ }
10
+ const hasVariants = <T extends object>(value: [string, T]): value is [string, T & StylesWithVariants] => 'variants' in value[1]
11
+
12
+ export const getVariants = (styles: ReactNativeStyleSheet<StyleSheet>, selectedVariants: Record<string, any>) => {
13
+ return Object.entries(styles)
14
+ .filter(hasVariants)
15
+ .filter(([_key, { variants }]) => Object.keys(variants).some(variant => variant in variants))
16
+ .map(([key, { variants, compoundVariants = [] }]) => {
17
+ const variantStyles = Object.entries(variants).flatMap(([variant, styles]) => {
18
+ const selectedVariant = selectedVariants[variant]
19
+ const selectedVariantStyles = styles[selectedVariant] ?? styles['default']
20
+
21
+ if (!selectedVariantStyles) {
22
+ return []
23
+ }
24
+
25
+ return selectedVariantStyles
26
+ })
27
+
28
+ const compoundVariantStyles = compoundVariants.flatMap(compoundVariant => {
29
+ const { styles, ...conditions } = compoundVariant
30
+
31
+ if (Object.entries(conditions).some(([variant, value]) => String(selectedVariants[variant]) !== String(value))) {
32
+ return []
33
+ }
34
+
35
+ return styles
36
+ })
37
+
38
+ const mergedVariantStyles = deepMergeObjects(...variantStyles, ...compoundVariantStyles)
39
+
40
+ return [key, mergedVariantStyles] as const
41
+ })
42
+ }
@@ -0,0 +1,2 @@
1
+ export * from './useVariants'
2
+ export * from './getVariants'
@@ -1,19 +1,11 @@
1
1
  import { useMemo, useRef, useState } from 'react'
2
2
  import type { TypeStyle } from 'typestyle'
3
- import type { ReactNativeStyleSheet, StyleSheet } from '../src/types'
4
- import { deepMergeObjects, equal, reduceObject } from './utils'
5
- import { UnistylesRegistry } from './registry'
3
+ import type { ReactNativeStyleSheet, StyleSheet } from '../../types'
4
+ import { equal, reduceObject } from '../utils'
5
+ import { UnistylesRegistry } from '../registry'
6
+ import { getVariants } from './getVariants'
6
7
 
7
- type StylesWithVariants = {
8
- variants: Record<string, any>,
9
- compoundVariants?: Array<Record<string, any> & {
10
- styles: Record<string, any>
11
- }>
12
- }
13
-
14
- const hasVariants = <T extends object>(value: [string, T]): value is [string, T & StylesWithVariants] => 'variants' in value[1]
15
-
16
- export const createUseVariants = (styles: ReactNativeStyleSheet<StyleSheet>) => {
8
+ export const createUseVariants = (styles: ReactNativeStyleSheet<StyleSheet>, setSelectedVariants: (variants: Record<string, any>) => void) => {
17
9
  const useVariants = (selectedVariants: Record<string, any>) => {
18
10
  const [unistylesMap] = useState(() => new Map<string, TypeStyle>())
19
11
  const [classNameMap] = useState(() => new Map<string, string>())
@@ -24,40 +16,17 @@ export const createUseVariants = (styles: ReactNativeStyleSheet<StyleSheet>) =>
24
16
 
25
17
  if (variantsChanged) {
26
18
  lastSelectedVariantsRef.current = selectedVariants
19
+ setSelectedVariants(selectedVariants)
27
20
  }
28
21
 
29
22
  const combinedVariantStyles = useMemo(() => {
30
- return Object.entries(styles)
31
- .filter(hasVariants)
32
- .filter(([_key, { variants }]) => Object.keys(variants).some(variant => variant in variants))
33
- .map(([key, { variants, compoundVariants = [] }]) => {
34
- const variantStyles = Object.entries(variants).flatMap(([variant, styles]) => {
35
- const selectedVariant = selectedVariants[variant]
36
- const selectedVariantStyles = styles[selectedVariant] ?? styles['default']
37
-
38
- if (!selectedVariantStyles) {
39
- return []
40
- }
41
-
42
- return selectedVariantStyles
43
- })
44
-
45
- const compoundVariantStyles = compoundVariants.flatMap(compoundVariant => {
46
- const { styles, ...conditions } = compoundVariant
47
-
48
- if (Object.entries(conditions).some(([variant, value]) => String(selectedVariants[variant]) !== String(value))) {
49
- return []
50
- }
51
-
52
- return styles
53
- })
23
+ const result = getVariants(styles, selectedVariants)
54
24
 
55
- const mergedVariantStyles = deepMergeObjects(...variantStyles, ...compoundVariantStyles)
56
-
57
- selectedVariantStylesMap.set(key, mergedVariantStyles)
25
+ result.forEach(([key, value]) => {
26
+ selectedVariantStylesMap.set(key, value)
27
+ })
58
28
 
59
- return [key, mergedVariantStyles] as const
60
- })
29
+ return result
61
30
  }, [lastSelectedVariantsRef.current])
62
31
 
63
32
  if (unistylesMap.size === 0 && combinedVariantStyles.length > 0) {
@@ -88,8 +57,19 @@ export const createUseVariants = (styles: ReactNativeStyleSheet<StyleSheet>) =>
88
57
  enumerable: false,
89
58
  configurable: true
90
59
  })))
91
- // @ts-expect-error - apply variant className
92
- styleEntry[className] = className
60
+
61
+ if (styleEntry) {
62
+ Object.keys(styleEntry ?? {}).forEach(key => {
63
+ if (!key.startsWith('variant-')) {
64
+ return
65
+ }
66
+
67
+ // @ts-expect-error - remove old variants
68
+ delete styleEntry[key]
69
+ })
70
+ // @ts-expect-error - apply variant className
71
+ styleEntry[className] = className
72
+ }
93
73
  })
94
74
  }
95
75
 
@@ -1 +0,0 @@
1
- {"version":3,"file":"boxShadow.d.ts","sourceRoot":"","sources":["../../../../web/convert/boxShadow.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAkB9D,eAAO,MAAM,iBAAiB,WAAY,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAG,mBAoD/D,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"breakpoint.d.ts","sourceRoot":"","sources":["../../../../web/convert/breakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAMrD,eAAO,MAAM,iBAAiB,eAAgB,MAAM,KAAG,UActD,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../web/convert/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAWtD,eAAO,MAAM,kBAAkB,UAAW,eAAe,wBAiExD,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"shadow.d.ts","sourceRoot":"","sources":["../../../../web/convert/shadow.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,qBAAsB,aAAa,CAAC,MAAM,CAAC,UAAU,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,eAAe,GAAG,CAAC,MAAM,CAAC,SAiE5H,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../web/convert/style.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAgF9D,eAAO,MAAM,QAAQ,QAAS,MAAM,SAAS,GAAG,wBAY/C,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"textShadow.d.ts","sourceRoot":"","sources":["../../../../web/convert/textShadow.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAiB9D,eAAO,MAAM,kBAAkB,WAAY,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAG,mBAkDhE,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../../../../web/convert/transform.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAK9D,KAAK,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAA;AAmC5C,eAAO,MAAM,iBAAiB,eAAgB,UAAU,KAAG,mBA+C1D,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../web/convert/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAEjE,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAAA;AAE7E,eAAO,MAAM,kBAAkB,sEAAuE,CAAA;AAEtG,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;AAErF,eAAO,MAAM,iBAAiB,2EAA4E,CAAA;AAE1G,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;AAEnF,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,SAAS,CAAA;AAE9C,MAAM,MAAM,aAAa,GAAG,MAAM,SAAS,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../web/convert/utils.ts"],"names":[],"mappings":"AAGA,OAAO,EAAyC,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,SAAS,CAAA;AAEnG,eAAO,MAAM,WAAW,QAAS,MAAM,SAAS,GAAG,KAAG,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAgD,CAAA;AAExI,eAAO,MAAM,YAAY,QAAS,MAAM,YAA0E,CAAA;AAElH,eAAO,MAAM,WAAW,QAAS,MAAM,YAAwE,CAAA;AAE/G,eAAO,MAAM,qBAAqB,UAAW,MAAM,oBAAiC,CAAA;AAEpF,eAAO,MAAM,cAAc,UAAW,MAAM,YAAW,MAAM,WAyB5D,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAI,IAAI,SAAS,aAAa,OAAO,IAAI,cAAc,MAAM,UAAU,GAAG,KAAG,SAAS,CAAC,IAAI,CAazH,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../web/listener/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"listener.d.ts","sourceRoot":"","sources":["../../../../web/listener/listener.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAGnE,qBAAa,wBAAwB;IACjC,OAAO,CAAC,aAAa,CAAQ;IAC7B,OAAO,CAAC,SAAS,CAAoG;IAErH,UAAU,eAAgB,kBAAkB,UAE3C;IAED,aAAa,aAUZ;IAED,YAAY,iBAAkB,KAAK,CAAC,kBAAkB,CAAC,YAAY,YAAY,gBAM9E;CACJ;AAED,eAAO,MAAM,iBAAiB,0BAAiC,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"mock.d.ts","sourceRoot":"","sources":["../../../web/mock.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC5F,OAAO,KAAK,EAAE,kBAAkB,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAEjF,eAAO,MAAM,SAAS,EAAE,aAUvB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,iBAS3B,CAAA;AAED,eAAO,MAAM,uBAAuB;;;;;;;;CAQnC,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"mq.d.ts","sourceRoot":"","sources":["../../../web/mq.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAMrD,eAAO,MAAM,OAAO,OAAQ,MAAM,KAAG,UAUpC,CAAA;AAED,eAAO,MAAM,aAAa,OAAQ,MAAM,YAAgC,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"pseudo.d.ts","sourceRoot":"","sources":["../../../web/pseudo.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,OAAO,kDAKV,CAAA;AAEV,eAAO,MAAM,QAAQ,aAAc,MAAM,YAAyC,CAAA;AAElF,MAAM,MAAM,MAAM,GAAG,OAAO,OAAO,CAAC,MAAM,CAAC,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../../web/registry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,SAAS,EAAE,MAAM,WAAW,CAAA;AACtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAInD,cAAM,wBAAwB;IAC1B,YAAY,eAAgB,eAAe,OAAO,MAAM,GAAG,MAAM;;;MAwBhE;IAED,YAAY,cAAe,SAAS,cAAc,eAAe,aAAa,MAAM,UAKnF;CACJ;AAED,eAAO,MAAM,iBAAiB,0BAAiC,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../../web/runtime.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,QAAQ,EAAE,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAC/F,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAA;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAA;AAMrD,cAAM,uBAAuB;IACzB,UAAU,wBAAuB;IACjC,SAAS,wBAAsB;IAE/B,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,YAAY;IAYpB,IAAI,WAAW,gBASd;IAED,IAAI,SAAS,uEAEZ;IAED,IAAI,mBAAmB,2BAEtB;IAED,IAAI,UAAU,4EAEb;IAED,IAAI,WAAW,gBAMd;IAED,IAAI,KAAK,0CAYR;IAED,IAAI,UAAU,WAEb;IAED,IAAI,MAAM;;;MAYT;IAED,IAAI,SAAS,WAEZ;IAED,IAAI,MAAM;;;;;;MAQT;IAED,IAAI,SAAS,wDAEZ;IAED,IAAI,GAAG,YAEN;IAED,IAAI,iBAAiB,YAEpB;IAED,IAAI,aAAa,+DAEhB;IAED,IAAI,WAAW,IAAI,oBAAoB,CAsBtC;IAED,QAAQ,cAAe,YAAY,UAQlC;IAED,iBAAiB,cAAe,OAAO,UAQtC;IAED,0BAA0B,QAAS,MAAM,UAAU,MAAM,UAMxD;IAED,gBAAgB,aAAW;IAE3B,WAAW,cAAe,YAAY,WAAW,CAAC,YAAY,EAAE,QAAQ,KAAK,QAAQ,UAQpF;IAED,eAAe,iGAA4B;CAC9C;AAED,eAAO,MAAM,gBAAgB,yBAAgC,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../web/state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAA4B,MAAM,OAAO,CAAA;AACnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACrE,OAAO,KAAK,EAAE,oBAAoB,EAAmB,MAAM,eAAe,CAAA;AAM1E,cAAM,qBAAqB;IACvB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAa;IACnC,QAAQ,CAAC,IAAI,EAAS,KAAK,CAAC,YAAY,CAAC,CAAA;IAEzC,MAAM,8BAAoC;IAC1C,SAAS,CAAC,EAAE,YAAY,CAAA;IAExB,UAAU,CAAC,EAAE,aAAa,CAAA;IAC1B,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAElC,iBAAiB,UAAQ;IAEzB,IAAI,WAAY,eAAe,UAU9B;IAED,OAAO,CAAC,UAAU,CAIjB;IAED,OAAO,CAAC,YAAY,CAyBnB;IAED,OAAO,CAAC,eAAe,CAmCtB;IAED,SAAS;;;CAyCZ;AAED,eAAO,MAAM,cAAc,uBAA8B,CAAA"}
@@ -1,3 +0,0 @@
1
- import type { ReactNativeStyleSheet, StyleSheet } from '../src/types';
2
- export declare const createUseVariants: (styles: ReactNativeStyleSheet<StyleSheet>) => void;
3
- //# sourceMappingURL=useVariants.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useVariants.d.ts","sourceRoot":"","sources":["../../../web/useVariants.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAarE,eAAO,MAAM,iBAAiB,WAAY,qBAAqB,CAAC,UAAU,CAAC,SAmF1E,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../web/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,YAAY,EAAC,MAAM,oBAAoB,CAAA;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEnD,eAAO,MAAM,YAAY,GAAI,IAAI,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,QAAQ,OAC9D,IAAI,WACA,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IAAI,CAAC,EAAE,GAAG,EAAE,MAAM,IAAI,KAAK,QAAQ,KACmD,GAAG,CAAe,IAAV,MAAM,IAAI,GAAG,QAAQ,GAAE,CAAA;AAErJ,eAAO,MAAM,sBAAsB,cAAe,MAAM,UAAU,eAAe;;;CAahF,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC,OAAO,WAAW,KAAG,GAAG,IAAI,MAAM,CAAe,CAAA;AAElH,eAAO,MAAM,aAAa,WAAY,WAAW,KAAG,YAQnD,CAAA;AAED,eAAO,MAAM,SAAS,QAAS,MAAM,WAAW,MAAM,WAM5B,CAAA;AAE1B,eAAO,MAAM,QAAQ,eAAsC,CAAA;AAE3D;;EAEE;AACF,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,MAAM,CAAC,WAAW,EAAE,GAAG,CAAC,cAAc,KAAK,CAAC,CAAC,CAAC,MAqBxF,CAAA;AAED,eAAO,MAAM,IAAI,YAAa,MAAM,SAA2D,CAAA;AAE/F,eAAO,MAAM,KAAK,GAAI,CAAC,KAAK,CAAC,KAAK,CAAC,YAqBlC,CAAA"}
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes