@tamagui/web 1.26.0 → 1.27.0

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 (220) hide show
  1. package/dist/cjs/helpers/createPropMapper.js +1 -11
  2. package/dist/cjs/helpers/createPropMapper.js.map +1 -1
  3. package/dist/cjs/helpers/createVariantContext.js +41 -0
  4. package/dist/cjs/helpers/createVariantContext.js.map +6 -0
  5. package/dist/cjs/helpers/getThemeCSSRules.js +3 -3
  6. package/dist/cjs/helpers/getThemeCSSRules.js.map +1 -1
  7. package/dist/esm/helpers/createPropMapper.js +1 -11
  8. package/dist/esm/helpers/createPropMapper.js.map +1 -1
  9. package/dist/esm/helpers/createVariantContext.js +17 -0
  10. package/dist/esm/helpers/createVariantContext.js.map +6 -0
  11. package/dist/esm/helpers/getThemeCSSRules.js +3 -3
  12. package/dist/esm/helpers/getThemeCSSRules.js.map +1 -1
  13. package/package.json +9 -9
  14. package/src/helpers/createPropMapper.ts +2 -12
  15. package/src/helpers/getThemeCSSRules.ts +6 -3
  16. package/src/types.tsx +5 -0
  17. package/types/helpers/createVariantContext.d.ts.map +1 -0
  18. package/types/helpers/getThemeCSSRules.d.ts.map +1 -1
  19. package/types/types.d.ts +1 -0
  20. package/types/types.d.ts.map +1 -1
  21. package/dist/cjs/helpers/accessibilityDirectMap.js +0 -76
  22. package/dist/cjs/helpers/accessibilityDirectMap.js.map +0 -6
  23. package/dist/cjs/helpers/memoizeArgumentsWeak.js +0 -57
  24. package/dist/cjs/helpers/memoizeArgumentsWeak.js.map +0 -6
  25. package/dist/cjs/helpers/memoizeFunctionByArgumentsReference.js +0 -31
  26. package/dist/cjs/helpers/memoizeFunctionByArgumentsReference.js.map +0 -6
  27. package/dist/esm/Tamagui.mjs +0 -45
  28. package/dist/esm/Tamagui.mjs.map +0 -6
  29. package/dist/esm/config.mjs +0 -90
  30. package/dist/esm/config.mjs.map +0 -6
  31. package/dist/esm/constants/accessibilityDirectMap.mjs +0 -52
  32. package/dist/esm/constants/accessibilityDirectMap.mjs.map +0 -6
  33. package/dist/esm/constants/constants.mjs +0 -22
  34. package/dist/esm/constants/constants.mjs.map +0 -6
  35. package/dist/esm/constants/isDevTools.mjs +0 -13
  36. package/dist/esm/constants/isDevTools.mjs.map +0 -6
  37. package/dist/esm/contexts/AnimationDriverContext.mjs +0 -6
  38. package/dist/esm/contexts/AnimationDriverContext.mjs.map +0 -6
  39. package/dist/esm/contexts/ButtonNestingContext.mjs +0 -6
  40. package/dist/esm/contexts/ButtonNestingContext.mjs.map +0 -6
  41. package/dist/esm/contexts/FontLanguageContext.mjs +0 -6
  42. package/dist/esm/contexts/FontLanguageContext.mjs.map +0 -6
  43. package/dist/esm/contexts/TextAncestorContext.mjs +0 -6
  44. package/dist/esm/contexts/TextAncestorContext.mjs.map +0 -6
  45. package/dist/esm/createComponent.mjs +0 -880
  46. package/dist/esm/createComponent.mjs.map +0 -6
  47. package/dist/esm/createFont.mjs +0 -45
  48. package/dist/esm/createFont.mjs.map +0 -6
  49. package/dist/esm/createShorthands.mjs +0 -7
  50. package/dist/esm/createShorthands.mjs.map +0 -6
  51. package/dist/esm/createTamagui.mjs +0 -203
  52. package/dist/esm/createTamagui.mjs.map +0 -6
  53. package/dist/esm/createTheme.mjs +0 -7
  54. package/dist/esm/createTheme.mjs.map +0 -6
  55. package/dist/esm/createTokens.mjs +0 -15
  56. package/dist/esm/createTokens.mjs.map +0 -6
  57. package/dist/esm/createVariable.mjs +0 -78
  58. package/dist/esm/createVariable.mjs.map +0 -6
  59. package/dist/esm/createVariables.mjs +0 -35
  60. package/dist/esm/createVariables.mjs.map +0 -6
  61. package/dist/esm/helpers/ThemeManager.mjs +0 -256
  62. package/dist/esm/helpers/ThemeManager.mjs.map +0 -6
  63. package/dist/esm/helpers/ThemeManagerContext.mjs +0 -6
  64. package/dist/esm/helpers/ThemeManagerContext.mjs.map +0 -6
  65. package/dist/esm/helpers/accessibilityDirectMap.js +0 -52
  66. package/dist/esm/helpers/accessibilityDirectMap.js.map +0 -6
  67. package/dist/esm/helpers/accessibilityDirectMap.mjs +0 -52
  68. package/dist/esm/helpers/accessibilityDirectMap.mjs.map +0 -6
  69. package/dist/esm/helpers/createChainedWeakCache.mjs +0 -39
  70. package/dist/esm/helpers/createChainedWeakCache.mjs.map +0 -6
  71. package/dist/esm/helpers/createMediaStyle.mjs +0 -42
  72. package/dist/esm/helpers/createMediaStyle.mjs.map +0 -6
  73. package/dist/esm/helpers/createPropMapper.mjs +0 -414
  74. package/dist/esm/helpers/createPropMapper.mjs.map +0 -6
  75. package/dist/esm/helpers/createProxy.mjs +0 -19
  76. package/dist/esm/helpers/createProxy.mjs.map +0 -6
  77. package/dist/esm/helpers/defaultOffset.mjs +0 -5
  78. package/dist/esm/helpers/defaultOffset.mjs.map +0 -6
  79. package/dist/esm/helpers/expandStyle.mjs +0 -65
  80. package/dist/esm/helpers/expandStyle.mjs.map +0 -6
  81. package/dist/esm/helpers/expandStyles.mjs +0 -52
  82. package/dist/esm/helpers/expandStyles.mjs.map +0 -6
  83. package/dist/esm/helpers/extendStaticConfig.mjs +0 -67
  84. package/dist/esm/helpers/extendStaticConfig.mjs.map +0 -6
  85. package/dist/esm/helpers/getAnimationDriver.mjs +0 -8
  86. package/dist/esm/helpers/getAnimationDriver.mjs.map +0 -6
  87. package/dist/esm/helpers/getExpandedShorthands.mjs +0 -15
  88. package/dist/esm/helpers/getExpandedShorthands.mjs.map +0 -6
  89. package/dist/esm/helpers/getFontLanguage.mjs +0 -5
  90. package/dist/esm/helpers/getFontLanguage.mjs.map +0 -6
  91. package/dist/esm/helpers/getSplitStyles.mjs +0 -879
  92. package/dist/esm/helpers/getSplitStyles.mjs.map +0 -6
  93. package/dist/esm/helpers/getStylesAtomic.mjs +0 -193
  94. package/dist/esm/helpers/getStylesAtomic.mjs.map +0 -6
  95. package/dist/esm/helpers/getStylesAtomic.native.mjs +0 -12
  96. package/dist/esm/helpers/getStylesAtomic.native.mjs.map +0 -6
  97. package/dist/esm/helpers/getThemeCSSRules.mjs +0 -113
  98. package/dist/esm/helpers/getThemeCSSRules.mjs.map +0 -6
  99. package/dist/esm/helpers/getThemeCSSRules.native.mjs +0 -7
  100. package/dist/esm/helpers/getThemeCSSRules.native.mjs.map +0 -6
  101. package/dist/esm/helpers/getVariantExtras.mjs +0 -67
  102. package/dist/esm/helpers/getVariantExtras.mjs.map +0 -6
  103. package/dist/esm/helpers/insertStyleRule.mjs +0 -191
  104. package/dist/esm/helpers/insertStyleRule.mjs.map +0 -6
  105. package/dist/esm/helpers/isObj.mjs +0 -5
  106. package/dist/esm/helpers/isObj.mjs.map +0 -6
  107. package/dist/esm/helpers/isTamaguiComponent.mjs +0 -8
  108. package/dist/esm/helpers/isTamaguiComponent.mjs.map +0 -6
  109. package/dist/esm/helpers/isTamaguiElement.mjs +0 -9
  110. package/dist/esm/helpers/isTamaguiElement.mjs.map +0 -6
  111. package/dist/esm/helpers/matchMedia.mjs +0 -17
  112. package/dist/esm/helpers/matchMedia.mjs.map +0 -6
  113. package/dist/esm/helpers/matchMedia.native.mjs +0 -23
  114. package/dist/esm/helpers/matchMedia.native.mjs.map +0 -6
  115. package/dist/esm/helpers/memoizeArgumentsWeak.js +0 -33
  116. package/dist/esm/helpers/memoizeArgumentsWeak.js.map +0 -6
  117. package/dist/esm/helpers/memoizeArgumentsWeak.mjs +0 -33
  118. package/dist/esm/helpers/memoizeArgumentsWeak.mjs.map +0 -6
  119. package/dist/esm/helpers/memoizeFunctionByArgumentsReference.js +0 -30
  120. package/dist/esm/helpers/memoizeFunctionByArgumentsReference.js.map +0 -6
  121. package/dist/esm/helpers/memoizeFunctionByArgumentsReference.mjs +0 -30
  122. package/dist/esm/helpers/memoizeFunctionByArgumentsReference.mjs.map +0 -6
  123. package/dist/esm/helpers/mergeProps.mjs +0 -40
  124. package/dist/esm/helpers/mergeProps.mjs.map +0 -6
  125. package/dist/esm/helpers/normalizeColor.mjs +0 -31
  126. package/dist/esm/helpers/normalizeColor.mjs.map +0 -6
  127. package/dist/esm/helpers/normalizeShadow.mjs +0 -23
  128. package/dist/esm/helpers/normalizeShadow.mjs.map +0 -6
  129. package/dist/esm/helpers/normalizeShadow.native.mjs +0 -31
  130. package/dist/esm/helpers/normalizeShadow.native.mjs.map +0 -6
  131. package/dist/esm/helpers/normalizeStylePropKeys.mjs +0 -5
  132. package/dist/esm/helpers/normalizeStylePropKeys.mjs.map +0 -6
  133. package/dist/esm/helpers/normalizeStylePropKeys.native.mjs +0 -16
  134. package/dist/esm/helpers/normalizeStylePropKeys.native.mjs.map +0 -6
  135. package/dist/esm/helpers/normalizeValueWithProperty.mjs +0 -110
  136. package/dist/esm/helpers/normalizeValueWithProperty.mjs.map +0 -6
  137. package/dist/esm/helpers/proxyThemeVariables.mjs +0 -16
  138. package/dist/esm/helpers/proxyThemeVariables.mjs.map +0 -6
  139. package/dist/esm/helpers/pseudoDescriptors.mjs +0 -29
  140. package/dist/esm/helpers/pseudoDescriptors.mjs.map +0 -6
  141. package/dist/esm/helpers/registerCSSVariable.mjs +0 -14
  142. package/dist/esm/helpers/registerCSSVariable.mjs.map +0 -6
  143. package/dist/esm/helpers/themeable.mjs +0 -28
  144. package/dist/esm/helpers/themeable.mjs.map +0 -6
  145. package/dist/esm/helpers/themes.mjs +0 -51
  146. package/dist/esm/helpers/themes.mjs.map +0 -6
  147. package/dist/esm/helpers/timer.mjs +0 -11
  148. package/dist/esm/helpers/timer.mjs.map +0 -6
  149. package/dist/esm/helpers/useShallowSetState.mjs +0 -23
  150. package/dist/esm/helpers/useShallowSetState.mjs.map +0 -6
  151. package/dist/esm/helpers/warnOnce.mjs +0 -14
  152. package/dist/esm/helpers/warnOnce.mjs.map +0 -6
  153. package/dist/esm/helpers/withStaticProperties.mjs +0 -9
  154. package/dist/esm/helpers/withStaticProperties.mjs.map +0 -6
  155. package/dist/esm/hooks/getThemeUnwrapped.mjs +0 -9
  156. package/dist/esm/hooks/getThemeUnwrapped.mjs.map +0 -6
  157. package/dist/esm/hooks/useAnimationDriver.mjs +0 -13
  158. package/dist/esm/hooks/useAnimationDriver.mjs.map +0 -6
  159. package/dist/esm/hooks/useId.mjs +0 -5
  160. package/dist/esm/hooks/useId.mjs.map +0 -6
  161. package/dist/esm/hooks/useIsTouchDevice.mjs +0 -9
  162. package/dist/esm/hooks/useIsTouchDevice.mjs.map +0 -6
  163. package/dist/esm/hooks/useMedia.mjs +0 -233
  164. package/dist/esm/hooks/useMedia.mjs.map +0 -6
  165. package/dist/esm/hooks/useProps.mjs +0 -10
  166. package/dist/esm/hooks/useProps.mjs.map +0 -6
  167. package/dist/esm/hooks/useSafeRef.mjs +0 -35
  168. package/dist/esm/hooks/useSafeRef.mjs.map +0 -6
  169. package/dist/esm/hooks/useServerHooks.mjs +0 -11
  170. package/dist/esm/hooks/useServerHooks.mjs.map +0 -6
  171. package/dist/esm/hooks/useStyle.mjs +0 -37
  172. package/dist/esm/hooks/useStyle.mjs.map +0 -6
  173. package/dist/esm/hooks/useTheme.mjs +0 -282
  174. package/dist/esm/hooks/useTheme.mjs.map +0 -6
  175. package/dist/esm/hooks/useThemeName.mjs +0 -28
  176. package/dist/esm/hooks/useThemeName.mjs.map +0 -6
  177. package/dist/esm/index.mjs +0 -87
  178. package/dist/esm/index.mjs.map +0 -6
  179. package/dist/esm/inject-styles.mjs +0 -16
  180. package/dist/esm/inject-styles.mjs.map +0 -6
  181. package/dist/esm/insertFont.mjs +0 -67
  182. package/dist/esm/insertFont.mjs.map +0 -6
  183. package/dist/esm/setupHooks.mjs +0 -9
  184. package/dist/esm/setupHooks.mjs.map +0 -6
  185. package/dist/esm/setupReactNative.mjs +0 -25
  186. package/dist/esm/setupReactNative.mjs.map +0 -6
  187. package/dist/esm/styled.mjs +0 -89
  188. package/dist/esm/styled.mjs.map +0 -6
  189. package/dist/esm/types.mjs +0 -1
  190. package/dist/esm/types.mjs.map +0 -6
  191. package/dist/esm/views/AnimationDriverProvider.mjs +0 -9
  192. package/dist/esm/views/AnimationDriverProvider.mjs.map +0 -6
  193. package/dist/esm/views/FontLanguage.mjs +0 -17
  194. package/dist/esm/views/FontLanguage.mjs.map +0 -6
  195. package/dist/esm/views/FontLanguage.native.mjs +0 -11
  196. package/dist/esm/views/FontLanguage.native.mjs.map +0 -6
  197. package/dist/esm/views/FontLanguage.types.mjs +0 -1
  198. package/dist/esm/views/FontLanguage.types.mjs.map +0 -6
  199. package/dist/esm/views/Slot.mjs +0 -66
  200. package/dist/esm/views/Slot.mjs.map +0 -6
  201. package/dist/esm/views/Stack.mjs +0 -13
  202. package/dist/esm/views/Stack.mjs.map +0 -6
  203. package/dist/esm/views/TamaguiProvider.mjs +0 -57
  204. package/dist/esm/views/TamaguiProvider.mjs.map +0 -6
  205. package/dist/esm/views/Text.mjs +0 -71
  206. package/dist/esm/views/Text.mjs.map +0 -6
  207. package/dist/esm/views/Theme.mjs +0 -75
  208. package/dist/esm/views/Theme.mjs.map +0 -6
  209. package/dist/esm/views/ThemeDebug.mjs +0 -96
  210. package/dist/esm/views/ThemeDebug.mjs.map +0 -6
  211. package/dist/esm/views/ThemeDebug.native.mjs +0 -11
  212. package/dist/esm/views/ThemeDebug.native.mjs.map +0 -6
  213. package/dist/esm/views/ThemeProvider.mjs +0 -45
  214. package/dist/esm/views/ThemeProvider.mjs.map +0 -6
  215. package/types/helpers/accessibilityDirectMap.d.ts +0 -2
  216. package/types/helpers/accessibilityDirectMap.d.ts.map +0 -1
  217. package/types/helpers/memoizeArgumentsWeak.d.ts +0 -5
  218. package/types/helpers/memoizeArgumentsWeak.d.ts.map +0 -1
  219. package/types/helpers/memoizeFunctionByArgumentsReference.d.ts +0 -11
  220. package/types/helpers/memoizeFunctionByArgumentsReference.d.ts.map +0 -1
