@tamagui/web 1.125.2 → 1.125.3
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/createComponent.cjs +7 -6
- package/dist/cjs/createComponent.js +6 -6
- package/dist/cjs/createComponent.js.map +1 -1
- package/dist/cjs/createComponent.native.js +7 -7
- package/dist/cjs/createComponent.native.js.map +1 -1
- package/dist/cjs/helpers/consoleLog.cjs +31 -0
- package/dist/cjs/helpers/consoleLog.js +24 -0
- package/dist/cjs/helpers/consoleLog.js.map +6 -0
- package/dist/cjs/helpers/consoleLog.native.js +30 -0
- package/dist/cjs/helpers/consoleLog.native.js.map +6 -0
- package/dist/cjs/helpers/getSplitStyles.cjs +37 -64
- package/dist/cjs/helpers/getSplitStyles.js +41 -79
- package/dist/cjs/helpers/getSplitStyles.js.map +2 -2
- package/dist/cjs/helpers/getSplitStyles.native.js +57 -67
- package/dist/cjs/helpers/getSplitStyles.native.js.map +2 -2
- package/dist/cjs/helpers/log.cjs +2 -0
- package/dist/cjs/helpers/log.js +2 -0
- package/dist/cjs/helpers/log.js.map +1 -1
- package/dist/cjs/helpers/log.native.js +2 -0
- package/dist/cjs/helpers/log.native.js.map +2 -2
- package/dist/cjs/helpers/normalizeValueWithProperty.cjs +2 -22
- package/dist/cjs/helpers/normalizeValueWithProperty.js +2 -24
- package/dist/cjs/helpers/normalizeValueWithProperty.js.map +1 -1
- package/dist/cjs/helpers/normalizeValueWithProperty.native.js +3 -23
- package/dist/cjs/helpers/normalizeValueWithProperty.native.js.map +2 -2
- package/dist/cjs/views/Theme.cjs +1 -1
- package/dist/cjs/views/Theme.js +1 -1
- package/dist/cjs/views/Theme.js.map +1 -1
- package/dist/cjs/views/Theme.native.js +1 -1
- package/dist/cjs/views/Theme.native.js.map +1 -1
- package/dist/esm/createComponent.js +6 -5
- package/dist/esm/createComponent.js.map +1 -1
- package/dist/esm/createComponent.mjs +7 -6
- package/dist/esm/createComponent.mjs.map +1 -1
- package/dist/esm/createComponent.native.js +7 -6
- package/dist/esm/createComponent.native.js.map +2 -2
- package/dist/esm/helpers/consoleLog.js +8 -0
- package/dist/esm/helpers/consoleLog.js.map +6 -0
- package/dist/esm/helpers/consoleLog.mjs +6 -0
- package/dist/esm/helpers/consoleLog.mjs.map +1 -0
- package/dist/esm/helpers/consoleLog.native.js +8 -0
- package/dist/esm/helpers/consoleLog.native.js.map +6 -0
- package/dist/esm/helpers/getSplitStyles.js +43 -89
- package/dist/esm/helpers/getSplitStyles.js.map +2 -2
- package/dist/esm/helpers/getSplitStyles.mjs +39 -66
- package/dist/esm/helpers/getSplitStyles.mjs.map +1 -1
- package/dist/esm/helpers/getSplitStyles.native.js +58 -67
- package/dist/esm/helpers/getSplitStyles.native.js.map +2 -2
- package/dist/esm/helpers/log.js +2 -0
- package/dist/esm/helpers/log.js.map +1 -1
- package/dist/esm/helpers/log.mjs +2 -0
- package/dist/esm/helpers/log.mjs.map +1 -1
- package/dist/esm/helpers/log.native.js +2 -0
- package/dist/esm/helpers/log.native.js.map +2 -2
- package/dist/esm/helpers/normalizeValueWithProperty.js +1 -24
- package/dist/esm/helpers/normalizeValueWithProperty.js.map +1 -1
- package/dist/esm/helpers/normalizeValueWithProperty.mjs +1 -20
- package/dist/esm/helpers/normalizeValueWithProperty.mjs.map +1 -1
- package/dist/esm/helpers/normalizeValueWithProperty.native.js +1 -21
- package/dist/esm/helpers/normalizeValueWithProperty.native.js.map +2 -2
- package/dist/esm/views/Theme.js +1 -1
- package/dist/esm/views/Theme.js.map +1 -1
- package/dist/esm/views/Theme.mjs +1 -1
- package/dist/esm/views/Theme.mjs.map +1 -1
- package/dist/esm/views/Theme.native.js +1 -1
- package/dist/esm/views/Theme.native.js.map +1 -1
- package/package.json +11 -11
- package/src/createComponent.tsx +9 -8
- package/src/helpers/consoleLog.ts +8 -0
- package/src/helpers/getSplitStyles.tsx +56 -153
- package/src/helpers/log.ts +2 -0
- package/src/helpers/normalizeValueWithProperty.ts +0 -46
- package/src/views/Theme.tsx +1 -1
- package/types/createComponent.d.ts.map +1 -1
- package/types/helpers/consoleLog.d.ts +16 -0
- package/types/helpers/consoleLog.d.ts.map +1 -0
- package/types/helpers/getSplitStyles.d.ts.map +1 -1
- package/types/helpers/log.d.ts.map +1 -1
- package/types/helpers/normalizeValueWithProperty.d.ts +0 -1
- package/types/helpers/normalizeValueWithProperty.d.ts.map +1 -1
|
@@ -44,32 +44,22 @@ import type {
|
|
|
44
44
|
ThemeParsed,
|
|
45
45
|
ViewStyleWithPseudos,
|
|
46
46
|
} from '../types'
|
|
47
|
+
import { groupCollapsed, groupEnd } from './consoleLog'
|
|
47
48
|
import { createMediaStyle } from './createMediaStyle'
|
|
48
49
|
import { fixStyles } from './expandStyles'
|
|
49
50
|
import { getCSSStylesAtomic, getStyleAtomic, styleToCSS } from './getCSSStylesAtomic'
|
|
50
51
|
import { getGroupPropParts } from './getGroupPropParts'
|
|
51
|
-
import {
|
|
52
|
-
insertStyleRules,
|
|
53
|
-
insertedTransforms,
|
|
54
|
-
scanAllSheets,
|
|
55
|
-
shouldInsertStyleRules,
|
|
56
|
-
updateRules,
|
|
57
|
-
} from './insertStyleRule'
|
|
52
|
+
import { insertStyleRules, shouldInsertStyleRules, updateRules } from './insertStyleRule'
|
|
58
53
|
import { isActivePlatform } from './isActivePlatform'
|
|
59
54
|
import { isActiveTheme } from './isActiveTheme'
|
|
60
55
|
import { log } from './log'
|
|
61
|
-
import {
|
|
62
|
-
normalizeValueWithProperty,
|
|
63
|
-
reverseMapClassNameToValue,
|
|
64
|
-
} from './normalizeValueWithProperty'
|
|
56
|
+
import { normalizeValueWithProperty } from './normalizeValueWithProperty'
|
|
65
57
|
import { propMapper } from './propMapper'
|
|
66
58
|
import { pseudoDescriptors, pseudoPriorities } from './pseudoDescriptors'
|
|
67
59
|
import { skipProps } from './skipProps'
|
|
68
60
|
import { sortString } from './sortString'
|
|
69
61
|
import { transformsToString } from './transformsToString'
|
|
70
62
|
|
|
71
|
-
const consoleGroupCollapsed = isWeb ? console.groupCollapsed : console.info
|
|
72
|
-
|
|
73
63
|
export type SplitStyles = ReturnType<typeof getSplitStyles>
|
|
74
64
|
|
|
75
65
|
export type SplitStyleResult = ReturnType<typeof getSplitStyles>
|
|
@@ -167,9 +157,6 @@ export const getSplitStyles: StyleSplitter = (
|
|
|
167
157
|
const rulesToInsert: RulesToInsert =
|
|
168
158
|
process.env.TAMAGUI_TARGET === 'native' ? (undefined as any) : {}
|
|
169
159
|
const classNames: ClassNamesObject = {}
|
|
170
|
-
// we need to gather these specific to each media query / pseudo
|
|
171
|
-
// value is [hash, val], so ["-jnjad-asdnjk", "scaleX(1) rotate(10deg)"]
|
|
172
|
-
const transforms: Record<TransformNamespaceKey, [string, string]> = {}
|
|
173
160
|
|
|
174
161
|
let pseudos: PseudoStyles | null = null
|
|
175
162
|
let space: SpaceTokens | null = props.space
|
|
@@ -233,7 +220,7 @@ export const getSplitStyles: StyleSplitter = (
|
|
|
233
220
|
debug !== 'profile' &&
|
|
234
221
|
isClient
|
|
235
222
|
) {
|
|
236
|
-
|
|
223
|
+
groupCollapsed('getSplitStyles (collapsed)')
|
|
237
224
|
log({
|
|
238
225
|
props,
|
|
239
226
|
staticConfig,
|
|
@@ -244,7 +231,7 @@ export const getSplitStyles: StyleSplitter = (
|
|
|
244
231
|
styleState,
|
|
245
232
|
theme: { ...theme },
|
|
246
233
|
})
|
|
247
|
-
|
|
234
|
+
groupEnd()
|
|
248
235
|
}
|
|
249
236
|
|
|
250
237
|
const { asChild } = props
|
|
@@ -287,7 +274,7 @@ export const getSplitStyles: StyleSplitter = (
|
|
|
287
274
|
if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
|
|
288
275
|
// otherwise things just keep nesting - careful don't leave these around
|
|
289
276
|
// they cause big performance dips in Chrome, only use them when debug prop set
|
|
290
|
-
|
|
277
|
+
groupEnd()
|
|
291
278
|
}
|
|
292
279
|
|
|
293
280
|
// normalize shorthands up front
|
|
@@ -341,32 +328,6 @@ export const getSplitStyles: StyleSplitter = (
|
|
|
341
328
|
viewProps['dataSet'][keyInit] = valInit
|
|
342
329
|
continue
|
|
343
330
|
}
|
|
344
|
-
|
|
345
|
-
if (isValidStyleKeyInit && valInitType === 'string') {
|
|
346
|
-
if (valInit[0] === '_') {
|
|
347
|
-
const isValidClassName = keyInit in validStyles
|
|
348
|
-
const isMediaOrPseudo =
|
|
349
|
-
!isValidClassName &&
|
|
350
|
-
// media are flattened for some reason to color-hover keys,
|
|
351
|
-
// we should probably just leave them in place to avoid extra complexity
|
|
352
|
-
keyInit.includes(PROP_SPLIT) &&
|
|
353
|
-
validStyles[keyInit.split(PROP_SPLIT)[0]]
|
|
354
|
-
|
|
355
|
-
if (isValidClassName || isMediaOrPseudo) {
|
|
356
|
-
if (shouldDoClasses) {
|
|
357
|
-
mergeClassName(transforms, classNames, keyInit, valInit, isMediaOrPseudo)
|
|
358
|
-
if (styleState.style) {
|
|
359
|
-
delete styleState.style[keyInit]
|
|
360
|
-
}
|
|
361
|
-
} else {
|
|
362
|
-
styleState.style ||= {}
|
|
363
|
-
styleState.style[keyInit] = reverseMapClassNameToValue(keyInit, valInit)
|
|
364
|
-
delete classNames[keyInit]
|
|
365
|
-
}
|
|
366
|
-
continue
|
|
367
|
-
}
|
|
368
|
-
}
|
|
369
|
-
}
|
|
370
331
|
}
|
|
371
332
|
|
|
372
333
|
if (process.env.TAMAGUI_TARGET === 'native') {
|
|
@@ -558,9 +519,9 @@ export const getSplitStyles: StyleSplitter = (
|
|
|
558
519
|
const shouldPassThrough = shouldPassProp || isHOCShouldPassThrough
|
|
559
520
|
|
|
560
521
|
if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
522
|
+
groupEnd() // react native was not nesting right
|
|
523
|
+
groupEnd() // react native was not nesting right
|
|
524
|
+
groupCollapsed(
|
|
564
525
|
` 🔑 ${keyOg}${keyInit !== keyOg ? ` (shorthand for ${keyInit})` : ''} ${
|
|
565
526
|
shouldPassThrough ? '(pass)' : ''
|
|
566
527
|
}`
|
|
@@ -634,9 +595,9 @@ export const getSplitStyles: StyleSplitter = (
|
|
|
634
595
|
}
|
|
635
596
|
|
|
636
597
|
if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
|
|
637
|
-
|
|
598
|
+
groupCollapsed(' 💠 expanded', keyInit, '=>', key)
|
|
638
599
|
log(val)
|
|
639
|
-
|
|
600
|
+
groupEnd()
|
|
640
601
|
}
|
|
641
602
|
|
|
642
603
|
if (val == null) return
|
|
@@ -678,9 +639,9 @@ export const getSplitStyles: StyleSplitter = (
|
|
|
678
639
|
if (shouldPassThrough) {
|
|
679
640
|
passDownProp(viewProps, key, val, isMediaOrPseudo)
|
|
680
641
|
if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
|
|
681
|
-
|
|
642
|
+
groupCollapsed(` - passing down prop ${key}`)
|
|
682
643
|
log({ val, after: { ...viewProps[key] } })
|
|
683
|
-
|
|
644
|
+
groupEnd()
|
|
684
645
|
}
|
|
685
646
|
return
|
|
686
647
|
}
|
|
@@ -690,7 +651,12 @@ export const getSplitStyles: StyleSplitter = (
|
|
|
690
651
|
|
|
691
652
|
// TODO can avoid processing this if !shouldDoClasses + state is off
|
|
692
653
|
// (note: can't because we need to set defaults on enter/exit or else enforce that they should)
|
|
693
|
-
const pseudoStyleObject = getSubStyle(
|
|
654
|
+
const pseudoStyleObject = getSubStyle(
|
|
655
|
+
styleState,
|
|
656
|
+
key,
|
|
657
|
+
val,
|
|
658
|
+
styleProps.noClass && !(process.env.IS_STATIC === 'is_static')
|
|
659
|
+
)
|
|
694
660
|
|
|
695
661
|
if (!shouldDoClasses || process.env.IS_STATIC === 'is_static') {
|
|
696
662
|
pseudos ||= {}
|
|
@@ -717,26 +683,14 @@ export const getSplitStyles: StyleSplitter = (
|
|
|
717
683
|
const pseudoStyles = getStyleAtomic(pseudoStyleObject, descriptor)
|
|
718
684
|
|
|
719
685
|
if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
|
|
720
|
-
|
|
721
|
-
consoleGroupCollapsed('pseudo (classes)', key)
|
|
722
|
-
|
|
723
|
-
log({ pseudoStyleObject, pseudoStyles })
|
|
724
|
-
console.groupEnd()
|
|
686
|
+
console.info('pseudo:', key, pseudoStyleObject, pseudoStyles)
|
|
725
687
|
}
|
|
726
688
|
|
|
727
689
|
for (const psuedoStyle of pseudoStyles) {
|
|
728
690
|
const fullKey = `${psuedoStyle[StyleObjectProperty]}${PROP_SPLIT}${descriptor.name}`
|
|
729
691
|
if (fullKey in usedKeys) continue
|
|
730
|
-
|
|
731
692
|
addStyleToInsertRules(rulesToInsert, psuedoStyle)
|
|
732
|
-
|
|
733
|
-
transforms,
|
|
734
|
-
classNames,
|
|
735
|
-
fullKey,
|
|
736
|
-
psuedoStyle[StyleObjectIdentifier],
|
|
737
|
-
isMediaOrPseudo,
|
|
738
|
-
true
|
|
739
|
-
)
|
|
693
|
+
classNames[fullKey] = psuedoStyle[StyleObjectIdentifier]
|
|
740
694
|
}
|
|
741
695
|
}
|
|
742
696
|
|
|
@@ -757,9 +711,9 @@ export const getSplitStyles: StyleSplitter = (
|
|
|
757
711
|
}
|
|
758
712
|
|
|
759
713
|
if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
|
|
760
|
-
|
|
714
|
+
groupCollapsed('pseudo', key, { isDisabled })
|
|
761
715
|
log({ pseudoStyleObject, isDisabled, descriptor, componentState })
|
|
762
|
-
|
|
716
|
+
groupEnd()
|
|
763
717
|
}
|
|
764
718
|
|
|
765
719
|
const importance = descriptor.priority
|
|
@@ -905,14 +859,7 @@ export const getSplitStyles: StyleSplitter = (
|
|
|
905
859
|
|
|
906
860
|
if (fullKey in usedKeys) continue
|
|
907
861
|
addStyleToInsertRules(rulesToInsert, out as any)
|
|
908
|
-
|
|
909
|
-
transforms,
|
|
910
|
-
classNames,
|
|
911
|
-
fullKey,
|
|
912
|
-
out[StyleObjectIdentifier],
|
|
913
|
-
true,
|
|
914
|
-
true
|
|
915
|
-
)
|
|
862
|
+
classNames[fullKey] = out[StyleObjectIdentifier]
|
|
916
863
|
}
|
|
917
864
|
} else {
|
|
918
865
|
const isThemeMedia = isMedia === 'theme'
|
|
@@ -1060,12 +1007,11 @@ export const getSplitStyles: StyleSplitter = (
|
|
|
1060
1007
|
try {
|
|
1061
1008
|
log(` ✔️ expand complete`, keyInit)
|
|
1062
1009
|
log('style', { ...styleState.style })
|
|
1063
|
-
log('transforms', { ...transforms })
|
|
1064
1010
|
log('viewProps', { ...viewProps })
|
|
1065
1011
|
} catch {
|
|
1066
1012
|
// RN can run into PayloadTooLargeError: request entity too large
|
|
1067
1013
|
}
|
|
1068
|
-
|
|
1014
|
+
groupEnd()
|
|
1069
1015
|
}
|
|
1070
1016
|
} // end prop loop
|
|
1071
1017
|
|
|
@@ -1104,11 +1050,7 @@ export const getSplitStyles: StyleSplitter = (
|
|
|
1104
1050
|
// this should work for most (all?) of our cases since the order preservation really only needs to apply
|
|
1105
1051
|
// to the "flat" transform props
|
|
1106
1052
|
styleState.style ||= {}
|
|
1107
|
-
|
|
1108
|
-
.sort(([a], [b]) => sortString(a, b))
|
|
1109
|
-
.forEach(([key, val]) => {
|
|
1110
|
-
mergeTransform(styleState.style!, key, val, true)
|
|
1111
|
-
})
|
|
1053
|
+
mergeFlatTransforms(styleState.style, styleState.flatTransforms)
|
|
1112
1054
|
}
|
|
1113
1055
|
|
|
1114
1056
|
// add in defaults if not set:
|
|
@@ -1178,46 +1120,22 @@ export const getSplitStyles: StyleSplitter = (
|
|
|
1178
1120
|
shouldRetain = true
|
|
1179
1121
|
} else {
|
|
1180
1122
|
addStyleToInsertRules(rulesToInsert, atomicStyle)
|
|
1181
|
-
|
|
1123
|
+
classNames[key] = identifier
|
|
1182
1124
|
}
|
|
1183
1125
|
}
|
|
1184
1126
|
|
|
1185
1127
|
if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') {
|
|
1186
|
-
|
|
1187
|
-
|
|
1128
|
+
groupEnd() // ensure group ended from loop above
|
|
1129
|
+
groupCollapsed(`🔹 getSplitStyles final style object`)
|
|
1188
1130
|
console.info(styleState.style)
|
|
1189
1131
|
console.info(`retainedStyles`, retainedStyles)
|
|
1190
|
-
|
|
1132
|
+
groupEnd()
|
|
1191
1133
|
}
|
|
1192
1134
|
|
|
1193
1135
|
if (shouldRetain || !(process.env.IS_STATIC === 'is_static')) {
|
|
1194
1136
|
styleState.style = retainedStyles || {}
|
|
1195
1137
|
}
|
|
1196
1138
|
}
|
|
1197
|
-
|
|
1198
|
-
if (transforms) {
|
|
1199
|
-
for (const namespace in transforms) {
|
|
1200
|
-
if (!transforms[namespace]) {
|
|
1201
|
-
if (process.env.NODE_ENV === 'development') {
|
|
1202
|
-
log('Error no transform', transforms, namespace)
|
|
1203
|
-
}
|
|
1204
|
-
continue
|
|
1205
|
-
}
|
|
1206
|
-
const [hash, val] = transforms[namespace]
|
|
1207
|
-
const identifier = `_transform${hash}`
|
|
1208
|
-
if (isClient && !insertedTransforms[identifier]) {
|
|
1209
|
-
const rule = `.${identifier} { transform: ${val}; }`
|
|
1210
|
-
addStyleToInsertRules(rulesToInsert, [
|
|
1211
|
-
namespace,
|
|
1212
|
-
val,
|
|
1213
|
-
identifier,
|
|
1214
|
-
undefined,
|
|
1215
|
-
[rule],
|
|
1216
|
-
] satisfies StyleObject)
|
|
1217
|
-
}
|
|
1218
|
-
classNames[namespace] = identifier
|
|
1219
|
-
}
|
|
1220
|
-
}
|
|
1221
1139
|
}
|
|
1222
1140
|
|
|
1223
1141
|
if (isReactNative) {
|
|
@@ -1393,14 +1311,13 @@ export const getSplitStyles: StyleSplitter = (
|
|
|
1393
1311
|
|
|
1394
1312
|
if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
|
|
1395
1313
|
if (isDevTools) {
|
|
1396
|
-
|
|
1314
|
+
groupCollapsed('🔹 getSplitStyles ===>')
|
|
1397
1315
|
try {
|
|
1398
1316
|
// prettier-ignore
|
|
1399
1317
|
const logs = {
|
|
1400
1318
|
...result,
|
|
1401
1319
|
className,
|
|
1402
1320
|
componentState,
|
|
1403
|
-
transforms,
|
|
1404
1321
|
viewProps,
|
|
1405
1322
|
rulesToInsert,
|
|
1406
1323
|
parentSplitStyles,
|
|
@@ -1411,7 +1328,7 @@ export const getSplitStyles: StyleSplitter = (
|
|
|
1411
1328
|
} catch {
|
|
1412
1329
|
// RN can run into PayloadTooLargeError: request entity too large
|
|
1413
1330
|
}
|
|
1414
|
-
|
|
1331
|
+
groupEnd()
|
|
1415
1332
|
}
|
|
1416
1333
|
}
|
|
1417
1334
|
|
|
@@ -1423,37 +1340,12 @@ export const getSplitStyles: StyleSplitter = (
|
|
|
1423
1340
|
return result
|
|
1424
1341
|
}
|
|
1425
1342
|
|
|
1426
|
-
function
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
isInsertingNow = false
|
|
1433
|
-
) {
|
|
1434
|
-
if (process.env.TAMAGUI_TARGET === 'web') {
|
|
1435
|
-
// empty classnames passed by compiler sometimes
|
|
1436
|
-
if (!val) return
|
|
1437
|
-
if (!isInsertingNow && val[0] === '_' && val.startsWith('_transform-')) {
|
|
1438
|
-
const ns: TransformNamespaceKey = isMediaOrPseudo ? key : 'transform'
|
|
1439
|
-
let transform = insertedTransforms[val]
|
|
1440
|
-
if (isClient && !transform) {
|
|
1441
|
-
scanAllSheets() // HMR or loaded a new chunk
|
|
1442
|
-
transform = insertedTransforms[val]
|
|
1443
|
-
if (!transform && isWeb && val[0] !== '_') {
|
|
1444
|
-
transform = val // runtime insert
|
|
1445
|
-
}
|
|
1446
|
-
}
|
|
1447
|
-
transforms[ns] ||= ['', '']
|
|
1448
|
-
transforms[ns][0] += val.replace('_transform', '')
|
|
1449
|
-
// ssr doesn't need to do anything just make the right classname
|
|
1450
|
-
if (transform) {
|
|
1451
|
-
transforms[ns][1] += transform
|
|
1452
|
-
}
|
|
1453
|
-
} else {
|
|
1454
|
-
classNames[key] = val
|
|
1455
|
-
}
|
|
1456
|
-
}
|
|
1343
|
+
function mergeFlatTransforms(target: TextStyle, flatTransforms: Record<string, any>) {
|
|
1344
|
+
Object.entries(flatTransforms)
|
|
1345
|
+
.sort(([a], [b]) => sortString(a, b))
|
|
1346
|
+
.forEach(([key, val]) => {
|
|
1347
|
+
mergeTransform(target, key, val, true)
|
|
1348
|
+
})
|
|
1457
1349
|
}
|
|
1458
1350
|
|
|
1459
1351
|
function mergeStyle(
|
|
@@ -1462,11 +1354,8 @@ function mergeStyle(
|
|
|
1462
1354
|
val: any,
|
|
1463
1355
|
disableNormalize = false
|
|
1464
1356
|
) {
|
|
1465
|
-
const {
|
|
1466
|
-
if (
|
|
1467
|
-
classNames[key] = val
|
|
1468
|
-
usedKeys[key] ||= 1
|
|
1469
|
-
} else if (key in stylePropsTransform) {
|
|
1357
|
+
const { viewProps, styleProps, staticConfig } = styleState
|
|
1358
|
+
if (key in stylePropsTransform) {
|
|
1470
1359
|
styleState.flatTransforms ||= {}
|
|
1471
1360
|
styleState.flatTransforms[key] = val
|
|
1472
1361
|
} else {
|
|
@@ -1480,7 +1369,10 @@ function mergeStyle(
|
|
|
1480
1369
|
viewProps[key] = out
|
|
1481
1370
|
} else {
|
|
1482
1371
|
styleState.style ||= {}
|
|
1483
|
-
styleState.style[key] =
|
|
1372
|
+
styleState.style[key] =
|
|
1373
|
+
// if you dont do this you'll be passing props.transform arrays directly here and then mutating them
|
|
1374
|
+
// if theres any flatTransforms later, causing issues (mutating props is bad, in strict mode styles get borked)
|
|
1375
|
+
key === 'transform' && Array.isArray(out) ? [...out] : out
|
|
1484
1376
|
}
|
|
1485
1377
|
}
|
|
1486
1378
|
}
|
|
@@ -1508,7 +1400,6 @@ export const getSubStyle = (
|
|
|
1508
1400
|
if (skey in validPseudoKeys) {
|
|
1509
1401
|
sval = getSubStyle(styleState, skey, sval, avoidMergeTransform)
|
|
1510
1402
|
}
|
|
1511
|
-
|
|
1512
1403
|
if (!avoidMergeTransform && skey in stylePropsTransform) {
|
|
1513
1404
|
mergeTransform(styleOut, skey, sval)
|
|
1514
1405
|
} else {
|
|
@@ -1519,6 +1410,18 @@ export const getSubStyle = (
|
|
|
1519
1410
|
})
|
|
1520
1411
|
}
|
|
1521
1412
|
|
|
1413
|
+
if (!avoidMergeTransform) {
|
|
1414
|
+
if (Array.isArray(styleOut.transform)) {
|
|
1415
|
+
const parentTransform = styleState.style?.transform
|
|
1416
|
+
if (parentTransform) {
|
|
1417
|
+
styleOut.transform = [...parentTransform, ...styleOut.transform]
|
|
1418
|
+
}
|
|
1419
|
+
}
|
|
1420
|
+
if (styleState.flatTransforms) {
|
|
1421
|
+
mergeFlatTransforms(styleOut, styleState.flatTransforms)
|
|
1422
|
+
}
|
|
1423
|
+
}
|
|
1424
|
+
|
|
1522
1425
|
if (!styleProps.noNormalize) {
|
|
1523
1426
|
fixStyles(styleOut)
|
|
1524
1427
|
}
|
package/src/helpers/log.ts
CHANGED
|
@@ -10,6 +10,8 @@ export function log(...args: any[]) {
|
|
|
10
10
|
// react native doesn't log in the cli unless it's log
|
|
11
11
|
// biome-ignore lint/suspicious/noConsoleLog: <explanation>
|
|
12
12
|
return console.log(...args)
|
|
13
|
+
} catch (err) {
|
|
14
|
+
console.error(err)
|
|
13
15
|
} finally {
|
|
14
16
|
_disableMediaTouch(false)
|
|
15
17
|
}
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
|
|
6
6
|
import { isWeb } from '@tamagui/constants'
|
|
7
7
|
import { stylePropsAll, stylePropsUnitless } from '@tamagui/helpers'
|
|
8
|
-
import { getAllSelectors } from './insertStyleRule'
|
|
9
8
|
|
|
10
9
|
// only doing this on web on native it accepts pixel values
|
|
11
10
|
|
|
@@ -33,48 +32,3 @@ export function normalizeValueWithProperty(value: any, property = ''): any {
|
|
|
33
32
|
}
|
|
34
33
|
return res
|
|
35
34
|
}
|
|
36
|
-
|
|
37
|
-
// getting real values for colors for animations (reverse mapped from CSS)
|
|
38
|
-
// this isn't beautiful, but will do relatively fine performance for now
|
|
39
|
-
const rcache = {}
|
|
40
|
-
export function reverseMapClassNameToValue(key: string, className: string) {
|
|
41
|
-
const selectors = getAllSelectors()
|
|
42
|
-
const cssRule = selectors[className]
|
|
43
|
-
if (rcache[cssRule]) {
|
|
44
|
-
return rcache[cssRule]
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
if (!cssRule) {
|
|
48
|
-
if (process.env.NODE_ENV === 'development') {
|
|
49
|
-
console.warn(
|
|
50
|
-
`No CSS rule found for ${key} looking for selector ".${className}", you may not be injecting extracted CSS`
|
|
51
|
-
)
|
|
52
|
-
}
|
|
53
|
-
return
|
|
54
|
-
}
|
|
55
|
-
const cssVal = cssRule.replace(/.*:/, '').replace(/;.*/, '').trim()
|
|
56
|
-
let res: any
|
|
57
|
-
if (cssVal.startsWith('var(')) {
|
|
58
|
-
res = cssVal
|
|
59
|
-
} else if (stylePropsUnitless[key]) {
|
|
60
|
-
res = +cssVal
|
|
61
|
-
} else if (cssVal.endsWith('px')) {
|
|
62
|
-
res = +cssVal.replace('px', '')
|
|
63
|
-
} else {
|
|
64
|
-
res = cssVal
|
|
65
|
-
}
|
|
66
|
-
rcache[cssRule] = res
|
|
67
|
-
if (process.env.NODE_ENV === 'development') {
|
|
68
|
-
// ensure we are parsing properly
|
|
69
|
-
if (typeof res === 'number' && Number.isNaN(res)) {
|
|
70
|
-
console.info('Tamagui invalid parsed value, NaN:', {
|
|
71
|
-
res,
|
|
72
|
-
cssVal,
|
|
73
|
-
cssRule,
|
|
74
|
-
key,
|
|
75
|
-
className,
|
|
76
|
-
})
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
return res
|
|
80
|
-
}
|
package/src/views/Theme.tsx
CHANGED
|
@@ -68,7 +68,7 @@ export function getThemedChildren(
|
|
|
68
68
|
let shouldRenderChildrenWithTheme =
|
|
69
69
|
hasEverThemed || themeState.isNew || isRoot || hasThemeUpdatingProps(props)
|
|
70
70
|
|
|
71
|
-
if (process.env.NODE_ENV === 'development' && props.debug) {
|
|
71
|
+
if (process.env.NODE_ENV === 'development' && props.debug === 'visualize') {
|
|
72
72
|
children = (
|
|
73
73
|
<ThemeDebug themeState={themeState} themeProps={props}>
|
|
74
74
|
{children}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,
|
|
1
|
+
{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAoBzB,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAA;AAG/E,OAAO,KAAK,EAEV,SAAS,EAGT,cAAc,EACd,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,kBAAkB,EAElB,YAAY,EAEZ,gBAAgB,EAChB,cAAc,EAMf,MAAM,SAAS,CAAA;AAYhB,KAAK,iBAAiB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC,CAAA;AAEpF,eAAO,MAAM,kBAAkB,wBAA+B,CAAA;AAuF9D,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,EACnD,GAAG,SAAS,cAAc,GAAG,cAAc,EAC3C,SAAS,GAAG,KAAK,EACjB,UAAU,SAAS,MAAM,GAAG,KAAK,EACjC,YAAY,EAAE,YAAY,wEAikC3B;AAoBD,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,OAEjD;yBAFe,QAAQ;;;AAkBxB,eAAO,MAAM,MAAM,yFA0CjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,GAAG,OAAO,CAAA;IACpC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBAiGxD"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export declare const groupEnd: {
|
|
2
|
+
(): void;
|
|
3
|
+
(): void;
|
|
4
|
+
(): void;
|
|
5
|
+
};
|
|
6
|
+
export declare const gc: {
|
|
7
|
+
(...data: any[]): void;
|
|
8
|
+
(label?: string): void;
|
|
9
|
+
(...label: any[]): void;
|
|
10
|
+
};
|
|
11
|
+
export declare const groupCollapsed: {
|
|
12
|
+
(...data: any[]): void;
|
|
13
|
+
(message?: any, ...optionalParams: any[]): void;
|
|
14
|
+
(message?: any, ...optionalParams: any[]): void;
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=consoleLog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"consoleLog.d.ts","sourceRoot":"","sources":["../../src/helpers/consoleLog.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ;;;;CAAiC,CAAA;AACtD,eAAO,MAAM,EAAE;;;;CAAuC,CAAA;AACtD,eAAO,MAAM,cAAc;;;;CAA4B,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAA;AAChF,OAAO,KAAK,EAEV,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,aAAa,EAOb,eAAe,EACf,YAAY,EAGZ,SAAS,EACT,WAAW,EAEZ,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAA;AAChF,OAAO,KAAK,EAEV,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,aAAa,EAOb,eAAe,EACf,YAAY,EAGZ,SAAS,EACT,WAAW,EAEZ,MAAM,UAAU,CAAA;AAiBjB,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAMhE,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,qBAAqB,EACrC,UAAU,EAAE,eAAe,EAC3B,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,OAAO,CAAC,EAAE,iBAAiB,EAE3B,WAAW,CAAC,EAAE,MAAM,EACpB,KAAK,CAAC,EAAE,SAAS,KACd,cAAc,CAAA;AAEnB,eAAO,MAAM,UAAU,MAAM,CAAA;AA+B7B,eAAO,MAAM,cAAc,EAAE,aAysC5B,CAAA;AAuCD,eAAO,MAAM,WAAW,eACV,aAAa,UACjB,MAAM,WACL,MAAM,wBACO,OAAO,KAC5B,SA6CF,CAAA;AAQD,eAAO,MAAM,cAAc,EAAE,aAa5B,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"log.d.ts","sourceRoot":"","sources":["../../src/helpers/log.ts"],"names":[],"mappings":"AAEA,wBAAgB,GAAG,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,
|
|
1
|
+
{"version":3,"file":"log.d.ts","sourceRoot":"","sources":["../../src/helpers/log.ts"],"names":[],"mappings":"AAEA,wBAAgB,GAAG,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,QAejC"}
|
|
@@ -3,5 +3,4 @@
|
|
|
3
3
|
* Copyright (c) Nicolas Gallagher licensed under the MIT license.
|
|
4
4
|
*/
|
|
5
5
|
export declare function normalizeValueWithProperty(value: any, property?: string): any;
|
|
6
|
-
export declare function reverseMapClassNameToValue(key: string, className: string): any;
|
|
7
6
|
//# sourceMappingURL=normalizeValueWithProperty.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"normalizeValueWithProperty.d.ts","sourceRoot":"","sources":["../../src/helpers/normalizeValueWithProperty.ts"],"names":[],"mappings":"AAAA;;;GAGG;
|
|
1
|
+
{"version":3,"file":"normalizeValueWithProperty.d.ts","sourceRoot":"","sources":["../../src/helpers/normalizeValueWithProperty.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAaH,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,SAAK,GAAG,GAAG,CAiBzE"}
|