react-native-unistyles 3.0.0-alpha.33 → 3.0.0-alpha.35

Sign up to get free protection for your applications and to get access to all the features.
Files changed (288) hide show
  1. package/cxx/common/Helpers.h +24 -2
  2. package/cxx/core/HostStyle.cpp +1 -1
  3. package/cxx/core/UnistyleWrapper.h +31 -1
  4. package/cxx/core/UnistylesMountHook.cpp +1 -1
  5. package/cxx/core/UnistylesMountHook.h +4 -2
  6. package/cxx/core/UnistylesRegistry.cpp +7 -1
  7. package/cxx/hybridObjects/HybridShadowRegistry.cpp +1 -2
  8. package/cxx/hybridObjects/HybridShadowRegistry.h +1 -3
  9. package/cxx/hybridObjects/HybridStyleSheet.cpp +4 -1
  10. package/cxx/hybridObjects/HybridUnistylesRuntime.cpp +12 -0
  11. package/cxx/hybridObjects/HybridUnistylesRuntime.h +2 -0
  12. package/cxx/parser/Parser.cpp +6 -6
  13. package/cxx/parser/Parser.h +1 -1
  14. package/cxx/shadowTree/ShadowTrafficController.h +2 -0
  15. package/lib/commonjs/components/Display.js +18 -0
  16. package/lib/commonjs/components/Display.js.map +1 -0
  17. package/lib/commonjs/components/Hide.js +18 -0
  18. package/lib/commonjs/components/Hide.js.map +1 -0
  19. package/lib/commonjs/components/index.js +20 -0
  20. package/lib/commonjs/components/index.js.map +1 -0
  21. package/lib/commonjs/components/useMedia.js +59 -0
  22. package/lib/commonjs/components/useMedia.js.map +1 -0
  23. package/lib/commonjs/core/createUnistylesComponent.js +2 -1
  24. package/lib/commonjs/core/createUnistylesComponent.js.map +1 -1
  25. package/lib/commonjs/core/createUnistylesComponent.native.js +40 -2
  26. package/lib/commonjs/core/createUnistylesComponent.native.js.map +1 -1
  27. package/lib/commonjs/core/index.js +0 -14
  28. package/lib/commonjs/core/index.js.map +1 -1
  29. package/lib/commonjs/global.js +0 -4
  30. package/lib/commonjs/global.js.map +1 -1
  31. package/lib/commonjs/index.js +12 -14
  32. package/lib/commonjs/index.js.map +1 -1
  33. package/lib/commonjs/mq.js +27 -11
  34. package/lib/commonjs/mq.js.map +1 -2
  35. package/lib/commonjs/specs/NativePlatform/NativePlatform.nitro.js.map +0 -1
  36. package/lib/commonjs/specs/NavigtionBar/index.js.map +1 -2
  37. package/lib/commonjs/specs/ShadowRegistry/ShadowRegistry.nitro.js.map +1 -1
  38. package/lib/commonjs/specs/ShadowRegistry/index.js +5 -0
  39. package/lib/commonjs/specs/ShadowRegistry/index.js.map +1 -2
  40. package/lib/commonjs/specs/ShadowRegistry/types.js +0 -4
  41. package/lib/commonjs/specs/ShadowRegistry/types.js.map +1 -1
  42. package/lib/commonjs/specs/StatusBar/index.js.map +1 -2
  43. package/lib/commonjs/specs/StyleSheet/UnistylesStyleSheet.nitro.js +4 -2
  44. package/lib/commonjs/specs/StyleSheet/UnistylesStyleSheet.nitro.js.map +1 -1
  45. package/lib/commonjs/specs/TurboUnistyles/NativeTurboUnistyles.js +3 -1
  46. package/lib/commonjs/specs/TurboUnistyles/NativeTurboUnistyles.js.map +1 -2
  47. package/lib/commonjs/specs/TurboUnistyles/index.js.map +1 -1
  48. package/lib/commonjs/specs/UnistylesRuntime/UnistylesRuntime.nitro.js.map +1 -1
  49. package/lib/commonjs/specs/index.web.js.map +1 -2
  50. package/lib/commonjs/specs/types.js +10 -10
  51. package/lib/commonjs/specs/types.js.map +1 -1
  52. package/lib/commonjs/types/accessibility.js +9 -9
  53. package/lib/commonjs/types/accessibility.js.map +1 -1
  54. package/lib/commonjs/types/breakpoints.js.map +1 -1
  55. package/lib/commonjs/types/common.js +0 -4
  56. package/lib/commonjs/types/common.js.map +1 -1
  57. package/lib/commonjs/types/core.js.map +1 -1
  58. package/lib/commonjs/types/index.js.map +1 -2
  59. package/lib/commonjs/types/stylesheet.js +2 -1
  60. package/lib/commonjs/types/stylesheet.js.map +1 -2
  61. package/lib/commonjs/web/convert/index.js +7 -1
  62. package/lib/commonjs/web/convert/index.js.map +1 -2
  63. package/lib/commonjs/web/convert/pseudo.js.map +1 -2
  64. package/lib/commonjs/web/convert/shadow.js +5 -1
  65. package/lib/commonjs/web/convert/shadow.js.map +1 -2
  66. package/lib/commonjs/web/convert/style.js.map +1 -2
  67. package/lib/commonjs/web/convert/textShadow.js.map +1 -2
  68. package/lib/commonjs/web/convert/transform.js.map +1 -2
  69. package/lib/commonjs/web/convert/types.js.map +1 -1
  70. package/lib/commonjs/web/convert/utils.js +2 -1
  71. package/lib/commonjs/web/convert/utils.js.map +1 -2
  72. package/lib/commonjs/web/index.js.map +1 -2
  73. package/lib/commonjs/web/listener.js.map +1 -2
  74. package/lib/commonjs/web/mock.js.map +1 -2
  75. package/lib/commonjs/web/runtime.js.map +1 -2
  76. package/lib/commonjs/web/shadowRegistry.js +9 -1
  77. package/lib/commonjs/web/shadowRegistry.js.map +1 -2
  78. package/lib/commonjs/web/state.js +5 -1
  79. package/lib/commonjs/web/utils/common.js +3 -1
  80. package/lib/commonjs/web/utils/common.js.map +1 -2
  81. package/lib/commonjs/web/utils/index.js.map +1 -1
  82. package/lib/commonjs/web/utils/unistyle.js +1 -1
  83. package/lib/commonjs/web/variants/index.js.map +1 -1
  84. package/lib/module/common.js.map +1 -1
  85. package/lib/module/components/Display.js +13 -0
  86. package/lib/module/components/Display.js.map +1 -0
  87. package/lib/module/components/Hide.js +13 -0
  88. package/lib/module/components/Hide.js.map +1 -0
  89. package/lib/module/components/index.js +5 -0
  90. package/lib/module/components/index.js.map +1 -0
  91. package/lib/module/components/useMedia.js +54 -0
  92. package/lib/module/components/useMedia.js.map +1 -0
  93. package/lib/module/core/createUnistylesComponent.js +2 -1
  94. package/lib/module/core/createUnistylesComponent.js.map +1 -1
  95. package/lib/module/core/createUnistylesComponent.native.js +41 -3
  96. package/lib/module/core/createUnistylesComponent.native.js.map +1 -1
  97. package/lib/module/core/index.js +0 -2
  98. package/lib/module/core/index.js.map +1 -1
  99. package/lib/module/global.js +1 -1
  100. package/lib/module/global.js.map +0 -1
  101. package/lib/module/index.js +2 -1
  102. package/lib/module/index.js.map +1 -1
  103. package/lib/module/mq.js +21 -11
  104. package/lib/module/mq.js.map +1 -1
  105. package/lib/module/specs/NativePlatform/NativePlatform.nitro.js.map +0 -1
  106. package/lib/module/specs/NativePlatform/index.js.map +1 -1
  107. package/lib/module/specs/NavigtionBar/UnistylesNavigationBar.nitro.js.map +0 -1
  108. package/lib/module/specs/ShadowRegistry/ShadowRegistry.nitro.js.map +0 -1
  109. package/lib/module/specs/ShadowRegistry/index.js +5 -0
  110. package/lib/module/specs/ShadowRegistry/index.js.map +1 -1
  111. package/lib/module/specs/ShadowRegistry/types.js +0 -2
  112. package/lib/module/specs/ShadowRegistry/types.js.map +1 -1
  113. package/lib/module/specs/StatusBar/UnistylesStatusBar.nitro.js.map +1 -1
  114. package/lib/module/specs/StyleSheet/UnistylesStyleSheet.nitro.js +1 -1
  115. package/lib/module/specs/StyleSheet/UnistylesStyleSheet.nitro.js.map +0 -1
  116. package/lib/module/specs/UnistylesRuntime/UnistylesRuntime.nitro.js.map +0 -1
  117. package/lib/module/specs/index.web.js.map +1 -2
  118. package/lib/module/specs/types.js.map +0 -1
  119. package/lib/module/types/accessibility.js +1 -1
  120. package/lib/module/types/accessibility.js.map +0 -1
  121. package/lib/module/types/breakpoints.js.map +0 -1
  122. package/lib/module/types/common.js +1 -1
  123. package/lib/module/types/common.js.map +0 -1
  124. package/lib/module/types/core.js.map +0 -1
  125. package/lib/module/types/index.js.map +1 -2
  126. package/lib/module/types/stylesheet.js +2 -2
  127. package/lib/module/types/stylesheet.js.map +1 -2
  128. package/lib/module/types/variants.js.map +0 -1
  129. package/lib/module/web/convert/boxShadow.js +4 -1
  130. package/lib/module/web/convert/boxShadow.js.map +1 -2
  131. package/lib/module/web/convert/index.js +7 -1
  132. package/lib/module/web/convert/shadow.js +5 -1
  133. package/lib/module/web/convert/shadow.js.map +1 -2
  134. package/lib/module/web/convert/textShadow.js +4 -1
  135. package/lib/module/web/convert/utils.js +2 -1
  136. package/lib/module/web/convert/utils.js.map +1 -2
  137. package/lib/module/web/create.js +5 -1
  138. package/lib/module/web/create.js.map +1 -2
  139. package/lib/module/web/index.js +2 -1
  140. package/lib/module/web/index.js.map +1 -2
  141. package/lib/module/web/listener.js.map +1 -2
  142. package/lib/module/web/registry.js +3 -1
  143. package/lib/module/web/shadowRegistry.js +9 -1
  144. package/lib/module/web/shadowRegistry.js.map +1 -2
  145. package/lib/module/web/state.js +5 -1
  146. package/lib/module/web/state.js.map +1 -2
  147. package/lib/module/web/utils/common.js +3 -1
  148. package/lib/module/web/utils/common.js.map +1 -2
  149. package/lib/module/web/utils/unistyle.js +1 -1
  150. package/lib/module/web/utils/unistyle.js.map +1 -1
  151. package/lib/module/web/variants/getVariants.js.map +1 -2
  152. package/lib/module/web/variants/index.js.map +1 -1
  153. package/lib/typescript/src/components/Display.d.ts +7 -0
  154. package/lib/typescript/src/components/Display.d.ts.map +1 -0
  155. package/lib/typescript/src/components/Hide.d.ts +7 -0
  156. package/lib/typescript/src/components/Hide.d.ts.map +1 -0
  157. package/lib/typescript/src/components/index.d.ts +3 -0
  158. package/lib/typescript/src/components/index.d.ts.map +1 -0
  159. package/lib/typescript/src/components/useMedia.d.ts +6 -0
  160. package/lib/typescript/src/components/useMedia.d.ts.map +1 -0
  161. package/lib/typescript/src/core/createUnistylesComponent.d.ts +3 -2
  162. package/lib/typescript/src/core/createUnistylesComponent.d.ts.map +1 -1
  163. package/lib/typescript/src/core/createUnistylesComponent.native.d.ts +3 -2
  164. package/lib/typescript/src/core/createUnistylesComponent.native.d.ts.map +1 -1
  165. package/lib/typescript/src/core/index.d.ts +0 -2
  166. package/lib/typescript/src/core/index.d.ts.map +1 -1
  167. package/lib/typescript/src/index.d.ts +2 -1
  168. package/lib/typescript/src/index.d.ts.map +1 -1
  169. package/lib/typescript/src/mq.d.ts +8 -0
  170. package/lib/typescript/src/mq.d.ts.map +1 -1
  171. package/lib/typescript/src/specs/ShadowRegistry/index.d.ts.map +1 -1
  172. package/lib/typescript/src/specs/ShadowRegistry/types.d.ts +3 -0
  173. package/lib/typescript/src/specs/ShadowRegistry/types.d.ts.map +1 -1
  174. package/lib/typescript/src/specs/UnistylesRuntime/UnistylesRuntime.nitro.d.ts +1 -0
  175. package/lib/typescript/src/specs/UnistylesRuntime/UnistylesRuntime.nitro.d.ts.map +1 -1
  176. package/nitrogen/generated/shared/c++/HybridUnistylesRuntimeSpec.cpp +1 -0
  177. package/nitrogen/generated/shared/c++/HybridUnistylesRuntimeSpec.hpp +2 -0
  178. package/package.json +1 -1
  179. package/plugin/ref.js +4 -4
  180. package/plugin/style.js +15 -3
  181. package/src/components/Display.tsx +12 -0
  182. package/src/components/Hide.tsx +12 -0
  183. package/src/components/index.ts +2 -0
  184. package/src/components/useMedia.ts +64 -0
  185. package/src/core/createUnistylesComponent.native.tsx +48 -4
  186. package/src/core/createUnistylesComponent.tsx +4 -2
  187. package/src/core/index.ts +0 -2
  188. package/src/index.ts +2 -1
  189. package/src/mq.ts +27 -9
  190. package/src/specs/ShadowRegistry/index.ts +5 -0
  191. package/src/specs/ShadowRegistry/types.ts +4 -1
  192. package/src/specs/UnistylesRuntime/UnistylesRuntime.nitro.ts +1 -0
  193. package/src/web/utils/unistyle.ts +1 -1
  194. package/lib/commonjs/core/useBreakpoint.js +0 -22
  195. package/lib/commonjs/core/useBreakpoint.js.map +0 -1
  196. package/lib/commonjs/core/useBreakpoint.native.js +0 -24
  197. package/lib/commonjs/core/useBreakpoint.native.js.map +0 -1
  198. package/lib/commonjs/core/useTheme.js +0 -22
  199. package/lib/commonjs/core/useTheme.js.map +0 -2
  200. package/lib/commonjs/core/useTheme.native.js +0 -24
  201. package/lib/commonjs/core/useTheme.native.js.map +0 -1
  202. package/lib/commonjs/web/mq.js +0 -23
  203. package/lib/commonjs/web/mq.js.map +0 -1
  204. package/lib/module/core/useBreakpoint.js +0 -17
  205. package/lib/module/core/useBreakpoint.js.map +0 -1
  206. package/lib/module/core/useBreakpoint.native.js +0 -19
  207. package/lib/module/core/useBreakpoint.native.js.map +0 -2
  208. package/lib/module/core/useTheme.js +0 -17
  209. package/lib/module/core/useTheme.js.map +0 -2
  210. package/lib/module/core/useTheme.native.js +0 -19
  211. package/lib/module/core/useTheme.native.js.map +0 -1
  212. package/lib/module/web/mq.js +0 -17
  213. package/lib/module/web/mq.js.map +0 -1
  214. package/lib/typescript/src/core/useBreakpoint.d.ts +0 -2
  215. package/lib/typescript/src/core/useBreakpoint.d.ts.map +0 -1
  216. package/lib/typescript/src/core/useBreakpoint.native.d.ts +0 -2
  217. package/lib/typescript/src/core/useBreakpoint.native.d.ts.map +0 -1
  218. package/lib/typescript/src/core/useTheme.d.ts +0 -3
  219. package/lib/typescript/src/core/useTheme.d.ts.map +0 -1
  220. package/lib/typescript/src/core/useTheme.native.d.ts +0 -3
  221. package/lib/typescript/src/core/useTheme.native.d.ts.map +0 -1
  222. package/lib/typescript/src/web/mq.d.ts +0 -8
  223. package/lib/typescript/src/web/mq.d.ts.map +0 -1
  224. package/src/common.js +0 -4
  225. package/src/core/createUnistylesComponent.js +0 -6
  226. package/src/core/createUnistylesComponent.native.js +0 -31
  227. package/src/core/index.js +0 -3
  228. package/src/core/useBreakpoint.js +0 -14
  229. package/src/core/useBreakpoint.native.js +0 -16
  230. package/src/core/useBreakpoint.native.ts +0 -21
  231. package/src/core/useBreakpoint.ts +0 -18
  232. package/src/core/useTheme.js +0 -14
  233. package/src/core/useTheme.native.js +0 -16
  234. package/src/core/useTheme.native.ts +0 -22
  235. package/src/core/useTheme.ts +0 -19
  236. package/src/global.js +0 -1
  237. package/src/index.js +0 -3
  238. package/src/mq.js +0 -38
  239. package/src/specs/NativePlatform/NativePlatform.nitro.js +0 -19
  240. package/src/specs/NativePlatform/index.js +0 -1
  241. package/src/specs/NavigtionBar/UnistylesNavigationBar.nitro.js +0 -1
  242. package/src/specs/NavigtionBar/index.js +0 -9
  243. package/src/specs/ShadowRegistry/ShadowRegistry.nitro.js +0 -1
  244. package/src/specs/ShadowRegistry/index.js +0 -26
  245. package/src/specs/ShadowRegistry/types.js +0 -1
  246. package/src/specs/StatusBar/UnistylesStatusBar.nitro.js +0 -1
  247. package/src/specs/StatusBar/index.js +0 -25
  248. package/src/specs/StyleSheet/UnistylesStyleSheet.nitro.js +0 -1
  249. package/src/specs/StyleSheet/index.js +0 -13
  250. package/src/specs/TurboUnistyles/NativeTurboUnistyles.js +0 -2
  251. package/src/specs/TurboUnistyles/index.js +0 -1
  252. package/src/specs/UnistylesRuntime/UnistylesRuntime.nitro.js +0 -1
  253. package/src/specs/UnistylesRuntime/index.js +0 -20
  254. package/src/specs/index.js +0 -8
  255. package/src/specs/index.web.js +0 -2
  256. package/src/specs/types.js +0 -17
  257. package/src/types/accessibility.js +0 -30
  258. package/src/types/breakpoints.js +0 -1
  259. package/src/types/common.js +0 -1
  260. package/src/types/core.js +0 -1
  261. package/src/types/index.js +0 -1
  262. package/src/types/stylesheet.js +0 -2
  263. package/src/types/variants.js +0 -1
  264. package/src/web/convert/boxShadow.js +0 -59
  265. package/src/web/convert/index.js +0 -56
  266. package/src/web/convert/pseudo.js +0 -131
  267. package/src/web/convert/shadow.js +0 -50
  268. package/src/web/convert/style.js +0 -137
  269. package/src/web/convert/textShadow.js +0 -56
  270. package/src/web/convert/transform.js +0 -65
  271. package/src/web/convert/types.js +0 -2
  272. package/src/web/convert/utils.js +0 -39
  273. package/src/web/create.js +0 -36
  274. package/src/web/index.js +0 -22
  275. package/src/web/listener.js +0 -26
  276. package/src/web/mock.js +0 -21
  277. package/src/web/mq.js +0 -14
  278. package/src/web/mq.ts +0 -17
  279. package/src/web/registry.js +0 -165
  280. package/src/web/runtime.js +0 -160
  281. package/src/web/shadowRegistry.js +0 -96
  282. package/src/web/state.js +0 -68
  283. package/src/web/utils/common.js +0 -79
  284. package/src/web/utils/index.js +0 -2
  285. package/src/web/utils/unistyle.js +0 -72
  286. package/src/web/variants/getVariants.js +0 -26
  287. package/src/web/variants/index.js +0 -2
  288. package/src/web/variants/useVariants.js +0 -50