@@ -1,879 +0,0 @@
1
- import {
2
- isAndroid,
3
- isClient,
4
- isRSC,
5
- isServer,
6
- isWeb,
7
- useIsomorphicLayoutEffect
8
- } from "@tamagui/constants";
9
- import {
10
- stylePropsFont,
11
- stylePropsText,
12
- stylePropsTransform,
13
- validPseudoKeys,
14
- validStyles,
15
- validStylesOnBaseProps
16
- } from "@tamagui/helpers";
17
- import { useInsertionEffect } from "react";
18
- import { getConfig, getFont } from "../config";
19
- import { accessibilityDirectMap } from "../constants/accessibilityDirectMap";
20
- import { isDevTools } from "../constants/isDevTools";
21
- import {
22
- getMediaImportanceIfMoreImportant,
23
- mediaState as globalMediaState,
24
- mediaKeysWithAndWithout$,
25
- mediaQueryConfig,
26
- mergeMediaByImportance
27
- } from "../hooks/useMedia";
28
- import { createMediaStyle } from "./createMediaStyle";
29
- import { getPropMappedFontFamily } from "./createPropMapper";
30
- import { fixStyles } from "./expandStyles";
31
- import { generateAtomicStyles, getStylesAtomic, styleToCSS } from "./getStylesAtomic";
32
- import {
33
- insertStyleRules,
34
- insertedTransforms,
35
- scanAllSheets,
36
- shouldInsertStyleRules,
37
- updateRules
38
- } from "./insertStyleRule";
39
- import {
40
- normalizeValueWithProperty,
41
- reverseMapClassNameToValue
42
- } from "./normalizeValueWithProperty";
43
- import { pseudoDescriptors } from "./pseudoDescriptors";
44
- let conf;
45
- const PROP_SPLIT = "-";
46
- const isMediaKey = (key) => Boolean(key[0] === "$" && mediaKeysWithAndWithout$.has(key));
47
- const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, languageContext, elementType, debug) => {
48
- var _a, _b, _c;
49
- conf = conf || getConfig();
50
- const { shorthands } = conf;
51
- const { variants, propMapper, isReactNative, inlineProps, inlineWhenUnflattened } = staticConfig;
52
- const validStyleProps = staticConfig.isText ? stylePropsText : validStyles;
53
- const viewProps = {};
54
- let pseudos = null;
55
- let psuedosUsed = null;
56
- const mediaState = state.mediaState || globalMediaState;
57
- const usedKeys = {};
58
- const propKeys = Object.keys(props);
59
- let space = props.space;
60
- let hasMedia = false;
61
- const shouldDoClasses = staticConfig.acceptsClassName && (isWeb || IS_STATIC) && !state.noClassNames;
62
- let style = {};
63
- const flatTransforms = {};
64
- const len = propKeys.length;
65
- const rulesToInsert = [];
66
- const classNames = {};
67
- let className = "";
68
- const transforms = {};
69
- let fontFamily;
70
- const styleState = {
71
- classNames,
72
- conf,
73
- props,
74
- state,
75
- staticConfig,
76
- style,
77
- theme,
78
- usedKeys,
79
- viewProps,
80
- languageContext
81
- };
82
- if (process.env.NODE_ENV === "development" && debug) {
83
- console.groupCollapsed("getSplitStyles (looping backwards)");
84
- console.log({ props, staticConfig, shouldDoClasses, state, IS_STATIC, propKeys, styleState, theme: { ...theme } });
85
- console.groupEnd();
86
- }
87
- if (props.className) {
88
- for (const cn of props.className.split(" ")) {
89
- if (cn[0] === "_") {
90
- const [shorthand, mediaOrPseudo] = cn.slice(1).split("-");
91
- const isMedia = mediaOrPseudo[0] === "_";
92
- const isPseudo = mediaOrPseudo[0] === "0";
93
- const isMediaOrPseudo = isMedia || isPseudo;
94
- let fullKey = shorthands[shorthand];
95
- if (isMedia) {
96
- let mediaShortKey = mediaOrPseudo.slice(1);
97
- mediaShortKey = mediaShortKey.slice(0, mediaShortKey.indexOf("_"));
98
- fullKey += `${PROP_SPLIT}${mediaShortKey}`;
99
- } else if (isPseudo) {
100
- const pseudoShortKey = mediaOrPseudo.slice(1);
101
- fullKey += `${PROP_SPLIT}${pseudoShortKey}`;
102
- }
103
- usedKeys[fullKey] = 1;
104
- mergeClassName(transforms, classNames, fullKey, cn, isMediaOrPseudo);
105
- } else if (cn) {
106
- className += ` ${cn}`;
107
- }
108
- }
109
- }
110
- function passDownProp(key, val, shouldMergeObject = false) {
111
- if (shouldMergeObject) {
112
- viewProps[key] ||= {};
113
- viewProps[key] = {
114
- ...val,
115
- ...viewProps[key]
116
- };
117
- } else {
118
- usedKeys[key] = 1;
119
- viewProps[key] = val;
120
- }
121
- }
122
- const specialProps = [];
123
- function processProp(keyInit, valInit, special = false, fontFamilyOverride = null) {
124
- var _a2, _b2, _c2, _d;
125
- if (keyInit === "className")
126
- return;
127
- if (keyInit in shorthands) {
128
- keyInit = shorthands[keyInit];
129
- }
130
- if (process.env.TAMAGUI_TARGET === "native") {
131
- if (!isAndroid) {
132
- if (keyInit === "elevationAndroid")
133
- return;
134
- }
135
- if (keyInit === "userSelect") {
136
- keyInit = "selectable";
137
- valInit = valInit === "none" ? false : true;
138
- } else if (keyInit.startsWith("data-") || keyInit.startsWith("aria-")) {
139
- return;
140
- }
141
- }
142
- if (process.env.TAMAGUI_TARGET === "web") {
143
- if (keyInit === "elevationAndroid")
144
- return;
145
- }
146
- if (!staticConfig.isHOC) {
147
- if (keyInit in skipProps) {
148
- if (process.env.NODE_ENV === "development" && debug && keyInit === "debug") {
149
- } else {
150
- return;
151
- }
152
- }
153
- }
154
- if (keyInit in usedKeys) {
155
- return;
156
- }
157
- if (typeof valInit === "string" && valInit[0] === "_") {
158
- if (keyInit in validStyleProps || keyInit.includes("-")) {
159
- if (shouldDoClasses) {
160
- classNames[keyInit] = valInit;
161
- } else {
162
- style[keyInit] = reverseMapClassNameToValue(keyInit, valInit);
163
- }
164
- usedKeys[keyInit] = 1;
165
- return;
166
- }
167
- }
168
- if (keyInit === "dataSet") {
169
- for (const key in valInit) {
170
- viewProps[`data-${hyphenate(key)}`] = valInit[key];
171
- }
172
- return;
173
- }
174
- const isMainStyle = keyInit === "style";
175
- if (isMainStyle || keyInit.startsWith("_style")) {
176
- if (!valInit)
177
- return;
178
- const styles = Array.isArray(valInit) ? valInit : [valInit];
179
- const styleLen = styles.length;
180
- for (let j = styleLen; j >= 0; j--) {
181
- const cur = styles[j];
182
- if (!cur)
183
- continue;
184
- for (const key in cur) {
185
- if (!isMainStyle && usedKeys[key]) {
186
- continue;
187
- }
188
- usedKeys[key] = 1;
189
- style[key] = cur[key];
190
- }
191
- }
192
- return;
193
- }
194
- if (process.env.TAMAGUI_TARGET === "web") {
195
- if (keyInit === "disabled" && valInit === true) {
196
- usedKeys[keyInit] = 1;
197
- viewProps["aria-disabled"] = true;
198
- if (elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") {
199
- viewProps.disabled = true;
200
- }
201
- if (!(variants == null ? void 0 : variants.disabled)) {
202
- return;
203
- }
204
- }
205
- if (keyInit === "testID") {
206
- usedKeys[keyInit] = 1;
207
- viewProps[isReactNative ? "testId" : "data-testid"] = valInit;
208
- return;
209
- }
210
- if (keyInit === "id" || keyInit === "nativeID") {
211
- usedKeys[keyInit] = 1;
212
- if (isReactNative) {
213
- viewProps.nativeID = valInit;
214
- } else {
215
- viewProps.id = valInit;
216
- }
217
- return;
218
- }
219
- let didUseKeyInit = false;
220
- if (isReactNative) {
221
- if (accessibilityDirectMap[keyInit] || keyInit.startsWith("accessibility")) {
222
- viewProps[keyInit] = valInit;
223
- usedKeys[keyInit] = 1;
224
- return;
225
- }
226
- } else {
227
- didUseKeyInit = true;
228
- if (accessibilityDirectMap[keyInit]) {
229
- viewProps[accessibilityDirectMap[keyInit]] = valInit;
230
- } else {
231
- switch (keyInit) {
232
- case "accessibilityRole": {
233
- if (valInit === "none") {
234
- viewProps.role = "presentation";
235
- } else {
236
- viewProps.role = accessibilityRoleToWebRole[valInit] || valInit;
237
- }
238
- return;
239
- }
240
- case "accessibilityLabelledBy":
241
- case "accessibilityFlowTo":
242
- case "accessibilityControls":
243
- case "accessibilityDescribedBy": {
244
- viewProps[`aria-${keyInit.replace("accessibility", "").toLowerCase()}`] = processIDRefList(valInit);
245
- return;
246
- }
247
- case "accessibilityKeyShortcuts": {
248
- if (Array.isArray(valInit)) {
249
- viewProps["aria-keyshortcuts"] = valInit.join(" ");
250
- }
251
- return;
252
- }
253
- case "accessibilityLiveRegion": {
254
- viewProps["aria-live"] = valInit === "none" ? "off" : valInit;
255
- return;
256
- }
257
- case "accessibilityReadOnly": {
258
- viewProps["aria-readonly"] = valInit;
259
- if (elementType === "input" || elementType === "select" || elementType === "textarea") {
260
- viewProps.readOnly = true;
261
- }
262
- return;
263
- }
264
- case "accessibilityRequired": {
265
- viewProps["aria-required"] = valInit;
266
- if (elementType === "input" || elementType === "select" || elementType === "textarea") {
267
- viewProps.required = valInit;
268
- }
269
- return;
270
- }
271
- default: {
272
- didUseKeyInit = false;
273
- }
274
- }
275
- }
276
- }
277
- if (didUseKeyInit) {
278
- usedKeys[keyInit] = 1;
279
- return;
280
- }
281
- if (valInit && valInit[0] === "_") {
282
- const isValidClassName = keyInit in validStyles;
283
- const isMediaOrPseudo2 = !isValidClassName && keyInit.includes(PROP_SPLIT) && validStyles[keyInit.split(PROP_SPLIT)[0]];
284
- if (isValidClassName || isMediaOrPseudo2) {
285
- usedKeys[keyInit] = 1;
286
- if (process.env.NODE_ENV === "development" && debug) {
287
- console.log("tamagui classname props", keyInit, valInit);
288
- }
289
- mergeClassName(transforms, classNames, keyInit, valInit, isMediaOrPseudo2);
290
- return;
291
- }
292
- }
293
- }
294
- let isMedia = isMediaKey(keyInit);
295
- let isPseudo = keyInit in validPseudoKeys;
296
- let isMediaOrPseudo = isMedia || isPseudo;
297
- const isVariant = variants && keyInit in variants;
298
- const shouldPassProp = !(isMediaOrPseudo || isVariant || keyInit in validStyleProps || keyInit in shorthands);
299
- const isHOCShouldPassThrough = staticConfig.isHOC && (isMediaOrPseudo || ((_b2 = (_a2 = staticConfig.parentStaticConfig) == null ? void 0 : _a2.variants) == null ? void 0 : _b2[keyInit]));
300
- const shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
301
- if (shouldPassThrough) {
302
- if (process.env.NODE_ENV === "development" && debug === "verbose") {
303
- console.groupCollapsed(` \u{1F539} pass through ${keyInit}`);
304
- console.log({
305
- valInit,
306
- variants,
307
- isVariant,
308
- shouldPassProp,
309
- isHOCShouldPassThrough
310
- });
311
- console.groupEnd();
312
- }
313
- if (isPseudo) {
314
- const pseudoStyleObject = getSubStyle(
315
- styleState,
316
- keyInit,
317
- valInit,
318
- true,
319
- state.noClassNames
320
- );
321
- const descriptor = pseudoDescriptors[keyInit];
322
- for (const key in pseudoStyleObject) {
323
- const fullKey = `${key}${PROP_SPLIT}${descriptor.name}`;
324
- usedKeys[fullKey] = 1;
325
- }
326
- }
327
- passDownProp(keyInit, valInit, isMediaOrPseudo);
328
- if (!isVariant) {
329
- return;
330
- }
331
- }
332
- const expanded = isMediaOrPseudo ? [[keyInit, valInit]] : propMapper(
333
- keyInit,
334
- valInit,
335
- theme,
336
- special ? { ...props, fontFamily: fontFamilyOverride } : props,
337
- state,
338
- languageContext,
339
- void 0,
340
- debug
341
- );
342
- if (!fontFamily) {
343
- fontFamily = getPropMappedFontFamily(expanded);
344
- }
345
- if (process.env.NODE_ENV === "development" && debug === "verbose") {
346
- console.groupCollapsed(" \u{1F539} styles", keyInit, valInit);
347
- console.log({
348
- expanded,
349
- state,
350
- isVariant,
351
- shouldPassProp,
352
- isHOCShouldPassThrough,
353
- theme
354
- });
355
- if (!isServer && isDevTools) {
356
- console.log("expanded", expanded, "\nusedKeys", { ...usedKeys }, "\ncurrent", {
357
- ...style
358
- });
359
- }
360
- console.groupEnd();
361
- }
362
- if (!expanded)
363
- return;
364
- for (const [key, val] of expanded) {
365
- if (val === void 0)
366
- continue;
367
- if (key in stylePropsFont && !special && key !== "fontFamily") {
368
- specialProps.push([key, val]);
369
- continue;
370
- }
371
- isMedia = isMediaKey(key);
372
- isPseudo = key in validPseudoKeys;
373
- isMediaOrPseudo = isMedia || isPseudo;
374
- if (!isMediaOrPseudo && key in usedKeys) {
375
- if (process.env.NODE_ENV === "developmnet" && debug === "verbose") {
376
- console.log(`Used media/pseudo ${key}`);
377
- }
378
- continue;
379
- }
380
- if ((inlineProps == null ? void 0 : inlineProps.has(key)) || (inlineWhenUnflattened == null ? void 0 : inlineWhenUnflattened.has(key))) {
381
- usedKeys[key] = 1;
382
- viewProps[key] = props[key] ?? val;
383
- }
384
- const isHOCShouldPassThrough2 = staticConfig.isHOC && (isMediaOrPseudo || ((_d = (_c2 = staticConfig.parentStaticConfig) == null ? void 0 : _c2.variants) == null ? void 0 : _d[keyInit]));
385
- if (isHOCShouldPassThrough2) {
386
- passDownProp(key, val, true);
387
- if (!isVariant) {
388
- continue;
389
- }
390
- }
391
- if (isPseudo) {
392
- if (!val)
393
- continue;
394
- const pseudoStyleObject = getSubStyle(
395
- styleState,
396
- key,
397
- val,
398
- true,
399
- state.noClassNames
400
- );
401
- const descriptor = pseudoDescriptors[key];
402
- const isEnter = descriptor.name === "enter";
403
- const isExit = descriptor.name === "exit";
404
- if (!descriptor || isExit && !state.isExiting) {
405
- continue;
406
- }
407
- if (!shouldDoClasses || IS_STATIC) {
408
- pseudos ||= {};
409
- pseudos[key] ||= {};
410
- Object.assign(pseudos[key], pseudoStyleObject);
411
- }
412
- if (shouldDoClasses && !isEnter && !isExit) {
413
- const pseudoStyles = generateAtomicStyles(pseudoStyleObject, descriptor);
414
- for (const psuedoStyle of pseudoStyles) {
415
- const fullKey = `${psuedoStyle.property}${PROP_SPLIT}${descriptor.name}`;
416
- if (!(fullKey in usedKeys)) {
417
- usedKeys[fullKey] = 1;
418
- addStyleToInsertRules(rulesToInsert, psuedoStyle);
419
- mergeClassName(
420
- transforms,
421
- classNames,
422
- fullKey,
423
- psuedoStyle.identifier,
424
- isMediaOrPseudo
425
- );
426
- }
427
- }
428
- } else {
429
- if (key in usedKeys) {
430
- continue;
431
- }
432
- let isDisabled = !state[descriptor.stateKey || descriptor.name];
433
- if (isWeb && !isClient && isEnter) {
434
- isDisabled = false;
435
- }
436
- if (!isDisabled) {
437
- if (valInit === staticConfig.defaultProps[keyInit]) {
438
- } else {
439
- usedKeys[key] ||= 1;
440
- if (process.env.NODE_ENV === "development" && debug === "verbose") {
441
- console.log(`Setting used ${key}`);
442
- }
443
- }
444
- }
445
- psuedosUsed ||= {};
446
- const importance = descriptor.priority;
447
- for (const pkey in pseudoStyleObject) {
448
- const val2 = pseudoStyleObject[pkey];
449
- if (isDisabled) {
450
- if (!(pkey in usedKeys) && pkey in animatableDefaults) {
451
- const defaultVal = animatableDefaults[pkey];
452
- mergeStyle(styleState, flatTransforms, pkey, defaultVal, true);
453
- }
454
- continue;
455
- }
456
- const curImportance = psuedosUsed[importance] || 0;
457
- const shouldMerge = importance >= curImportance;
458
- if (shouldMerge) {
459
- psuedosUsed[pkey] = importance;
460
- pseudos ||= {};
461
- pseudos[key] ||= {};
462
- pseudos[key][pkey] = val2;
463
- mergeStyle(styleState, flatTransforms, pkey, val2);
464
- }
465
- if (process.env.NODE_ENV === "development" && debug === "verbose") {
466
- console.log(" merge pseudo?", keyInit, shouldMerge, { importance, curImportance, pkey, val: val2 });
467
- }
468
- }
469
- }
470
- continue;
471
- }
472
- if (isMedia) {
473
- if (!val)
474
- continue;
475
- hasMedia ||= true;
476
- const mediaStyle = getSubStyle(
477
- styleState,
478
- key,
479
- val,
480
- // TODO try true like pseudo
481
- false
482
- );
483
- const mediaKeyShort = key.slice(1);
484
- if (process.env.NODE_ENV === "development" && debug === "verbose") {
485
- console.log(` \u{1F4FA} ${key}`, { key, mediaStyle, props, shouldDoClasses });
486
- }
487
- if ("space" in mediaStyle) {
488
- if (!Array.isArray(hasMedia)) {
489
- hasMedia = [];
490
- }
491
- hasMedia.push(mediaKeyShort);
492
- }
493
- if (shouldDoClasses) {
494
- if ("space" in mediaStyle) {
495
- delete mediaStyle["space"];
496
- if (mediaState[mediaKeyShort]) {
497
- const val2 = valInit.space;
498
- const importance = getMediaImportanceIfMoreImportant(
499
- mediaKeyShort,
500
- "space",
501
- usedKeys
502
- );
503
- if (importance) {
504
- space = val2;
505
- usedKeys["space"] = importance;
506
- if (process.env.NODE_ENV === "development" && debug === "verbose") {
507
- console.log(
508
- `Found more important space for current media ${mediaKeyShort}: ${val2} (importance: ${importance})`
509
- );
510
- }
511
- }
512
- }
513
- }
514
- const mediaStyles = getStylesAtomic(mediaStyle);
515
- for (const style2 of mediaStyles) {
516
- const out = createMediaStyle(style2, mediaKeyShort, mediaQueryConfig);
517
- const fullKey = `${style2.property}${PROP_SPLIT}${mediaKeyShort}`;
518
- if (!usedKeys[fullKey]) {
519
- usedKeys[fullKey] = 1;
520
- addStyleToInsertRules(rulesToInsert, out);
521
- mergeClassName(transforms, classNames, fullKey, out.identifier, true);
522
- }
523
- }
524
- } else if (mediaState[mediaKeyShort]) {
525
- for (const subKey in mediaStyle) {
526
- const importance = getMediaImportanceIfMoreImportant(
527
- mediaKeyShort,
528
- subKey,
529
- usedKeys
530
- );
531
- if (importance === null)
532
- continue;
533
- if (subKey === "space") {
534
- space = valInit.space;
535
- continue;
536
- }
537
- mergeMediaByImportance(
538
- style,
539
- mediaKeyShort,
540
- subKey,
541
- mediaStyle[subKey],
542
- usedKeys
543
- );
544
- if (key === "fontFamily") {
545
- fontFamily = mediaStyle.fontFamily;
546
- }
547
- }
548
- }
549
- continue;
550
- }
551
- if (process.env.TAMAGUI_TARGET === "native") {
552
- if (key === "pointerEvents") {
553
- usedKeys[key] = 1;
554
- viewProps[key] = val;
555
- continue;
556
- }
557
- }
558
- if (key === "fontFamily" && !fontFamily && valInit && val) {
559
- fontFamily = valInit[0] === "$" ? valInit : val;
560
- }
561
- if (key in validStyleProps) {
562
- mergeStyle(styleState, flatTransforms, key, val);
563
- continue;
564
- } else if (process.env.TAMAGUI_TARGET === "native" && isAndroid && key === "elevation") {
565
- mergeStyle(styleState, flatTransforms, key, val);
566
- continue;
567
- }
568
- if (!isVariant && !(key in skipProps)) {
569
- viewProps[key] = val;
570
- usedKeys[key] = 1;
571
- }
572
- }
573
- }
574
- for (let i = len - 1; i >= 0; i--) {
575
- const keyInit = propKeys[i];
576
- const valInit = props[keyInit];
577
- processProp(keyInit, valInit);
578
- }
579
- for (let i = 0; i < specialProps.length; i++) {
580
- const [key, value] = specialProps[i];
581
- processProp(key, value, true, fontFamily);
582
- }
583
- fixStyles(style);
584
- if (isWeb) {
585
- styleToCSS(style);
586
- }
587
- if (process.env.TAMAGUI_TARGET === "native") {
588
- if ("fontFamily" in style && style.fontFamily) {
589
- const faceInfo = (_a = getFont(style.fontFamily)) == null ? void 0 : _a.face;
590
- if (faceInfo) {
591
- const overrideFace = (_c = (_b = faceInfo[style.fontWeight]) == null ? void 0 : _b[style.fontStyle || "normal"]) == null ? void 0 : _c.val;
592
- if (overrideFace) {
593
- style.fontFamily = overrideFace;
594
- fontFamily = overrideFace;
595
- delete style.fontWeight;
596
- delete style.fontStyle;
597
- }
598
- }
599
- if (process.env.NODE_ENV === "development") {
600
- if (debug) {
601
- console.log(`Found fontFamily native: ${style.fontFamily}`, faceInfo);
602
- }
603
- }
604
- }
605
- if (process.env.TAMAGUI_TARGET === "native") {
606
- if ("elevationAndroid" in style) {
607
- style["elevation"] = style.elevationAndroid;
608
- delete style.elevationAndroid;
609
- }
610
- }
611
- }
612
- if (flatTransforms) {
613
- mergeTransforms(style, flatTransforms, true);
614
- }
615
- if (parentSplitStyles) {
616
- if (process.env.TAMAGUI_TARGET === "web") {
617
- if (shouldDoClasses) {
618
- for (const key in parentSplitStyles.classNames) {
619
- const val = parentSplitStyles.classNames[key];
620
- if (key in style || key in classNames)
621
- continue;
622
- classNames[key] = val;
623
- }
624
- }
625
- }
626
- if (!shouldDoClasses) {
627
- for (const key in parentSplitStyles.style) {
628
- if (key in classNames || key in style)
629
- continue;
630
- style[key] = parentSplitStyles.style[key];
631
- }
632
- }
633
- }
634
- if (process.env.TAMAGUI_TARGET === "web") {
635
- if (shouldDoClasses) {
636
- const retainedStyles = {};
637
- if (style["$$css"]) {
638
- } else {
639
- const atomic = getStylesAtomic(style);
640
- for (const atomicStyle of atomic) {
641
- const key = atomicStyle.property;
642
- if (props.animateOnly && props.animateOnly.includes(key)) {
643
- retainedStyles[key] = style[key];
644
- } else {
645
- addStyleToInsertRules(rulesToInsert, atomicStyle);
646
- mergeClassName(transforms, classNames, key, atomicStyle.identifier);
647
- }
648
- }
649
- if (!IS_STATIC) {
650
- style = retainedStyles;
651
- }
652
- }
653
- }
654
- if (transforms) {
655
- for (const namespace in transforms) {
656
- if (!transforms[namespace]) {
657
- if (process.env.NODE_ENV === "development") {
658
- console.warn("Error no transform", transforms, namespace);
659
- }
660
- continue;
661
- }
662
- const [hash, val] = transforms[namespace];
663
- const identifier = `_transform${hash}`;
664
- if (isClient && !insertedTransforms[identifier]) {
665
- const rule = `.${identifier} { transform: ${val}; }`;
666
- addStyleToInsertRules(rulesToInsert, {
667
- identifier,
668
- rules: [rule],
669
- property: namespace
670
- });
671
- }
672
- classNames[namespace] = identifier;
673
- }
674
- }
675
- }
676
- const nextViewProps = {};
677
- const ks = Object.keys(viewProps);
678
- const l = ks.length;
679
- for (let i = l - 1; i >= 0; i--) {
680
- nextViewProps[ks[i]] = viewProps[ks[i]];
681
- }
682
- const result = {
683
- space,
684
- hasMedia,
685
- fontFamily,
686
- viewProps: nextViewProps,
687
- // @ts-expect-error
688
- style,
689
- pseudos,
690
- classNames,
691
- rulesToInsert
692
- };
693
- if (className) {
694
- classNames.className = className;
695
- }
696
- if (process.env.NODE_ENV === "development" && debug === "verbose") {
697
- if (isDevTools) {
698
- console.groupCollapsed(" \u{1F539} =>");
699
- const logs = { ...result, state, etc: { transforms, viewProps, rulesToInsert, parentSplitStyles, flatTransforms } };
700
- for (const key in logs) {
701
- console.log(key, logs[key]);
702
- }
703
- console.groupEnd();
704
- }
705
- }
706
- return result;
707
- };
708
- function mergeClassName(transforms, classNames, key, val, isMediaOrPseudo = false) {
709
- if (process.env.TAMAGUI_TARGET === "web") {
710
- if (!val)
711
- return;
712
- if (val[0] === "_" && val.startsWith("_transform-")) {
713
- const ns = isMediaOrPseudo ? key : "transform";
714
- let transform = insertedTransforms[val];
715
- if (isClient && !transform) {
716
- scanAllSheets();
717
- transform = insertedTransforms[val];
718
- if (!transform && isWeb && val[0] !== "_") {
719
- transform = val;
720
- }
721
- }
722
- transforms[ns] ||= ["", ""];
723
- transforms[ns][0] += val.replace("_transform", "");
724
- if (transform) {
725
- transforms[ns][1] += transform;
726
- }
727
- } else {
728
- classNames[key] = val;
729
- }
730
- }
731
- }
732
- function getSubStyleProps(defaultProps, baseProps, specificProps) {
733
- return {
734
- ...defaultProps,
735
- ...baseProps,
736
- ...specificProps
737
- };
738
- }
739
- function mergeStyle({ usedKeys, classNames, viewProps, style }, flatTransforms, key, val, dontSetUsed = false) {
740
- if (!dontSetUsed) {
741
- usedKeys[key] ||= 1;
742
- }
743
- if (val && val[0] === "_") {
744
- classNames[key] = val;
745
- } else if (key in stylePropsTransform) {
746
- flatTransforms ||= {};
747
- flatTransforms[key] = val;
748
- } else {
749
- const out = normalizeValueWithProperty(val, key);
750
- if (key in validStylesOnBaseProps) {
751
- viewProps[key] = out;
752
- } else {
753
- style[key] = out;
754
- }
755
- }
756
- }
757
- const getSubStyle = (styleState, subKey, styleIn, avoidDefaultProps, avoidMergeTransform) => {
758
- const { staticConfig, theme, props, state, conf: conf2, languageContext } = styleState;
759
- const styleOut = {};
760
- for (let key in styleIn) {
761
- const val = styleIn[key];
762
- key = conf2.shorthands[key] || key;
763
- const expanded = staticConfig.propMapper(
764
- key,
765
- val,
766
- theme,
767
- getSubStyleProps(staticConfig.defaultProps, props, props[subKey]),
768
- state,
769
- languageContext,
770
- avoidDefaultProps
771
- );
772
- if (!staticConfig.isHOC) {
773
- if (key in skipProps) {
774
- continue;
775
- }
776
- }
777
- if (!expanded)
778
- continue;
779
- for (const [skey, sval] of expanded) {
780
- if (!avoidMergeTransform && skey in stylePropsTransform) {
781
- mergeTransform(styleOut, skey, sval);
782
- } else {
783
- styleOut[skey] = normalizeValueWithProperty(sval, key);
784
- }
785
- }
786
- }
787
- fixStyles(styleOut);
788
- return styleOut;
789
- };
790
- const useInsertEffectCompat = isWeb ? useInsertionEffect || useIsomorphicLayoutEffect : () => {
791
- };
792
- const useSplitStyles = (...args) => {
793
- const res = getSplitStyles(...args);
794
- if (!isRSC) {
795
- useInsertEffectCompat(() => {
796
- insertStyleRules(res.rulesToInsert);
797
- }, [res.rulesToInsert]);
798
- }
799
- return res;
800
- };
801
- function addStyleToInsertRules(rulesToInsert, styleObject) {
802
- if (process.env.TAMAGUI_TARGET === "web") {
803
- if (!shouldInsertStyleRules(styleObject.identifier)) {
804
- return;
805
- }
806
- updateRules(styleObject.identifier, styleObject.rules);
807
- rulesToInsert.push(styleObject);
808
- }
809
- }
810
- function processIDRefList(idRefList) {
811
- return Array.isArray(idRefList) ? idRefList.join(" ") : idRefList;
812
- }
813
- const animatableDefaults = {
814
- opacity: 1,
815
- scale: 1,
816
- rotate: "0deg",
817
- rotateY: "0deg",
818
- rotateX: "0deg"
819
- };
820
- const lowercaseHyphenate = (match) => `-${match.toLowerCase()}`;
821
- const hyphenate = (str) => str.replace(/[A-Z]/g, lowercaseHyphenate);
822
- const mergeTransform = (obj, key, val, backwards = false) => {
823
- obj.transform ||= [];
824
- obj.transform[backwards ? "unshift" : "push"]({
825
- [mapTransformKeys[key] || key]: val
826
- });
827
- };
828
- const mergeTransforms = (obj, flatTransforms, backwards = false) => {
829
- Object.entries(flatTransforms).forEach(([key, val]) => {
830
- mergeTransform(obj, key, val, backwards);
831
- });
832
- };
833
- const mapTransformKeys = {
834
- x: "translateX",
835
- y: "translateY"
836
- };
837
- const skipProps = {
838
- animation: true,
839
- space: true,
840
- animateOnly: true,
841
- debug: true,
842
- componentName: true,
843
- tag: true
844
- };
845
- if (process.env.NODE_ENV === "test") {
846
- skipProps["data-test-renders"] = true;
847
- }
848
- const IS_STATIC = process.env.IS_STATIC === "is_static";
849
- if (process.env.TAMAGUI_TARGET === "native") {
850
- Object.assign(skipProps, {
851
- whiteSpace: true,
852
- wordWrap: true,
853
- textOverflow: true,
854
- textDecorationDistance: true,
855
- cursor: true,
856
- contain: true,
857
- boxSizing: true,
858
- boxShadow: true,
859
- outlineStyle: true,
860
- outlineOffset: true,
861
- outlineWidth: true,
862
- outlineColor: true
863
- });
864
- }
865
- const accessibilityRoleToWebRole = {
866
- adjustable: "slider",
867
- header: "heading",
868
- image: "img",
869
- link: "link",
870
- none: "presentation",
871
- summary: "region"
872
- };
873
- export {
874
- PROP_SPLIT,
875
- getSplitStyles,
876
- getSubStyle,
877
- useSplitStyles
878
- };
879
- //# sourceMappingURL=getSplitStyles.mjs.map