@hanzogui/web 7.0.0 → 7.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +40 -19
- package/dist/cjs/_withStableStyle.cjs +1 -1
- package/dist/cjs/_withStableStyle.native.js +1 -1
- package/dist/cjs/config.cjs +2 -2
- package/dist/cjs/config.native.js +2 -2
- package/dist/cjs/config.native.js.map +1 -1
- package/dist/cjs/constants/constants.cjs +3 -3
- package/dist/cjs/constants/constants.native.js +3 -3
- package/dist/cjs/createComponent.cjs +307 -530
- package/dist/cjs/createComponent.native.js +265 -588
- package/dist/cjs/createComponent.native.js.map +1 -1
- package/dist/cjs/createGui.cjs +19 -48
- package/dist/cjs/createGui.native.js +22 -65
- package/dist/cjs/createGui.native.js.map +1 -1
- package/dist/cjs/eventHandling.native.js +19 -9
- package/dist/cjs/eventHandling.native.js.map +1 -1
- package/dist/cjs/helpers/createDesignSystem.cjs +22 -36
- package/dist/cjs/helpers/createDesignSystem.native.js +19 -91
- package/dist/cjs/helpers/createDesignSystem.native.js.map +1 -1
- package/dist/cjs/helpers/defaultAnimationDriver.cjs +1 -1
- package/dist/cjs/helpers/defaultAnimationDriver.native.js +1 -1
- package/dist/cjs/helpers/expandStyle.cjs +11 -74
- package/dist/cjs/helpers/expandStyle.native.js +29 -81
- package/dist/cjs/helpers/expandStyle.native.js.map +1 -1
- package/dist/cjs/helpers/expandStyles.cjs +2 -15
- package/dist/cjs/helpers/expandStyles.native.js +7 -13
- package/dist/cjs/helpers/expandStyles.native.js.map +1 -1
- package/dist/cjs/helpers/getSplitStyles.cjs +233 -557
- package/dist/cjs/helpers/getSplitStyles.native.js +204 -659
- package/dist/cjs/helpers/getSplitStyles.native.js.map +1 -1
- package/dist/cjs/helpers/getThemeCSSRules.cjs +8 -16
- package/dist/cjs/helpers/getTokenForKey.cjs +32 -54
- package/dist/cjs/helpers/getTokenForKey.native.js +40 -59
- package/dist/cjs/helpers/getTokenForKey.native.js.map +1 -1
- package/dist/cjs/helpers/insertStyleRule.cjs +27 -79
- package/dist/cjs/helpers/insertStyleRule.native.js +16 -335
- package/dist/cjs/helpers/insertStyleRule.native.js.map +1 -1
- package/dist/cjs/helpers/isActivePlatform.cjs +2 -17
- package/dist/cjs/helpers/isActivePlatform.native.js +2 -17
- package/dist/cjs/helpers/isActivePlatform.native.js.map +1 -1
- package/dist/cjs/helpers/log.cjs +1 -4
- package/dist/cjs/helpers/log.native.js +1 -6
- package/dist/cjs/helpers/log.native.js.map +1 -1
- package/dist/cjs/helpers/propMapper.cjs +37 -110
- package/dist/cjs/helpers/propMapper.native.js +54 -131
- package/dist/cjs/helpers/propMapper.native.js.map +1 -1
- package/dist/cjs/helpers/skipProps.cjs +3 -11
- package/dist/cjs/helpers/skipProps.native.js +3 -11
- package/dist/cjs/helpers/skipProps.native.js.map +1 -1
- package/dist/cjs/helpers/useRenderElement.cjs +7 -18
- package/dist/cjs/helpers/useRenderElement.native.js +7 -15
- package/dist/cjs/helpers/useRenderElement.native.js.map +1 -1
- package/dist/cjs/helpers/wrapStyleTags.cjs +11 -15
- package/dist/cjs/helpers/wrapStyleTags.native.js +3 -22
- package/dist/cjs/helpers/wrapStyleTags.native.js.map +1 -1
- package/dist/cjs/hooks/getThemeProxied.cjs +10 -54
- package/dist/cjs/hooks/getThemeProxied.native.js +27 -48
- package/dist/cjs/hooks/getThemeProxied.native.js.map +1 -1
- package/dist/cjs/hooks/useTheme.cjs +2 -2
- package/dist/cjs/hooks/useTheme.native.js +2 -2
- package/dist/cjs/hooks/useTheme.native.js.map +1 -1
- package/dist/cjs/hooks/useThemeState.cjs +66 -124
- package/dist/cjs/hooks/useThemeState.native.js +64 -142
- package/dist/cjs/hooks/useThemeState.native.js.map +1 -1
- package/dist/cjs/insertFont.cjs +6 -15
- package/dist/cjs/insertFont.native.js +7 -23
- package/dist/cjs/insertFont.native.js.map +1 -1
- package/dist/cjs/setupReactNative.cjs +4 -24
- package/dist/cjs/setupReactNative.native.js +5 -26
- package/dist/cjs/setupReactNative.native.js.map +1 -1
- package/dist/cjs/views/GuiProvider.cjs +4 -6
- package/dist/cjs/views/GuiProvider.native.js +5 -7
- package/dist/cjs/views/GuiProvider.native.js.map +1 -1
- package/dist/cjs/views/Text.cjs +11 -18
- package/dist/cjs/views/Text.native.js +6 -14
- package/dist/cjs/views/Text.native.js.map +1 -1
- package/dist/cjs/views/ThemeProvider.cjs +9 -11
- package/dist/cjs/views/ThemeProvider.native.js +3 -16
- package/dist/cjs/views/ThemeProvider.native.js.map +1 -1
- package/dist/cjs/views/View.native.js.map +1 -1
- package/dist/esm/_withStableStyle.mjs +1 -1
- package/dist/esm/_withStableStyle.mjs.map +1 -1
- package/dist/esm/_withStableStyle.native.js +1 -1
- package/dist/esm/config.mjs +2 -2
- package/dist/esm/config.mjs.map +1 -1
- package/dist/esm/config.native.js +2 -2
- package/dist/esm/config.native.js.map +1 -1
- package/dist/esm/constants/constants.mjs +3 -3
- package/dist/esm/constants/constants.native.js +3 -3
- package/dist/esm/createComponent.mjs +311 -536
- package/dist/esm/createComponent.mjs.map +1 -1
- package/dist/esm/createComponent.native.js +265 -591
- package/dist/esm/createComponent.native.js.map +1 -1
- package/dist/esm/createGui.mjs +20 -51
- package/dist/esm/createGui.mjs.map +1 -1
- package/dist/esm/createGui.native.js +24 -70
- package/dist/esm/createGui.native.js.map +1 -1
- package/dist/esm/createVariables.mjs.map +1 -1
- package/dist/esm/createVariables.native.js.map +1 -1
- package/dist/esm/eventHandling.native.js +19 -9
- package/dist/esm/eventHandling.native.js.map +1 -1
- package/dist/esm/helpers/createDesignSystem.mjs +22 -36
- package/dist/esm/helpers/createDesignSystem.mjs.map +1 -1
- package/dist/esm/helpers/createDesignSystem.native.js +18 -90
- package/dist/esm/helpers/createDesignSystem.native.js.map +1 -1
- package/dist/esm/helpers/defaultAnimationDriver.mjs +1 -1
- package/dist/esm/helpers/defaultAnimationDriver.mjs.map +1 -1
- package/dist/esm/helpers/defaultAnimationDriver.native.js +1 -1
- package/dist/esm/helpers/expandStyle.mjs +12 -73
- package/dist/esm/helpers/expandStyle.mjs.map +1 -1
- package/dist/esm/helpers/expandStyle.native.js +28 -80
- package/dist/esm/helpers/expandStyle.native.js.map +1 -1
- package/dist/esm/helpers/expandStyles.mjs +2 -15
- package/dist/esm/helpers/expandStyles.mjs.map +1 -1
- package/dist/esm/helpers/expandStyles.native.js +7 -13
- package/dist/esm/helpers/expandStyles.native.js.map +1 -1
- package/dist/esm/helpers/getSplitStyles.mjs +236 -560
- package/dist/esm/helpers/getSplitStyles.mjs.map +1 -1
- package/dist/esm/helpers/getSplitStyles.native.js +205 -662
- package/dist/esm/helpers/getSplitStyles.native.js.map +1 -1
- package/dist/esm/helpers/getThemeCSSRules.mjs +8 -16
- package/dist/esm/helpers/getThemeCSSRules.mjs.map +1 -1
- package/dist/esm/helpers/getTokenForKey.mjs +32 -54
- package/dist/esm/helpers/getTokenForKey.mjs.map +1 -1
- package/dist/esm/helpers/getTokenForKey.native.js +40 -59
- package/dist/esm/helpers/getTokenForKey.native.js.map +1 -1
- package/dist/esm/helpers/insertStyleRule.mjs +27 -79
- package/dist/esm/helpers/insertStyleRule.mjs.map +1 -1
- package/dist/esm/helpers/insertStyleRule.native.js +14 -333
- package/dist/esm/helpers/insertStyleRule.native.js.map +1 -1
- package/dist/esm/helpers/isActivePlatform.mjs +2 -17
- package/dist/esm/helpers/isActivePlatform.mjs.map +1 -1
- package/dist/esm/helpers/isActivePlatform.native.js +2 -17
- package/dist/esm/helpers/isActivePlatform.native.js.map +1 -1
- package/dist/esm/helpers/log.mjs +1 -4
- package/dist/esm/helpers/log.mjs.map +1 -1
- package/dist/esm/helpers/log.native.js +1 -6
- package/dist/esm/helpers/log.native.js.map +1 -1
- package/dist/esm/helpers/propMapper.mjs +37 -108
- package/dist/esm/helpers/propMapper.mjs.map +1 -1
- package/dist/esm/helpers/propMapper.native.js +54 -131
- package/dist/esm/helpers/propMapper.native.js.map +1 -1
- package/dist/esm/helpers/skipProps.mjs +3 -10
- package/dist/esm/helpers/skipProps.mjs.map +1 -1
- package/dist/esm/helpers/skipProps.native.js +2 -10
- package/dist/esm/helpers/skipProps.native.js.map +1 -1
- package/dist/esm/helpers/useRenderElement.mjs +9 -22
- package/dist/esm/helpers/useRenderElement.mjs.map +1 -1
- package/dist/esm/helpers/useRenderElement.native.js +8 -17
- package/dist/esm/helpers/useRenderElement.native.js.map +1 -1
- package/dist/esm/helpers/wrapStyleTags.mjs +11 -15
- package/dist/esm/helpers/wrapStyleTags.mjs.map +1 -1
- package/dist/esm/helpers/wrapStyleTags.native.js +1 -20
- package/dist/esm/helpers/wrapStyleTags.native.js.map +1 -1
- package/dist/esm/hooks/getThemeProxied.mjs +11 -52
- package/dist/esm/hooks/getThemeProxied.mjs.map +1 -1
- package/dist/esm/hooks/getThemeProxied.native.js +27 -48
- package/dist/esm/hooks/getThemeProxied.native.js.map +1 -1
- package/dist/esm/hooks/useTheme.mjs +2 -2
- package/dist/esm/hooks/useTheme.mjs.map +1 -1
- package/dist/esm/hooks/useTheme.native.js +2 -2
- package/dist/esm/hooks/useTheme.native.js.map +1 -1
- package/dist/esm/hooks/useThemeState.mjs +67 -124
- package/dist/esm/hooks/useThemeState.mjs.map +1 -1
- package/dist/esm/hooks/useThemeState.native.js +64 -142
- package/dist/esm/hooks/useThemeState.native.js.map +1 -1
- package/dist/esm/insertFont.mjs +7 -17
- package/dist/esm/insertFont.mjs.map +1 -1
- package/dist/esm/insertFont.native.js +7 -24
- package/dist/esm/insertFont.native.js.map +1 -1
- package/dist/esm/setupReactNative.mjs +4 -24
- package/dist/esm/setupReactNative.mjs.map +1 -1
- package/dist/esm/setupReactNative.native.js +5 -26
- package/dist/esm/setupReactNative.native.js.map +1 -1
- package/dist/esm/views/GuiProvider.mjs +4 -6
- package/dist/esm/views/GuiProvider.mjs.map +1 -1
- package/dist/esm/views/GuiProvider.native.js +5 -7
- package/dist/esm/views/GuiProvider.native.js.map +1 -1
- package/dist/esm/views/Slot.mjs.map +1 -1
- package/dist/esm/views/Text.mjs +11 -18
- package/dist/esm/views/Text.mjs.map +1 -1
- package/dist/esm/views/Text.native.js +5 -12
- package/dist/esm/views/Text.native.js.map +1 -1
- package/dist/esm/views/Theme.mjs.map +1 -1
- package/dist/esm/views/ThemeProvider.mjs +9 -11
- package/dist/esm/views/ThemeProvider.mjs.map +1 -1
- package/dist/esm/views/ThemeProvider.native.js +1 -14
- package/dist/esm/views/ThemeProvider.native.js.map +1 -1
- package/dist/esm/views/View.mjs.map +1 -1
- package/dist/esm/views/View.native.js.map +1 -1
- package/package.json +34 -22
- package/src/_withStableStyle.tsx +2 -2
- package/src/config.ts +7 -4
- package/src/constants/accessibilityDirectMap.tsx +1 -1
- package/src/constants/constants.ts +3 -3
- package/src/createComponent.tsx +31 -2
- package/src/createGui.ts +2 -2
- package/src/eventHandling.native.ts +31 -10
- package/src/helpers/createMediaStyle.ts +1 -1
- package/src/helpers/defaultAnimationDriver.tsx +1 -1
- package/src/helpers/getSplitStyles.tsx +1 -1
- package/src/helpers/getTokenForKey.ts +42 -29
- package/src/helpers/insertStyleRule.tsx +2 -2
- package/src/helpers/isActivePlatform.ts +5 -5
- package/src/helpers/mergeProps.ts +1 -1
- package/src/helpers/skipProps.ts +1 -1
- package/src/helpers/useRenderElement.tsx +4 -1
- package/src/hooks/useTheme.tsx +2 -2
- package/src/interfaces/GuiComponentPropsBaseBase.tsx +10 -4
- package/src/styled.tsx +2 -2
- package/src/types.tsx +33 -24
- package/src/views/View.tsx +6 -1
- package/types/config.d.ts.map +1 -1
- package/types/eventHandling.native.d.ts.map +1 -1
- package/types/helpers/getTokenForKey.d.ts.map +1 -1
- package/types/helpers/isActivePlatform.d.ts +5 -5
- package/types/helpers/skipProps.d.ts +1 -1
- package/types/helpers/useRenderElement.d.ts.map +1 -1
- package/types/helpers/wrapStyleTags.d.ts +1 -1
- package/types/helpers/wrapStyleTags.d.ts.map +1 -1
- package/types/interfaces/GuiComponentPropsBaseBase.d.ts +3 -3
- package/types/interfaces/GuiComponentPropsBaseBase.d.ts.map +1 -1
- package/types/styled.d.ts +1 -1
- package/types/types.d.ts +17 -17
- package/types/types.d.ts.map +1 -1
- package/types/views/Configuration.d.ts +1 -1
- package/types/views/Configuration.d.ts.map +1 -1
- package/types/views/FontLanguage.d.ts +1 -1
- package/types/views/FontLanguage.native.d.ts +2 -1
- package/types/views/FontLanguage.native.d.ts.map +1 -1
- package/types/views/GuiProvider.d.ts +2 -1
- package/types/views/GuiProvider.d.ts.map +1 -1
- package/types/views/GuiRoot.d.ts +1 -1
- package/types/views/GuiRoot.d.ts.map +1 -1
- package/types/views/Slot.d.ts +1 -1
- package/types/views/ThemeProvider.d.ts +1 -1
- package/types/views/ThemeProvider.d.ts.map +1 -1
- package/types/views/View.d.ts.map +1 -1
- package/.turbo/turbo-build.log +0 -2
- package/inject-styles/index.cjs +0 -2
- package/inject-styles/index.js +0 -2
- package/tsconfig.json +0 -44
- package/tsconfig.test.json +0 -9
- package/vitest.config.d.ts +0 -3
- package/vitest.config.d.ts.map +0 -1
- package/vitest.config.ts +0 -14
|
@@ -51,7 +51,7 @@ var import_createMediaStyle = require("./createMediaStyle.cjs");
|
|
|
51
51
|
var import_expandStyles = require("./expandStyles.cjs");
|
|
52
52
|
var import_getCSSStylesAtomic = require("./getCSSStylesAtomic.cjs");
|
|
53
53
|
var import_getDefaultProps = require("./getDefaultProps.cjs");
|
|
54
|
-
|
|
54
|
+
require("./getDynamicVal.cjs");
|
|
55
55
|
var import_getGroupPropParts = require("./getGroupPropParts.cjs");
|
|
56
56
|
var import_insertStyleRule = require("./insertStyleRule.cjs");
|
|
57
57
|
var import_isActivePlatform = require("./isActivePlatform.cjs");
|
|
@@ -69,13 +69,9 @@ const PROP_SPLIT = "-";
|
|
|
69
69
|
function normalizeGroupKey(key, groupContext) {
|
|
70
70
|
const parts = key.split("-");
|
|
71
71
|
const plen = parts.length;
|
|
72
|
-
if (
|
|
73
|
-
// check if its actually a simple group selector to avoid breaking selectors
|
|
74
|
-
plen === 2 || plen === 3 && import_pseudoDescriptors.pseudoPriorities[parts[parts.length - 1]]) {
|
|
72
|
+
if (plen === 2 || plen === 3 && import_pseudoDescriptors.pseudoPriorities[parts[parts.length - 1]]) {
|
|
75
73
|
const name = parts[1];
|
|
76
|
-
if (name !== "true" && groupContext && !groupContext[name])
|
|
77
|
-
return key.replace("$group-", "$group-true-");
|
|
78
|
-
}
|
|
74
|
+
if (name !== "true" && groupContext && !groupContext[name]) return key.replace("$group-", "$group-true-");
|
|
79
75
|
}
|
|
80
76
|
return key;
|
|
81
77
|
}
|
|
@@ -85,12 +81,8 @@ function isValidStyleKey(key, validStyles, accept) {
|
|
|
85
81
|
const getSplitStyles = (props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, componentContext, groupContext, elementType, startedUnhydrated, debug, animationDriver) => {
|
|
86
82
|
conf = conf || (0, import_config.getConfig)();
|
|
87
83
|
const driver = animationDriver || componentContext?.animationDriver || conf.animations;
|
|
88
|
-
if (props.passThrough)
|
|
89
|
-
|
|
90
|
-
}
|
|
91
|
-
if (import_constants.isWeb && styleProps.isAnimated && driver?.isReactNative && !styleProps.noNormalize) {
|
|
92
|
-
styleProps.noNormalize = "values";
|
|
93
|
-
}
|
|
84
|
+
if (props.passThrough) return null;
|
|
85
|
+
if (import_constants.isWeb && styleProps.isAnimated && driver?.isReactNative && !styleProps.noNormalize) styleProps.noNormalize = "values";
|
|
94
86
|
const {
|
|
95
87
|
shorthands
|
|
96
88
|
} = conf;
|
|
@@ -108,9 +100,9 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
108
100
|
const viewProps = {};
|
|
109
101
|
const mediaState = styleProps.mediaState || import_mediaState.mediaState;
|
|
110
102
|
const shouldDoClasses = acceptsClassName && import_constants.isWeb && !styleProps.noClass;
|
|
111
|
-
const rulesToInsert =
|
|
103
|
+
const rulesToInsert = {};
|
|
112
104
|
const classNames = {};
|
|
113
|
-
|
|
105
|
+
props.space;
|
|
114
106
|
let pseudos = null;
|
|
115
107
|
let hasMedia = false;
|
|
116
108
|
let dynamicThemeAccess;
|
|
@@ -119,9 +111,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
119
111
|
let className = props.className || "";
|
|
120
112
|
let mediaStylesSeen = 0;
|
|
121
113
|
const validStyles = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? import_helpers.stylePropsText : import_helpers.validStyles);
|
|
122
|
-
if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time))
|
|
123
|
-
time`split-styles-setup`;
|
|
124
|
-
}
|
|
114
|
+
if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-setup`;
|
|
125
115
|
const styleState = {
|
|
126
116
|
classNames,
|
|
127
117
|
conf,
|
|
@@ -135,30 +125,23 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
135
125
|
viewProps,
|
|
136
126
|
context: componentContext,
|
|
137
127
|
debug,
|
|
138
|
-
// resolved animation driver (respects animatedBy prop)
|
|
139
128
|
animationDriver: driver
|
|
140
129
|
};
|
|
141
130
|
if (process.env.IS_STATIC === "is_static") {
|
|
142
131
|
const {
|
|
143
132
|
fallbackProps
|
|
144
133
|
} = styleProps;
|
|
145
|
-
if (fallbackProps) {
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
return Reflect.get(props, key);
|
|
152
|
-
}
|
|
153
|
-
});
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) {
|
|
157
|
-
time`style-state`;
|
|
134
|
+
if (fallbackProps) styleState.props = new Proxy(props, {
|
|
135
|
+
get(_, key, val) {
|
|
136
|
+
if (!Reflect.has(props, key)) return Reflect.get(fallbackProps, key);
|
|
137
|
+
return Reflect.get(props, key);
|
|
138
|
+
}
|
|
139
|
+
});
|
|
158
140
|
}
|
|
141
|
+
if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`style-state`;
|
|
159
142
|
if (process.env.NODE_ENV === "development" && debug === "verbose" && import_constants.isClient) {
|
|
160
143
|
if (import_isDevTools.isDevTools) {
|
|
161
|
-
console.groupCollapsed("
|
|
144
|
+
console.groupCollapsed("🔹 getSplitStyles 👇");
|
|
162
145
|
(0, import_log.log)({
|
|
163
146
|
props,
|
|
164
147
|
staticConfig,
|
|
@@ -196,12 +179,8 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
196
179
|
viewProps[keyInit] = valInit;
|
|
197
180
|
continue;
|
|
198
181
|
}
|
|
199
|
-
if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) {
|
|
200
|
-
|
|
201
|
-
}
|
|
202
|
-
if (process.env.NODE_ENV === "test" && keyInit === "jestAnimatedStyle") {
|
|
203
|
-
continue;
|
|
204
|
-
}
|
|
182
|
+
if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`before-prop-${keyInit}`;
|
|
183
|
+
if (process.env.NODE_ENV === "test" && keyInit === "jestAnimatedStyle") continue;
|
|
205
184
|
if (accept) {
|
|
206
185
|
const accepted = accept[keyInit];
|
|
207
186
|
if ((accepted === "style" || accepted === "textStyle") && valInit && typeof valInit === "object") {
|
|
@@ -210,81 +189,46 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
210
189
|
}
|
|
211
190
|
}
|
|
212
191
|
if (!disableExpandShorthands) {
|
|
213
|
-
if (keyInit in shorthands)
|
|
214
|
-
keyInit = shorthands[keyInit];
|
|
215
|
-
}
|
|
192
|
+
if (keyInit in shorthands) keyInit = shorthands[keyInit];
|
|
216
193
|
}
|
|
217
194
|
if (keyInit === "className") continue;
|
|
218
195
|
if (asChild) {
|
|
219
196
|
const defaults = (0, import_getDefaultProps.getDefaultProps)(staticConfig);
|
|
220
197
|
if (defaults) {
|
|
221
198
|
const defaultVal = defaults[keyOg] ?? defaults[keyInit];
|
|
222
|
-
if (defaultVal !== void 0 && valInit === defaultVal)
|
|
223
|
-
continue;
|
|
224
|
-
}
|
|
199
|
+
if (defaultVal !== void 0 && valInit === defaultVal) continue;
|
|
225
200
|
}
|
|
226
201
|
}
|
|
227
202
|
if (keyInit in import_skipProps.skipProps && !noSkip && !isHOC) {
|
|
228
203
|
if (keyInit === "group") {
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
const containerType = webContainerType || "inline-size";
|
|
232
|
-
const containerCSS = ["container", void 0, identifier, void 0, [`.${identifier} { container-name: ${valInit}; container-type: ${containerType}; }`]];
|
|
233
|
-
addStyleToInsertRules(rulesToInsert, containerCSS);
|
|
234
|
-
}
|
|
235
|
-
}
|
|
236
|
-
if (keyInit === "transition" && typeof valInit === "string" && !driver?.animations?.[valInit]) {} else {
|
|
237
|
-
continue;
|
|
204
|
+
const identifier = `t_group_${valInit}`;
|
|
205
|
+
addStyleToInsertRules(rulesToInsert, ["container", void 0, identifier, void 0, [`.${identifier} { container-name: ${valInit}; container-type: ${webContainerType || "inline-size"}; }`]]);
|
|
238
206
|
}
|
|
207
|
+
if (keyInit === "transition" && typeof valInit === "string" && !driver?.animations?.[valInit]) {} else continue;
|
|
239
208
|
}
|
|
240
209
|
let isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles, accept);
|
|
241
|
-
if (
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
continue;
|
|
247
|
-
}
|
|
210
|
+
if (staticConfig.isReactNative && keyInit.startsWith("data-")) {
|
|
211
|
+
keyInit = keyInit.replace("data-", "");
|
|
212
|
+
viewProps["dataSet"] ||= {};
|
|
213
|
+
viewProps["dataSet"][keyInit] = valInit;
|
|
214
|
+
continue;
|
|
248
215
|
}
|
|
249
|
-
if (
|
|
250
|
-
if (
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
if (keyInit === "userSelect") {
|
|
255
|
-
keyInit = "selectable";
|
|
256
|
-
valInit = valInit !== "none";
|
|
257
|
-
} else if (keyInit.startsWith("data-")) {
|
|
258
|
-
continue;
|
|
259
|
-
}
|
|
216
|
+
if (!noExpand) {
|
|
217
|
+
if (keyInit === "disabled" && valInit === true) {
|
|
218
|
+
viewProps["aria-disabled"] = true;
|
|
219
|
+
if (elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") viewProps.disabled = true;
|
|
220
|
+
if (!variants?.disabled) continue;
|
|
260
221
|
}
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
viewProps["aria-disabled"] = true;
|
|
266
|
-
if (elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") {
|
|
267
|
-
viewProps.disabled = true;
|
|
268
|
-
}
|
|
269
|
-
if (!variants?.disabled) {
|
|
270
|
-
continue;
|
|
271
|
-
}
|
|
272
|
-
}
|
|
273
|
-
if (keyInit === "testID") {
|
|
274
|
-
if (isReactNative) {
|
|
275
|
-
viewProps.testID = valInit;
|
|
276
|
-
} else {
|
|
277
|
-
viewProps["data-testid"] = valInit;
|
|
278
|
-
if (styleProps.isAnimated && driver?.isReactNative) {
|
|
279
|
-
viewProps.testID = valInit;
|
|
280
|
-
}
|
|
281
|
-
}
|
|
282
|
-
continue;
|
|
283
|
-
}
|
|
284
|
-
if (keyInit === "id") {
|
|
285
|
-
viewProps.id = valInit;
|
|
286
|
-
continue;
|
|
222
|
+
if (keyInit === "testID") {
|
|
223
|
+
if (isReactNative) viewProps.testID = valInit;else {
|
|
224
|
+
viewProps["data-testid"] = valInit;
|
|
225
|
+
if (styleProps.isAnimated && driver?.isReactNative) viewProps.testID = valInit;
|
|
287
226
|
}
|
|
227
|
+
continue;
|
|
228
|
+
}
|
|
229
|
+
if (keyInit === "id") {
|
|
230
|
+
viewProps.id = valInit;
|
|
231
|
+
continue;
|
|
288
232
|
}
|
|
289
233
|
}
|
|
290
234
|
let isVariant = !isValidStyleKeyInit && variants && keyInit in variants;
|
|
@@ -292,16 +236,10 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
292
236
|
let isPseudo = keyInit in import_helpers.validPseudoKeys;
|
|
293
237
|
let isMedia = !isStyleLikeKey && !isPseudo ? (0, import_useMedia.getMediaKey)(keyInit) : false;
|
|
294
238
|
let isMediaOrPseudo = Boolean(isMedia || isPseudo);
|
|
295
|
-
if (isMediaOrPseudo && isMedia === "group")
|
|
296
|
-
keyInit = normalizeGroupKey(keyInit, groupContext);
|
|
297
|
-
}
|
|
239
|
+
if (isMediaOrPseudo && isMedia === "group") keyInit = normalizeGroupKey(keyInit, groupContext);
|
|
298
240
|
const isStyleProp = isValidStyleKeyInit || isMediaOrPseudo || isVariant && !noExpand;
|
|
299
|
-
if (isStyleProp && (asChild === "except-style" || asChild === "except-style-web"))
|
|
300
|
-
|
|
301
|
-
}
|
|
302
|
-
const shouldPassProp = !isStyleProp && isHOC ||
|
|
303
|
-
// is in parent variants
|
|
304
|
-
isHOC && parentVariants && keyInit in parentVariants || inlineProps?.has(keyInit);
|
|
241
|
+
if (isStyleProp && (asChild === "except-style" || asChild === "except-style-web")) continue;
|
|
242
|
+
const shouldPassProp = !isStyleProp && isHOC || isHOC && parentVariants && keyInit in parentVariants || inlineProps?.has(keyInit);
|
|
305
243
|
const parentVariant = parentVariants?.[keyInit];
|
|
306
244
|
const isHOCShouldPassThrough = Boolean(isHOC && (isValidStyleKeyInit || isMediaOrPseudo || parentVariant || keyInit in import_skipProps.skipProps));
|
|
307
245
|
const shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
|
|
@@ -312,40 +250,30 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
312
250
|
valInit,
|
|
313
251
|
shouldPassProp
|
|
314
252
|
});
|
|
315
|
-
if (import_constants.isClient) {
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
usedKeys
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
});
|
|
326
|
-
}
|
|
253
|
+
if (import_constants.isClient) (0, import_log.log)({
|
|
254
|
+
variants,
|
|
255
|
+
variant: variants?.[keyInit],
|
|
256
|
+
isVariant,
|
|
257
|
+
isHOCShouldPassThrough,
|
|
258
|
+
usedKeys: {
|
|
259
|
+
...styleState.usedKeys
|
|
260
|
+
},
|
|
261
|
+
parentStaticConfig
|
|
262
|
+
});
|
|
327
263
|
}
|
|
328
264
|
if (shouldPassThrough) {
|
|
329
265
|
passDownProp(viewProps, keyInit, valInit, isMediaOrPseudo);
|
|
330
|
-
if (process.env.NODE_ENV === "development" && debug === "verbose")
|
|
331
|
-
|
|
332
|
-
}
|
|
333
|
-
if (!isVariant) {
|
|
334
|
-
continue;
|
|
335
|
-
}
|
|
266
|
+
if (process.env.NODE_ENV === "development" && debug === "verbose") console.groupEnd();
|
|
267
|
+
if (!isVariant) continue;
|
|
336
268
|
}
|
|
337
269
|
if (!noSkip) {
|
|
338
270
|
if (keyInit in import_skipProps.skipProps && !(keyInit === "transition" && typeof valInit === "string" && !driver?.animations?.[valInit])) {
|
|
339
|
-
if (process.env.NODE_ENV === "development" && debug === "verbose")
|
|
340
|
-
console.groupEnd();
|
|
341
|
-
}
|
|
271
|
+
if (process.env.NODE_ENV === "development" && debug === "verbose") console.groupEnd();
|
|
342
272
|
continue;
|
|
343
273
|
}
|
|
344
274
|
}
|
|
345
275
|
if (isText || isInput) {
|
|
346
|
-
if (valInit && (keyInit === "fontFamily" || keyInit === shorthands["fontFamily"]) && valInit in conf.fontsParsed)
|
|
347
|
-
styleState.fontFamily = valInit;
|
|
348
|
-
}
|
|
276
|
+
if (valInit && (keyInit === "fontFamily" || keyInit === shorthands["fontFamily"]) && valInit in conf.fontsParsed) styleState.fontFamily = valInit;
|
|
349
277
|
}
|
|
350
278
|
const disablePropMap = isMediaOrPseudo || !isStyleLikeKey;
|
|
351
279
|
(0, import_propMapper.propMapper)(keyInit, valInit, styleState, disablePropMap, (key, val, originalVal) => {
|
|
@@ -355,17 +283,11 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
355
283
|
return;
|
|
356
284
|
}
|
|
357
285
|
if (process.env.NODE_ENV === "development" && debug === "verbose") {
|
|
358
|
-
console.groupCollapsed("
|
|
286
|
+
console.groupCollapsed(" 💠 expanded", keyInit, "=>", key);
|
|
359
287
|
(0, import_log.log)(val);
|
|
360
288
|
console.groupEnd();
|
|
361
289
|
}
|
|
362
290
|
if (val == null) return;
|
|
363
|
-
if (false) {
|
|
364
|
-
if (key === "pointerEvents") {
|
|
365
|
-
viewProps[key] = val;
|
|
366
|
-
return;
|
|
367
|
-
}
|
|
368
|
-
}
|
|
369
291
|
if (!isHOC && isValidStyleKey(key, validStyles, accept) || false) {
|
|
370
292
|
mergeStyle(styleState, key, val, 1, false, originalVal);
|
|
371
293
|
return;
|
|
@@ -374,14 +296,9 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
374
296
|
isMedia = isPseudo ? false : (0, import_useMedia.getMediaKey)(key);
|
|
375
297
|
isMediaOrPseudo = Boolean(isMedia || isPseudo);
|
|
376
298
|
isVariant = variants && key in variants;
|
|
377
|
-
if (isMedia === "group")
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
if (inlineProps?.has(key) || process.env.IS_STATIC === "is_static" && inlineWhenUnflattened?.has(key)) {
|
|
381
|
-
viewProps[key] = props[key] ?? val;
|
|
382
|
-
}
|
|
383
|
-
const shouldPassThrough2 = styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo || parentStaticConfig?.variants?.[keyInit]);
|
|
384
|
-
if (shouldPassThrough2) {
|
|
299
|
+
if (isMedia === "group") key = normalizeGroupKey(key, groupContext);
|
|
300
|
+
if (inlineProps?.has(key) || process.env.IS_STATIC === "is_static" && inlineWhenUnflattened?.has(key)) viewProps[key] = props[key] ?? val;
|
|
301
|
+
if (styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo || parentStaticConfig?.variants?.[keyInit])) {
|
|
385
302
|
passDownProp(viewProps, key, val, isMediaOrPseudo);
|
|
386
303
|
if (process.env.NODE_ENV === "development" && debug === "verbose") {
|
|
387
304
|
console.groupCollapsed(` - passing down prop ${key}`);
|
|
@@ -409,14 +326,10 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
409
326
|
const descriptor = import_pseudoDescriptors.pseudoDescriptors[key];
|
|
410
327
|
const isEnter = key === "enterStyle";
|
|
411
328
|
const isExit = key === "exitStyle";
|
|
412
|
-
if (!descriptor)
|
|
413
|
-
return;
|
|
414
|
-
}
|
|
329
|
+
if (!descriptor) return;
|
|
415
330
|
if (shouldDoClasses && !isExit) {
|
|
416
331
|
const pseudoStyles = (0, import_getCSSStylesAtomic.getStyleAtomic)(pseudoStyleObject, descriptor);
|
|
417
|
-
if (process.env.NODE_ENV === "development" && debug === "verbose")
|
|
418
|
-
console.info("pseudo:", key, pseudoStyleObject, pseudoStyles);
|
|
419
|
-
}
|
|
332
|
+
if (process.env.NODE_ENV === "development" && debug === "verbose") console.info("pseudo:", key, pseudoStyleObject, pseudoStyles);
|
|
420
333
|
for (const psuedoStyle of pseudoStyles) {
|
|
421
334
|
const fullKey = `${psuedoStyle[import_helpers.StyleObjectProperty]}${PROP_SPLIT}${descriptor.name}`;
|
|
422
335
|
addStyleToInsertRules(rulesToInsert, psuedoStyle);
|
|
@@ -424,14 +337,9 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
424
337
|
}
|
|
425
338
|
}
|
|
426
339
|
if (!shouldDoClasses || isExit || isEnter) {
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
if (
|
|
430
|
-
isDisabled = !styleProps.isExiting;
|
|
431
|
-
}
|
|
432
|
-
if (isEnter && componentState.unmounted === false) {
|
|
433
|
-
isDisabled = true;
|
|
434
|
-
}
|
|
340
|
+
let isDisabled = componentState[descriptor.stateKey || descriptor.name] === false;
|
|
341
|
+
if (isExit) isDisabled = !styleProps.isExiting;
|
|
342
|
+
if (isEnter && componentState.unmounted === false) isDisabled = true;
|
|
435
343
|
if (process.env.NODE_ENV === "development" && debug === "verbose") {
|
|
436
344
|
console.groupCollapsed("pseudo", key, {
|
|
437
345
|
isDisabled
|
|
@@ -448,9 +356,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
448
356
|
const pseudoOriginalValues = styleOriginalValues.get(pseudoStyleObject);
|
|
449
357
|
for (const pkey in pseudoStyleObject) {
|
|
450
358
|
const val2 = pseudoStyleObject[pkey];
|
|
451
|
-
if (isDisabled) {
|
|
452
|
-
applyDefaultStyle(pkey, styleState);
|
|
453
|
-
} else {
|
|
359
|
+
if (isDisabled) applyDefaultStyle(pkey, styleState);else {
|
|
454
360
|
const curImportance = styleState.usedKeys[pkey] || 0;
|
|
455
361
|
const shouldMerge = importance >= curImportance;
|
|
456
362
|
if (shouldMerge) {
|
|
@@ -461,21 +367,17 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
461
367
|
}
|
|
462
368
|
mergeStyle(styleState, pkey, val2, importance, false, pseudoOriginalValues?.[pkey]);
|
|
463
369
|
}
|
|
464
|
-
if (process.env.NODE_ENV === "development" && debug === "verbose") {
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
});
|
|
471
|
-
}
|
|
370
|
+
if (process.env.NODE_ENV === "development" && debug === "verbose") (0, import_log.log)(" subKey", pkey, shouldMerge, {
|
|
371
|
+
importance,
|
|
372
|
+
curImportance,
|
|
373
|
+
pkey,
|
|
374
|
+
val: val2
|
|
375
|
+
});
|
|
472
376
|
}
|
|
473
377
|
}
|
|
474
|
-
if (!isDisabled) {
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
styleState.usedKeys[k] = Math.max(importance, styleState.usedKeys[k] || 0);
|
|
478
|
-
}
|
|
378
|
+
if (!isDisabled) for (const key2 in val) {
|
|
379
|
+
const k = shorthands[key2] || key2;
|
|
380
|
+
styleState.usedKeys[k] = Math.max(importance, styleState.usedKeys[k] || 0);
|
|
479
381
|
}
|
|
480
382
|
}
|
|
481
383
|
return;
|
|
@@ -484,29 +386,22 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
484
386
|
if (!val) return;
|
|
485
387
|
const mediaKeyShort = key.slice(isMedia == "theme" ? 7 : 1);
|
|
486
388
|
hasMedia ||= true;
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
if (!hasMedia || typeof hasMedia === "boolean") {
|
|
490
|
-
hasMedia = /* @__PURE__ */new Set();
|
|
491
|
-
}
|
|
389
|
+
if (val["space"] || !shouldDoClasses || styleProps.willBeAnimated) {
|
|
390
|
+
if (!hasMedia || typeof hasMedia === "boolean") hasMedia = /* @__PURE__ */new Set();
|
|
492
391
|
hasMedia.add(mediaKeyShort);
|
|
493
392
|
}
|
|
494
393
|
if (isMedia === "platform") {
|
|
495
|
-
if (!(0, import_isActivePlatform.isActivePlatform)(key))
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
componentState,
|
|
507
|
-
mediaState
|
|
508
|
-
});
|
|
509
|
-
}
|
|
394
|
+
if (!(0, import_isActivePlatform.isActivePlatform)(key)) return;
|
|
395
|
+
}
|
|
396
|
+
if (process.env.NODE_ENV === "development" && debug === "verbose") (0, import_log.log)(` \u{1F4FA} ${key}`, {
|
|
397
|
+
key,
|
|
398
|
+
val,
|
|
399
|
+
props,
|
|
400
|
+
shouldDoClasses,
|
|
401
|
+
acceptsClassName,
|
|
402
|
+
componentState,
|
|
403
|
+
mediaState
|
|
404
|
+
});
|
|
510
405
|
const priority = mediaStylesSeen;
|
|
511
406
|
mediaStylesSeen += 1;
|
|
512
407
|
if (shouldDoClasses) {
|
|
@@ -515,13 +410,9 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
515
410
|
for (const style of mediaStyles) {
|
|
516
411
|
const property = style[import_helpers.StyleObjectProperty];
|
|
517
412
|
const isSubStyle = property[0] === "$";
|
|
518
|
-
if (isSubStyle && !(0, import_isActivePlatform.isActivePlatform)(property))
|
|
519
|
-
continue;
|
|
520
|
-
}
|
|
413
|
+
if (isSubStyle && !(0, import_isActivePlatform.isActivePlatform)(property)) continue;
|
|
521
414
|
const out = (0, import_createMediaStyle.createMediaStyle)(style, mediaKeyShort, import_mediaState.mediaQueryConfig, isMedia, false, priority);
|
|
522
|
-
if (process.env.NODE_ENV === "development" && debug === "verbose") {
|
|
523
|
-
(0, import_log.log)(`\u{1F4FA} media style:`, out);
|
|
524
|
-
}
|
|
415
|
+
if (process.env.NODE_ENV === "development" && debug === "verbose") (0, import_log.log)(`\u{1F4FA} media style:`, out);
|
|
525
416
|
const subKey = isSubStyle ? style[2] : "";
|
|
526
417
|
const fullKey = `${style[import_helpers.StyleObjectProperty]}${subKey}${PROP_SPLIT}${mediaKeyShort}${style[import_helpers.StyleObjectPseudo] || ""}`;
|
|
527
418
|
addStyleToInsertRules(rulesToInsert, out);
|
|
@@ -529,72 +420,24 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
529
420
|
}
|
|
530
421
|
} else {
|
|
531
422
|
let mergeMediaStyle = function (key2, val2, originalVal2) {
|
|
532
|
-
if (process.env.TAMAGUI_TARGET === "native") {
|
|
533
|
-
if (!isValidStyleKey(key2, validStyles, accept)) {
|
|
534
|
-
viewProps[key2] = val2;
|
|
535
|
-
return;
|
|
536
|
-
}
|
|
537
|
-
}
|
|
538
423
|
styleState.style ||= {};
|
|
539
|
-
|
|
540
|
-
if (didMerge && key2 === "fontFamily") {
|
|
541
|
-
styleState.fontFamily = mediaStyle.fontFamily;
|
|
542
|
-
}
|
|
424
|
+
if (mergeMediaByImportance(styleState, mediaKeyShort, key2, val2, mediaState[mediaKeyShort], importanceBump, debug, originalVal2) && key2 === "fontFamily") styleState.fontFamily = mediaStyle.fontFamily;
|
|
543
425
|
};
|
|
544
426
|
const isThemeMedia = isMedia === "theme";
|
|
545
427
|
const isGroupMedia = isMedia === "group";
|
|
546
428
|
const isPlatformMedia = isMedia === "platform";
|
|
547
429
|
if (!isThemeMedia && !isPlatformMedia && !isGroupMedia) {
|
|
548
430
|
if (!mediaState[mediaKeyShort]) {
|
|
549
|
-
if (process.env.NODE_ENV === "development" && debug === "verbose") {
|
|
550
|
-
(0, import_log.log)(` \u{1F4FA} \u274C DISABLED ${mediaKeyShort}`);
|
|
551
|
-
}
|
|
431
|
+
if (process.env.NODE_ENV === "development" && debug === "verbose") (0, import_log.log)(` \u{1F4FA} \u274C DISABLED ${mediaKeyShort}`);
|
|
552
432
|
return;
|
|
553
433
|
}
|
|
554
|
-
if (process.env.NODE_ENV === "development" && debug === "verbose") {
|
|
555
|
-
(0, import_log.log)(` \u{1F4FA} \u2705 ENABLED ${mediaKeyShort}`);
|
|
556
|
-
}
|
|
434
|
+
if (process.env.NODE_ENV === "development" && debug === "verbose") (0, import_log.log)(` \u{1F4FA} \u2705 ENABLED ${mediaKeyShort}`);
|
|
557
435
|
}
|
|
558
436
|
const mediaStyle = getSubStyle(styleState, key, val, true);
|
|
559
437
|
let importanceBump = 0;
|
|
560
438
|
if (isThemeMedia) {
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
const scheme = mediaKeyShort;
|
|
564
|
-
const oppositeScheme = getOppositeScheme(mediaKeyShort);
|
|
565
|
-
const themeOriginalValues = styleOriginalValues.get(mediaStyle);
|
|
566
|
-
const isCurrentScheme = themeName === scheme || themeName.startsWith(scheme);
|
|
567
|
-
for (const subKey in mediaStyle) {
|
|
568
|
-
const val2 = extractValueFromDynamic(mediaStyle[subKey], scheme);
|
|
569
|
-
const existing = styleState.style[subKey];
|
|
570
|
-
if (!isColorStyleKey(subKey)) {
|
|
571
|
-
dynamicThemeAccess = true;
|
|
572
|
-
if (isCurrentScheme) {
|
|
573
|
-
mediaStyle[subKey] = val2;
|
|
574
|
-
} else {
|
|
575
|
-
delete mediaStyle[subKey];
|
|
576
|
-
}
|
|
577
|
-
continue;
|
|
578
|
-
}
|
|
579
|
-
if (existing?.dynamic) {
|
|
580
|
-
existing.dynamic[scheme] = val2;
|
|
581
|
-
mediaStyle[subKey] = existing;
|
|
582
|
-
} else {
|
|
583
|
-
const oppositeVal = extractValueFromDynamic(existing, oppositeScheme);
|
|
584
|
-
mediaStyle[subKey] = getDynamicVal({
|
|
585
|
-
scheme,
|
|
586
|
-
val: val2,
|
|
587
|
-
oppositeVal
|
|
588
|
-
});
|
|
589
|
-
mergeStyle(styleState, subKey, mediaStyle[subKey], priority, false, themeOriginalValues?.[subKey]);
|
|
590
|
-
}
|
|
591
|
-
}
|
|
592
|
-
} else {
|
|
593
|
-
dynamicThemeAccess = true;
|
|
594
|
-
if (!(themeName === mediaKeyShort || themeName.startsWith(mediaKeyShort))) {
|
|
595
|
-
return;
|
|
596
|
-
}
|
|
597
|
-
}
|
|
439
|
+
dynamicThemeAccess = true;
|
|
440
|
+
if (!(themeName === mediaKeyShort || themeName.startsWith(mediaKeyShort))) return;
|
|
598
441
|
} else if (isGroupMedia) {
|
|
599
442
|
const groupInfo = (0, import_getGroupPropParts.getGroupPropParts)(mediaKeyShort);
|
|
600
443
|
const groupName = groupInfo.name;
|
|
@@ -602,9 +445,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
602
445
|
const groupPseudoKey = groupInfo.pseudo;
|
|
603
446
|
const groupMediaKey = groupInfo.media;
|
|
604
447
|
if (!groupState) {
|
|
605
|
-
if (process.env.NODE_ENV === "development" && debug) {
|
|
606
|
-
(0, import_log.log)(`No parent with group prop, skipping styles: ${groupName}`);
|
|
607
|
-
}
|
|
448
|
+
if (process.env.NODE_ENV === "development" && debug) (0, import_log.log)(`No parent with group prop, skipping styles: ${groupName}`);
|
|
608
449
|
pseudoGroups ||= /* @__PURE__ */new Set();
|
|
609
450
|
return;
|
|
610
451
|
}
|
|
@@ -614,21 +455,15 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
614
455
|
mediaGroups.add(groupMediaKey);
|
|
615
456
|
const mediaState2 = componentGroupState?.media;
|
|
616
457
|
let isActive = mediaState2?.[groupMediaKey];
|
|
617
|
-
if (!mediaState2 && groupState.layout)
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
...mediaState2,
|
|
623
|
-
usedKeys: {
|
|
624
|
-
...styleState.usedKeys
|
|
625
|
-
}
|
|
626
|
-
});
|
|
627
|
-
}
|
|
628
|
-
if (!isActive) {
|
|
629
|
-
for (const pkey in mediaStyle) {
|
|
630
|
-
applyDefaultStyle(pkey, styleState);
|
|
458
|
+
if (!mediaState2 && groupState.layout) isActive = (0, import_useMedia.mediaKeyMatch)(groupMediaKey, groupState.layout);
|
|
459
|
+
if (process.env.NODE_ENV === "development" && debug === "verbose") (0, import_log.log)(` \u{1F3D8}\uFE0F GROUP media ${groupMediaKey} active? ${isActive}`, {
|
|
460
|
+
...mediaState2,
|
|
461
|
+
usedKeys: {
|
|
462
|
+
...styleState.usedKeys
|
|
631
463
|
}
|
|
464
|
+
});
|
|
465
|
+
if (!isActive) {
|
|
466
|
+
for (const pkey in mediaStyle) applyDefaultStyle(pkey, styleState);
|
|
632
467
|
return;
|
|
633
468
|
}
|
|
634
469
|
importanceBump = 2;
|
|
@@ -636,41 +471,31 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
636
471
|
if (groupPseudoKey) {
|
|
637
472
|
pseudoGroups ||= /* @__PURE__ */new Set();
|
|
638
473
|
pseudoGroups.add(groupName);
|
|
639
|
-
const componentGroupPseudoState = (componentGroupState ||
|
|
640
|
-
// fallback to context initially
|
|
641
|
-
groupContext?.[groupName].state)?.pseudo;
|
|
474
|
+
const componentGroupPseudoState = (componentGroupState || groupContext?.[groupName].state)?.pseudo;
|
|
642
475
|
const isActive = componentGroupPseudoState?.[groupPseudoKey];
|
|
643
476
|
const priority2 = import_pseudoDescriptors.pseudoPriorities[groupPseudoKey];
|
|
644
|
-
if (process.env.NODE_ENV === "development" && debug === "verbose") {
|
|
645
|
-
|
|
646
|
-
componentGroupPseudoState
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
usedKeys
|
|
650
|
-
...styleState.usedKeys
|
|
651
|
-
}
|
|
652
|
-
});
|
|
653
|
-
}
|
|
654
|
-
if (!isActive) {
|
|
655
|
-
for (const pkey in mediaStyle) {
|
|
656
|
-
applyDefaultStyle(pkey, styleState);
|
|
477
|
+
if (process.env.NODE_ENV === "development" && debug === "verbose") (0, import_log.log)(` \u{1F3D8}\uFE0F GROUP pseudo ${groupMediaKey} active? ${isActive}, priority ${priority2}`, {
|
|
478
|
+
componentGroupPseudoState: {
|
|
479
|
+
...componentGroupPseudoState
|
|
480
|
+
},
|
|
481
|
+
usedKeys: {
|
|
482
|
+
...styleState.usedKeys
|
|
657
483
|
}
|
|
484
|
+
});
|
|
485
|
+
if (!isActive) {
|
|
486
|
+
for (const pkey in mediaStyle) applyDefaultStyle(pkey, styleState);
|
|
658
487
|
return;
|
|
659
488
|
}
|
|
660
489
|
importanceBump = priority2;
|
|
661
490
|
}
|
|
662
|
-
} else if (isPlatformMedia)
|
|
663
|
-
importanceBump = (0, import_isActivePlatform.getPlatformSpecificityBump)(mediaKeyShort);
|
|
664
|
-
}
|
|
491
|
+
} else if (isPlatformMedia) importanceBump = (0, import_isActivePlatform.getPlatformSpecificityBump)(mediaKeyShort);
|
|
665
492
|
const mediaOriginalValues = styleOriginalValues.get(mediaStyle);
|
|
666
493
|
if (isGroupMedia && mediaStyle.transition) {
|
|
667
494
|
styleState.pseudoTransitions ||= {};
|
|
668
495
|
styleState.pseudoTransitions[`$${mediaKeyShort}`] = mediaStyle.transition;
|
|
669
496
|
}
|
|
670
497
|
for (const subKey in mediaStyle) {
|
|
671
|
-
if (subKey === "space")
|
|
672
|
-
continue;
|
|
673
|
-
}
|
|
498
|
+
if (subKey === "space") continue;
|
|
674
499
|
if (subKey[0] === "$") {
|
|
675
500
|
const subMediaType = (0, import_useMedia.getMediaKey)(subKey);
|
|
676
501
|
if (subMediaType === "platform") {
|
|
@@ -678,47 +503,31 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
678
503
|
} else if (subMediaType === "theme") {
|
|
679
504
|
if (!(0, import_isActiveTheme.isActiveTheme)(subKey, themeName)) continue;
|
|
680
505
|
} else if (subMediaType === true) {
|
|
681
|
-
|
|
682
|
-
if (!mediaState[subKeyShort]) continue;
|
|
506
|
+
if (!mediaState[subKey.slice(1)]) continue;
|
|
683
507
|
}
|
|
684
508
|
const nestedVal = mediaStyle[subKey];
|
|
685
509
|
const subOriginalValues = styleOriginalValues.get(nestedVal);
|
|
686
|
-
const
|
|
687
|
-
const outerBase = isSizeMediaKey ? (0, import_useMedia.getMediaKeyImportance)(mediaKeyShort) : import_pseudoDescriptors.defaultMediaImportance;
|
|
510
|
+
const outerBase = !!mediaState[mediaKeyShort] ? (0, import_useMedia.getMediaKeyImportance)(mediaKeyShort) : import_pseudoDescriptors.defaultMediaImportance;
|
|
688
511
|
let innerBase;
|
|
689
|
-
if (subMediaType === "platform")
|
|
690
|
-
innerBase = import_pseudoDescriptors.defaultMediaImportance + (0, import_isActivePlatform.getPlatformSpecificityBump)(subKey.slice(1));
|
|
691
|
-
} else if (subMediaType === true) {
|
|
692
|
-
innerBase = (0, import_useMedia.getMediaKeyImportance)(subKey.slice(1));
|
|
693
|
-
} else {
|
|
694
|
-
innerBase = import_pseudoDescriptors.defaultMediaImportance;
|
|
695
|
-
}
|
|
512
|
+
if (subMediaType === "platform") innerBase = import_pseudoDescriptors.defaultMediaImportance + (0, import_isActivePlatform.getPlatformSpecificityBump)(subKey.slice(1));else if (subMediaType === true) innerBase = (0, import_useMedia.getMediaKeyImportance)(subKey.slice(1));else innerBase = import_pseudoDescriptors.defaultMediaImportance;
|
|
696
513
|
const nestedImportance = outerBase + importanceBump + innerBase + 1;
|
|
697
514
|
for (const subSubKey in nestedVal) {
|
|
698
515
|
const expandedKey = shorthands[subSubKey] || subSubKey;
|
|
699
516
|
const {
|
|
700
517
|
usedKeys
|
|
701
518
|
} = styleState;
|
|
702
|
-
if (usedKeys[expandedKey] && usedKeys[expandedKey] > nestedImportance)
|
|
703
|
-
continue;
|
|
704
|
-
}
|
|
519
|
+
if (usedKeys[expandedKey] && usedKeys[expandedKey] > nestedImportance) continue;
|
|
705
520
|
styleState.style ||= {};
|
|
706
521
|
mergeStyle(styleState, expandedKey, nestedVal[subSubKey], nestedImportance, false, subOriginalValues?.[subSubKey]);
|
|
707
|
-
if (expandedKey === "fontFamily")
|
|
708
|
-
styleState.fontFamily = nestedVal[subSubKey];
|
|
709
|
-
}
|
|
522
|
+
if (expandedKey === "fontFamily") styleState.fontFamily = nestedVal[subSubKey];
|
|
710
523
|
}
|
|
711
|
-
} else
|
|
712
|
-
mergeMediaStyle(subKey, mediaStyle[subKey], mediaOriginalValues?.[subKey]);
|
|
713
|
-
}
|
|
524
|
+
} else mergeMediaStyle(subKey, mediaStyle[subKey], mediaOriginalValues?.[subKey]);
|
|
714
525
|
}
|
|
715
526
|
}
|
|
716
527
|
return;
|
|
717
528
|
}
|
|
718
529
|
if (!isVariant) {
|
|
719
|
-
if (isStyledContextProp)
|
|
720
|
-
return;
|
|
721
|
-
}
|
|
530
|
+
if (isStyledContextProp) return;
|
|
722
531
|
viewProps[key] = val;
|
|
723
532
|
}
|
|
724
533
|
});
|
|
@@ -738,17 +547,12 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
738
547
|
console.groupEnd();
|
|
739
548
|
}
|
|
740
549
|
}
|
|
741
|
-
if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time))
|
|
742
|
-
|
|
743
|
-
}
|
|
744
|
-
const avoidNormalize = styleProps.noNormalize === false;
|
|
745
|
-
if (!avoidNormalize) {
|
|
550
|
+
if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-propsend`;
|
|
551
|
+
if (!(styleProps.noNormalize === false)) {
|
|
746
552
|
if (styleState.style) {
|
|
747
553
|
(0, import_expandStyles.fixStyles)(styleState.style);
|
|
748
554
|
if (!styleProps.noExpand && !styleProps.noMergeStyle) {
|
|
749
|
-
if (import_constants.isWeb && (isReactNative ? driver?.inputStyle !== "css" : true))
|
|
750
|
-
(0, import_getCSSStylesAtomic.styleToCSS)(styleState.style);
|
|
751
|
-
}
|
|
555
|
+
if (import_constants.isWeb && (isReactNative ? driver?.inputStyle !== "css" : true)) (0, import_getCSSStylesAtomic.styleToCSS)(styleState.style);
|
|
752
556
|
}
|
|
753
557
|
}
|
|
754
558
|
if (styleState.flatTransforms) {
|
|
@@ -756,129 +560,81 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
756
560
|
mergeFlatTransforms(styleState.style, styleState.flatTransforms);
|
|
757
561
|
}
|
|
758
562
|
if (parentSplitStyles) {
|
|
759
|
-
if (
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
563
|
+
if (shouldDoClasses) for (const key in parentSplitStyles.classNames) {
|
|
564
|
+
const val = parentSplitStyles.classNames[key];
|
|
565
|
+
if (styleState.style && key in styleState.style || key in classNames) continue;
|
|
566
|
+
classNames[key] = val;
|
|
567
|
+
}
|
|
568
|
+
if (!shouldDoClasses) for (const key in parentSplitStyles.style) {
|
|
569
|
+
if (key in classNames || styleState.style && key in styleState.style) continue;
|
|
570
|
+
styleState.style ||= {};
|
|
571
|
+
styleState.style[key] = parentSplitStyles.style[key];
|
|
572
|
+
}
|
|
573
|
+
}
|
|
574
|
+
}
|
|
575
|
+
if (!styleProps.noNormalize && !staticConfig.isReactNative && !staticConfig.isHOC && (!styleProps.isAnimated || driver?.inputStyle === "css") && Array.isArray(styleState.style?.transform)) styleState.style.transform = (0, import_transformsToString.transformsToString)(styleState.style.transform);
|
|
576
|
+
if (!styleProps.noMergeStyle && styleState.style && shouldDoClasses) {
|
|
577
|
+
let retainedStyles;
|
|
578
|
+
let shouldRetain = false;
|
|
579
|
+
if (styleState.style["$$css"]) {} else {
|
|
580
|
+
const atomic = (0, import_getCSSStylesAtomic.getCSSStylesAtomic)(styleState.style);
|
|
581
|
+
for (const atomicStyle of atomic) {
|
|
582
|
+
const [key, value, identifier] = atomicStyle;
|
|
583
|
+
const isAnimatedAndTransitionOnly = styleProps.isAnimated && styleProps.noClass && props.animateOnly?.includes(key);
|
|
584
|
+
const nonAnimatedTransitionOnly = !isAnimatedAndTransitionOnly && !styleProps.isAnimated && import_constants.isClient && driver?.outputStyle === "css" && props.animateOnly?.includes(key);
|
|
585
|
+
if (isAnimatedAndTransitionOnly) {
|
|
586
|
+
retainedStyles ||= {};
|
|
587
|
+
retainedStyles[key] = styleState.style[key];
|
|
588
|
+
} else if (nonAnimatedTransitionOnly) {
|
|
589
|
+
retainedStyles ||= {};
|
|
590
|
+
retainedStyles[key] = value;
|
|
591
|
+
shouldRetain = true;
|
|
592
|
+
} else {
|
|
593
|
+
addStyleToInsertRules(rulesToInsert, atomicStyle);
|
|
594
|
+
classNames[key] = identifier;
|
|
766
595
|
}
|
|
767
596
|
}
|
|
768
|
-
if (
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
}
|
|
597
|
+
if (process.env.NODE_ENV === "development" && props.debug === "verbose") {
|
|
598
|
+
console.groupCollapsed(`\u{1F539} getSplitStyles final style object`);
|
|
599
|
+
console.info(styleState.style);
|
|
600
|
+
console.info(`retainedStyles`, retainedStyles);
|
|
601
|
+
console.groupEnd();
|
|
774
602
|
}
|
|
603
|
+
if (shouldRetain || !(process.env.IS_STATIC === "is_static")) styleState.style = retainedStyles || {};
|
|
775
604
|
}
|
|
776
605
|
}
|
|
777
|
-
if (
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
let shouldRetain = false;
|
|
787
|
-
if (styleState.style["$$css"]) {} else {
|
|
788
|
-
const atomic = (0, import_getCSSStylesAtomic.getCSSStylesAtomic)(styleState.style);
|
|
789
|
-
for (const atomicStyle of atomic) {
|
|
790
|
-
const [key, value, identifier] = atomicStyle;
|
|
791
|
-
const isAnimatedAndTransitionOnly = styleProps.isAnimated && styleProps.noClass && props.animateOnly?.includes(key);
|
|
792
|
-
const nonAnimatedTransitionOnly = !isAnimatedAndTransitionOnly && !styleProps.isAnimated && import_constants.isClient && driver?.outputStyle === "css" && props.animateOnly?.includes(key);
|
|
793
|
-
if (isAnimatedAndTransitionOnly) {
|
|
794
|
-
retainedStyles ||= {};
|
|
795
|
-
retainedStyles[key] = styleState.style[key];
|
|
796
|
-
} else if (nonAnimatedTransitionOnly) {
|
|
797
|
-
retainedStyles ||= {};
|
|
798
|
-
retainedStyles[key] = value;
|
|
799
|
-
shouldRetain = true;
|
|
800
|
-
} else {
|
|
801
|
-
addStyleToInsertRules(rulesToInsert, atomicStyle);
|
|
802
|
-
classNames[key] = identifier;
|
|
803
|
-
}
|
|
804
|
-
}
|
|
805
|
-
if (process.env.NODE_ENV === "development" && props.debug === "verbose") {
|
|
806
|
-
console.groupCollapsed(`\u{1F539} getSplitStyles final style object`);
|
|
807
|
-
console.info(styleState.style);
|
|
808
|
-
console.info(`retainedStyles`, retainedStyles);
|
|
809
|
-
console.groupEnd();
|
|
810
|
-
}
|
|
811
|
-
if (shouldRetain || !(process.env.IS_STATIC === "is_static")) {
|
|
812
|
-
styleState.style = retainedStyles || {};
|
|
813
|
-
}
|
|
606
|
+
if (!styleProps.noMergeStyle && styleState.style && !shouldDoClasses && styleProps.isAnimated && !driver?.isReactNative) {
|
|
607
|
+
if (!styleState.style["$$css"]) {
|
|
608
|
+
const toConvert = {};
|
|
609
|
+
let hasProps = false;
|
|
610
|
+
props.animateOnly;
|
|
611
|
+
for (const key in styleState.style) if (key in import_helpers.nonAnimatableStyleProps) {
|
|
612
|
+
toConvert[key] = styleState.style[key];
|
|
613
|
+
delete styleState.style[key];
|
|
614
|
+
hasProps = true;
|
|
814
615
|
}
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
const animateOnly = props.animateOnly;
|
|
821
|
-
for (const key in styleState.style) {
|
|
822
|
-
if (key in import_helpers.nonAnimatableStyleProps) {
|
|
823
|
-
toConvert[key] = styleState.style[key];
|
|
824
|
-
delete styleState.style[key];
|
|
825
|
-
hasProps = true;
|
|
826
|
-
}
|
|
827
|
-
}
|
|
828
|
-
if (hasProps) {
|
|
829
|
-
const atomic = (0, import_getCSSStylesAtomic.getCSSStylesAtomic)(toConvert);
|
|
830
|
-
for (const atomicStyle of atomic) {
|
|
831
|
-
addStyleToInsertRules(rulesToInsert, atomicStyle);
|
|
832
|
-
classNames[atomicStyle[import_helpers.StyleObjectProperty]] = atomicStyle[import_helpers.StyleObjectIdentifier];
|
|
833
|
-
}
|
|
616
|
+
if (hasProps) {
|
|
617
|
+
const atomic = (0, import_getCSSStylesAtomic.getCSSStylesAtomic)(toConvert);
|
|
618
|
+
for (const atomicStyle of atomic) {
|
|
619
|
+
addStyleToInsertRules(rulesToInsert, atomicStyle);
|
|
620
|
+
classNames[atomicStyle[import_helpers.StyleObjectProperty]] = atomicStyle[import_helpers.StyleObjectIdentifier];
|
|
834
621
|
}
|
|
835
622
|
}
|
|
836
623
|
}
|
|
837
624
|
}
|
|
838
625
|
const styleProp = props.style;
|
|
839
|
-
if (!styleProps.noMergeStyle && styleProp) {
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
const
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
if (style) {
|
|
848
|
-
if (style["$$css"]) {
|
|
849
|
-
Object.assign(styleState.classNames, style);
|
|
850
|
-
} else {
|
|
851
|
-
styleState.style ||= {};
|
|
852
|
-
Object.assign(styleState.style, normalizeStyle(style));
|
|
853
|
-
}
|
|
854
|
-
}
|
|
855
|
-
}
|
|
856
|
-
}
|
|
857
|
-
}
|
|
858
|
-
if (false) {
|
|
859
|
-
if (viewProps.tabIndex === 0) {
|
|
860
|
-
viewProps.accessible ??= true;
|
|
861
|
-
}
|
|
862
|
-
const style = styleState.style;
|
|
863
|
-
if (style?.fontFamily) {
|
|
864
|
-
const faceInfo = getFont(style.fontFamily)?.face;
|
|
865
|
-
if (faceInfo) {
|
|
866
|
-
const overrideFace = faceInfo[style.fontWeight]?.[style.fontStyle || "normal"]?.val;
|
|
867
|
-
if (overrideFace) {
|
|
868
|
-
style.fontFamily = overrideFace;
|
|
869
|
-
styleState.fontFamily = overrideFace;
|
|
870
|
-
delete style.fontWeight;
|
|
871
|
-
delete style.fontStyle;
|
|
872
|
-
}
|
|
873
|
-
}
|
|
874
|
-
if (process.env.NODE_ENV === "development" && debug && debug !== "profile") {
|
|
875
|
-
(0, import_log.log)(`Found fontFamily native: ${style.fontFamily}`, faceInfo);
|
|
626
|
+
if (!styleProps.noMergeStyle && styleProp) if (isHOC) viewProps.style = normalizeStyle(styleProp);else {
|
|
627
|
+
const isArray = Array.isArray(styleProp);
|
|
628
|
+
const len = isArray ? styleProp.length : 1;
|
|
629
|
+
for (let i = 0; i < len; i++) {
|
|
630
|
+
const style = isArray ? styleProp[i] : styleProp;
|
|
631
|
+
if (style) if (style["$$css"]) Object.assign(styleState.classNames, style);else {
|
|
632
|
+
styleState.style ||= {};
|
|
633
|
+
Object.assign(styleState.style, normalizeStyle(style));
|
|
876
634
|
}
|
|
877
635
|
}
|
|
878
636
|
}
|
|
879
|
-
if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time))
|
|
880
|
-
time`split-styles-pre-result`;
|
|
881
|
-
}
|
|
637
|
+
if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-pre-result`;
|
|
882
638
|
const result = {
|
|
883
639
|
hasMedia,
|
|
884
640
|
fontFamily: styleState.fontFamily,
|
|
@@ -897,11 +653,9 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
897
653
|
if (!styleProps.noMergeStyle) {
|
|
898
654
|
if (!asChildExceptStyleLike) {
|
|
899
655
|
const style = styleState.style;
|
|
900
|
-
|
|
656
|
+
{
|
|
901
657
|
let fontFamily = isText || isInput ? styleState.fontFamily : null;
|
|
902
|
-
if (fontFamily && fontFamily[0] === "$")
|
|
903
|
-
fontFamily = fontFamily.slice(1);
|
|
904
|
-
}
|
|
658
|
+
if (fontFamily && fontFamily[0] === "$") fontFamily = fontFamily.slice(1);
|
|
905
659
|
const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : "";
|
|
906
660
|
const groupClassName = props.group ? `t_group_${props.group}` : "";
|
|
907
661
|
const componentNameFinal = props.componentName || staticConfig.componentName;
|
|
@@ -917,9 +671,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
917
671
|
const needsCssStyles = isReactNative || styleProps.isAnimated && driver?.isReactNative;
|
|
918
672
|
if (styleProps.isAnimated && driver?.inputStyle === "css") {
|
|
919
673
|
viewProps.className = finalClassName;
|
|
920
|
-
if (style)
|
|
921
|
-
viewProps.style = style;
|
|
922
|
-
}
|
|
674
|
+
if (style) viewProps.style = style;
|
|
923
675
|
} else if (needsCssStyles) {
|
|
924
676
|
let cnStyles;
|
|
925
677
|
for (const name of finalClassName.split(" ")) {
|
|
@@ -930,16 +682,8 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
930
682
|
}
|
|
931
683
|
viewProps.style = cnStyles ? [...(Array.isArray(style) ? style : [style]), cnStyles] : [style];
|
|
932
684
|
} else {
|
|
933
|
-
if (finalClassName)
|
|
934
|
-
|
|
935
|
-
}
|
|
936
|
-
if (style) {
|
|
937
|
-
viewProps.style = style;
|
|
938
|
-
}
|
|
939
|
-
}
|
|
940
|
-
} else {
|
|
941
|
-
if (style) {
|
|
942
|
-
viewProps.style = style;
|
|
685
|
+
if (finalClassName) viewProps.className = finalClassName;
|
|
686
|
+
if (style) viewProps.style = style;
|
|
943
687
|
}
|
|
944
688
|
}
|
|
945
689
|
}
|
|
@@ -947,7 +691,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
947
691
|
if (process.env.NODE_ENV === "development" && debug === "verbose") {
|
|
948
692
|
if (import_constants.isClient && import_isDevTools.isDevTools) {
|
|
949
693
|
console.groupEnd();
|
|
950
|
-
console.groupCollapsed("
|
|
694
|
+
console.groupCollapsed("🔹 getSplitStyles ===>");
|
|
951
695
|
try {
|
|
952
696
|
const logs = {
|
|
953
697
|
...result,
|
|
@@ -957,16 +701,12 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
|
|
|
957
701
|
rulesToInsert,
|
|
958
702
|
parentSplitStyles
|
|
959
703
|
};
|
|
960
|
-
for (const key in logs)
|
|
961
|
-
(0, import_log.log)(key, logs[key]);
|
|
962
|
-
}
|
|
704
|
+
for (const key in logs) (0, import_log.log)(key, logs[key]);
|
|
963
705
|
} catch {}
|
|
964
706
|
console.groupEnd();
|
|
965
707
|
}
|
|
966
708
|
}
|
|
967
|
-
if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time))
|
|
968
|
-
time`split-styles-done`;
|
|
969
|
-
}
|
|
709
|
+
if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-done`;
|
|
970
710
|
return result;
|
|
971
711
|
};
|
|
972
712
|
function mergeFlatTransforms(target, flatTransforms) {
|
|
@@ -981,10 +721,7 @@ function mergeStyle(styleState, key, val, importance, disableNormalize = false,
|
|
|
981
721
|
staticConfig,
|
|
982
722
|
usedKeys
|
|
983
723
|
} = styleState;
|
|
984
|
-
|
|
985
|
-
if (existingImportance > importance) {
|
|
986
|
-
return;
|
|
987
|
-
}
|
|
724
|
+
if ((usedKeys[key] || 0) > importance) return;
|
|
988
725
|
const contextProps = staticConfig.context?.props || staticConfig.parentStaticConfig?.context?.props;
|
|
989
726
|
if (contextProps && key in contextProps) {
|
|
990
727
|
styleState.overriddenContextProps ||= {};
|
|
@@ -996,19 +733,11 @@ function mergeStyle(styleState, key, val, importance, disableNormalize = false,
|
|
|
996
733
|
usedKeys[key] = importance;
|
|
997
734
|
styleState.flatTransforms[key] = val;
|
|
998
735
|
} else {
|
|
999
|
-
const
|
|
1000
|
-
|
|
1001
|
-
if (
|
|
1002
|
-
// accept is for props not styles
|
|
1003
|
-
staticConfig.accept && key in staticConfig.accept) {
|
|
1004
|
-
viewProps[key] = out;
|
|
1005
|
-
} else {
|
|
736
|
+
const out = import_constants.isWeb && !disableNormalize && !styleProps.noNormalize ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
|
|
737
|
+
if (staticConfig.accept && key in staticConfig.accept) viewProps[key] = out;else {
|
|
1006
738
|
styleState.style ||= {};
|
|
1007
739
|
usedKeys[key] = importance;
|
|
1008
|
-
styleState.style[key] =
|
|
1009
|
-
// if you dont do this you'll be passing props.transform arrays directly here and then mutating them
|
|
1010
|
-
// if theres any flatTransforms later, causing issues (mutating props is bad, in strict mode styles get borked)
|
|
1011
|
-
key === "transform" && Array.isArray(out) ? [...out] : out;
|
|
740
|
+
styleState.style[key] = key === "transform" && Array.isArray(out) ? [...out] : out;
|
|
1012
741
|
}
|
|
1013
742
|
}
|
|
1014
743
|
}
|
|
@@ -1029,33 +758,19 @@ const getSubStyle = (styleState, subKey, styleIn, avoidMergeTransform) => {
|
|
|
1029
758
|
const driver = styleState.animationDriver;
|
|
1030
759
|
if (driver?.outputStyle === "css") {
|
|
1031
760
|
const animationConfig = driver.animations?.[val];
|
|
1032
|
-
if (animationConfig) {
|
|
1033
|
-
const important = subKey[0] === "$" ? " !important" : "";
|
|
1034
|
-
styleOut["transition"] = `all ${animationConfig}${important}`;
|
|
1035
|
-
}
|
|
1036
|
-
}
|
|
1037
|
-
if (!styleOut["transition"] && typeof val === "string" && !driver?.animations?.[val]) {
|
|
1038
|
-
styleOut["transition"] = val;
|
|
761
|
+
if (animationConfig) styleOut["transition"] = `all ${animationConfig}${subKey[0] === "$" ? " !important" : ""}`;
|
|
1039
762
|
}
|
|
763
|
+
if (!styleOut["transition"] && typeof val === "string" && !driver?.animations?.[val]) styleOut["transition"] = val;
|
|
1040
764
|
continue;
|
|
1041
765
|
}
|
|
1042
|
-
|
|
1043
|
-
if (shouldSkip) {
|
|
1044
|
-
continue;
|
|
1045
|
-
}
|
|
766
|
+
if (!staticConfig.isHOC && key in import_skipProps.skipProps && !styleProps.noSkip) continue;
|
|
1046
767
|
(0, import_propMapper.propMapper)(key, val, styleState, false, (skey, sval, originalVal) => {
|
|
1047
768
|
if (originalVal !== void 0) {
|
|
1048
769
|
originalValues ||= {};
|
|
1049
770
|
originalValues[skey] = originalVal;
|
|
1050
771
|
}
|
|
1051
|
-
if (skey in import_helpers.validPseudoKeys)
|
|
1052
|
-
|
|
1053
|
-
}
|
|
1054
|
-
if (!avoidMergeTransform && skey in import_helpers.stylePropsTransform) {
|
|
1055
|
-
mergeTransform(styleOut, skey, sval);
|
|
1056
|
-
} else {
|
|
1057
|
-
styleOut[skey] = styleProps.noNormalize ? sval : (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(sval, key);
|
|
1058
|
-
}
|
|
772
|
+
if (skey in import_helpers.validPseudoKeys) sval = getSubStyle(styleState, skey, sval, avoidMergeTransform);
|
|
773
|
+
if (!avoidMergeTransform && skey in import_helpers.stylePropsTransform) mergeTransform(styleOut, skey, sval);else styleOut[skey] = styleProps.noNormalize ? sval : (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(sval, key);
|
|
1059
774
|
});
|
|
1060
775
|
}
|
|
1061
776
|
if (!avoidMergeTransform) {
|
|
@@ -1069,11 +784,9 @@ const getSubStyle = (styleState, subKey, styleIn, avoidMergeTransform) => {
|
|
|
1069
784
|
outer: for (let i = 0; i < parentTransform.length; i++) {
|
|
1070
785
|
const pt = parentTransform[i];
|
|
1071
786
|
for (const pk in pt) {
|
|
1072
|
-
for (let j = 0; j < len; j++) {
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
break;
|
|
1076
|
-
}
|
|
787
|
+
for (let j = 0; j < len; j++) for (const sk in styleOutTransform[j]) {
|
|
788
|
+
if (pk === sk) continue outer;
|
|
789
|
+
break;
|
|
1077
790
|
}
|
|
1078
791
|
merged.push(pt);
|
|
1079
792
|
break;
|
|
@@ -1082,28 +795,18 @@ const getSubStyle = (styleState, subKey, styleIn, avoidMergeTransform) => {
|
|
|
1082
795
|
for (let i = 0; i < len; i++) merged.push(styleOutTransform[i]);
|
|
1083
796
|
styleOut.transform = merged;
|
|
1084
797
|
}
|
|
1085
|
-
if (flatTransforms) {
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
if (ck === sk) continue outer;
|
|
1091
|
-
break;
|
|
1092
|
-
}
|
|
1093
|
-
}
|
|
1094
|
-
mergeTransform(styleOut, fk, flatTransforms[fk]);
|
|
798
|
+
if (flatTransforms) outer: for (const fk in flatTransforms) {
|
|
799
|
+
const ck = fk === "x" ? "translateX" : fk === "y" ? "translateY" : fk;
|
|
800
|
+
for (let j = 0; j < len; j++) for (const sk in styleOutTransform[j]) {
|
|
801
|
+
if (ck === sk) continue outer;
|
|
802
|
+
break;
|
|
1095
803
|
}
|
|
804
|
+
mergeTransform(styleOut, fk, flatTransforms[fk]);
|
|
1096
805
|
}
|
|
1097
|
-
} else if (flatTransforms)
|
|
1098
|
-
mergeFlatTransforms(styleOut, flatTransforms);
|
|
1099
|
-
}
|
|
1100
|
-
}
|
|
1101
|
-
if (!styleProps.noNormalize) {
|
|
1102
|
-
(0, import_expandStyles.fixStyles)(styleOut);
|
|
1103
|
-
}
|
|
1104
|
-
if (originalValues) {
|
|
1105
|
-
styleOriginalValues.set(styleOut, originalValues);
|
|
806
|
+
} else if (flatTransforms) mergeFlatTransforms(styleOut, flatTransforms);
|
|
1106
807
|
}
|
|
808
|
+
if (!styleProps.noNormalize) (0, import_expandStyles.fixStyles)(styleOut);
|
|
809
|
+
if (originalValues) styleOriginalValues.set(styleOut, originalValues);
|
|
1107
810
|
return styleOut;
|
|
1108
811
|
};
|
|
1109
812
|
const useInsertEffectCompat = import_constants.isWeb ? import_react.default.useInsertionEffect || import_constants.useIsomorphicLayoutEffect : () => {};
|
|
@@ -1111,17 +814,13 @@ const useSplitStyles = (a, b, c, d, e, f, g, h, i, j, k, l, m) => {
|
|
|
1111
814
|
"use no memo";
|
|
1112
815
|
|
|
1113
816
|
const res = getSplitStyles(a, b, c, d, e, f, g, h, i, j, k, l, m);
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
(0, import_insertStyleRule.insertStyleRules)(res.rulesToInsert);
|
|
1118
|
-
}
|
|
1119
|
-
}, [res?.rulesToInsert]);
|
|
1120
|
-
}
|
|
817
|
+
useInsertEffectCompat(() => {
|
|
818
|
+
if (res) (0, import_insertStyleRule.insertStyleRules)(res.rulesToInsert);
|
|
819
|
+
}, [res?.rulesToInsert]);
|
|
1121
820
|
return res;
|
|
1122
821
|
};
|
|
1123
822
|
function addStyleToInsertRules(rulesToInsert, styleObject) {
|
|
1124
|
-
|
|
823
|
+
{
|
|
1125
824
|
const identifier = styleObject[import_helpers.StyleObjectIdentifier];
|
|
1126
825
|
if ((0, import_insertStyleRule.shouldInsertStyleRules)(identifier)) {
|
|
1127
826
|
(0, import_insertStyleRule.updateRules)(identifier, styleObject[import_helpers.StyleObjectRules]);
|
|
@@ -1147,9 +846,7 @@ const animatableDefaults = {
|
|
|
1147
846
|
borderRadius: 0
|
|
1148
847
|
};
|
|
1149
848
|
const mergeTransform = (obj, key, val, backwards = false) => {
|
|
1150
|
-
if (typeof obj.transform === "string")
|
|
1151
|
-
return;
|
|
1152
|
-
}
|
|
849
|
+
if (typeof obj.transform === "string") return;
|
|
1153
850
|
obj.transform ||= [];
|
|
1154
851
|
obj.transform[backwards ? "unshift" : "push"]({
|
|
1155
852
|
[mapTransformKeys[key] || key]: val
|
|
@@ -1167,9 +864,7 @@ function passDownProp(viewProps, key, val, shouldMergeObject = false) {
|
|
|
1167
864
|
};
|
|
1168
865
|
delete viewProps[key];
|
|
1169
866
|
viewProps[key] = next;
|
|
1170
|
-
} else
|
|
1171
|
-
viewProps[key] = val;
|
|
1172
|
-
}
|
|
867
|
+
} else viewProps[key] = val;
|
|
1173
868
|
}
|
|
1174
869
|
function mergeMediaByImportance(styleState, mediaKey, key, value, isSizeMedia, importanceBump, debugProp, originalVal) {
|
|
1175
870
|
const usedKeys = styleState.usedKeys;
|
|
@@ -1178,47 +873,28 @@ function mergeMediaByImportance(styleState, mediaKey, key, value, isSizeMedia, i
|
|
|
1178
873
|
const bumpedImportance = import_pseudoDescriptors.defaultMediaImportance + importanceBump;
|
|
1179
874
|
importance = !usedKeys[key] || bumpedImportance > usedKeys[key] ? bumpedImportance : null;
|
|
1180
875
|
}
|
|
1181
|
-
if (process.env.NODE_ENV === "development" && debugProp === "verbose") {
|
|
1182
|
-
|
|
1183
|
-
}
|
|
1184
|
-
if (importance === null) {
|
|
1185
|
-
return false;
|
|
1186
|
-
}
|
|
876
|
+
if (process.env.NODE_ENV === "development" && debugProp === "verbose") (0, import_log.log)(`mergeMediaByImportance ${key} importance usedKey ${usedKeys[key]} next ${importance}`);
|
|
877
|
+
if (importance === null) return false;
|
|
1187
878
|
if (key in import_pseudoDescriptors.pseudoDescriptors) {
|
|
1188
879
|
const descriptor = import_pseudoDescriptors.pseudoDescriptors[key];
|
|
1189
880
|
const descriptorKey = descriptor.stateKey || descriptor.name;
|
|
1190
|
-
|
|
1191
|
-
if (isDisabled) {
|
|
1192
|
-
return false;
|
|
1193
|
-
}
|
|
881
|
+
if (styleState.componentState[descriptorKey] === false) return false;
|
|
1194
882
|
const pseudoOriginalValues = styleOriginalValues.get(value);
|
|
1195
|
-
for (const subKey in value)
|
|
1196
|
-
|
|
1197
|
-
}
|
|
1198
|
-
} else {
|
|
1199
|
-
mergeStyle(styleState, key, value, importance, false, originalVal);
|
|
1200
|
-
}
|
|
883
|
+
for (const subKey in value) mergeStyle(styleState, subKey, value[subKey], importance, false, pseudoOriginalValues?.[subKey]);
|
|
884
|
+
} else mergeStyle(styleState, key, value, importance, false, originalVal);
|
|
1201
885
|
return true;
|
|
1202
886
|
}
|
|
1203
887
|
function normalizeStyle(style) {
|
|
1204
888
|
const out = {};
|
|
1205
889
|
for (const key in style) {
|
|
1206
890
|
const val = style[key];
|
|
1207
|
-
if (key in import_helpers.stylePropsTransform)
|
|
1208
|
-
mergeTransform(out, key, val);
|
|
1209
|
-
} else {
|
|
1210
|
-
out[key] = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key);
|
|
1211
|
-
}
|
|
1212
|
-
}
|
|
1213
|
-
if (import_constants.isWeb && Array.isArray(out.transform)) {
|
|
1214
|
-
out.transform = (0, import_transformsToString.transformsToString)(out.transform);
|
|
891
|
+
if (key in import_helpers.stylePropsTransform) mergeTransform(out, key, val);else out[key] = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key);
|
|
1215
892
|
}
|
|
893
|
+
if (import_constants.isWeb && Array.isArray(out.transform)) out.transform = (0, import_transformsToString.transformsToString)(out.transform);
|
|
1216
894
|
(0, import_expandStyles.fixStyles)(out);
|
|
1217
895
|
return out;
|
|
1218
896
|
}
|
|
1219
897
|
function applyDefaultStyle(pkey, styleState) {
|
|
1220
898
|
const defaultValues = animatableDefaults[pkey];
|
|
1221
|
-
if (defaultValues != null && !(pkey in styleState.usedKeys) && (!styleState.style || !(pkey in styleState.style)))
|
|
1222
|
-
mergeStyle(styleState, pkey, defaultValues, 1);
|
|
1223
|
-
}
|
|
899
|
+
if (defaultValues != null && !(pkey in styleState.usedKeys) && (!styleState.style || !(pkey in styleState.style))) mergeStyle(styleState, pkey, defaultValues, 1);
|
|
1224
900
|
}
|