@tamagui/core 1.0.1-beta.28 → 1.0.1-beta.31
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/dist/cjs/ThemeManager.js +18 -8
- package/dist/cjs/ThemeManager.js.map +2 -2
- package/dist/cjs/constants/platform.js +6 -6
- package/dist/cjs/constants/platform.js.map +2 -2
- package/dist/cjs/constants/rnw.js.map +2 -2
- package/dist/cjs/createComponent.js +29 -24
- package/dist/cjs/createComponent.js.map +2 -2
- package/dist/cjs/createTamagui.js +10 -2
- package/dist/cjs/createTamagui.js.map +2 -2
- package/dist/cjs/helpers/createMediaStyle.js +1 -0
- package/dist/cjs/helpers/createMediaStyle.js.map +2 -2
- package/dist/cjs/helpers/createPropMapper.js +9 -39
- package/dist/cjs/helpers/createPropMapper.js.map +2 -2
- package/dist/cjs/helpers/generateAtomicStyles.js +455 -0
- package/dist/cjs/helpers/generateAtomicStyles.js.map +7 -0
- package/dist/cjs/helpers/getSplitStyles.js +69 -66
- package/dist/cjs/helpers/getSplitStyles.js.map +2 -2
- package/dist/cjs/helpers/getStylesAtomic.js +31 -40
- package/dist/cjs/helpers/getStylesAtomic.js.map +2 -2
- package/dist/cjs/helpers/mergeTransform.js +42 -0
- package/dist/cjs/helpers/mergeTransform.js.map +7 -0
- package/dist/cjs/helpers/prefixStyles.js +192 -0
- package/dist/cjs/helpers/prefixStyles.js.map +7 -0
- package/dist/cjs/hooks/useIsTouchDevice.js +1 -1
- package/dist/cjs/hooks/useIsTouchDevice.js.map +2 -2
- package/dist/cjs/hooks/useTheme.js +8 -7
- package/dist/cjs/hooks/useTheme.js.map +2 -2
- package/dist/cjs/types.js.map +1 -1
- package/dist/cjs/views/Theme.js.map +2 -2
- package/dist/cjs/views/ThemeProvider.js +1 -1
- package/dist/cjs/views/ThemeProvider.js.map +2 -2
- package/dist/cjs/views/ThemeReset.js +1 -0
- package/dist/cjs/views/ThemeReset.js.map +2 -2
- package/dist/esm/ThemeManager.js +18 -8
- package/dist/esm/ThemeManager.js.map +2 -2
- package/dist/esm/constants/platform.js +4 -4
- package/dist/esm/constants/platform.js.map +2 -2
- package/dist/esm/constants/rnw.js.map +2 -2
- package/dist/esm/createComponent.js +30 -24
- package/dist/esm/createComponent.js.map +2 -2
- package/dist/esm/createTamagui.js +8 -1
- package/dist/esm/createTamagui.js.map +2 -2
- package/dist/esm/helpers/createMediaStyle.js +1 -0
- package/dist/esm/helpers/createMediaStyle.js.map +2 -2
- package/dist/esm/helpers/createPropMapper.js +9 -40
- package/dist/esm/helpers/createPropMapper.js.map +2 -2
- package/dist/esm/helpers/generateAtomicStyles.js +427 -0
- package/dist/esm/helpers/generateAtomicStyles.js.map +7 -0
- package/dist/esm/helpers/getSplitStyles.js +71 -73
- package/dist/esm/helpers/getSplitStyles.js.map +2 -2
- package/dist/esm/helpers/getStylesAtomic.js +26 -39
- package/dist/esm/helpers/getStylesAtomic.js.map +2 -2
- package/dist/esm/helpers/mergeTransform.js +19 -0
- package/dist/esm/helpers/mergeTransform.js.map +7 -0
- package/dist/esm/helpers/prefixStyles.js +166 -0
- package/dist/esm/helpers/prefixStyles.js.map +7 -0
- package/dist/esm/hooks/useIsTouchDevice.js +2 -2
- package/dist/esm/hooks/useIsTouchDevice.js.map +2 -2
- package/dist/esm/hooks/useTheme.js +8 -7
- package/dist/esm/hooks/useTheme.js.map +2 -2
- package/dist/esm/views/Theme.js.map +2 -2
- package/dist/esm/views/ThemeProvider.js +1 -1
- package/dist/esm/views/ThemeProvider.js.map +2 -2
- package/dist/esm/views/ThemeReset.js +1 -0
- package/dist/esm/views/ThemeReset.js.map +2 -2
- package/dist/jsx/ThemeManager.js +18 -8
- package/dist/jsx/constants/platform.js +4 -4
- package/dist/jsx/createComponent.js +30 -24
- package/dist/jsx/createTamagui.js +8 -1
- package/dist/jsx/helpers/createMediaStyle.js +1 -0
- package/dist/jsx/helpers/createPropMapper.js +9 -40
- package/dist/jsx/helpers/generateAtomicStyles.js +426 -0
- package/dist/jsx/helpers/getSplitStyles.js +71 -73
- package/dist/jsx/helpers/getStylesAtomic.js +26 -39
- package/dist/jsx/helpers/mergeTransform.js +18 -0
- package/dist/jsx/helpers/prefixStyles.js +165 -0
- package/dist/jsx/hooks/useIsTouchDevice.js +2 -2
- package/dist/jsx/hooks/useTheme.js +8 -7
- package/dist/jsx/views/ThemeProvider.js +1 -1
- package/dist/jsx/views/ThemeReset.js +1 -1
- package/package.json +8 -5
- package/reset.css +2 -1
- package/types/Tamagui.d.ts +1 -1
- package/types/Tamagui.d.ts.map +1 -1
- package/types/ThemeManager.d.ts +9 -6
- package/types/ThemeManager.d.ts.map +1 -1
- package/types/constants/platform.d.ts +2 -2
- package/types/constants/platform.d.ts.map +1 -1
- package/types/constants/rnw.d.ts +1 -1
- package/types/constants/rnw.d.ts.map +1 -1
- package/types/createComponent.d.ts.map +1 -1
- package/types/createTamagui.d.ts +1 -0
- package/types/createTamagui.d.ts.map +1 -1
- package/types/helpers/createMediaStyle.d.ts.map +1 -1
- package/types/helpers/createPropMapper.d.ts +2 -2
- package/types/helpers/createPropMapper.d.ts.map +1 -1
- package/types/helpers/generateAtomicStyles.d.ts +22 -0
- package/types/helpers/generateAtomicStyles.d.ts.map +1 -0
- package/types/helpers/getSplitStyles.d.ts.map +1 -1
- package/types/helpers/getStylesAtomic.d.ts +10 -10
- package/types/helpers/getStylesAtomic.d.ts.map +1 -1
- package/types/helpers/mergeTransform.d.ts +7 -0
- package/types/helpers/mergeTransform.d.ts.map +1 -0
- package/types/helpers/prefixStyles.d.ts +5 -0
- package/types/helpers/prefixStyles.d.ts.map +1 -0
- package/types/hooks/useTheme.d.ts +13 -4
- package/types/hooks/useTheme.d.ts.map +1 -1
- package/types/types.d.ts +29 -29
- package/types/types.d.ts.map +1 -1
- package/types/views/Theme.d.ts +1 -9
- package/types/views/Theme.d.ts.map +1 -1
- package/types/views/ThemeProvider.d.ts +1 -0
- package/types/views/ThemeProvider.d.ts.map +1 -1
|
@@ -48,10 +48,12 @@ var import_createMediaStyle = require("./createMediaStyle");
|
|
|
48
48
|
var import_fixNativeShadow = require("./fixNativeShadow");
|
|
49
49
|
var import_getStylesAtomic = require("./getStylesAtomic");
|
|
50
50
|
var import_insertStyleRule = require("./insertStyleRule");
|
|
51
|
+
var import_mergeTransform = require("./mergeTransform");
|
|
51
52
|
const skipProps = __spreadValues({
|
|
52
53
|
animation: true,
|
|
53
54
|
animateOnly: true,
|
|
54
|
-
debug: true
|
|
55
|
+
debug: true,
|
|
56
|
+
componentName: true
|
|
55
57
|
}, !import_platform.isWeb && {
|
|
56
58
|
tag: true,
|
|
57
59
|
whiteSpace: true,
|
|
@@ -69,16 +71,14 @@ const skipProps = __spreadValues({
|
|
|
69
71
|
let conf;
|
|
70
72
|
const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state, defaultClassNames) => {
|
|
71
73
|
var _a;
|
|
72
|
-
if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
|
|
73
|
-
console.log(" \xBB getSplitStyles", { props, state, defaultClassNames });
|
|
74
|
-
}
|
|
75
74
|
conf = conf || (0, import_conf.getConfig)();
|
|
76
75
|
const validStyleProps = staticConfig.isText ? import_helpers.stylePropsText : import_helpers.validStyles;
|
|
77
76
|
const viewProps = {};
|
|
78
|
-
const style = {};
|
|
79
|
-
const classNames = __spreadValues({}, defaultClassNames);
|
|
80
77
|
const pseudos = {};
|
|
81
78
|
const medias = {};
|
|
79
|
+
let style = {};
|
|
80
|
+
let classNames = {};
|
|
81
|
+
const usedKeys = /* @__PURE__ */ new Set();
|
|
82
82
|
const rulesToInsert = [];
|
|
83
83
|
function addStyle(prop, rule) {
|
|
84
84
|
rulesToInsert.push([prop, rule]);
|
|
@@ -129,55 +129,32 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
129
129
|
}
|
|
130
130
|
}
|
|
131
131
|
__name(mergeClassName, "mergeClassName");
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
|
|
137
|
-
console.log(" \xBB getSplitStyles push", cur, state);
|
|
138
|
-
}
|
|
139
|
-
if (import_platform.isWeb && !state.noClassNames) {
|
|
140
|
-
const atomic = (0, import_getStylesAtomic.getStylesAtomic)(cur);
|
|
141
|
-
for (const atomicStyle of atomic) {
|
|
142
|
-
if (!state.noClassNames) {
|
|
143
|
-
addStyle(atomicStyle.identifier, atomicStyle.rules[0]);
|
|
144
|
-
mergeClassName(atomicStyle.property, atomicStyle.identifier);
|
|
145
|
-
} else {
|
|
146
|
-
style[atomicStyle.property] = atomicStyle.value;
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
if (!import_platform.isWeb || state.noClassNames || state.resolveVariablesAs === "value" || state.resolveVariablesAs === "both") {
|
|
151
|
-
for (const key in cur) {
|
|
152
|
-
if (skipProps[key]) {
|
|
153
|
-
continue;
|
|
154
|
-
}
|
|
155
|
-
if (key in import_helpers.stylePropsTransform) {
|
|
156
|
-
(0, import_helpers.mergeTransform)(style, key, cur[key]);
|
|
157
|
-
} else {
|
|
158
|
-
style[key] = cur[key];
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
cur = null;
|
|
163
|
-
}
|
|
164
|
-
__name(push, "push");
|
|
165
|
-
for (const keyInit in props) {
|
|
166
|
-
if (skipProps[keyInit]) {
|
|
132
|
+
const propKeys = Object.keys(props);
|
|
133
|
+
for (let i = propKeys.length - 1; i >= 0; i--) {
|
|
134
|
+
const keyInit = propKeys[i];
|
|
135
|
+
if (usedKeys.has(keyInit))
|
|
167
136
|
continue;
|
|
168
|
-
|
|
169
|
-
|
|
137
|
+
if (skipProps[keyInit])
|
|
138
|
+
continue;
|
|
139
|
+
if (!import_platform.isWeb && keyInit.startsWith("data-"))
|
|
170
140
|
continue;
|
|
171
|
-
}
|
|
172
141
|
const valInit = props[keyInit];
|
|
173
142
|
if (keyInit === "style" || keyInit.startsWith("_style")) {
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
143
|
+
if (!valInit)
|
|
144
|
+
continue;
|
|
145
|
+
for (const key in valInit) {
|
|
146
|
+
if (usedKeys.has(key))
|
|
147
|
+
continue;
|
|
148
|
+
style[key] = valInit;
|
|
149
|
+
}
|
|
150
|
+
continue;
|
|
151
|
+
}
|
|
152
|
+
if (keyInit === "className") {
|
|
153
|
+
mergeClassName(keyInit, valInit);
|
|
177
154
|
continue;
|
|
178
155
|
}
|
|
179
|
-
if (
|
|
180
|
-
|
|
156
|
+
if (validStyleProps[keyInit] && valInit && valInit[0] === "_") {
|
|
157
|
+
usedKeys.add(keyInit);
|
|
181
158
|
mergeClassName(keyInit, valInit);
|
|
182
159
|
continue;
|
|
183
160
|
}
|
|
@@ -187,19 +164,24 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
187
164
|
let isMedia = keyInit[0] === "$";
|
|
188
165
|
let isPseudo = import_helpers.validPseudoKeys[keyInit];
|
|
189
166
|
if (!isMedia && !isPseudo && !((_a = staticConfig.variants) == null ? void 0 : _a[keyInit]) && !validStyleProps[keyInit] && !conf.shorthands[keyInit]) {
|
|
167
|
+
usedKeys.add(keyInit);
|
|
190
168
|
viewProps[keyInit] = valInit;
|
|
191
169
|
continue;
|
|
192
170
|
}
|
|
193
|
-
const
|
|
194
|
-
const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out);
|
|
171
|
+
const expanded = isMedia || isPseudo ? [[keyInit, valInit]] : staticConfig.propMapper(keyInit, valInit, theme, props, state);
|
|
195
172
|
if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
|
|
196
173
|
console.log(" \xBB getSplitStyles", keyInit, expanded);
|
|
197
174
|
}
|
|
175
|
+
if (!expanded) {
|
|
176
|
+
continue;
|
|
177
|
+
}
|
|
198
178
|
for (const [key, val] of expanded) {
|
|
199
|
-
if (val === void 0)
|
|
179
|
+
if (val === void 0)
|
|
180
|
+
continue;
|
|
181
|
+
if (usedKeys.has(key))
|
|
200
182
|
continue;
|
|
201
|
-
}
|
|
202
183
|
if (key !== "target" && val && val[0] === "_") {
|
|
184
|
+
usedKeys.add(key);
|
|
203
185
|
mergeClassName(key, val);
|
|
204
186
|
continue;
|
|
205
187
|
}
|
|
@@ -240,13 +222,12 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
240
222
|
if (shouldDoClasses) {
|
|
241
223
|
const mediaStyles = (0, import_getStylesAtomic.getStylesAtomic)(mediaStyle);
|
|
242
224
|
for (const style2 of mediaStyles) {
|
|
243
|
-
const
|
|
244
|
-
addStyle(
|
|
245
|
-
mergeClassName(`${
|
|
225
|
+
const out = (0, import_createMediaStyle.createMediaStyle)(style2, mediaKeyShort, import_useMedia.mediaQueryConfig);
|
|
226
|
+
addStyle(out.identifier, out.styleRule);
|
|
227
|
+
mergeClassName(`${out.identifier}-${mediaKey}`, out.identifier);
|
|
246
228
|
}
|
|
247
229
|
} else {
|
|
248
230
|
if (import_useMedia.mediaState[mediaKey]) {
|
|
249
|
-
push();
|
|
250
231
|
if (process.env.NODE_ENV === "development" && props["debug"]) {
|
|
251
232
|
console.log("apply media style", mediaKey, import_useMedia.mediaState);
|
|
252
233
|
}
|
|
@@ -256,23 +237,43 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
256
237
|
continue;
|
|
257
238
|
}
|
|
258
239
|
if (!import_platform.isWeb && key === "pointerEvents") {
|
|
240
|
+
usedKeys.add(key);
|
|
259
241
|
viewProps[key] = val;
|
|
260
242
|
continue;
|
|
261
243
|
}
|
|
262
244
|
if (validStyleProps[key]) {
|
|
263
|
-
|
|
264
|
-
|
|
245
|
+
usedKeys.add(key);
|
|
246
|
+
if (val && val[0] === "_") {
|
|
247
|
+
classNames[key] = val;
|
|
248
|
+
} else {
|
|
249
|
+
if (key in import_helpers.stylePropsTransform && (!import_platform.isWeb || state.noClassNames || state.resolveVariablesAs === "value" || state.resolveVariablesAs === "both")) {
|
|
250
|
+
(0, import_mergeTransform.mergeTransform)(style, key, val, true);
|
|
251
|
+
} else {
|
|
252
|
+
style[key] = val;
|
|
253
|
+
}
|
|
254
|
+
}
|
|
265
255
|
continue;
|
|
266
256
|
}
|
|
267
257
|
if (!staticConfig.variants || !(key in staticConfig.variants)) {
|
|
268
258
|
if (!skipProps[key]) {
|
|
269
|
-
push();
|
|
270
259
|
viewProps[key] = val;
|
|
260
|
+
usedKeys.add(key);
|
|
271
261
|
}
|
|
272
262
|
}
|
|
273
263
|
}
|
|
274
264
|
}
|
|
275
|
-
|
|
265
|
+
if (defaultClassNames) {
|
|
266
|
+
classNames = __spreadValues(__spreadValues({}, defaultClassNames), classNames);
|
|
267
|
+
}
|
|
268
|
+
if (import_platform.isWeb && !state.noClassNames) {
|
|
269
|
+
const atomic = (0, import_getStylesAtomic.getStylesAtomic)(style);
|
|
270
|
+
for (const atomicStyle of atomic) {
|
|
271
|
+
const key = atomicStyle.property;
|
|
272
|
+
addStyle(atomicStyle.identifier, atomicStyle.rules[0]);
|
|
273
|
+
mergeClassName(key, atomicStyle.identifier);
|
|
274
|
+
}
|
|
275
|
+
style = {};
|
|
276
|
+
}
|
|
276
277
|
if (transforms) {
|
|
277
278
|
for (const namespace in transforms) {
|
|
278
279
|
const [hash, val] = transforms[namespace];
|
|
@@ -287,7 +288,9 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
287
288
|
}
|
|
288
289
|
}
|
|
289
290
|
if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
|
|
290
|
-
|
|
291
|
+
if (typeof document !== "undefined") {
|
|
292
|
+
console.log(" \xBB getSplitStyles out", { style, pseudos, medias, classNames, viewProps, state });
|
|
293
|
+
}
|
|
291
294
|
}
|
|
292
295
|
return {
|
|
293
296
|
viewProps,
|
|
@@ -319,17 +322,17 @@ const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props,
|
|
|
319
322
|
const styleOut = {};
|
|
320
323
|
for (const key in styleIn) {
|
|
321
324
|
const val = styleIn[key];
|
|
322
|
-
const
|
|
323
|
-
|
|
325
|
+
const expanded = staticConfig.propMapper(key, val, theme, props, state, avoidDefaultProps);
|
|
326
|
+
if (!expanded)
|
|
327
|
+
continue;
|
|
324
328
|
for (const [skey, sval] of expanded) {
|
|
325
329
|
if (skey in import_helpers.stylePropsTransform) {
|
|
326
|
-
(0,
|
|
330
|
+
(0, import_mergeTransform.mergeTransform)(styleOut, skey, sval);
|
|
327
331
|
} else {
|
|
328
332
|
styleOut[skey] = sval;
|
|
329
333
|
}
|
|
330
334
|
}
|
|
331
335
|
}
|
|
332
|
-
normalizeStyleObject(styleOut);
|
|
333
336
|
return styleOut;
|
|
334
337
|
}, "getSubStyle");
|
|
335
338
|
function normalizeStyleObject(style) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/getSplitStyles.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n mergeTransform,\n stylePropsText,\n stylePropsTransform,\n validPseudoKeys,\n validStyles,\n} from '@tamagui/helpers'\n// @ts-ignore\nimport { useInsertionEffect } from 'react'\nimport { ViewStyle } from 'react-native'\n\nimport { getConfig } from '../conf'\nimport { isClient, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { mediaQueryConfig, mediaState } from '../hooks/useMedia'\nimport {\n MediaKeys,\n MediaQueryKey,\n PseudoStyles,\n PsuedoPropKeys,\n SplitStyleState,\n StackProps,\n StaticConfigParsed,\n TamaguiInternalConfig,\n ThemeObject,\n} from '../types'\nimport { createMediaStyle } from './createMediaStyle'\nimport { fixNativeShadow } from './fixNativeShadow'\nimport { ViewStyleWithPseudos, getStylesAtomic } from './getStylesAtomic'\nimport {\n insertStyleRule,\n insertedTransforms,\n updateInserted,\n updateInsertedCache,\n} from './insertStyleRule'\n\nexport type SplitStyles = ReturnType<typeof getSplitStyles>\nexport type ClassNamesObject = Record<string, string>\nexport type SplitStyleResult = ReturnType<typeof getSplitStyles>\n\nconst skipProps = {\n animation: true,\n animateOnly: true,\n debug: true,\n\n ...(!isWeb && {\n tag: true,\n whiteSpace: true,\n wordWrap: true,\n textOverflow: true,\n textDecorationDistance: true,\n userSelect: true,\n selectable: true,\n cursor: true,\n contain: true,\n pointerEvents: true,\n boxSizing: true,\n boxShadow: true,\n }),\n}\n\ntype TransformNamespaceKey = 'transform' | PsuedoPropKeys | MediaQueryKey\n\n// TODO can make a few of these objects lazy if profiling seems slow\n\nlet conf: TamaguiInternalConfig\n\ntype StyleSplitter = (\n props: { [key: string]: any },\n staticConfig: StaticConfigParsed,\n theme: ThemeObject,\n state: SplitStyleState & {\n keepVariantsAsProps?: boolean\n },\n defaultClassNames?: any\n) => {\n pseudos: PseudoStyles\n medias: Record<MediaKeys, ViewStyle>\n style: ViewStyle\n classNames: ClassNamesObject\n rulesToInsert: [string, string][]\n viewProps: StackProps\n}\n\nexport const getSplitStyles: StyleSplitter = (\n props,\n staticConfig,\n theme,\n state,\n defaultClassNames\n) => {\n if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n console.log(' \u00BB getSplitStyles', { props, state, defaultClassNames })\n }\n\n conf = conf || getConfig()\n const validStyleProps = staticConfig.isText ? stylePropsText : validStyles\n const viewProps: StackProps = {}\n const style: ViewStyle = {}\n const classNames: ClassNamesObject = {\n ...defaultClassNames,\n }\n const pseudos: PseudoStyles = {}\n const medias: Record<MediaKeys, ViewStyle> = {}\n\n const rulesToInsert: [string, string][] = []\n function addStyle(prop: string, rule: string) {\n rulesToInsert.push([prop, rule])\n updateInsertedCache(prop, rule)\n }\n\n let cur: ViewStyleWithPseudos | null = null\n\n // we need to gather these specific to each media query / pseudo\n // value is [hash, val], so [\"-jnjad-asdnjk\", \"scaleX(1) rotate(10deg)\"]\n let transforms: Record<TransformNamespaceKey, [string, string]> = {}\n\n function mergeClassName(key: string, val: string) {\n if (!val) {\n // empty classnames passed by compiler sometimes\n return\n }\n if (val.startsWith('_transform-')) {\n const isMediaOrPseudo = key !== 'transform'\n const isMedia = isMediaOrPseudo && key[11] === '_'\n const isPsuedo = (isMediaOrPseudo && key[11] === '0') || key.endsWith('Style')\n const namespace: TransformNamespaceKey = isMedia\n ? key.split('_')[2]\n : isPsuedo\n ? key.split('-')[1]\n : 'transform'\n\n let transform = insertedTransforms[val]\n if (isClient) {\n if (!transform) {\n // HMR or loaded a new chunk\n updateInserted()\n transform = insertedTransforms[val]\n }\n if (!transform) {\n if (isWeb && val[0] !== '_') {\n // runtime insert\n transform = val\n } else {\n // error\n console.trace('?', key, val, cur, props, state)\n }\n }\n if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n // prettier-ignore\n console.log(' \u00BB getSplitStyles mergeClassName transform', { key, val, namespace, transform, insertedTransforms })\n }\n if (process.env.NODE_ENV === 'development') {\n if (!transform) {\n console.trace('NO TRANSFORM?', { key, val, transform })\n }\n }\n }\n transforms[namespace] = transforms[namespace] || ['', '']\n const identifier = val.replace('_transform', '')\n transforms[namespace][0] += identifier\n // ssr doesn't need to do anything just make the right classname\n if (transform) {\n transforms[namespace][1] += transform\n }\n } else {\n classNames[key] = val\n }\n }\n\n function push() {\n if (!cur) return\n normalizeStyleObject(cur)\n\n if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n console.log(' \u00BB getSplitStyles push', cur, state)\n }\n\n if (isWeb && !state.noClassNames) {\n const atomic = getStylesAtomic(cur)\n for (const atomicStyle of atomic) {\n if (!state.noClassNames) {\n addStyle(atomicStyle.identifier, atomicStyle.rules[0])\n mergeClassName(atomicStyle.property, atomicStyle.identifier)\n } else {\n style[atomicStyle.property] = atomicStyle.value\n }\n }\n }\n\n if (\n !isWeb ||\n state.noClassNames ||\n state.resolveVariablesAs === 'value' ||\n state.resolveVariablesAs === 'both'\n ) {\n for (const key in cur) {\n if (skipProps[key]) {\n continue\n }\n if (key in stylePropsTransform) {\n mergeTransform(style, key, cur[key])\n } else {\n style[key] = cur[key]\n }\n }\n }\n\n // reset it for next group of styles\n cur = null\n }\n\n for (const keyInit in props) {\n if (skipProps[keyInit]) {\n continue\n }\n if (!isWeb && keyInit.startsWith('data-')) {\n continue\n }\n\n const valInit = props[keyInit]\n\n // TODO\n if (keyInit === 'style' || keyInit.startsWith('_style')) {\n push()\n cur = valInit\n push()\n continue\n }\n\n if (keyInit === 'className' || (validStyleProps[keyInit] && valInit && valInit[0] === '_')) {\n push()\n mergeClassName(keyInit, valInit)\n continue\n }\n\n if (\n state.keepVariantsAsProps &&\n staticConfig.defaultVariants &&\n keyInit in staticConfig.defaultVariants\n ) {\n viewProps[keyInit] = valInit\n }\n\n let isMedia = keyInit[0] === '$'\n let isPseudo = validPseudoKeys[keyInit]\n\n if (\n !isMedia &&\n !isPseudo &&\n !staticConfig.variants?.[keyInit] &&\n !validStyleProps[keyInit] &&\n !conf.shorthands[keyInit]\n ) {\n viewProps[keyInit] = valInit\n continue\n }\n\n const out =\n isMedia || isPseudo\n ? true\n : staticConfig.propMapper(\n keyInit,\n valInit,\n theme,\n state.fallbackProps || props,\n state.resolveVariablesAs\n )\n\n const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out)\n\n if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n console.log(' \u00BB getSplitStyles', keyInit, expanded)\n }\n\n for (const [key, val] of expanded) {\n if (val === undefined) {\n continue\n }\n\n if (key !== 'target' && val && val[0] === '_') {\n mergeClassName(key, val)\n continue\n }\n\n isMedia = key[0] === '$'\n isPseudo = validPseudoKeys[key]\n\n if (\n (staticConfig.deoptProps && staticConfig.deoptProps.has(key)) ||\n (staticConfig.inlineProps && staticConfig.inlineProps.has(key))\n ) {\n viewProps[key] = val\n }\n\n // pseudo\n if (isPseudo) {\n if (!val) continue\n if (key === 'enterStyle' && state.mounted) {\n // once mounted we can ignore enterStyle\n continue\n }\n pseudos[key] = pseudos[key] || {}\n pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, true)\n if (isWeb && !state.noClassNames) {\n const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] })\n for (const style of pseudoStyles) {\n addStyle(style.identifier, style.rules[0])\n mergeClassName(`${style.property}-${key}`, style.identifier)\n }\n }\n continue\n }\n\n // media\n if (isMedia) {\n const mediaKey = key\n const mediaKeyShort = mediaKey.slice(1)\n\n if (!mediaQueryConfig[mediaKeyShort]) {\n // this isn't a media key, pass through\n viewProps[key] = val\n continue\n }\n\n // dont check if media is active, we just apply *all* media styles\n // we combine the media props on top regular props, could proxy this\n // TODO test proxy here instead of merge\n // THIS USED TO PROXY BACK TO REGULAR PROPS BUT THAT IS THE WRONG BEHAVIOR\n // we avoid passing in default props for media queries because that would confuse things like SizableText.size:\n const mediaStyle = getSubStyle(val, staticConfig, theme, props, state)\n\n if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n console.log(' \u00BB getSplitStyles mediaStyle', mediaKey, mediaStyle, props)\n }\n\n const shouldDoClasses = isWeb && !state.noClassNames\n if (shouldDoClasses) {\n const mediaStyles = getStylesAtomic(mediaStyle)\n for (const style of mediaStyles) {\n const out = createMediaStyle(style, mediaKeyShort, mediaQueryConfig)\n addStyle(out.identifier, out.styleRule)\n mergeClassName(`${out.identifier}-${mediaKey}`, out.identifier)\n }\n } else {\n if (mediaState[mediaKey]) {\n push()\n if (process.env.NODE_ENV === 'development' && props['debug']) {\n console.log('apply media style', mediaKey, mediaState)\n }\n Object.assign(shouldDoClasses ? medias : style, mediaStyle)\n }\n }\n continue\n }\n\n if (!isWeb && key === 'pointerEvents') {\n viewProps[key] = val\n continue\n }\n\n if (validStyleProps[key]) {\n cur = cur || {}\n cur[key] = val\n continue\n }\n\n // pass to view props\n if (!staticConfig.variants || !(key in staticConfig.variants)) {\n if (!skipProps[key]) {\n push()\n viewProps[key] = val\n }\n }\n }\n }\n\n push()\n\n if (transforms) {\n for (const namespace in transforms) {\n const [hash, val] = transforms[namespace]\n const identifier = `_transform${hash}`\n if (isClient) {\n if (!insertedTransforms[identifier]) {\n const rule = `.${identifier} { transform: ${val}; }`\n addStyle(identifier, rule)\n }\n }\n classNames[namespace] = identifier\n }\n }\n\n if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n console.log(' \u00BB getSplitStyles out', { style, pseudos, medias, classNames, viewProps, state })\n }\n\n return {\n viewProps,\n style,\n medias,\n pseudos,\n classNames,\n rulesToInsert,\n }\n}\n\nexport const insertSplitStyles: StyleSplitter = (...args) => {\n const res = getSplitStyles(...args)\n for (const [prop, rule] of res.rulesToInsert) {\n insertStyleRule(prop, rule)\n }\n return res\n}\n\nconst effect = useInsertionEffect || useIsomorphicLayoutEffect\nexport const useSplitStyles: StyleSplitter = (...args) => {\n const res = getSplitStyles(...args)\n effect(() => {\n for (const [prop, rule] of res.rulesToInsert) {\n insertStyleRule(prop, rule)\n }\n })\n return res\n}\n\nexport const getSubStyle = (\n styleIn: Object,\n staticConfig: StaticConfigParsed,\n theme: ThemeObject,\n props: any,\n state: SplitStyleState,\n avoidDefaultProps?: boolean\n): ViewStyle => {\n const styleOut: ViewStyle = {}\n for (const key in styleIn) {\n const val = styleIn[key]\n const out = staticConfig.propMapper(\n key,\n val,\n theme,\n state.fallbackProps || props,\n state.resolveVariablesAs,\n avoidDefaultProps\n )\n const expanded = out === true || !out ? [[key, val]] : Object.entries(out)\n for (const [skey, sval] of expanded) {\n if (skey in stylePropsTransform) {\n mergeTransform(styleOut, skey, sval)\n } else {\n styleOut[skey] = sval\n }\n }\n }\n normalizeStyleObject(styleOut)\n return styleOut\n}\n\nexport function normalizeStyleObject(style: any) {\n if (!isWeb) {\n fixNativeShadow(style)\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles } from '@tamagui/helpers'\n// @ts-ignore\nimport { useInsertionEffect } from 'react'\nimport { ViewStyle } from 'react-native'\n\nimport { getConfig } from '../conf'\nimport { isClient, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { mediaQueryConfig, mediaState } from '../hooks/useMedia'\nimport {\n MediaKeys,\n MediaQueryKey,\n PseudoStyles,\n PsuedoPropKeys,\n SplitStyleState,\n StackProps,\n StaticConfigParsed,\n TamaguiInternalConfig,\n ThemeObject,\n} from '../types'\nimport { createMediaStyle } from './createMediaStyle'\nimport { fixNativeShadow } from './fixNativeShadow'\nimport { ViewStyleWithPseudos, getStylesAtomic } from './getStylesAtomic'\nimport {\n insertStyleRule,\n insertedTransforms,\n updateInserted,\n updateInsertedCache,\n} from './insertStyleRule'\nimport { mergeTransform } from './mergeTransform'\n\nexport type SplitStyles = ReturnType<typeof getSplitStyles>\nexport type ClassNamesObject = Record<string, string>\nexport type SplitStyleResult = ReturnType<typeof getSplitStyles>\n\nconst skipProps = {\n animation: true,\n animateOnly: true,\n debug: true,\n componentName: true,\n\n ...(!isWeb && {\n tag: true,\n whiteSpace: true,\n wordWrap: true,\n textOverflow: true,\n textDecorationDistance: true,\n userSelect: true,\n selectable: true,\n cursor: true,\n contain: true,\n pointerEvents: true,\n boxSizing: true,\n boxShadow: true,\n }),\n}\n\ntype TransformNamespaceKey = 'transform' | PsuedoPropKeys | MediaQueryKey\n\nlet conf: TamaguiInternalConfig\n\ntype StyleSplitter = (\n props: { [key: string]: any },\n staticConfig: StaticConfigParsed,\n theme: ThemeObject,\n state: SplitStyleState & {\n keepVariantsAsProps?: boolean\n },\n defaultClassNames?: any\n) => {\n pseudos: PseudoStyles\n medias: Record<MediaKeys, ViewStyle>\n style: ViewStyle\n classNames: ClassNamesObject\n rulesToInsert: [string, string][]\n viewProps: StackProps\n}\n\n// loop props backwards\n// track used keys:\n// const keys = new Set<string>()\n// keep classnames and styles separate:\n// const styles = {}\n// const classNames = {}\n\nexport const getSplitStyles: StyleSplitter = (\n props,\n staticConfig,\n theme,\n state,\n defaultClassNames\n) => {\n conf = conf || getConfig()\n const validStyleProps = staticConfig.isText ? stylePropsText : validStyles\n const viewProps: StackProps = {}\n const pseudos: PseudoStyles = {}\n const medias: Record<MediaKeys, ViewStyle> = {}\n\n let style: ViewStyle = {}\n let classNames: ClassNamesObject = {}\n\n const usedKeys = new Set<string>()\n\n const rulesToInsert: [string, string][] = []\n function addStyle(prop: string, rule: string) {\n rulesToInsert.push([prop, rule])\n updateInsertedCache(prop, rule)\n }\n\n let cur: ViewStyleWithPseudos | null = null\n\n // we need to gather these specific to each media query / pseudo\n // value is [hash, val], so [\"-jnjad-asdnjk\", \"scaleX(1) rotate(10deg)\"]\n let transforms: Record<TransformNamespaceKey, [string, string]> = {}\n\n function mergeClassName(key: string, val: string) {\n if (!val) {\n // empty classnames passed by compiler sometimes\n return\n }\n if (val.startsWith('_transform-')) {\n const isMediaOrPseudo = key !== 'transform'\n const isMedia = isMediaOrPseudo && key[11] === '_'\n const isPsuedo = (isMediaOrPseudo && key[11] === '0') || key.endsWith('Style')\n const namespace: TransformNamespaceKey = isMedia\n ? key.split('_')[2]\n : isPsuedo\n ? key.split('-')[1]\n : 'transform'\n\n let transform = insertedTransforms[val]\n if (isClient) {\n if (!transform) {\n // HMR or loaded a new chunk\n updateInserted()\n transform = insertedTransforms[val]\n }\n if (!transform) {\n if (isWeb && val[0] !== '_') {\n // runtime insert\n transform = val\n } else {\n // error\n console.trace('?', key, val, cur, props, state)\n }\n }\n if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n // prettier-ignore\n console.log(' \u00BB getSplitStyles mergeClassName transform', { key, val, namespace, transform, insertedTransforms })\n }\n if (process.env.NODE_ENV === 'development') {\n if (!transform) {\n console.trace('NO TRANSFORM?', { key, val, transform })\n }\n }\n }\n transforms[namespace] = transforms[namespace] || ['', '']\n const identifier = val.replace('_transform', '')\n transforms[namespace][0] += identifier\n // ssr doesn't need to do anything just make the right classname\n if (transform) {\n transforms[namespace][1] += transform\n }\n } else {\n classNames[key] = val\n }\n }\n\n const propKeys = Object.keys(props)\n\n for (let i = propKeys.length - 1; i >= 0; i--) {\n const keyInit = propKeys[i]\n\n if (usedKeys.has(keyInit)) continue\n if (skipProps[keyInit]) continue\n if (!isWeb && keyInit.startsWith('data-')) continue\n\n const valInit = props[keyInit]\n\n if (keyInit === 'style' || keyInit.startsWith('_style')) {\n if (!valInit) continue\n for (const key in valInit) {\n if (usedKeys.has(key)) continue\n style[key] = valInit\n }\n continue\n }\n\n if (keyInit === 'className') {\n mergeClassName(keyInit, valInit)\n continue\n }\n\n if (validStyleProps[keyInit] && valInit && valInit[0] === '_') {\n usedKeys.add(keyInit)\n mergeClassName(keyInit, valInit)\n continue\n }\n\n if (\n state.keepVariantsAsProps &&\n staticConfig.defaultVariants &&\n keyInit in staticConfig.defaultVariants\n ) {\n viewProps[keyInit] = valInit\n }\n\n let isMedia = keyInit[0] === '$'\n let isPseudo = validPseudoKeys[keyInit]\n\n if (\n !isMedia &&\n !isPseudo &&\n !staticConfig.variants?.[keyInit] &&\n !validStyleProps[keyInit] &&\n !conf.shorthands[keyInit]\n ) {\n usedKeys.add(keyInit)\n viewProps[keyInit] = valInit\n continue\n }\n\n const expanded =\n isMedia || isPseudo\n ? [[keyInit, valInit]]\n : staticConfig.propMapper(keyInit, valInit, theme, props, state)\n\n if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n console.log(' \u00BB getSplitStyles', keyInit, expanded)\n }\n\n if (!expanded) {\n continue\n }\n\n for (const [key, val] of expanded) {\n if (val === undefined) continue\n if (usedKeys.has(key)) continue\n\n if (key !== 'target' && val && val[0] === '_') {\n usedKeys.add(key)\n mergeClassName(key, val)\n continue\n }\n\n isMedia = key[0] === '$'\n isPseudo = validPseudoKeys[key]\n\n if (\n (staticConfig.deoptProps && staticConfig.deoptProps.has(key)) ||\n (staticConfig.inlineProps && staticConfig.inlineProps.has(key))\n ) {\n viewProps[key] = val\n }\n\n // pseudo\n if (isPseudo) {\n if (!val) continue\n if (key === 'enterStyle' && state.mounted) {\n // once mounted we can ignore enterStyle\n continue\n }\n pseudos[key] = pseudos[key] || {}\n pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, true)\n if (isWeb && !state.noClassNames) {\n const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] })\n for (const style of pseudoStyles) {\n addStyle(style.identifier, style.rules[0])\n mergeClassName(`${style.property}-${key}`, style.identifier)\n }\n }\n continue\n }\n\n // media\n if (isMedia) {\n const mediaKey = key\n const mediaKeyShort = mediaKey.slice(1)\n\n if (!mediaQueryConfig[mediaKeyShort]) {\n // this isn't a media key, pass through\n viewProps[key] = val\n continue\n }\n\n // dont check if media is active, we just apply *all* media styles\n // we combine the media props on top regular props, could proxy this\n // TODO test proxy here instead of merge\n // THIS USED TO PROXY BACK TO REGULAR PROPS BUT THAT IS THE WRONG BEHAVIOR\n // we avoid passing in default props for media queries because that would confuse things like SizableText.size:\n const mediaStyle = getSubStyle(val, staticConfig, theme, props, state)\n\n if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n console.log(' \u00BB getSplitStyles mediaStyle', mediaKey, mediaStyle, props)\n }\n\n const shouldDoClasses = isWeb && !state.noClassNames\n if (shouldDoClasses) {\n const mediaStyles = getStylesAtomic(mediaStyle)\n for (const style of mediaStyles) {\n const out = createMediaStyle(style, mediaKeyShort, mediaQueryConfig)\n addStyle(out.identifier, out.styleRule)\n mergeClassName(`${out.identifier}-${mediaKey}`, out.identifier)\n }\n } else {\n if (mediaState[mediaKey]) {\n // push()\n if (process.env.NODE_ENV === 'development' && props['debug']) {\n console.log('apply media style', mediaKey, mediaState)\n }\n Object.assign(shouldDoClasses ? medias : style, mediaStyle)\n }\n }\n continue\n }\n\n if (!isWeb && key === 'pointerEvents') {\n usedKeys.add(key)\n viewProps[key] = val\n continue\n }\n\n if (validStyleProps[key]) {\n usedKeys.add(key)\n if (val && val[0] === '_') {\n classNames[key] = val\n } else {\n if (\n key in stylePropsTransform &&\n (!isWeb ||\n state.noClassNames ||\n state.resolveVariablesAs === 'value' ||\n state.resolveVariablesAs === 'both')\n ) {\n mergeTransform(style, key, val, true)\n } else {\n style[key] = val\n }\n }\n\n continue\n }\n\n // pass to view props\n if (!staticConfig.variants || !(key in staticConfig.variants)) {\n if (!skipProps[key]) {\n // push()\n viewProps[key] = val\n usedKeys.add(key)\n }\n }\n }\n }\n\n // add in defaults if not set:\n if (defaultClassNames) {\n classNames = {\n ...defaultClassNames,\n ...classNames,\n }\n }\n\n if (isWeb && !state.noClassNames) {\n const atomic = getStylesAtomic(style)\n for (const atomicStyle of atomic) {\n const key = atomicStyle.property\n addStyle(atomicStyle.identifier, atomicStyle.rules[0])\n mergeClassName(key, atomicStyle.identifier)\n }\n style = {}\n }\n\n if (transforms) {\n for (const namespace in transforms) {\n const [hash, val] = transforms[namespace]\n const identifier = `_transform${hash}`\n if (isClient) {\n if (!insertedTransforms[identifier]) {\n const rule = `.${identifier} { transform: ${val}; }`\n addStyle(identifier, rule)\n }\n }\n classNames[namespace] = identifier\n }\n }\n\n if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n if (typeof document !== 'undefined') {\n // prettier-ignore\n console.log(' \u00BB getSplitStyles out', { style, pseudos, medias, classNames, viewProps, state })\n }\n }\n\n return {\n viewProps,\n style,\n medias,\n pseudos,\n classNames,\n rulesToInsert,\n }\n}\n\nexport const insertSplitStyles: StyleSplitter = (...args) => {\n const res = getSplitStyles(...args)\n for (const [prop, rule] of res.rulesToInsert) {\n insertStyleRule(prop, rule)\n }\n return res\n}\n\nconst effect = useInsertionEffect || useIsomorphicLayoutEffect\n\nexport const useSplitStyles: StyleSplitter = (...args) => {\n const res = getSplitStyles(...args)\n effect(() => {\n for (const [prop, rule] of res.rulesToInsert) {\n insertStyleRule(prop, rule)\n }\n })\n return res\n}\n\nexport const getSubStyle = (\n styleIn: Object,\n staticConfig: StaticConfigParsed,\n theme: ThemeObject,\n props: any,\n state: SplitStyleState,\n avoidDefaultProps?: boolean\n): ViewStyle => {\n const styleOut: ViewStyle = {}\n for (const key in styleIn) {\n const val = styleIn[key]\n const expanded = staticConfig.propMapper(key, val, theme, props, state, avoidDefaultProps)\n if (!expanded) continue\n for (const [skey, sval] of expanded) {\n if (skey in stylePropsTransform) {\n mergeTransform(styleOut, skey, sval)\n } else {\n styleOut[skey] = sval\n }\n }\n }\n return styleOut\n}\n\nexport function normalizeStyleObject(style: any) {\n if (!isWeb) {\n fixNativeShadow(style)\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -52,9 +52,25 @@ __export(getStylesAtomic_exports, {
|
|
|
52
52
|
});
|
|
53
53
|
module.exports = __toCommonJS(getStylesAtomic_exports);
|
|
54
54
|
var import_helpers = require("@tamagui/helpers");
|
|
55
|
-
var
|
|
56
|
-
var import_rnw = require("../constants/rnw");
|
|
55
|
+
var import_createTamagui = require("../createTamagui");
|
|
57
56
|
var import_createVariable = require("../createVariable");
|
|
57
|
+
var import_generateAtomicStyles = require("./generateAtomicStyles");
|
|
58
|
+
var import_mergeTransform = require("./mergeTransform");
|
|
59
|
+
const pseudos = {
|
|
60
|
+
hoverStyle: {
|
|
61
|
+
name: "hover",
|
|
62
|
+
priority: 1
|
|
63
|
+
},
|
|
64
|
+
pressStyle: {
|
|
65
|
+
name: "active",
|
|
66
|
+
priority: 2
|
|
67
|
+
},
|
|
68
|
+
focusStyle: {
|
|
69
|
+
name: "focus",
|
|
70
|
+
priority: 3
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
const pseudosOrdered = Object.values(pseudos);
|
|
58
74
|
function getStylesAtomic(stylesIn, options = {}) {
|
|
59
75
|
const _a = stylesIn, { hoverStyle, pressStyle, focusStyle } = _a, base = __objRest(_a, ["hoverStyle", "pressStyle", "focusStyle"]);
|
|
60
76
|
let res = [];
|
|
@@ -70,7 +86,7 @@ function getStylesAtomic(stylesIn, options = {}) {
|
|
|
70
86
|
}
|
|
71
87
|
if (import_helpers.stylePropsTransform[skey]) {
|
|
72
88
|
delete style[skey];
|
|
73
|
-
(0,
|
|
89
|
+
(0, import_mergeTransform.mergeTransform)(style, skey, val);
|
|
74
90
|
}
|
|
75
91
|
}
|
|
76
92
|
res = [...res, ...getAtomicStyle(style, pseudo, options)];
|
|
@@ -78,10 +94,6 @@ function getStylesAtomic(stylesIn, options = {}) {
|
|
|
78
94
|
return res;
|
|
79
95
|
}
|
|
80
96
|
__name(getStylesAtomic, "getStylesAtomic");
|
|
81
|
-
const generateAtomicStyles = /* @__PURE__ */ __name((style) => {
|
|
82
|
-
return import_rnw.rnw.atomic(import_rnw.rnw.createCompileableStyle(import_rnw.rnw.createReactDOMStyle(style)));
|
|
83
|
-
}, "generateAtomicStyles");
|
|
84
|
-
let reversedShorthands = null;
|
|
85
97
|
function getAtomicStyle(style, pseudo, options) {
|
|
86
98
|
if (style == null || typeof style !== "object") {
|
|
87
99
|
throw new Error(`Wrong style type: "${typeof style}": ${style}`);
|
|
@@ -94,40 +106,33 @@ function getAtomicStyle(style, pseudo, options) {
|
|
|
94
106
|
let atomicStyles = {};
|
|
95
107
|
if (options.splitTransforms && style.transform) {
|
|
96
108
|
let _a = style, { transform } = _a, rest = __objRest(_a, ["transform"]);
|
|
97
|
-
Object.assign(atomicStyles, generateAtomicStyles(rest));
|
|
109
|
+
Object.assign(atomicStyles, (0, import_generateAtomicStyles.generateAtomicStyles)(rest));
|
|
98
110
|
for (const t of transform) {
|
|
99
111
|
const tKey = Object.keys(t)[0];
|
|
100
|
-
const transformProperty =
|
|
101
|
-
const out = generateAtomicStyles({ transform: [t] });
|
|
112
|
+
const transformProperty = import_mergeTransform.invertMapTransformKeys[tKey] || tKey;
|
|
113
|
+
const out = (0, import_generateAtomicStyles.generateAtomicStyles)({ transform: [t] });
|
|
102
114
|
const key = Object.keys(out)[0];
|
|
103
115
|
atomicStyles[key] = __spreadProps(__spreadValues({}, out[key]), {
|
|
104
116
|
transformProperty
|
|
105
117
|
});
|
|
106
118
|
}
|
|
107
119
|
} else {
|
|
108
|
-
atomicStyles = generateAtomicStyles(style);
|
|
109
|
-
}
|
|
110
|
-
if (!reversedShorthands) {
|
|
111
|
-
reversedShorthands = {};
|
|
112
|
-
const conf = (0, import_conf.getConfig)();
|
|
113
|
-
if (conf.shorthands) {
|
|
114
|
-
for (const key in conf.shorthands) {
|
|
115
|
-
reversedShorthands[conf.shorthands[key]] = key;
|
|
116
|
-
}
|
|
117
|
-
}
|
|
120
|
+
atomicStyles = (0, import_generateAtomicStyles.generateAtomicStyles)(style);
|
|
118
121
|
}
|
|
119
122
|
return Object.keys(atomicStyles).map((key) => {
|
|
120
123
|
const val = atomicStyles[key];
|
|
121
|
-
const [_,
|
|
122
|
-
const hash = b || a;
|
|
124
|
+
const [_, hash] = val.identifier.split("-");
|
|
123
125
|
const psuedoPrefix = pseudo ? `0${pseudo.name}-` : "";
|
|
124
|
-
|
|
126
|
+
if (!val.property) {
|
|
127
|
+
throw new Error(`no prop`);
|
|
128
|
+
}
|
|
129
|
+
const shortProp = import_createTamagui.reversedShorthands[val.property] || val.property;
|
|
125
130
|
const identifier = `_${shortProp}-${psuedoPrefix}${hash}`;
|
|
126
131
|
const className = `.${identifier}`;
|
|
127
132
|
const rules = val.rules.map((rule) => {
|
|
128
133
|
if (pseudo) {
|
|
129
134
|
const psuedoPrefixSelect = [...Array(pseudo.priority)].map(() => ":root").join("") + " ";
|
|
130
|
-
let res = rule.replace(`.${val.identifier}`, `${psuedoPrefixSelect} ${className}`).replace("{", `:${pseudo.name}{`);
|
|
135
|
+
let res = rule.replace(`.${val.identifier}`, `${psuedoPrefixSelect} ${className}`).replace("{", `:${pseudo.name}{`).replace(";", " !important;");
|
|
131
136
|
if (pseudo.name === "hover") {
|
|
132
137
|
res = `@media not all and (hover: none) { ${res} }`;
|
|
133
138
|
}
|
|
@@ -137,7 +142,8 @@ function getAtomicStyle(style, pseudo, options) {
|
|
|
137
142
|
});
|
|
138
143
|
const result = {
|
|
139
144
|
property: val.transformProperty || val.property,
|
|
140
|
-
|
|
145
|
+
pseudo: pseudo == null ? void 0 : pseudo.name,
|
|
146
|
+
value: val.value || "",
|
|
141
147
|
identifier,
|
|
142
148
|
className,
|
|
143
149
|
rules
|
|
@@ -154,21 +160,6 @@ const borderDefaults = {
|
|
|
154
160
|
borderLeftWidth: "borderLeftStyle",
|
|
155
161
|
borderRightWidth: "borderRightStyle"
|
|
156
162
|
};
|
|
157
|
-
const pseudos = {
|
|
158
|
-
hoverStyle: {
|
|
159
|
-
name: "hover",
|
|
160
|
-
priority: 1
|
|
161
|
-
},
|
|
162
|
-
pressStyle: {
|
|
163
|
-
name: "active",
|
|
164
|
-
priority: 2
|
|
165
|
-
},
|
|
166
|
-
focusStyle: {
|
|
167
|
-
name: "focus",
|
|
168
|
-
priority: 3
|
|
169
|
-
}
|
|
170
|
-
};
|
|
171
|
-
const pseudosOrdered = Object.values(pseudos);
|
|
172
163
|
// Annotate the CommonJS export names for ESM import in node:
|
|
173
164
|
0 && (module.exports = {
|
|
174
165
|
getStylesAtomic,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/getStylesAtomic.ts"],
|
|
4
|
-
"sourcesContent": ["import {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import { StyleObject, stylePropsTransform } from '@tamagui/helpers'\nimport { ViewStyle } from 'react-native'\n\nimport { reversedShorthands } from '../createTamagui'\nimport { isVariable } from '../createVariable'\nimport { RulesData, generateAtomicStyles } from './generateAtomicStyles'\nimport { invertMapTransformKeys, mergeTransform } from './mergeTransform'\n\nexport type ViewStyleWithPseudos = ViewStyle & {\n hoverStyle?: ViewStyle\n pressStyle?: ViewStyle\n focusStyle?: ViewStyle\n}\n\ntype AtomicStyleOptions = {\n splitTransforms?: boolean\n}\n\n// *0 order matches to *1\nexport const pseudos = {\n hoverStyle: {\n name: 'hover',\n priority: 1,\n },\n pressStyle: {\n name: 'active',\n priority: 2,\n },\n focusStyle: {\n name: 'focus',\n priority: 3,\n },\n} as const\n\ntype PseudoDescriptor = typeof pseudos[keyof typeof pseudos]\n\nconst pseudosOrdered = Object.values(pseudos)\n\nexport function getStylesAtomic(stylesIn: ViewStyleWithPseudos, options: AtomicStyleOptions = {}) {\n const { hoverStyle, pressStyle, focusStyle, ...base } = stylesIn\n let res: StyleObject[] = []\n\n // *1 order matched to *0\n for (const [index, style] of [hoverStyle, pressStyle, focusStyle, base].entries()) {\n if (!style || !Object.keys(style).length) {\n continue\n }\n const pseudo = pseudosOrdered[index]\n for (const skey in style) {\n const val = style[skey]\n if (isVariable(val)) {\n style[skey] = val.toString()\n }\n if (stylePropsTransform[skey]) {\n delete style[skey]\n mergeTransform(style, skey, val)\n }\n }\n res = [...res, ...getAtomicStyle(style, pseudo, options)]\n }\n\n return res\n}\n\nfunction getAtomicStyle(\n style: ViewStyle,\n pseudo: PseudoDescriptor | undefined,\n options: AtomicStyleOptions\n): StyleObject[] {\n if (style == null || typeof style !== 'object') {\n throw new Error(`Wrong style type: \"${typeof style}\": ${style}`)\n }\n\n // why is this diff from react-native-web!? need to figure out\n for (const key in borderDefaults) {\n if (key in style) {\n style[borderDefaults[key]] = style[borderDefaults[key]] ?? 'solid'\n }\n }\n\n let atomicStyles: { [key: string]: RulesData & { transformProperty?: string } } = {}\n\n if (options.splitTransforms && style.transform) {\n let { transform, ...rest } = style\n Object.assign(atomicStyles, generateAtomicStyles(rest))\n for (const t of transform) {\n const tKey = Object.keys(t)[0]\n const transformProperty = invertMapTransformKeys[tKey] || tKey\n const out = generateAtomicStyles({ transform: [t] })\n const key = Object.keys(out)[0]\n atomicStyles[key] = {\n ...out[key],\n transformProperty,\n }\n }\n } else {\n // TODO we can do this all in one loop likely inside getSplitStyles in existing loop and avoid O(n^3)...\n atomicStyles = generateAtomicStyles(style)\n }\n\n // TODO ... and then also avoid this loop! n^4\n return Object.keys(atomicStyles).map((key) => {\n const val = atomicStyles[key]\n // r-transform-1ns13n\n const [_, hash] = val.identifier.split('-')\n // pseudos have a `--` to be easier to find with concatClassNames\n const psuedoPrefix = pseudo ? `0${pseudo.name}-` : ''\n if (!val.property) {\n throw new Error(`no prop`)\n }\n const shortProp = reversedShorthands[val.property] || val.property\n const identifier = `_${shortProp}-${psuedoPrefix}${hash}`\n const className = `.${identifier}`\n const rules = val.rules.map((rule) => {\n if (pseudo) {\n const psuedoPrefixSelect = [...Array(pseudo.priority)].map(() => ':root').join('') + ' '\n let res = rule\n .replace(`.${val.identifier}`, `${psuedoPrefixSelect} ${className}`)\n .replace('{', `:${pseudo.name}{`)\n // important to override inline styles\n .replace(';', ' !important;')\n\n if (pseudo.name === 'hover') {\n // hover styles need to be conditional\n // perhaps this can be generalized but for now lets just shortcut\n // and hardcode for hover styles, if we need to later we can\n // WEIRD SYNTAX, SEE:\n // https://stackoverflow.com/questions/40532204/media-query-for-devices-supporting-hover\n res = `@media not all and (hover: none) { ${res} }`\n }\n return res\n }\n return rule.replace(`.${val.identifier}`, className).replace(importantRegex, '')\n })\n\n const result: StyleObject = {\n property: val.transformProperty || val.property,\n pseudo: pseudo?.name,\n value: val.value || '',\n identifier,\n className,\n rules,\n }\n\n return result\n })\n}\n\nconst importantRegex = /\\!important*/g\n\nconst borderDefaults = {\n borderWidth: 'borderStyle',\n borderBottomWidth: 'borderBottomStyle',\n borderTopWidth: 'borderTopStyle',\n borderLeftWidth: 'borderLeftStyle',\n borderRightWidth: 'borderRightStyle',\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var mergeTransform_exports = {};
|
|
20
|
+
__export(mergeTransform_exports, {
|
|
21
|
+
invertMapTransformKeys: () => invertMapTransformKeys,
|
|
22
|
+
mergeTransform: () => mergeTransform
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(mergeTransform_exports);
|
|
25
|
+
const mergeTransform = /* @__PURE__ */ __name((obj, key, val, backwards = false) => {
|
|
26
|
+
obj.transform || (obj.transform = []);
|
|
27
|
+
obj.transform[backwards ? "unshift" : "push"]({ [mapTransformKeys[key] || key]: val });
|
|
28
|
+
}, "mergeTransform");
|
|
29
|
+
const mapTransformKeys = {
|
|
30
|
+
x: "translateX",
|
|
31
|
+
y: "translateY"
|
|
32
|
+
};
|
|
33
|
+
const invertMapTransformKeys = {
|
|
34
|
+
translateX: "x",
|
|
35
|
+
translateY: "y"
|
|
36
|
+
};
|
|
37
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
38
|
+
0 && (module.exports = {
|
|
39
|
+
invertMapTransformKeys,
|
|
40
|
+
mergeTransform
|
|
41
|
+
});
|
|
42
|
+
//# sourceMappingURL=mergeTransform.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/helpers/mergeTransform.ts"],
|
|
4
|
+
"sourcesContent": ["import { ViewStyle } from 'react-native'\n\nexport const mergeTransform = (obj: ViewStyle, key: string, val: any, backwards = false) => {\n obj.transform ||= []\n obj.transform[backwards ? 'unshift' : 'push']({ [mapTransformKeys[key] || key]: val } as any)\n}\nconst mapTransformKeys = {\n x: 'translateX',\n y: 'translateY',\n}\nexport const invertMapTransformKeys = {\n translateX: 'x',\n translateY: 'y',\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,iBAAiB,wBAAC,KAAgB,KAAa,KAAU,YAAY,UAAU;AAC1F,MAAI,aAAJ,KAAI,YAAc,CAAC;AACnB,MAAI,UAAU,YAAY,YAAY,QAAQ,GAAG,iBAAiB,QAAQ,MAAM,IAAI,CAAQ;AAC9F,GAH8B;AAI9B,MAAM,mBAAmB;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AACL;AACO,MAAM,yBAAyB;AAAA,EACpC,YAAY;AAAA,EACZ,YAAY;AACd;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|