@tamagui/core 1.0.0-beta.153 → 1.0.0-beta.181
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/Tamagui.js +13 -1
- package/dist/cjs/Tamagui.js.map +2 -2
- package/dist/cjs/ThemeContext.js +4 -0
- package/dist/cjs/ThemeManager.js +30 -14
- package/dist/cjs/ThemeManager.js.map +2 -2
- package/dist/cjs/conf.js +10 -1
- package/dist/cjs/conf.js.map +2 -2
- package/dist/cjs/constants/constants.js +6 -0
- package/dist/cjs/constants/platform.js +12 -0
- package/dist/cjs/constants/rnw.js +4 -0
- package/dist/cjs/contexts/ButtonInsideButtonContext.js +4 -0
- package/dist/cjs/createComponent.js +78 -54
- package/dist/cjs/createComponent.js.map +2 -2
- package/dist/cjs/createFont.js +4 -0
- package/dist/cjs/createShorthands.js +4 -0
- package/dist/cjs/createTamagui.js +4 -0
- package/dist/cjs/createTamagui.js.map +2 -2
- package/dist/cjs/createTheme.js +4 -0
- package/dist/cjs/createTokens.js +5 -0
- package/dist/cjs/createTokens.js.map +1 -1
- package/dist/cjs/createVariable.js +9 -0
- package/dist/cjs/helpers/RNComponents.js +4 -0
- package/dist/cjs/helpers/addStylesUsingClassname.js +8 -0
- package/dist/cjs/helpers/addStylesUsingClassname.js.map +2 -2
- package/dist/cjs/helpers/areEqualSets.js +4 -0
- package/dist/cjs/helpers/createMediaStyle.js +5 -2
- package/dist/cjs/helpers/createMediaStyle.js.map +2 -2
- package/dist/cjs/helpers/createPropMapper.js +11 -12
- package/dist/cjs/helpers/createPropMapper.js.map +2 -2
- package/dist/cjs/helpers/createShallowUpdate.js +4 -0
- package/dist/cjs/helpers/createTamaguiProvider.js +4 -0
- package/dist/cjs/helpers/extendStaticConfig.js +8 -6
- package/dist/cjs/helpers/extendStaticConfig.js.map +2 -2
- package/dist/cjs/helpers/fixNativeShadow.js +4 -0
- package/dist/cjs/helpers/fixNativeShadow.native.js +6 -2
- package/dist/cjs/helpers/fixNativeShadow.native.js.map +2 -2
- package/dist/cjs/helpers/getExpandedShorthands.js +4 -0
- package/dist/cjs/helpers/getSplitStyles.js +70 -34
- package/dist/cjs/helpers/getSplitStyles.js.map +2 -2
- package/dist/cjs/helpers/getStylesAtomic.js +20 -3
- package/dist/cjs/helpers/getStylesAtomic.js.map +2 -2
- package/dist/cjs/helpers/getStylesAtomic.native.js +4 -0
- package/dist/cjs/helpers/insertStyleRule.js +41 -27
- package/dist/cjs/helpers/insertStyleRule.js.map +2 -2
- package/dist/cjs/helpers/isObj.js +4 -0
- package/dist/cjs/helpers/isTamaguiElement.js +4 -0
- package/dist/cjs/helpers/matchMedia.js +4 -0
- package/dist/cjs/helpers/matchMedia.native.js +4 -0
- package/dist/cjs/helpers/themeable.js +8 -2
- package/dist/cjs/helpers/themeable.js.map +2 -2
- package/dist/cjs/helpers/validate.js +46 -5
- package/dist/cjs/helpers/validate.js.map +2 -2
- package/dist/cjs/helpers/withStaticProperties.js +4 -0
- package/dist/cjs/helpers/wrapThemeManagerContext.js +4 -0
- package/dist/cjs/hooks/useConstant.js +4 -0
- package/dist/cjs/hooks/useFeatures.js +4 -0
- package/dist/cjs/hooks/useIsMounted.js +4 -0
- package/dist/cjs/hooks/useIsTouchDevice.js +4 -0
- package/dist/cjs/hooks/useMedia.js +15 -0
- package/dist/cjs/hooks/useMedia.js.map +2 -2
- package/dist/cjs/hooks/usePressable.js +4 -0
- package/dist/cjs/hooks/useTheme.js +16 -0
- package/dist/cjs/hooks/useTheme.js.map +2 -2
- package/dist/cjs/hooks/useUnmountEffect.js +4 -0
- package/dist/cjs/index.js +14 -0
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/styled.js +7 -4
- package/dist/cjs/styled.js.map +2 -2
- package/dist/cjs/types.js.map +1 -1
- package/dist/cjs/views/Stack.js +4 -0
- package/dist/cjs/views/Text.js +4 -0
- package/dist/cjs/views/TextAncestorContext.js +6 -0
- package/dist/cjs/views/Theme.js +10 -3
- package/dist/cjs/views/Theme.js.map +2 -2
- package/dist/cjs/views/ThemeInverse.js +5 -0
- package/dist/cjs/views/ThemeProvider.js +4 -0
- package/dist/cjs/views/ThemeReset.js +4 -0
- package/dist/esm/Tamagui.js +8 -2
- package/dist/esm/Tamagui.js.map +2 -2
- package/dist/esm/ThemeManager.js +21 -11
- package/dist/esm/ThemeManager.js.map +2 -2
- package/dist/esm/conf.js +0 -1
- package/dist/esm/conf.js.map +2 -2
- package/dist/esm/createComponent.js +68 -54
- package/dist/esm/createComponent.js.map +2 -2
- package/dist/esm/createTamagui.js.map +2 -2
- package/dist/esm/createTokens.js.map +1 -1
- package/dist/esm/helpers/addStylesUsingClassname.js +4 -1
- package/dist/esm/helpers/addStylesUsingClassname.js.map +2 -2
- package/dist/esm/helpers/createMediaStyle.js +0 -2
- package/dist/esm/helpers/createMediaStyle.js.map +2 -2
- package/dist/esm/helpers/createPropMapper.js +7 -12
- package/dist/esm/helpers/createPropMapper.js.map +2 -2
- package/dist/esm/helpers/extendStaticConfig.js +5 -6
- package/dist/esm/helpers/extendStaticConfig.js.map +2 -2
- package/dist/esm/helpers/fixNativeShadow.native.js +2 -2
- package/dist/esm/helpers/fixNativeShadow.native.js.map +2 -2
- package/dist/esm/helpers/getSplitStyles.js +65 -35
- package/dist/esm/helpers/getSplitStyles.js.map +2 -2
- package/dist/esm/helpers/getStylesAtomic.js +15 -3
- package/dist/esm/helpers/getStylesAtomic.js.map +2 -2
- package/dist/esm/helpers/insertStyleRule.js +31 -27
- package/dist/esm/helpers/insertStyleRule.js.map +2 -2
- package/dist/esm/helpers/themeable.js +4 -2
- package/dist/esm/helpers/themeable.js.map +2 -2
- package/dist/esm/helpers/validate.js +17 -5
- package/dist/esm/helpers/validate.js.map +2 -2
- package/dist/esm/hooks/useMedia.js +4 -0
- package/dist/esm/hooks/useMedia.js.map +2 -2
- package/dist/esm/hooks/useTheme.js +8 -0
- package/dist/esm/hooks/useTheme.js.map +2 -2
- package/dist/esm/index.js +3 -0
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/styled.js +3 -4
- package/dist/esm/styled.js.map +2 -2
- package/dist/esm/views/Theme.js +6 -3
- package/dist/esm/views/Theme.js.map +2 -2
- package/dist/jsx/Tamagui.js +8 -2
- package/dist/jsx/ThemeManager.js +21 -11
- package/dist/jsx/conf.js +0 -1
- package/dist/jsx/createComponent.js +64 -50
- package/dist/jsx/helpers/addStylesUsingClassname.js +4 -1
- package/dist/jsx/helpers/createMediaStyle.js +0 -2
- package/dist/jsx/helpers/createPropMapper.js +7 -12
- package/dist/jsx/helpers/extendStaticConfig.js +5 -6
- package/dist/jsx/helpers/fixNativeShadow.native.js +2 -2
- package/dist/jsx/helpers/getSplitStyles.js +65 -35
- package/dist/jsx/helpers/getStylesAtomic.js +15 -3
- package/dist/jsx/helpers/insertStyleRule.js +31 -27
- package/dist/jsx/helpers/themeable.js +4 -3
- package/dist/jsx/helpers/validate.js +17 -5
- package/dist/jsx/hooks/useMedia.js +4 -0
- package/dist/jsx/hooks/useTheme.js +8 -0
- package/dist/jsx/index.js +3 -0
- package/dist/jsx/styled.js +3 -4
- package/dist/jsx/views/Theme.js +7 -4
- package/package.json +6 -6
- package/types/Tamagui.d.ts +14 -1
- package/types/Tamagui.d.ts.map +1 -1
- package/types/ThemeManager.d.ts +3 -3
- package/types/ThemeManager.d.ts.map +1 -1
- package/types/conf.d.ts.map +1 -1
- package/types/createComponent.d.ts +3 -4
- package/types/createComponent.d.ts.map +1 -1
- package/types/createTamagui.d.ts.map +1 -1
- package/types/createTokens.d.ts +8 -0
- package/types/createTokens.d.ts.map +1 -1
- package/types/helpers/addStylesUsingClassname.d.ts.map +1 -1
- package/types/helpers/createMediaStyle.d.ts.map +1 -1
- package/types/helpers/createPropMapper.d.ts +1 -1
- package/types/helpers/createPropMapper.d.ts.map +1 -1
- package/types/helpers/extendStaticConfig.d.ts +2 -2
- package/types/helpers/extendStaticConfig.d.ts.map +1 -1
- package/types/helpers/getSplitStyles.d.ts +2 -1
- package/types/helpers/getSplitStyles.d.ts.map +1 -1
- package/types/helpers/getStylesAtomic.d.ts.map +1 -1
- package/types/helpers/insertStyleRule.d.ts +2 -1
- package/types/helpers/insertStyleRule.d.ts.map +1 -1
- package/types/helpers/themeable.d.ts +3 -1
- package/types/helpers/themeable.d.ts.map +1 -1
- package/types/helpers/validate.d.ts.map +1 -1
- package/types/hooks/useMedia.d.ts +3 -3
- package/types/hooks/useMedia.d.ts.map +1 -1
- package/types/hooks/useTheme.d.ts +1 -1
- package/types/hooks/useTheme.d.ts.map +1 -1
- package/types/index.d.ts +1 -0
- package/types/index.d.ts.map +1 -1
- package/types/styled.d.ts +12 -3
- package/types/styled.d.ts.map +1 -1
- package/types/types.d.ts +43 -25
- package/types/types.d.ts.map +1 -1
- package/types/views/Theme.d.ts +1 -0
- package/types/views/Theme.d.ts.map +1 -1
|
@@ -37,7 +37,7 @@ const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
|
|
|
37
37
|
console.trace("no conf! err");
|
|
38
38
|
return;
|
|
39
39
|
}
|
|
40
|
-
|
|
40
|
+
const fontFamily = props.fontFamily || defaultProps.fontFamily || "$body";
|
|
41
41
|
const variant = variants && variants[key];
|
|
42
42
|
if (variant && value !== void 0) {
|
|
43
43
|
let variantValue = getVariantFunction(variant, key, value);
|
|
@@ -110,8 +110,12 @@ const resolveTokens = /* @__PURE__ */ __name((input, conf, theme, fontFamily, re
|
|
|
110
110
|
}
|
|
111
111
|
return res;
|
|
112
112
|
}, "resolveTokens");
|
|
113
|
+
const fontShorthand = {
|
|
114
|
+
fontSize: "size",
|
|
115
|
+
fontWeight: "weight"
|
|
116
|
+
};
|
|
113
117
|
const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed }, theme, fontFamily = "$body", resolveAs) => {
|
|
114
|
-
var _a, _b, _c
|
|
118
|
+
var _a, _b, _c;
|
|
115
119
|
let valOrVar;
|
|
116
120
|
let hasSet = false;
|
|
117
121
|
const valueName = value[0] === "$" ? value.slice(1) : value;
|
|
@@ -125,19 +129,10 @@ const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed }, theme, fo
|
|
|
125
129
|
hasSet = true;
|
|
126
130
|
break;
|
|
127
131
|
case "fontSize":
|
|
128
|
-
valOrVar = ((_b = tokensParsed.font[fontFamily]) == null ? void 0 : _b.size[value]) || value;
|
|
129
|
-
hasSet = true;
|
|
130
|
-
break;
|
|
131
132
|
case "lineHeight":
|
|
132
|
-
valOrVar = ((_c = tokensParsed.font[fontFamily]) == null ? void 0 : _c.lineHeight[value]) || value;
|
|
133
|
-
hasSet = true;
|
|
134
|
-
break;
|
|
135
133
|
case "letterSpacing":
|
|
136
|
-
valOrVar = ((_d = tokensParsed.font[fontFamily]) == null ? void 0 : _d.letterSpacing[value]) || value;
|
|
137
|
-
hasSet = true;
|
|
138
|
-
break;
|
|
139
134
|
case "fontWeight":
|
|
140
|
-
valOrVar = ((
|
|
135
|
+
valOrVar = ((_c = (_b = tokensParsed.font[fontFamily]) == null ? void 0 : _b[fontShorthand[key] || key]) == null ? void 0 : _c[value]) || value;
|
|
141
136
|
hasSet = true;
|
|
142
137
|
break;
|
|
143
138
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/createPropMapper.ts"],
|
|
4
|
-
"sourcesContent": ["import { getConfig } from '../conf'\nimport { isWeb } from '../constants/platform'\nimport { Variable, isVariable } from '../createVariable'\nimport { StaticConfig, TamaguiInternalConfig } from '../types'\nimport { isObj } from './isObj'\n\nexport type ResolveVariableTypes = 'auto' | 'value' | 'variable' | 'both'\n\n// goes through specificity finding best matching variant function\nfunction getVariantFunction(variant: any, key: string, value: any) {\n if (typeof variant === 'function') {\n return variant\n }\n for (const cat in tokenCategories) {\n if (key in tokenCategories[cat]) {\n const spreadVariant = variant[`...${cat}`]\n if (spreadVariant) {\n return spreadVariant\n }\n }\n }\n let fn: any\n if (typeof value === 'number') {\n fn = variant[':number']\n } else if (typeof value === 'string') {\n fn = variant[':string']\n } else if (value === true || value === false) {\n fn = variant[':boolean']\n }\n fn = fn || variant[value]\n // fallback to size ultimately - could do token level detection\n return fn || variant['...'] || variant['...size']\n}\n\nexport const createPropMapper = (staticConfig: StaticConfig) => {\n const variants = staticConfig.variants || {}\n const defaultProps = staticConfig.defaultProps || {}\n\n return (\n key: string,\n value: any,\n theme: any,\n props: any,\n returnVariablesAs: ResolveVariableTypes = !!props.animation ? 'value' : 'auto',\n avoidDefaultProps = false\n ) => {\n const conf = getConfig()\n if (!conf) {\n console.trace('no conf! err')\n return\n }\n\n // handled here because we need to resolve this off tokens, its the only one-off like this\n
|
|
5
|
-
"mappings": ";;AAAA;AACA;AACA;AAEA;AAKA,4BAA4B,SAAc,KAAa,OAAY;AACjE,MAAI,OAAO,YAAY,YAAY;AACjC,WAAO;AAAA,EACT;AACA,aAAW,OAAO,iBAAiB;AACjC,QAAI,OAAO,gBAAgB,MAAM;AAC/B,YAAM,gBAAgB,QAAQ,MAAM;AACpC,UAAI,eAAe;AACjB,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACA,MAAI;AACJ,MAAI,OAAO,UAAU,UAAU;AAC7B,SAAK,QAAQ;AAAA,EACf,WAAW,OAAO,UAAU,UAAU;AACpC,SAAK,QAAQ;AAAA,EACf,WAAW,UAAU,QAAQ,UAAU,OAAO;AAC5C,SAAK,QAAQ;AAAA,EACf;AACA,OAAK,MAAM,QAAQ;AAEnB,SAAO,MAAM,QAAQ,UAAU,QAAQ;AACzC;AAvBS;AAyBF,MAAM,mBAAmB,wBAAC,
|
|
4
|
+
"sourcesContent": ["import { getConfig } from '../conf'\nimport { isWeb } from '../constants/platform'\nimport { Variable, isVariable } from '../createVariable'\nimport { StaticConfig, TamaguiInternalConfig } from '../types'\nimport { isObj } from './isObj'\n\nexport type ResolveVariableTypes = 'auto' | 'value' | 'variable' | 'both'\n\n// goes through specificity finding best matching variant function\nfunction getVariantFunction(variant: any, key: string, value: any) {\n if (typeof variant === 'function') {\n return variant\n }\n for (const cat in tokenCategories) {\n if (key in tokenCategories[cat]) {\n const spreadVariant = variant[`...${cat}`]\n if (spreadVariant) {\n return spreadVariant\n }\n }\n }\n let fn: any\n if (typeof value === 'number') {\n fn = variant[':number']\n } else if (typeof value === 'string') {\n fn = variant[':string']\n } else if (value === true || value === false) {\n fn = variant[':boolean']\n }\n fn = fn || variant[value]\n // fallback to size ultimately - could do token level detection\n return fn || variant['...'] || variant['...size']\n}\n\nexport const createPropMapper = (staticConfig: Partial<StaticConfig>) => {\n const variants = staticConfig.variants || {}\n const defaultProps = staticConfig.defaultProps || {}\n\n return (\n key: string,\n value: any,\n theme: any,\n props: any,\n returnVariablesAs: ResolveVariableTypes = !!props.animation ? 'value' : 'auto',\n avoidDefaultProps = false\n ) => {\n const conf = getConfig()\n if (!conf) {\n console.trace('no conf! err')\n return\n }\n\n // handled here because we need to resolve this off tokens, its the only one-off like this\n const fontFamily = props.fontFamily || defaultProps.fontFamily || '$body'\n const variant = variants && variants[key]\n\n if (variant && value !== undefined) {\n let variantValue = getVariantFunction(variant, key, value)\n\n if (variantValue) {\n if (typeof variantValue === 'function') {\n variantValue = variantValue(value, {\n tokens: conf.tokensParsed,\n theme,\n // TODO do this in splitstlye\n // we avoid passing in default props for media queries because that would confuse things like SizableText.size:\n props: avoidDefaultProps\n ? props\n : new Proxy(props, {\n get(target, key) {\n if (Reflect.has(target, key)) {\n return Reflect.get(target, key)\n }\n // these props may be extracted into classNames, but we still want to access them\n // at runtime, so we proxy back to defaultProps but don't pass them\n if (defaultProps) {\n return Reflect.get(defaultProps, key)\n }\n },\n }),\n })\n }\n\n if (isObj(variantValue)) {\n variantValue = resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs)\n }\n\n return variantValue\n }\n }\n\n let shouldReturn = false\n\n // handle shorthands\n if (conf.shorthands[key]) {\n shouldReturn = true\n key = conf.shorthands[key]\n }\n\n if (value) {\n shouldReturn = true\n if (value[0] === '$') {\n value = getToken(key, value, conf, theme, fontFamily, returnVariablesAs)\n } else if (isVariable(value)) {\n value = getVariableValue(value, returnVariablesAs)\n }\n }\n\n if (shouldReturn) {\n return {\n [key]: value,\n }\n }\n }\n}\n\nconst resolveTokens = (\n input: Object,\n conf: TamaguiInternalConfig,\n theme: any,\n fontFamily: any,\n resolveAs?: ResolveVariableTypes\n) => {\n let res = {}\n for (const rKey in input) {\n const fKey = conf.shorthands[rKey] || rKey\n const val = input[rKey]\n if (isVariable(val)) {\n res[fKey] =\n resolveAs === 'variable' ? val : !isWeb || resolveAs === 'value' ? val.val : val.variable\n } else if (typeof val === 'string') {\n const fVal = val[0] === '$' ? getToken(fKey, val, conf, theme, fontFamily, resolveAs) : val\n res[fKey] = fVal\n } else {\n if (isObj(val)) {\n // for things like shadowOffset, hoverStyle which is a sub-object\n res[fKey] = resolveTokens(val, conf, theme, fontFamily, resolveAs)\n } else {\n // nullish values cant be tokens so need no exrta parsing\n res[fKey] = input[fKey]\n }\n }\n if (process.env.NODE_ENV === 'development') {\n if (res[fKey]?.[0] === '$') {\n console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, fKey, res[fKey])\n }\n }\n }\n return res\n}\n\nconst fontShorthand = {\n fontSize: 'size',\n fontWeight: 'weight',\n}\n\nconst getToken = (\n key: string,\n value: string,\n { tokensParsed }: TamaguiInternalConfig,\n theme: any,\n fontFamily: string | undefined = '$body',\n resolveAs?: ResolveVariableTypes\n) => {\n let valOrVar: any\n let hasSet = false\n const valueName = value[0] === '$' ? value.slice(1) : value\n if (valueName in theme) {\n valOrVar = theme[valueName]\n hasSet = true\n } else {\n switch (key) {\n case 'fontFamily':\n valOrVar = tokensParsed.font[value]?.family || value\n hasSet = true\n break\n case 'fontSize':\n case 'lineHeight':\n case 'letterSpacing':\n case 'fontWeight':\n valOrVar = tokensParsed.font[fontFamily]?.[fontShorthand[key] || key]?.[value] || value\n hasSet = true\n break\n }\n for (const cat in tokenCategories) {\n if (key in tokenCategories[cat]) {\n const res = tokensParsed[cat][value]\n if (res) {\n valOrVar = res\n hasSet = true\n }\n }\n }\n if (!hasSet) {\n const spaceVar = tokensParsed.space[value]\n if (spaceVar) {\n valOrVar = spaceVar\n hasSet = true\n }\n }\n }\n if (hasSet) {\n return getVariableValue(valOrVar, resolveAs)\n }\n if (process.env.NODE_ENV === 'development') {\n if (value && value[0] === '$') {\n console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, value)\n return null\n }\n }\n return value\n}\n\nfunction getVariableValue(valOrVar: Variable | any, resolveAs: ResolveVariableTypes = 'auto') {\n if (isVariable(valOrVar)) {\n if (resolveAs === 'variable') {\n return valOrVar\n }\n if (!isWeb || resolveAs === 'value') {\n return valOrVar.val\n }\n return valOrVar.variable\n }\n return valOrVar\n}\n\n// just specificy the least costly, all else go to `space` (most keys - we can exclude)\nconst tokenCategories = {\n radius: {\n borderRadius: true,\n },\n size: {\n width: true,\n height: true,\n minWidth: true,\n minHeight: true,\n maxWidth: true,\n maxHeight: true,\n },\n color: {\n color: true,\n backgroundColor: true,\n borderColor: true,\n borderBottomColor: true,\n borderTopColor: true,\n borderLeftColor: true,\n borderRightColor: true,\n },\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,12 +2,9 @@ var __defProp = Object.defineProperty;
|
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
3
|
import { stylePropsView } from "@tamagui/helpers";
|
|
4
4
|
import { createPropMapper } from "./createPropMapper";
|
|
5
|
-
function extendStaticConfig(
|
|
5
|
+
function extendStaticConfig(config, parent) {
|
|
6
6
|
var _a;
|
|
7
|
-
if (!parent) {
|
|
8
|
-
throw new Error("no parent");
|
|
9
|
-
}
|
|
10
|
-
if (!("staticConfig" in parent)) {
|
|
7
|
+
if (!parent || !("staticConfig" in parent)) {
|
|
11
8
|
return parseStaticConfig(config);
|
|
12
9
|
}
|
|
13
10
|
const variants = {
|
|
@@ -40,7 +37,9 @@ function extendStaticConfig(parent, config = {}) {
|
|
|
40
37
|
} : parent.staticConfig.validStyles || stylePropsView,
|
|
41
38
|
defaultProps: {
|
|
42
39
|
...parent.staticConfig.defaultProps,
|
|
43
|
-
...
|
|
40
|
+
...parent.staticConfig.defaultVariants,
|
|
41
|
+
...config.defaultProps,
|
|
42
|
+
...config.defaultVariants
|
|
44
43
|
}
|
|
45
44
|
});
|
|
46
45
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/extendStaticConfig.ts"],
|
|
4
|
-
"sourcesContent": ["import { stylePropsView } from '@tamagui/helpers'\n\nimport { StaticConfig, StaticConfigParsed, StylableComponent } from '../types'\nimport { createPropMapper } from './createPropMapper'\n\nexport function extendStaticConfig(
|
|
5
|
-
"mappings": ";;AAAA;AAGA;AAEO,
|
|
4
|
+
"sourcesContent": ["import { stylePropsView } from '@tamagui/helpers'\n\nimport { StaticConfig, StaticConfigParsed, StylableComponent } from '../types'\nimport { createPropMapper } from './createPropMapper'\n\nexport function extendStaticConfig(config: Partial<StaticConfig>, parent?: StylableComponent) {\n if (!parent || !('staticConfig' in parent)) {\n return parseStaticConfig(config)\n }\n\n const variants = {\n ...parent.staticConfig.variants,\n }\n\n // merge variants... can we type this?\n if (config.variants) {\n for (const key in config.variants) {\n if (variants[key]) {\n variants[key] = {\n ...variants[key],\n ...config.variants[key],\n }\n } else {\n variants[key] = config.variants[key]\n }\n }\n }\n\n return parseStaticConfig({\n ...parent.staticConfig,\n ...config,\n variants,\n isZStack: config.isZStack || parent.staticConfig.isZStack,\n isText: config.isText || parent.staticConfig.isText || false,\n isInput: config.isInput || parent.staticConfig.isInput || false,\n neverFlatten: config.neverFlatten || parent.staticConfig.neverFlatten,\n ensureOverriddenProp: config.ensureOverriddenProp ?? parent.staticConfig.ensureOverriddenProp,\n validStyles: config.validStyles\n ? {\n ...parent.staticConfig.validStyles,\n ...config.validStyles,\n }\n : parent.staticConfig.validStyles || stylePropsView,\n defaultProps: {\n ...parent.staticConfig.defaultProps,\n ...parent.staticConfig.defaultVariants,\n ...config.defaultProps,\n ...config.defaultVariants,\n },\n })\n}\n\nexport const parseStaticConfig = (config: Partial<StaticConfig>): StaticConfigParsed => {\n return {\n ...config,\n parsed: true,\n propMapper: createPropMapper(config),\n }\n}\n"],
|
|
5
|
+
"mappings": ";;AAAA;AAGA;AAEO,4BAA4B,QAA+B,QAA4B;AAL9F;AAME,MAAI,CAAC,UAAU,CAAE,mBAAkB,SAAS;AAC1C,WAAO,kBAAkB,MAAM;AAAA,EACjC;AAEA,QAAM,WAAW;AAAA,OACZ,OAAO,aAAa;AAAA,EACzB;AAGA,MAAI,OAAO,UAAU;AACnB,eAAW,OAAO,OAAO,UAAU;AACjC,UAAI,SAAS,MAAM;AACjB,iBAAS,OAAO;AAAA,aACX,SAAS;AAAA,aACT,OAAO,SAAS;AAAA,QACrB;AAAA,MACF,OAAO;AACL,iBAAS,OAAO,OAAO,SAAS;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AAEA,SAAO,kBAAkB;AAAA,OACpB,OAAO;AAAA,OACP;AAAA,IACH;AAAA,IACA,UAAU,OAAO,YAAY,OAAO,aAAa;AAAA,IACjD,QAAQ,OAAO,UAAU,OAAO,aAAa,UAAU;AAAA,IACvD,SAAS,OAAO,WAAW,OAAO,aAAa,WAAW;AAAA,IAC1D,cAAc,OAAO,gBAAgB,OAAO,aAAa;AAAA,IACzD,sBAAsB,aAAO,yBAAP,YAA+B,OAAO,aAAa;AAAA,IACzE,aAAa,OAAO,cAChB;AAAA,SACK,OAAO,aAAa;AAAA,SACpB,OAAO;AAAA,IACZ,IACA,OAAO,aAAa,eAAe;AAAA,IACvC,cAAc;AAAA,SACT,OAAO,aAAa;AAAA,SACpB,OAAO,aAAa;AAAA,SACpB,OAAO;AAAA,SACP,OAAO;AAAA,IACZ;AAAA,EACF,CAAC;AACH;AA7CgB;AA+CT,MAAM,oBAAoB,wBAAC,WAAsD;AACtF,SAAO;AAAA,OACF;AAAA,IACH,QAAQ;AAAA,IACR,YAAY,iBAAiB,MAAM;AAAA,EACrC;AACF,GANiC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,8 +18,8 @@ function fixNativeShadow(props) {
|
|
|
18
18
|
if ((c[0] === "r" || c[0] === "h") && c[3] === "a") {
|
|
19
19
|
const [_, type, _1, _2, _3, a] = c.match(matchRgbaHsla) || [];
|
|
20
20
|
if (typeof a !== "string") {
|
|
21
|
-
console.
|
|
22
|
-
|
|
21
|
+
console.trace("invalid", c, type);
|
|
22
|
+
throw new Error(`invalid style`);
|
|
23
23
|
}
|
|
24
24
|
props.shadowColor = `${type.replace("a", "")}(${_1},${_2},${_3})`;
|
|
25
25
|
props.shadowOpacity = +a;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/fixNativeShadow.native.tsx"],
|
|
4
|
-
"sourcesContent": ["const matchRgbaHsla =\n /(rgba|hsla)\\(\\s*([\\d\\.]{1,}%?)\\s*,\\s*([\\d\\.]{1,}%?)\\s*,\\s*([\\d\\.]{1,}%?)\\s*,\\s*([\\d\\.]{1,})\\s*\\)$/\n\nexport function fixNativeShadow(props: any) {\n if (!props.shadowColor) {\n return\n }\n if (!props.shadowOffset) {\n // fixes some broken shadows\n props.shadowOffset = {\n width: 0,\n height: 0,\n }\n }\n if ('shadowOpacity' in props) {\n return\n }\n const c = `${props.shadowColor}`\n // react native has issues sometimes with rgba()\n // supports rgba + hsla\n if ((c[0] === 'r' || c[0] === 'h') && c[3] === 'a') {\n const [_, type, _1, _2, _3, a] = c.match(matchRgbaHsla) || []\n if (typeof a !== 'string') {\n console.
|
|
5
|
-
"mappings": ";;AAAA,MAAM,gBACJ;AAEK,yBAAyB,OAAY;AAC1C,MAAI,CAAC,MAAM,aAAa;AACtB;AAAA,EACF;AACA,MAAI,CAAC,MAAM,cAAc;AAEvB,UAAM,eAAe;AAAA,MACnB,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,EACF;AACA,MAAI,mBAAmB,OAAO;AAC5B;AAAA,EACF;AACA,QAAM,IAAI,GAAG,MAAM;AAGnB,MAAK,GAAE,OAAO,OAAO,EAAE,OAAO,QAAQ,EAAE,OAAO,KAAK;AAClD,UAAM,CAAC,GAAG,MAAM,IAAI,IAAI,IAAI,KAAK,EAAE,MAAM,aAAa,KAAK,CAAC;AAC5D,QAAI,OAAO,MAAM,UAAU;AACzB,cAAQ,
|
|
4
|
+
"sourcesContent": ["const matchRgbaHsla =\n /(rgba|hsla)\\(\\s*([\\d\\.]{1,}%?)\\s*,\\s*([\\d\\.]{1,}%?)\\s*,\\s*([\\d\\.]{1,}%?)\\s*,\\s*([\\d\\.]{1,})\\s*\\)$/\n\nexport function fixNativeShadow(props: any) {\n if (!props.shadowColor) {\n return\n }\n if (!props.shadowOffset) {\n // fixes some broken shadows\n props.shadowOffset = {\n width: 0,\n height: 0,\n }\n }\n if ('shadowOpacity' in props) {\n return\n }\n const c = `${props.shadowColor}`\n // react native has issues sometimes with rgba()\n // supports rgba + hsla\n if ((c[0] === 'r' || c[0] === 'h') && c[3] === 'a') {\n const [_, type, _1, _2, _3, a] = c.match(matchRgbaHsla) || []\n if (typeof a !== 'string') {\n console.trace('invalid', c, type)\n throw new Error(`invalid style`)\n }\n props.shadowColor = `${type.replace('a', '')}(${_1},${_2},${_3})`\n props.shadowOpacity = +a\n } else {\n props.shadowOpacity = 1\n }\n}\n"],
|
|
5
|
+
"mappings": ";;AAAA,MAAM,gBACJ;AAEK,yBAAyB,OAAY;AAC1C,MAAI,CAAC,MAAM,aAAa;AACtB;AAAA,EACF;AACA,MAAI,CAAC,MAAM,cAAc;AAEvB,UAAM,eAAe;AAAA,MACnB,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,EACF;AACA,MAAI,mBAAmB,OAAO;AAC5B;AAAA,EACF;AACA,QAAM,IAAI,GAAG,MAAM;AAGnB,MAAK,GAAE,OAAO,OAAO,EAAE,OAAO,QAAQ,EAAE,OAAO,KAAK;AAClD,UAAM,CAAC,GAAG,MAAM,IAAI,IAAI,IAAI,KAAK,EAAE,MAAM,aAAa,KAAK,CAAC;AAC5D,QAAI,OAAO,MAAM,UAAU;AACzB,cAAQ,MAAM,WAAW,GAAG,IAAI;AAChC,YAAM,IAAI,MAAM,eAAe;AAAA,IACjC;AACA,UAAM,cAAc,GAAG,KAAK,QAAQ,KAAK,EAAE,KAAK,MAAM,MAAM;AAC5D,UAAM,gBAAgB,CAAC;AAAA,EACzB,OAAO;AACL,UAAM,gBAAgB;AAAA,EACxB;AACF;AA5BgB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -7,33 +7,25 @@ import {
|
|
|
7
7
|
validPseudoKeys,
|
|
8
8
|
validStyles
|
|
9
9
|
} from "@tamagui/helpers";
|
|
10
|
+
import { getConfig } from "../conf";
|
|
10
11
|
import { isWeb } from "../constants/platform";
|
|
11
12
|
import { mediaQueryConfig, mediaState } from "../hooks/useMedia";
|
|
12
13
|
import { createMediaStyle } from "./createMediaStyle";
|
|
13
14
|
import { fixNativeShadow } from "./fixNativeShadow";
|
|
14
15
|
import { getStylesAtomic } from "./getStylesAtomic";
|
|
15
16
|
import { insertStyleRule, insertedTransforms, updateInserted } from "./insertStyleRule";
|
|
16
|
-
const
|
|
17
|
+
const skipProps = {
|
|
17
18
|
animation: true,
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
key: true,
|
|
21
|
-
ref: true
|
|
19
|
+
animateOnly: true,
|
|
20
|
+
debug: true
|
|
22
21
|
};
|
|
23
|
-
|
|
24
|
-
var _a, _b;
|
|
25
|
-
if (typeof style.flex === "number") {
|
|
26
|
-
const val = style.flex;
|
|
27
|
-
delete style.flex;
|
|
28
|
-
style.flexGrow = (_a = style.flexGrow) != null ? _a : val;
|
|
29
|
-
style.flexShrink = (_b = style.flexShrink) != null ? _b : 1;
|
|
30
|
-
}
|
|
31
|
-
if (!isWeb) {
|
|
32
|
-
fixNativeShadow(style);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
__name(normalizeStyleObject, "normalizeStyleObject");
|
|
22
|
+
let conf;
|
|
36
23
|
const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state, defaultClassNames) => {
|
|
24
|
+
var _a;
|
|
25
|
+
if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
|
|
26
|
+
console.log(" \xBB getSplitStyles", { props, state, defaultClassNames });
|
|
27
|
+
}
|
|
28
|
+
conf = conf || getConfig();
|
|
37
29
|
const validStyleProps = staticConfig.isText ? stylePropsText : validStyles;
|
|
38
30
|
const viewProps = {};
|
|
39
31
|
const style = {};
|
|
@@ -50,19 +42,32 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
50
42
|
if (val.startsWith("_transform-")) {
|
|
51
43
|
const isMediaOrPseudo = key !== "transform";
|
|
52
44
|
const isMedia = isMediaOrPseudo && key[11] === "_";
|
|
53
|
-
const isPsuedo = isMediaOrPseudo && key[11] === "0";
|
|
45
|
+
const isPsuedo = isMediaOrPseudo && key[11] === "0" || key.endsWith("Style");
|
|
54
46
|
const namespace = isMedia ? key.split("_")[2] : isPsuedo ? key.split("-")[1] : "transform";
|
|
55
47
|
let transform = insertedTransforms[val];
|
|
56
48
|
if (!transform) {
|
|
57
49
|
updateInserted();
|
|
50
|
+
transform = insertedTransforms[val];
|
|
51
|
+
}
|
|
52
|
+
if (!transform) {
|
|
53
|
+
if (isWeb && val[0] !== "_") {
|
|
54
|
+
transform = val;
|
|
55
|
+
} else {
|
|
56
|
+
console.log("?", key, val);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
|
|
60
|
+
console.log(" \xBB getSplitStyles mergeClassName transform", { key, val, namespace, transform, insertedTransforms });
|
|
58
61
|
}
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
62
|
+
if (process.env.NODE_ENV === "development") {
|
|
63
|
+
if (!transform) {
|
|
64
|
+
console.log("NO TRANSFORM?", { key, val, transform });
|
|
65
|
+
}
|
|
63
66
|
}
|
|
64
67
|
transforms[namespace] = transforms[namespace] || ["", ""];
|
|
65
|
-
|
|
68
|
+
const identifier = val.replace("_transform", "");
|
|
69
|
+
console.warn("?bug2", key, val, transform, insertedTransforms[val]);
|
|
70
|
+
transforms[namespace][0] += identifier;
|
|
66
71
|
transforms[namespace][1] += transform;
|
|
67
72
|
} else {
|
|
68
73
|
classNames[key] = val;
|
|
@@ -73,6 +78,9 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
73
78
|
if (!cur)
|
|
74
79
|
return;
|
|
75
80
|
normalizeStyleObject(cur);
|
|
81
|
+
if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
|
|
82
|
+
console.log(" \xBB getSplitStyles push", cur, state);
|
|
83
|
+
}
|
|
76
84
|
if (isWeb && !state.noClassNames) {
|
|
77
85
|
const atomic = getStylesAtomic(cur);
|
|
78
86
|
for (const atomicStyle of atomic) {
|
|
@@ -97,11 +105,12 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
97
105
|
}
|
|
98
106
|
__name(push, "push");
|
|
99
107
|
for (const keyInit in props) {
|
|
100
|
-
|
|
101
|
-
if (skipKeys[keyInit]) {
|
|
102
|
-
viewProps[keyInit] = valInit;
|
|
108
|
+
if (skipProps[keyInit]) {
|
|
103
109
|
continue;
|
|
104
110
|
}
|
|
111
|
+
const valInit = props[keyInit];
|
|
112
|
+
let isMedia = keyInit[0] === "$";
|
|
113
|
+
let isPseudo = validPseudoKeys[keyInit];
|
|
105
114
|
if (keyInit === "className" || validStyleProps[keyInit] && valInit && valInit[0] === "_") {
|
|
106
115
|
push();
|
|
107
116
|
mergeClassName(keyInit, valInit);
|
|
@@ -112,12 +121,14 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
112
121
|
}
|
|
113
122
|
continue;
|
|
114
123
|
}
|
|
115
|
-
|
|
116
|
-
|
|
124
|
+
if (!isMedia && !isPseudo && !((_a = staticConfig.variants) == null ? void 0 : _a[keyInit]) && !validStyleProps[keyInit] && !conf.shorthands[keyInit]) {
|
|
125
|
+
viewProps[keyInit] = valInit;
|
|
126
|
+
continue;
|
|
127
|
+
}
|
|
117
128
|
const out = isMedia || isPseudo ? true : staticConfig.propMapper(keyInit, valInit, theme, state.fallbackProps || props, state.resolveVariablesAs);
|
|
118
129
|
const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out);
|
|
119
130
|
if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
|
|
120
|
-
console.log("
|
|
131
|
+
console.log(" \xBB getSplitStyles", keyInit, expanded);
|
|
121
132
|
}
|
|
122
133
|
for (const [key, val] of expanded) {
|
|
123
134
|
if (val === void 0) {
|
|
@@ -151,16 +162,20 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
151
162
|
}
|
|
152
163
|
if (isMedia) {
|
|
153
164
|
const mediaKey = key;
|
|
154
|
-
|
|
165
|
+
const mediaKeyShort = mediaKey.slice(1);
|
|
166
|
+
if (!mediaQueryConfig[mediaKeyShort]) {
|
|
155
167
|
viewProps[key] = val;
|
|
156
168
|
continue;
|
|
157
169
|
}
|
|
158
|
-
const mediaStyle = getSubStyle(val, staticConfig, theme, props, state
|
|
170
|
+
const mediaStyle = getSubStyle(val, staticConfig, theme, props, state);
|
|
171
|
+
if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
|
|
172
|
+
console.log(" \xBB getSplitStyles mediaStyle", mediaKey, mediaStyle, props);
|
|
173
|
+
}
|
|
159
174
|
const shouldDoClasses = isWeb && !state.noClassNames;
|
|
160
175
|
if (shouldDoClasses) {
|
|
161
176
|
const mediaStyles = getStylesAtomic(mediaStyle);
|
|
162
177
|
for (const style2 of mediaStyles) {
|
|
163
|
-
const out2 = createMediaStyle(style2,
|
|
178
|
+
const out2 = createMediaStyle(style2, mediaKeyShort, mediaQueryConfig);
|
|
164
179
|
mergeClassName(`${out2.identifier}-${mediaKey}`, out2.identifier);
|
|
165
180
|
insertStyleRule(out2.identifier, out2.styleRule);
|
|
166
181
|
}
|
|
@@ -204,13 +219,14 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
204
219
|
const identifier = `_transform${hash}`;
|
|
205
220
|
if (!insertedTransforms[identifier]) {
|
|
206
221
|
const rule = `.${identifier} { transform: ${val}; }`;
|
|
222
|
+
console.log("insert", rule);
|
|
207
223
|
insertStyleRule(identifier, rule);
|
|
208
224
|
}
|
|
209
225
|
classNames[namespace] = identifier;
|
|
210
226
|
}
|
|
211
227
|
}
|
|
212
228
|
if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
|
|
213
|
-
console.log("out", { style, pseudos, medias, classNames, viewProps });
|
|
229
|
+
console.log(" \xBB getSplitStyles out", { style, pseudos, medias, classNames, viewProps, state });
|
|
214
230
|
}
|
|
215
231
|
return {
|
|
216
232
|
viewProps,
|
|
@@ -237,8 +253,22 @@ const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props,
|
|
|
237
253
|
normalizeStyleObject(styleOut);
|
|
238
254
|
return styleOut;
|
|
239
255
|
}, "getSubStyle");
|
|
256
|
+
function normalizeStyleObject(style) {
|
|
257
|
+
var _a, _b;
|
|
258
|
+
if (typeof style.flex === "number") {
|
|
259
|
+
const val = style.flex;
|
|
260
|
+
delete style.flex;
|
|
261
|
+
style.flexGrow = (_a = style.flexGrow) != null ? _a : val;
|
|
262
|
+
style.flexShrink = (_b = style.flexShrink) != null ? _b : 1;
|
|
263
|
+
}
|
|
264
|
+
if (!isWeb) {
|
|
265
|
+
fixNativeShadow(style);
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
__name(normalizeStyleObject, "normalizeStyleObject");
|
|
240
269
|
export {
|
|
241
270
|
getSplitStyles,
|
|
242
|
-
getSubStyle
|
|
271
|
+
getSubStyle,
|
|
272
|
+
normalizeStyleObject
|
|
243
273
|
};
|
|
244
274
|
//# sourceMappingURL=getSplitStyles.js.map
|
|
@@ -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'\nimport { ViewStyle } from 'react-native'\n\nimport { isWeb } 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 ThemeObject,\n} from '../types'\nimport { createMediaStyle } from './createMediaStyle'\nimport { ResolveVariableTypes } from './createPropMapper'\nimport { fixNativeShadow } from './fixNativeShadow'\nimport { ViewStyleWithPseudos, getStylesAtomic } from './getStylesAtomic'\nimport { insertStyleRule, insertedTransforms, updateInserted } from './insertStyleRule'\n\nexport type SplitStyles = ReturnType<typeof getSplitStyles>\n\nconst skipKeys = {\n // could put events in here\n animation: true,\n animated: true,\n children: true,\n key: true,\n ref: true,\n}\n\nexport type ClassNamesObject = Record<string, string>\n\nexport type SplitStyleResult = ReturnType<typeof getSplitStyles>\n\nfunction normalizeStyleObject(style: any) {\n // fix flex to match web\n // see spec for flex shorthand https://developer.mozilla.org/en-US/docs/Web/CSS/flex\n if (typeof style.flex === 'number') {\n const val = style.flex\n delete style.flex\n style.flexGrow = style.flexGrow ?? val\n style.flexShrink = style.flexShrink ?? 1\n }\n\n if (!isWeb) {\n fixNativeShadow(style)\n }\n}\n\ntype TransformNamespaceKey = 'transform' | PsuedoPropKeys | MediaQueryKey\n\n// TODO can make a few of these objects lazy if profiling seems slow\n\nexport const getSplitStyles = (\n props: { [key: string]: any },\n staticConfig: StaticConfigParsed,\n theme: ThemeObject,\n state: SplitStyleState,\n defaultClassNames?: ClassNamesObject | null\n) => {\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 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) return\n if (val.startsWith('_transform-')) {\n const isMediaOrPseudo = key !== 'transform'\n const isMedia = isMediaOrPseudo && key[11] === '_'\n const isPsuedo = isMediaOrPseudo && key[11] === '0'\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 (!transform) {\n // HMR or loaded a new chunk\n updateInserted()\n }\n transform = insertedTransforms[val]\n if (!transform || transform === 'undefined') {\n console.log('NO TRANSFORM', { key, val, transform })\n return\n }\n transforms[namespace] = transforms[namespace] || ['', '']\n transforms[namespace][0] += val.replace('_transform', '')\n transforms[namespace][1] += transform\n } else {\n classNames[key] = val\n }\n }\n\n function push() {\n if (!cur) return\n normalizeStyleObject(cur)\n\n if (isWeb && !state.noClassNames) {\n const atomic = getStylesAtomic(cur)\n for (const atomicStyle of atomic) {\n if (!state.noClassNames) {\n mergeClassName(atomicStyle.property, atomicStyle.identifier)\n insertStyleRule(atomicStyle.identifier, atomicStyle.rules[0])\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 (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 const valInit = props[keyInit]\n\n if (skipKeys[keyInit]) {\n viewProps[keyInit] = valInit\n continue\n }\n\n if (\n // isPropClassName\n keyInit === 'className' ||\n // isExtractedClassName\n (validStyleProps[keyInit] && valInit && valInit[0] === '_')\n ) {\n push()\n mergeClassName(keyInit, valInit)\n if (cur) {\n if (cur[keyInit]) console.warn('just want to see how used')\n delete cur[keyInit]\n }\n continue\n }\n\n let isMedia = keyInit[0] === '$'\n let isPseudo = validPseudoKeys[keyInit]\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('split style', 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 mergeClassName(`${style.property}-${key}`, style.identifier)\n insertStyleRule(style.identifier, style.rules[0])\n }\n }\n continue\n }\n\n // media\n if (isMedia) {\n const mediaKey = key\n\n if (!mediaQueryConfig[mediaKey.slice(1)]) {\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, true)\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, mediaKey.slice(1), mediaQueryConfig)\n mergeClassName(`${out.identifier}-${mediaKey}`, out.identifier)\n insertStyleRule(out.identifier, out.styleRule)\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 // TODO\n if (key === 'style' || key.startsWith('_style')) {\n push()\n Object.assign(style, val)\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 (key !== 'animation' && key !== 'debug') {\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 (!insertedTransforms[identifier]) {\n const rule = `.${identifier} { transform: ${val}; }`\n insertStyleRule(identifier, rule)\n }\n classNames[namespace] = identifier\n }\n }\n\n if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n console.log('out', { style, pseudos, medias, classNames, viewProps })\n }\n\n return {\n viewProps,\n style,\n medias,\n pseudos,\n classNames,\n }\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"],
|
|
5
|
-
"mappings": ";;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;AACA;
|
|
4
|
+
"sourcesContent": ["import {\n mergeTransform,\n stylePropsText,\n stylePropsTransform,\n validPseudoKeys,\n validStyles,\n} from '@tamagui/helpers'\nimport { ViewStyle } from 'react-native'\n\nimport { getConfig } from '../conf'\nimport { isWeb } 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 { insertStyleRule, insertedTransforms, updateInserted } 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\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\nexport const getSplitStyles = (\n props: { [key: string]: any },\n staticConfig: StaticConfigParsed,\n theme: ThemeObject,\n state: SplitStyleState,\n defaultClassNames?: any\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 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) return\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 (!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 // todo?\n console.log('?', key, val)\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.log('NO TRANSFORM?', { key, val, transform })\n }\n }\n transforms[namespace] = transforms[namespace] || ['', '']\n const identifier = val.replace('_transform', '')\n console.warn('?bug2', key, val, transform, insertedTransforms[val])\n transforms[namespace][0] += identifier\n transforms[namespace][1] += transform\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 mergeClassName(atomicStyle.property, atomicStyle.identifier)\n insertStyleRule(atomicStyle.identifier, atomicStyle.rules[0])\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 (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\n const valInit = props[keyInit]\n\n let isMedia = keyInit[0] === '$'\n let isPseudo = validPseudoKeys[keyInit]\n\n if (keyInit === 'className' || (validStyleProps[keyInit] && valInit && valInit[0] === '_')) {\n push()\n mergeClassName(keyInit, valInit)\n if (cur) {\n if (cur[keyInit]) console.warn('just want to see how used')\n delete cur[keyInit]\n }\n continue\n }\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 mergeClassName(`${style.property}-${key}`, style.identifier)\n insertStyleRule(style.identifier, style.rules[0])\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 mergeClassName(`${out.identifier}-${mediaKey}`, out.identifier)\n insertStyleRule(out.identifier, out.styleRule)\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 // TODO\n if (key === 'style' || key.startsWith('_style')) {\n push()\n Object.assign(style, val)\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 (key !== 'animation' && key !== 'debug') {\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 (!insertedTransforms[identifier]) {\n const rule = `.${identifier} { transform: ${val}; }`\n console.log('insert', rule)\n insertStyleRule(identifier, rule)\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 }\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 // fix flex to match web\n // see spec for flex shorthand https://developer.mozilla.org/en-US/docs/Web/CSS/flex\n if (typeof style.flex === 'number') {\n const val = style.flex\n delete style.flex\n style.flexGrow = style.flexGrow ?? val\n style.flexShrink = style.flexShrink ?? 1\n }\n\n if (!isWeb) {\n fixNativeShadow(style)\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,6 +5,7 @@ import {
|
|
|
5
5
|
mergeTransform,
|
|
6
6
|
stylePropsTransform
|
|
7
7
|
} from "@tamagui/helpers";
|
|
8
|
+
import { getConfig } from "../conf";
|
|
8
9
|
import { rnw } from "../constants/rnw";
|
|
9
10
|
import { isVariable } from "../createVariable";
|
|
10
11
|
function getStylesAtomic(stylesIn, options = {}) {
|
|
@@ -33,6 +34,7 @@ __name(getStylesAtomic, "getStylesAtomic");
|
|
|
33
34
|
const generateAtomicStyles = /* @__PURE__ */ __name((style) => {
|
|
34
35
|
return rnw.atomic(rnw.createCompileableStyle(rnw.createReactDOMStyle(style)));
|
|
35
36
|
}, "generateAtomicStyles");
|
|
37
|
+
let reversedShorthands = null;
|
|
36
38
|
function getAtomicStyle(style, pseudo, options) {
|
|
37
39
|
var _a;
|
|
38
40
|
if (style == null || typeof style !== "object") {
|
|
@@ -56,16 +58,26 @@ function getAtomicStyle(style, pseudo, options) {
|
|
|
56
58
|
...out[key],
|
|
57
59
|
transformProperty
|
|
58
60
|
};
|
|
59
|
-
console.log("got", JSON.stringify({ t, tKey, out, key, atomicStyles }, null, 2));
|
|
60
61
|
}
|
|
61
62
|
} else {
|
|
62
63
|
atomicStyles = generateAtomicStyles(style);
|
|
63
64
|
}
|
|
65
|
+
if (!reversedShorthands) {
|
|
66
|
+
reversedShorthands = {};
|
|
67
|
+
const conf = getConfig();
|
|
68
|
+
if (conf.shorthands) {
|
|
69
|
+
for (const key in conf.shorthands) {
|
|
70
|
+
reversedShorthands[conf.shorthands[key]] = key;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
64
74
|
return Object.keys(atomicStyles).map((key) => {
|
|
65
75
|
const val = atomicStyles[key];
|
|
66
|
-
const [_,
|
|
76
|
+
const [_, a, b] = val.identifier.split("-");
|
|
77
|
+
const hash = b || a;
|
|
67
78
|
const psuedoPrefix = pseudo ? `0${pseudo.name}-` : "";
|
|
68
|
-
const
|
|
79
|
+
const shortProp = reversedShorthands[val.property] || val.property;
|
|
80
|
+
const identifier = `_${shortProp}-${psuedoPrefix}${hash}`;
|
|
69
81
|
const className = `.${identifier}`;
|
|
70
82
|
const rules = val.rules.map((rule) => {
|
|
71
83
|
if (pseudo) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/getStylesAtomic.ts"],
|
|
4
|
-
"sourcesContent": ["import {\n StyleObject,\n invertMapTransformKeys,\n mergeTransform,\n stylePropsTransform,\n} from '@tamagui/helpers'\nimport { ViewStyle } from 'react-native'\n\nimport { rnw } from '../constants/rnw'\nimport { isVariable } from '../createVariable'\n\n// NOTE: going to refactor and merge getSplitStyles + getAtomicStyles into one\n// before i can do that need to not rely on rnw for generateAtomicStyles\n// will change that to not be external at all and just logically do it in the\n// merged getSplitStyles/getAtomicStyles file in one loop.\n\nexport type ViewStyleWithPseudos = ViewStyle & {\n hoverStyle?: ViewStyle\n pressStyle?: ViewStyle\n focusStyle?: ViewStyle\n}\n\ntype AtomicStyleOptions = {\n splitTransforms?: boolean\n}\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\nconst generateAtomicStyles = (style: ViewStyle) => {\n return rnw.atomic(rnw.createCompileableStyle(rnw.createReactDOMStyle(style))) as {\n [key: string]: StyleObject\n }\n}\n\nfunction getAtomicStyle(\n style: ViewStyle,\n pseudo: { name: string; priority: number } | 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]: StyleObject & { 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
|
|
5
|
-
"mappings": ";;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AACA;AAiBO,yBAAyB,UAAgC,UAA8B,CAAC,GAAG;AAChG,QAAM,EAAE,YAAY,YAAY,eAAe,SAAS;AACxD,MAAI,MAAqB,CAAC;AAG1B,aAAW,CAAC,OAAO,UAAU,CAAC,YAAY,YAAY,YAAY,IAAI,EAAE,QAAQ,GAAG;AACjF,QAAI,CAAC,SAAS,CAAC,OAAO,KAAK,KAAK,EAAE,QAAQ;AACxC;AAAA,IACF;AACA,UAAM,SAAS,eAAe;AAC9B,eAAW,QAAQ,OAAO;AACxB,YAAM,MAAM,MAAM;AAClB,UAAI,WAAW,GAAG,GAAG;AACnB,cAAM,QAAQ,IAAI,SAAS;AAAA,MAC7B;AACA,UAAI,oBAAoB,OAAO;AAC7B,eAAO,MAAM;AACb,uBAAe,OAAO,MAAM,GAAG;AAAA,MACjC;AAAA,IACF;AACA,UAAM,CAAC,GAAG,KAAK,GAAG,eAAe,OAAO,QAAQ,OAAO,CAAC;AAAA,EAC1D;AAEA,SAAO;AACT;AAxBgB;AA0BhB,MAAM,uBAAuB,wBAAC,UAAqB;AACjD,SAAO,IAAI,OAAO,IAAI,uBAAuB,IAAI,oBAAoB,KAAK,CAAC,CAAC;AAG9E,GAJ6B;AAM7B,wBACE,OACA,QACA,SACe;
|
|
4
|
+
"sourcesContent": ["import {\n StyleObject,\n invertMapTransformKeys,\n mergeTransform,\n stylePropsTransform,\n} from '@tamagui/helpers'\nimport { ViewStyle } from 'react-native'\n\nimport { getConfig } from '../conf'\nimport { rnw } from '../constants/rnw'\nimport { isVariable } from '../createVariable'\n\n// NOTE: going to refactor and merge getSplitStyles + getAtomicStyles into one\n// before i can do that need to not rely on rnw for generateAtomicStyles\n// will change that to not be external at all and just logically do it in the\n// merged getSplitStyles/getAtomicStyles file in one loop.\n\nexport type ViewStyleWithPseudos = ViewStyle & {\n hoverStyle?: ViewStyle\n pressStyle?: ViewStyle\n focusStyle?: ViewStyle\n}\n\ntype AtomicStyleOptions = {\n splitTransforms?: boolean\n}\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\nconst generateAtomicStyles = (style: ViewStyle) => {\n return rnw.atomic(rnw.createCompileableStyle(rnw.createReactDOMStyle(style))) as {\n [key: string]: StyleObject\n }\n}\n\nlet reversedShorthands: Record<string, string> | null = null\n\nfunction getAtomicStyle(\n style: ViewStyle,\n pseudo: { name: string; priority: number } | 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]: StyleObject & { 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 if (!reversedShorthands) {\n reversedShorthands = {}\n const conf = getConfig()\n if (conf.shorthands) {\n for (const key in conf.shorthands) {\n reversedShorthands[conf.shorthands[key]] = key\n }\n }\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 [_, a, b] = val.identifier.split('-')\n // dev mode its \"r-transform-1ns13n\", prod its \"r-1ns13n\", normalize them\n const hash = b || a\n // pseudos have a `--` to be easier to find with concatClassNames\n const psuedoPrefix = pseudo ? `0${pseudo.name}-` : ''\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\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 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\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}\n\nconst pseudosOrdered = Object.values(pseudos)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|