@@ -1,56 +0,0 @@
1
- import { deepMergeObjects, warn } from '../utils';
2
- import { validateShadow } from './shadow';
3
- import { TEXT_SHADOW_STYLES } from './types';
4
- import { extractShadowValue, normalizeColor, normalizeNumericValue } from './utils';
5
- const createTextShadowValue = (style) => {
6
- const { textShadowColor, textShadowOffset, textShadowRadius } = style;
7
- const offsetX = normalizeNumericValue(textShadowOffset.width);
8
- const offsetY = normalizeNumericValue(textShadowOffset.height);
9
- const radius = normalizeNumericValue(textShadowRadius);
10
- const color = normalizeColor(textShadowColor);
11
- return `${offsetX} ${offsetY} ${radius} ${color}`;
12
- };
13
- export const getTextShadowStyle = (styles) => {
14
- const missingStyles = TEXT_SHADOW_STYLES.filter(key => !(key in styles));
15
- if (missingStyles.length) {
16
- warn(`can't apply text shadow as you miss these properties: ${missingStyles.join(', ')}`);
17
- return {};
18
- }
19
- const breakpointsSet = new Set();
20
- try {
21
- validateShadow(TEXT_SHADOW_STYLES, styles, breakpointsSet);
22
- }
23
- catch (error) {
24
- if (typeof error === 'string') {
25
- warn(error);
26
- }
27
- return {};
28
- }
29
- const breakpoints = Array.from(breakpointsSet);
30
- // If no breakpoints were used return styles without media queries
31
- if (breakpoints.length === 0) {
32
- return {
33
- textShadow: createTextShadowValue(styles)
34
- };
35
- }
36
- // Create textShadow for each breakpoint
37
- const breakpointStyles = breakpoints.map(breakpoint => {
38
- const color = extractShadowValue('textShadowColor', breakpoint, styles);
39
- const { width, height } = extractShadowValue('textShadowOffset', breakpoint, styles);
40
- const radius = extractShadowValue('textShadowRadius', breakpoint, styles);
41
- return {
42
- [breakpoint]: {
43
- textShadow: createTextShadowValue({
44
- textShadowColor: color,
45
- textShadowOffset: {
46
- width,
47
- height
48
- },
49
- textShadowRadius: radius
50
- })
51
- }
52
- };
53
- });
54
- // Merge all breakpoints styles into one
55
- return deepMergeObjects(...breakpointStyles);
56
- };
@@ -1,65 +0,0 @@
1
- import { deepMergeObjects, keyInObject } from '../utils';
2
- import { normalizeNumericValue } from './utils';
3
- const normalizeTransform = (key, value) => {
4
- if (key.includes('scale')) {
5
- return value;
6
- }
7
- if (typeof value === 'number') {
8
- return normalizeNumericValue(value);
9
- }
10
- return value;
11
- };
12
- const createTransformValue = (transforms) => transforms
13
- .map(transform => {
14
- const [key] = Object.keys(transform);
15
- if (!key) {
16
- return undefined;
17
- }
18
- const value = transform[key];
19
- switch (key) {
20
- case 'matrix':
21
- case 'matrix3d':
22
- return `${key}(${value.join(',')})`;
23
- default:
24
- return `${key}(${normalizeTransform(key, value)})`;
25
- }
26
- })
27
- .filter(Boolean)
28
- .join(' ');
29
- export const getTransformStyle = (transforms) => {
30
- const breakpoints = new Set();
31
- const normalTransforms = [];
32
- transforms.forEach(transform => {
33
- const [property] = Object.keys(transform);
34
- if (!property) {
35
- return;
36
- }
37
- const value = transform[property];
38
- if (typeof value === 'object' && !Array.isArray(value)) {
39
- Object.keys(value).forEach(breakpoint => breakpoints.add(breakpoint));
40
- return;
41
- }
42
- normalTransforms.push(transform);
43
- });
44
- const breakpointTransforms = Array.from(breakpoints).flatMap(breakpoint => {
45
- const transformsPerBreakpoint = transforms.flatMap(transform => {
46
- const [property] = Object.keys(transform);
47
- if (!property) {
48
- return [];
49
- }
50
- const value = transform[property];
51
- if (typeof value === 'object' && !Array.isArray(value)) {
52
- return keyInObject(value, breakpoint) ? [{ [property]: value[breakpoint] }] : [];
53
- }
54
- return [];
55
- });
56
- return [{
57
- [breakpoint]: {
58
- transform: createTransformValue(transformsPerBreakpoint)
59
- }
60
- }];
61
- });
62
- return deepMergeObjects({
63
- transform: createTransformValue(normalTransforms)
64
- }, ...breakpointTransforms);
65
- };
@@ -1,2 +0,0 @@
1
- export const TEXT_SHADOW_STYLES = ['textShadowColor', 'textShadowOffset', 'textShadowRadius'];
2
- export const BOX_SHADOW_STYLES = ['shadowColor', 'shadowRadius', 'shadowOpacity', 'shadowOffset'];
@@ -1,39 +0,0 @@
1
- // based on react-native-web normalizer
2
- // https://github.com/necolas/react-native-web
3
- import normalizeColors from '@react-native/normalize-colors';
4
- import { BOX_SHADOW_STYLES, TEXT_SHADOW_STYLES } from './types';
5
- export const isTransform = (key, value) => key === 'transform' && Array.isArray(value);
6
- export const isTextShadow = (key) => TEXT_SHADOW_STYLES.includes(key);
7
- export const isBoxShadow = (key) => BOX_SHADOW_STYLES.includes(key);
8
- export const normalizeNumericValue = (value) => value ? `${value}px` : value;
9
- export const normalizeColor = (color, opacity = 1) => {
10
- // If the opacity is 1 there's no need to normalize the color
11
- if (opacity === 1) {
12
- return color;
13
- }
14
- const integer = normalizeColors(color);
15
- // If the color is an unknown format, the return value is null
16
- if (integer === null) {
17
- return color;
18
- }
19
- const hex = integer.toString(16).padStart(8, '0');
20
- if (hex.length === 8) {
21
- const [r = 0, g = 0, b = 0, a = 1] = hex
22
- .split(/(?=(?:..)*$)/)
23
- .map(x => parseInt(x, 16))
24
- .filter(num => !isNaN(num));
25
- return `rgba(${r},${g},${b},${(a / 255) * opacity})`;
26
- }
27
- return color;
28
- };
29
- export const extractShadowValue = (key, breakpoint, styles) => {
30
- const value = styles[key];
31
- if (key === 'textShadowOffset' || key === 'shadowOffset') {
32
- const { width, height } = value;
33
- return {
34
- width: typeof width === 'object' ? width[breakpoint] : width,
35
- height: typeof height === 'object' ? height[breakpoint] : height
36
- };
37
- }
38
- return typeof value === 'object' ? value[breakpoint] : value;
39
- };
package/src/web/create.js DELETED
@@ -1,36 +0,0 @@
1
- import { assignSecrets, reduceObject, getStyles, deepMergeObjects } from './utils';
2
- import { UnistylesRuntime } from './runtime';
3
- import { createUseVariants, getVariants } from './variants';
4
- export const create = (stylesheet) => {
5
- const computedStylesheet = typeof stylesheet === 'function'
6
- ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
7
- : stylesheet;
8
- const selectedVariants = new Map();
9
- const copyVariants = () => Object.fromEntries(selectedVariants.entries());
10
- const addSecrets = (value, key, args) => assignSecrets(value, {
11
- __uni__key: key,
12
- __uni__refs: new Set(),
13
- __uni__stylesheet: stylesheet,
14
- __uni__args: args,
15
- __uni__variants: copyVariants()
16
- });
17
- const styles = reduceObject(computedStylesheet, (value, _key) => {
18
- const key = String(_key);
19
- if (typeof value === 'function') {
20
- const dynamicStyle = (...args) => {
21
- const result = value(...args);
22
- const variants = Object.fromEntries(getVariants({ [key]: result }, copyVariants()));
23
- const resultWithVariants = deepMergeObjects(result, variants[key] ?? {});
24
- // Add secrets to result of dynamic styles function
25
- return addSecrets(getStyles(resultWithVariants), key, args);
26
- };
27
- // Add secrets to dynamic styles function
28
- return addSecrets(dynamicStyle, key);
29
- }
30
- // Add secrets to static styles
31
- return addSecrets(getStyles(value), key);
32
- });
33
- // Inject useVariants hook to styles
34
- createUseVariants(styles, newVariants => Object.entries(newVariants).forEach(([key, value]) => selectedVariants.set(key, value)));
35
- return styles;
36
- };
package/src/web/index.js DELETED
@@ -1,22 +0,0 @@
1
- import { create } from './create';
2
- import { UnistylesState } from './state';
3
- import { deepMergeObjects } from './utils';
4
- export const StyleSheet = {
5
- configure: UnistylesState.init,
6
- create,
7
- absoluteFill: {
8
- position: 'absolute',
9
- left: 0,
10
- top: 0,
11
- right: 0,
12
- bottom: 0,
13
- },
14
- compose: (a, b) => deepMergeObjects(a, b),
15
- flatten: (...styles) => deepMergeObjects(...styles),
16
- hairlineWidth: 1
17
- };
18
- export { UnistylesRuntime } from './runtime';
19
- export { UnistylesShadowRegistry } from './shadowRegistry';
20
- export * from './mock';
21
- // TODO: Work on SSR
22
- export const getSSRUnistyles = () => [];
@@ -1,26 +0,0 @@
1
- import { UnistyleDependency } from '../specs/NativePlatform';
2
- import { UnistylesRuntime } from './runtime';
3
- class UnistylesListenerBuilder {
4
- isInitialized = false;
5
- listeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set());
6
- emitChange = (dependency) => {
7
- this.listeners[dependency]?.forEach(listener => listener());
8
- };
9
- initListeners = () => {
10
- if (this.isInitialized) {
11
- return;
12
- }
13
- this.isInitialized = true;
14
- UnistylesRuntime.darkMedia?.addEventListener('change', () => this.emitChange(UnistyleDependency.ColorScheme));
15
- UnistylesRuntime.lightMedia?.addEventListener('change', () => this.emitChange(UnistyleDependency.ColorScheme));
16
- window.addEventListener('orientationchange', () => this.emitChange(UnistyleDependency.Orientation));
17
- window.addEventListener('resize', () => this.emitChange(UnistyleDependency.Dimensions));
18
- };
19
- addListeners = (dependencies, listener) => {
20
- dependencies.forEach(dependency => this.listeners[dependency]?.add(listener));
21
- return () => {
22
- dependencies.forEach(dependency => this.listeners[dependency]?.delete(listener));
23
- };
24
- };
25
- }
26
- export const UnistylesListener = new UnistylesListenerBuilder();
package/src/web/mock.js DELETED
@@ -1,21 +0,0 @@
1
- export const StatusBar = {
2
- width: 0,
3
- height: 0,
4
- setStyle: () => { },
5
- setHidden: () => { },
6
- setBackgroundColor: () => { },
7
- equals: () => true,
8
- toString: () => 'StatusBar',
9
- __type: 'web',
10
- name: 'StatusBar'
11
- };
12
- export const NavigationBar = {
13
- width: 0,
14
- height: 0,
15
- setHidden: () => { },
16
- setBackgroundColor: () => { },
17
- equals: () => true,
18
- toString: () => 'NavigationBar',
19
- __type: 'web',
20
- name: 'NavigationBar'
21
- };
package/src/web/mq.js DELETED
@@ -1,14 +0,0 @@
1
- const IS_UNISTYLES_REGEX = /:([hw])\[(\d+)(?:,\s*(\d+|Infinity))?]/;
2
- const UNISTYLES_WIDTH_REGEX = /:(w)\[(\d+)(?:,\s*(\d+|Infinity))?]/;
3
- const UNISTYLES_HEIGHT_REGEX = /:(h)\[(\d+)(?:,\s*(\d+|Infinity))?]/;
4
- export const parseMq = (mq) => {
5
- const [, width, fromW, toW] = UNISTYLES_WIDTH_REGEX.exec(mq) || [];
6
- const [, height, fromH, toH] = UNISTYLES_HEIGHT_REGEX.exec(mq) || [];
7
- return {
8
- minWidth: !width || fromW === 'Infinity' ? undefined : Number(fromW),
9
- maxWidth: !width || toW === 'Infinity' ? undefined : Number(toW),
10
- minHeight: !height || fromH === 'Infinity' ? undefined : Number(fromH),
11
- maxHeight: !height || toH === 'Infinity' ? undefined : Number(toH),
12
- };
13
- };
14
- export const isUnistylesMq = (mq) => IS_UNISTYLES_REGEX.test(mq);
package/src/web/mq.ts DELETED
@@ -1,17 +0,0 @@
1
- const IS_UNISTYLES_REGEX = /:([hw])\[(\d+)(?:,\s*(\d+|Infinity))?]/
2
- const UNISTYLES_WIDTH_REGEX = /:(w)\[(\d+)(?:,\s*(\d+|Infinity))?]/
3
- const UNISTYLES_HEIGHT_REGEX = /:(h)\[(\d+)(?:,\s*(\d+|Infinity))?]/
4
-
5
- export const parseMq = (mq: string) => {
6
- const [, width, fromW, toW] = UNISTYLES_WIDTH_REGEX.exec(mq) || []
7
- const [, height, fromH, toH] = UNISTYLES_HEIGHT_REGEX.exec(mq) || []
8
-
9
- return {
10
- minWidth: !width || fromW === 'Infinity' ? undefined : Number(fromW),
11
- maxWidth: !width || toW === 'Infinity' ? undefined : Number(toW),
12
- minHeight: !height || fromH === 'Infinity' ? undefined : Number(fromH),
13
- maxHeight: !height || toH === 'Infinity' ? undefined : Number(toH),
14
- }
15
- }
16
-
17
- export const isUnistylesMq = (mq: string) => IS_UNISTYLES_REGEX.test(mq)
@@ -1,165 +0,0 @@
1
- import { UnistylesRuntime } from './runtime';
2
- import { extractMediaQueryValue, keyInObject, getMediaQuery, generateHash, extractUnistyleDependencies, deepMergeObjects } from './utils';
3
- import { UnistylesListener } from './listener';
4
- import { convertUnistyles } from './convert';
5
- import { getVariants } from './variants';
6
- class UnistylesRegistryBuilder {
7
- stylesheets = new Map();
8
- stylesCounter = new Map();
9
- #styleTag = null;
10
- disposeListenersMap = new Map();
11
- dependenciesMap = new Map();
12
- get styleTag() {
13
- const tag = this.#styleTag;
14
- if (!tag) {
15
- const newTag = document.createElement('style');
16
- newTag.id = 'unistyles-web';
17
- this.#styleTag = newTag;
18
- document.head.appendChild(newTag);
19
- return newTag;
20
- }
21
- return tag;
22
- }
23
- getComputedStylesheet = (stylesheet) => {
24
- if (typeof stylesheet !== 'function') {
25
- return stylesheet;
26
- }
27
- const computedStylesheet = this.stylesheets.get(stylesheet);
28
- if (computedStylesheet) {
29
- return computedStylesheet;
30
- }
31
- const createdStylesheet = stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime);
32
- const dependencies = Object.values(createdStylesheet).flatMap(value => extractUnistyleDependencies(value));
33
- this.addDependenciesToStylesheet(stylesheet, dependencies);
34
- this.stylesheets.set(stylesheet, createdStylesheet);
35
- return createdStylesheet;
36
- };
37
- addDependenciesToStylesheet = (stylesheet, dependencies) => {
38
- this.disposeListenersMap.get(stylesheet)?.();
39
- const dependenciesMap = this.dependenciesMap.get(stylesheet) ?? new Set(dependencies);
40
- dependencies.forEach(dependency => dependenciesMap.add(dependency));
41
- const dispose = UnistylesListener.addListeners(Array.from(dependenciesMap), () => {
42
- const newComputedStylesheet = stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime);
43
- this.stylesheets.set(stylesheet, newComputedStylesheet);
44
- });
45
- this.dependenciesMap.set(stylesheet, dependenciesMap);
46
- this.disposeListenersMap.set(stylesheet, dispose);
47
- };
48
- add = ({ key, value, stylesheet, args, variants }) => {
49
- const hash = generateHash(value);
50
- const existingCounter = this.stylesCounter.get(hash);
51
- if (!existingCounter || existingCounter.size === 0) {
52
- const counter = new Set();
53
- const dependencies = extractUnistyleDependencies(value);
54
- counter.add(value);
55
- this.stylesCounter.set(hash, counter);
56
- this.applyStyles(hash, convertUnistyles(value));
57
- UnistylesListener.addListeners(dependencies, async () => {
58
- // Move this callback to the end of the event loop
59
- await Promise.resolve();
60
- const newComputedStyleSheet = this.getComputedStylesheet(stylesheet);
61
- const newValue = newComputedStyleSheet[key];
62
- const result = typeof newValue === 'function'
63
- ? newValue(...args)
64
- : newValue;
65
- const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants));
66
- const resultWithVariants = deepMergeObjects(result, variantsResult ?? {});
67
- this.applyStyles(hash, convertUnistyles(resultWithVariants));
68
- });
69
- return hash;
70
- }
71
- existingCounter.add(value);
72
- return hash;
73
- };
74
- applyStyles = (hash, styles) => {
75
- Object.entries(styles).forEach(([key, value]) => {
76
- if (!this.styleTag.sheet) {
77
- return;
78
- }
79
- if (typeof value === 'object' && !key.startsWith('_')) {
80
- const mediaQuery = getMediaQuery(key);
81
- const cssRules = Array.from(this.styleTag.sheet.cssRules);
82
- let queryRule = cssRules.find(rule => {
83
- if (!(rule instanceof CSSMediaRule)) {
84
- return false;
85
- }
86
- return rule.media.item(0)?.includes(mediaQuery);
87
- }) ?? null;
88
- if (!queryRule) {
89
- const mediaQueryValue = extractMediaQueryValue(mediaQuery);
90
- const ruleIndex = mediaQueryValue
91
- ? cssRules.reduce((acc, rule, ruleIndex) => {
92
- if (!(rule instanceof CSSMediaRule)) {
93
- return acc;
94
- }
95
- const ruleMediaQueryValue = extractMediaQueryValue(rule.conditionText);
96
- if (ruleMediaQueryValue === undefined) {
97
- return;
98
- }
99
- return ruleMediaQueryValue > mediaQueryValue ? ruleIndex : acc;
100
- }, cssRules.length)
101
- : undefined;
102
- queryRule = this.styleTag.sheet.cssRules.item(this.styleTag.sheet.insertRule(`@media ${mediaQuery} {.${hash} {}}`, ruleIndex));
103
- }
104
- if (queryRule instanceof CSSMediaRule) {
105
- Object.entries(value).forEach(([mqKey, mqValue]) => {
106
- this.applyRule({
107
- hash,
108
- key: mqKey,
109
- value: mqValue,
110
- sheet: queryRule
111
- });
112
- });
113
- }
114
- return;
115
- }
116
- // Pseudo
117
- if (typeof value === 'object') {
118
- Object.entries(value).forEach(([pseudoKey, pseudoValue]) => {
119
- this.applyRule({
120
- hash: `${hash}${key.replace('_', ':')}`,
121
- key: pseudoKey,
122
- value: pseudoValue,
123
- sheet: this.styleTag.sheet
124
- });
125
- });
126
- return;
127
- }
128
- this.applyRule({
129
- hash,
130
- key,
131
- value,
132
- sheet: this.styleTag.sheet
133
- });
134
- });
135
- };
136
- applyRule = ({ hash, key, value, sheet }) => {
137
- let rule = Array.from(sheet.cssRules).find(rule => {
138
- if (!(rule instanceof CSSStyleRule)) {
139
- return false;
140
- }
141
- // In unistyles pseudos are prefixed with ':' but in css some of them are prefixed with '::'
142
- return rule.selectorText.replace('::', ':').includes(hash);
143
- }) ?? null;
144
- if (!rule) {
145
- rule = sheet.cssRules.item(sheet.insertRule(`.${hash} {}`));
146
- }
147
- if (!(rule instanceof CSSStyleRule) || !keyInObject(rule.style, key)) {
148
- return;
149
- }
150
- rule.style[key] = value;
151
- };
152
- remove = (value) => {
153
- const hash = generateHash(value);
154
- const existingStyles = this.stylesCounter.get(hash);
155
- if (!existingStyles) {
156
- return;
157
- }
158
- existingStyles.delete(value);
159
- if (existingStyles.size === 0) {
160
- const ruleIndex = Array.from(this.styleTag.sheet?.cssRules ?? []).findIndex(rule => rule.cssText.includes(`.${hash}`));
161
- this.styleTag.sheet?.deleteRule(ruleIndex);
162
- }
163
- };
164
- }
165
- export const UnistylesRegistry = new UnistylesRegistryBuilder();
@@ -1,160 +0,0 @@
1
- import { UnistyleDependency } from '../specs/NativePlatform';
2
- import { ColorScheme, Orientation } from '../specs/types';
3
- import { WebContentSizeCategory } from '../types';
4
- import { UnistylesListener } from './listener';
5
- import { NavigationBar, StatusBar } from './mock';
6
- import { UnistylesState } from './state';
7
- import { hexToRGBA, isServer, schemeToTheme } from './utils';
8
- class UnistylesRuntimeBuilder {
9
- lightMedia = this.getLightMedia();
10
- darkMedia = this.getDarkMedia();
11
- getLightMedia() {
12
- if (isServer()) {
13
- return null;
14
- }
15
- if (!this.lightMedia) {
16
- this.lightMedia = window.matchMedia('(prefers-color-scheme: light)');
17
- }
18
- return this.lightMedia;
19
- }
20
- getDarkMedia() {
21
- if (isServer()) {
22
- return null;
23
- }
24
- if (!this.darkMedia) {
25
- this.darkMedia = window.matchMedia('(prefers-color-scheme: dark)');
26
- }
27
- return this.darkMedia;
28
- }
29
- get colorScheme() {
30
- switch (true) {
31
- case this.getLightMedia()?.matches:
32
- return ColorScheme.Light;
33
- case this.getDarkMedia()?.matches:
34
- return ColorScheme.Dark;
35
- default:
36
- return ColorScheme.Unspecified;
37
- }
38
- }
39
- get themeName() {
40
- return UnistylesState.themeName;
41
- }
42
- get contentSizeCategory() {
43
- return WebContentSizeCategory.Unspecified;
44
- }
45
- get breakpoint() {
46
- return UnistylesState.breakpoint;
47
- }
48
- get orientation() {
49
- if (isServer()) {
50
- return Orientation.Portrait;
51
- }
52
- return screen.orientation.type.includes('portrait') ? Orientation.Portrait : Orientation.Landscape;
53
- }
54
- get theme() {
55
- return this.getTheme(this.themeName);
56
- }
57
- get pixelRatio() {
58
- return isServer() ? 1 : window.devicePixelRatio;
59
- }
60
- get screen() {
61
- if (isServer()) {
62
- return {
63
- width: 0,
64
- height: 0
65
- };
66
- }
67
- return {
68
- width: window.innerWidth,
69
- height: window.innerHeight
70
- };
71
- }
72
- get fontScale() {
73
- return 1;
74
- }
75
- get insets() {
76
- return {
77
- top: 0,
78
- bottom: 0,
79
- left: 0,
80
- right: 0,
81
- ime: 0
82
- };
83
- }
84
- get statusBar() {
85
- return StatusBar;
86
- }
87
- get rtl() {
88
- return isServer() ? true : document.documentElement.dir === 'rtl';
89
- }
90
- get hasAdaptiveThemes() {
91
- return UnistylesState.hasAdaptiveThemes;
92
- }
93
- get navigationBar() {
94
- return NavigationBar;
95
- }
96
- get miniRuntime() {
97
- return {
98
- colorScheme: this.colorScheme,
99
- themeName: this.themeName,
100
- contentSizeCategory: this.contentSizeCategory,
101
- breakpoint: this.breakpoint,
102
- isLandscape: this.orientation === Orientation.Landscape,
103
- isPortrait: this.orientation === Orientation.Portrait,
104
- pixelRatio: this.pixelRatio,
105
- screen: this.screen,
106
- fontScale: this.fontScale,
107
- insets: this.insets,
108
- statusBar: {
109
- width: this.statusBar.width,
110
- height: this.statusBar.height
111
- },
112
- navigationBar: {
113
- width: this.navigationBar.width,
114
- height: this.navigationBar.height,
115
- },
116
- rtl: this.rtl,
117
- hasAdaptiveThemes: this.hasAdaptiveThemes
118
- };
119
- }
120
- setTheme = (themeName) => {
121
- if (themeName === UnistylesRuntime.themeName) {
122
- return;
123
- }
124
- UnistylesState.themeName = themeName;
125
- UnistylesListener.emitChange(UnistyleDependency.Theme);
126
- UnistylesListener.emitChange(UnistyleDependency.ThemeName);
127
- };
128
- setAdaptiveThemes = (isEnabled) => {
129
- UnistylesState.hasAdaptiveThemes = isEnabled;
130
- if (!isEnabled) {
131
- return;
132
- }
133
- this.setTheme(schemeToTheme(UnistylesRuntime.colorScheme));
134
- };
135
- setRootViewBackgroundColor = (hex, alpha) => {
136
- if (isServer()) {
137
- return;
138
- }
139
- document.documentElement.style.backgroundColor = alpha ? hexToRGBA(hex, alpha) : hex;
140
- };
141
- setImmersiveMode = () => { };
142
- updateTheme = (themeName, updater) => {
143
- const oldTheme = UnistylesState.themes.get(themeName);
144
- if (!oldTheme) {
145
- throw new Error(`🦄 Theme "${themeName}" is not registered!`);
146
- }
147
- UnistylesState.themes.set(themeName, updater(oldTheme));
148
- };
149
- getTheme = (themeName = this.themeName) => {
150
- if (!themeName) {
151
- throw new Error('🦄 No theme selected!');
152
- }
153
- const theme = UnistylesState.themes.get(themeName);
154
- if (!theme) {
155
- throw new Error(`🦄 Theme "${this.themeName}" is not registered!`);
156
- }
157
- return theme;
158
- };
159
- }
160
- export const UnistylesRuntime = new UnistylesRuntimeBuilder();