@tamagui/core 1.0.1-beta.66 → 1.0.1-beta.69
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/constants/rnw.js +2 -13
- package/dist/cjs/constants/rnw.js.map +2 -2
- package/dist/cjs/createComponent.js +69 -47
- package/dist/cjs/createComponent.js.map +2 -2
- package/dist/cjs/helpers/createPropMapper.js +3 -0
- package/dist/cjs/helpers/createPropMapper.js.map +2 -2
- package/dist/cjs/helpers/generateAtomicStyles.js +133 -89
- package/dist/cjs/helpers/generateAtomicStyles.js.map +2 -2
- package/dist/cjs/helpers/getSplitStyles.js +27 -21
- package/dist/cjs/helpers/getSplitStyles.js.map +2 -2
- package/dist/cjs/helpers/getStylesAtomic.js +22 -67
- package/dist/cjs/helpers/getStylesAtomic.js.map +2 -2
- package/dist/cjs/helpers/pseudos.js.map +1 -1
- package/dist/cjs/types.js.map +1 -1
- package/dist/esm/constants/rnw.js +2 -13
- package/dist/esm/constants/rnw.js.map +2 -2
- package/dist/esm/createComponent.js +69 -47
- package/dist/esm/createComponent.js.map +2 -2
- package/dist/esm/helpers/createPropMapper.js +3 -0
- package/dist/esm/helpers/createPropMapper.js.map +2 -2
- package/dist/esm/helpers/generateAtomicStyles.js +133 -89
- package/dist/esm/helpers/generateAtomicStyles.js.map +2 -2
- package/dist/esm/helpers/getSplitStyles.js +27 -22
- package/dist/esm/helpers/getSplitStyles.js.map +2 -2
- package/dist/esm/helpers/getStylesAtomic.js +22 -67
- package/dist/esm/helpers/getStylesAtomic.js.map +2 -2
- package/dist/esm/helpers/pseudos.js.map +1 -1
- package/dist/jsx/constants/rnw.js +2 -13
- package/dist/jsx/createComponent.js +67 -44
- package/dist/jsx/helpers/createPropMapper.js +3 -0
- package/dist/jsx/helpers/generateAtomicStyles.js +133 -89
- package/dist/jsx/helpers/getSplitStyles.js +27 -22
- package/dist/jsx/helpers/getStylesAtomic.js +22 -67
- package/package.json +6 -5
- package/types/constants/rnw.d.ts.map +1 -1
- package/types/createComponent.d.ts +3 -1
- package/types/createComponent.d.ts.map +1 -1
- package/types/helpers/generateAtomicStyles.d.ts +3 -12
- package/types/helpers/generateAtomicStyles.d.ts.map +1 -1
- package/types/helpers/getSplitStyles.d.ts +6 -0
- package/types/helpers/getSplitStyles.d.ts.map +1 -1
- package/types/helpers/getStylesAtomic.d.ts +0 -5
- package/types/helpers/getStylesAtomic.d.ts.map +1 -1
- package/types/helpers/pseudos.d.ts +1 -0
- package/types/helpers/pseudos.d.ts.map +1 -1
- package/types/types.d.ts +2 -1
- package/types/types.d.ts.map +1 -1
|
@@ -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 {\n DebugProp,\n GenericVariantDefinitions,\n PropMapper,\n SplitStyleState,\n StaticConfig,\n TamaguiInternalConfig,\n VariantSpreadFunction,\n} from '../types'\nimport { expandStyle, expandStyles } from './generateAtomicStyles'\nimport { getVariantExtras } from './getVariantExtras'\nimport { isObj } from './isObj'\n\nexport type ResolveVariableTypes = 'auto' | 'value' | 'variable' | 'both' | 'non-color-value'\n\nexport const getReturnVariablesAs = (props: any, state: Partial<SplitStyleState>) => {\n return !!props.animation || state.resolveVariablesAs === 'value'\n ? isWeb\n ? 'non-color-value'\n : 'value'\n : 'auto'\n}\n\nexport const createPropMapper = (staticConfig: Partial<StaticConfig>) => {\n const variants = staticConfig.variants || {}\n const defaultProps = staticConfig.defaultProps || {}\n\n const mapper: PropMapper = (\n key,\n value,\n theme,\n propsIn,\n state,\n avoidDefaultProps = false,\n debug\n ) => {\n const conf = getConfig()\n if (!conf) {\n console.trace('no conf! err')\n return\n }\n\n const props = state.fallbackProps || propsIn\n const returnVariablesAs = getReturnVariablesAs(props, state)\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\n const variantValue = resolveVariants(\n key,\n value,\n props,\n defaultProps,\n theme,\n variants,\n fontFamily,\n conf,\n returnVariablesAs,\n staticConfig,\n '',\n avoidDefaultProps\n )\n if (variantValue) {\n return variantValue\n }\n\n let shouldReturn = value !== undefined && value !== null\n\n // handle shorthands\n if (conf.shorthands[key]) {\n shouldReturn = true\n key = conf.shorthands[key]\n }\n\n if (value) {\n if (value[0] === '$') {\n // prettier-ignore\n value = getToken(key, value, conf, theme, fontFamily, returnVariablesAs, debug)\n } else if (isVariable(value)) {\n value = getVariableValue(key, value, returnVariablesAs)\n }\n }\n\n if (shouldReturn) {\n return expandStyle(key, value) || [[key, value]]\n }\n }\n\n return mapper\n}\n\ntype StyleResolver = (\n key: string,\n value: any,\n props: Record<string, any>,\n defaultProps: any,\n theme: any,\n variants: GenericVariantDefinitions,\n fontFamily: string,\n conf: TamaguiInternalConfig,\n returnVariablesAs: 'auto' | 'value' | 'non-color-value',\n staticConfig: Partial<StaticConfig>,\n parentVariantKey: string,\n avoidDefaultProps?: boolean,\n debug?: DebugProp\n) => any\n\nconst resolveVariants: StyleResolver = (\n key,\n value,\n props,\n defaultProps,\n theme,\n variants,\n fontFamily,\n conf,\n returnVariablesAs,\n staticConfig,\n parentVariantKey,\n avoidDefaultProps = false,\n debug\n) => {\n const variant = variants && variants[key]\n if (variant && value !== undefined) {\n let variantValue = getVariantDefinition(variant, key, value)\n\n if (variantValue) {\n if (typeof variantValue === 'function') {\n const fn = variantValue as VariantSpreadFunction<any>\n variantValue = fn(value, getVariantExtras(props, theme, defaultProps, avoidDefaultProps))\n }\n\n if (isObj(variantValue)) {\n variantValue = resolveTokensAndVariants(\n key,\n variantValue,\n props,\n defaultProps,\n theme,\n variants,\n fontFamily,\n conf,\n returnVariablesAs,\n staticConfig,\n parentVariantKey,\n avoidDefaultProps,\n debug\n )\n }\n\n return Object.entries(expandStyles(variantValue))\n } else {\n // variant at key exists, but no matching variant value, return nothing\n if (process.env.NODE_ENV === 'development') {\n if (staticConfig.validStyles?.[key]) {\n return null\n }\n const name = staticConfig.componentName || '[UnnamedComponent]'\n console.warn(\n `No variant found: ${name} has variant \"${key}\", but no matching value \"${value}\"`\n )\n }\n return null\n }\n }\n}\n\nconst resolveTokensAndVariants: StyleResolver = (\n key, // we dont use key assume value is object instead\n value,\n props,\n defaultProps,\n theme,\n variants,\n fontFamily,\n conf,\n returnVariablesAs,\n staticConfig,\n parentVariantKey,\n avoidDefaultProps,\n debug\n) => {\n let res = {}\n for (const rKey in value) {\n const fKey = conf.shorthands[rKey] || rKey\n const val = value[rKey]\n if (isVariable(val)) {\n res[fKey] = !isWeb || returnVariablesAs === 'value' ? val.val : val.variable\n } else if (variants[fKey]) {\n // avoids infinite loop if variant is matching a style prop\n // eg: { variants: { flex: { true: { flex: 2 } } } }\n if (parentVariantKey === key) {\n res[fKey] = val\n } else {\n res = {\n ...res,\n ...Object.fromEntries(\n resolveVariants(\n fKey,\n val,\n props,\n defaultProps,\n theme,\n variants,\n fontFamily,\n conf,\n returnVariablesAs,\n staticConfig,\n key,\n avoidDefaultProps,\n debug\n )\n ),\n }\n }\n } else if (typeof val === 'string') {\n const fVal =\n val[0] === '$'\n ? getToken(fKey, val, conf, theme, fontFamily, returnVariablesAs, debug)\n : val\n res[fKey] = fVal\n } else {\n if (isObj(val)) {\n // sub-objects: media queries, pseudos, shadowOffset\n res[fKey] = resolveTokensAndVariants(\n fKey,\n val,\n props,\n defaultProps,\n theme,\n variants,\n fontFamily,\n conf,\n returnVariablesAs,\n staticConfig,\n key,\n avoidDefaultProps,\n debug\n )\n } else {\n // nullish values cant be tokens, need no extra parsing\n res[fKey] = value[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\n// goes through specificity finding best matching variant function\nfunction getVariantDefinition(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\nconst fontShorthand = {\n fontSize: 'size',\n fontWeight: 'weight',\n}\n\nconst getToken = (\n key: string,\n value: string,\n { tokensParsed, fontsParsed }: TamaguiInternalConfig,\n theme: any,\n fontFamily: string | undefined = '$body',\n resolveAs?: ResolveVariableTypes,\n debug?: DebugProp\n) => {\n let valOrVar: any\n let hasSet = false\n if (theme[value]) {\n valOrVar = theme[value]\n hasSet = true\n } else {\n switch (key) {\n case 'fontFamily':\n valOrVar = fontsParsed[value]?.family || value\n hasSet = true\n break\n case 'fontSize':\n case 'lineHeight':\n case 'letterSpacing':\n case 'fontWeight':\n valOrVar = fontsParsed[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(key, valOrVar, resolveAs)\n }\n if (process.env.NODE_ENV === 'development') {\n if (value && value[0] === '$') {\n console.warn(\n `\u26A0\uFE0F You've passed the value \"${value}\" to the style property \"${key}\", but there's no theme or token with the key \"${value}\". Using theme \"${theme.name}\".\n\nSet the debug prop to true to see more detailed debug information.`\n )\n if (debug) {\n if (typeof window !== 'undefined') {\n console.log('Looked in:')\n console.log('Theme:', theme)\n console.log('Tokens:', tokensParsed)\n console.log('Fonts:', fontsParsed)\n }\n }\n return null\n }\n }\n return value\n}\n\nfunction getVariableValue(\n key: string,\n valOrVar: Variable | any,\n resolveAs: ResolveVariableTypes = 'auto'\n) {\n if (isVariable(valOrVar)) {\n if (resolveAs === 'variable') {\n return valOrVar\n }\n if (resolveAs === 'non-color-value') {\n if (isWeb) {\n if (key in tokenCategories.color) {\n return valOrVar.variable\n }\n }\n return valOrVar.val\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 borderTopLeftRadius: true,\n borderTopRightRadius: true,\n borderBottomLeftRadius: true,\n borderBottomRightRadius: 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": ";;AAAA;AACA;AACA;AAUA;AACA;AACA;AAIO,MAAM,uBAAuB,wBAAC,OAAY,UAAoC;AACnF,SAAO,CAAC,CAAC,MAAM,aAAa,MAAM,uBAAuB,UACrD,QACE,oBACA,UACF;AACN,GANoC;AAQ7B,MAAM,mBAAmB,wBAAC,iBAAwC;AACvE,QAAM,WAAW,aAAa,YAAY,CAAC;AAC3C,QAAM,eAAe,aAAa,gBAAgB,CAAC;AAEnD,QAAM,SAAqB,wBACzB,KACA,OACA,OACA,SACA,OACA,oBAAoB,OACpB,UACG;AACH,UAAM,OAAO,UAAU;AACvB,QAAI,CAAC,MAAM;AACT,cAAQ,MAAM,cAAc;AAC5B;AAAA,IACF;AAEA,UAAM,QAAQ,MAAM,iBAAiB;AACrC,UAAM,oBAAoB,qBAAqB,OAAO,KAAK;AAG3D,UAAM,aAAa,MAAM,cAAc,aAAa,cAAc;AAElE,UAAM,eAAe,gBACnB,KACA,OACA,OACA,cACA,OACA,UACA,YACA,MACA,mBACA,cACA,IACA,iBACF;AACA,QAAI,cAAc;AAChB,aAAO;AAAA,IACT;AAEA,QAAI,eAAe,UAAU,UAAa,UAAU;AAGpD,QAAI,KAAK,WAAW,MAAM;AACxB,qBAAe;AACf,YAAM,KAAK,WAAW;AAAA,IACxB;AAEA,QAAI,OAAO;AACT,UAAI,MAAM,OAAO,KAAK;AAEpB,gBAAQ,SAAS,KAAK,OAAO,MAAM,OAAO,YAAY,mBAAmB,KAAK;AAAA,MAChF,WAAW,WAAW,KAAK,GAAG;AAC5B,gBAAQ,iBAAiB,KAAK,OAAO,iBAAiB;AAAA,MACxD;AAAA,IACF;AAEA,QAAI,cAAc;AAChB,aAAO,YAAY,KAAK,KAAK,KAAK,CAAC,CAAC,KAAK,KAAK,CAAC;AAAA,IACjD;AAAA,EACF,GA3D2B;AA6D3B,SAAO;AACT,GAlEgC;AAoFhC,MAAM,kBAAiC,wBACrC,KACA,OACA,OACA,cACA,OACA,UACA,YACA,MACA,mBACA,cACA,kBACA,oBAAoB,OACpB,UACG;AA5HL;AA6HE,QAAM,UAAU,YAAY,SAAS;AACrC,MAAI,WAAW,UAAU,QAAW;AAClC,QAAI,eAAe,qBAAqB,SAAS,KAAK,KAAK;AAE3D,QAAI,cAAc;AAChB,UAAI,OAAO,iBAAiB,YAAY;AACtC,cAAM,KAAK;AACX,uBAAe,GAAG,OAAO,iBAAiB,OAAO,OAAO,cAAc,iBAAiB,CAAC;AAAA,MAC1F;AAEA,UAAI,MAAM,YAAY,GAAG;AACvB,uBAAe,yBACb,KACA,cACA,OACA,cACA,OACA,UACA,YACA,MACA,mBACA,cACA,kBACA,mBACA,KACF;AAAA,MACF;AAEA,aAAO,OAAO,QAAQ,aAAa,YAAY,CAAC;AAAA,IAClD,OAAO;AAEL,UAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,YAAI,mBAAa,gBAAb,mBAA2B,MAAM;AACnC,iBAAO;AAAA,QACT;AACA,cAAM,OAAO,aAAa,iBAAiB;AAC3C,gBAAQ,KACN,qBAAqB,qBAAqB,gCAAgC,QAC5E;AAAA,MACF;AACA,aAAO;AAAA,IACT;AAAA,EACF;AACF,
|
|
4
|
+
"sourcesContent": ["import { getConfig } from '../conf'\nimport { isWeb } from '../constants/platform'\nimport { Variable, isVariable } from '../createVariable'\nimport {\n DebugProp,\n GenericVariantDefinitions,\n PropMapper,\n SplitStyleState,\n StaticConfig,\n TamaguiInternalConfig,\n VariantSpreadFunction,\n} from '../types'\nimport { expandStyle, expandStyles } from './generateAtomicStyles'\nimport { getVariantExtras } from './getVariantExtras'\nimport { isObj } from './isObj'\n\nexport type ResolveVariableTypes = 'auto' | 'value' | 'variable' | 'both' | 'non-color-value'\n\nexport const getReturnVariablesAs = (props: any, state: Partial<SplitStyleState>) => {\n return !!props.animation || state.resolveVariablesAs === 'value'\n ? isWeb\n ? 'non-color-value'\n : 'value'\n : 'auto'\n}\n\nexport const createPropMapper = (staticConfig: Partial<StaticConfig>) => {\n const variants = staticConfig.variants || {}\n const defaultProps = staticConfig.defaultProps || {}\n\n const mapper: PropMapper = (\n key,\n value,\n theme,\n propsIn,\n state,\n avoidDefaultProps = false,\n debug\n ) => {\n const conf = getConfig()\n if (!conf) {\n console.trace('no conf! err')\n return\n }\n\n const props = state.fallbackProps || propsIn\n const returnVariablesAs = getReturnVariablesAs(props, state)\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\n const variantValue = resolveVariants(\n key,\n value,\n props,\n defaultProps,\n theme,\n variants,\n fontFamily,\n conf,\n returnVariablesAs,\n staticConfig,\n '',\n avoidDefaultProps\n )\n if (variantValue) {\n return variantValue\n }\n\n let shouldReturn = value !== undefined && value !== null\n\n // handle shorthands\n if (conf.shorthands[key]) {\n shouldReturn = true\n key = conf.shorthands[key]\n }\n\n if (value) {\n if (value[0] === '$') {\n // prettier-ignore\n value = getToken(key, value, conf, theme, fontFamily, returnVariablesAs, debug)\n } else if (isVariable(value)) {\n value = getVariableValue(key, value, returnVariablesAs)\n }\n }\n\n if (shouldReturn) {\n return expandStyle(key, value) || [[key, value]]\n }\n }\n\n return mapper\n}\n\ntype StyleResolver = (\n key: string,\n value: any,\n props: Record<string, any>,\n defaultProps: any,\n theme: any,\n variants: GenericVariantDefinitions,\n fontFamily: string,\n conf: TamaguiInternalConfig,\n returnVariablesAs: 'auto' | 'value' | 'non-color-value',\n staticConfig: Partial<StaticConfig>,\n parentVariantKey: string,\n avoidDefaultProps?: boolean,\n debug?: DebugProp\n) => any\n\nconst resolveVariants: StyleResolver = (\n key,\n value,\n props,\n defaultProps,\n theme,\n variants,\n fontFamily,\n conf,\n returnVariablesAs,\n staticConfig,\n parentVariantKey,\n avoidDefaultProps = false,\n debug\n) => {\n const variant = variants && variants[key]\n if (variant && value !== undefined) {\n let variantValue = getVariantDefinition(variant, key, value)\n\n if (variantValue) {\n if (typeof variantValue === 'function') {\n const fn = variantValue as VariantSpreadFunction<any>\n variantValue = fn(value, getVariantExtras(props, theme, defaultProps, avoidDefaultProps))\n }\n\n if (isObj(variantValue)) {\n variantValue = resolveTokensAndVariants(\n key,\n variantValue,\n props,\n defaultProps,\n theme,\n variants,\n fontFamily,\n conf,\n returnVariablesAs,\n staticConfig,\n parentVariantKey,\n avoidDefaultProps,\n debug\n )\n }\n\n return Object.entries(expandStyles(variantValue))\n } else {\n // variant at key exists, but no matching variant value, return nothing\n if (process.env.NODE_ENV === 'development') {\n if (staticConfig.validStyles?.[key]) {\n return null\n }\n if (value === false) {\n // don't warn on missing false values, common to only use true\n return null\n }\n const name = staticConfig.componentName || '[UnnamedComponent]'\n console.warn(\n `No variant found: ${name} has variant \"${key}\", but no matching value \"${value}\"`\n )\n }\n return null\n }\n }\n}\n\nconst resolveTokensAndVariants: StyleResolver = (\n key, // we dont use key assume value is object instead\n value,\n props,\n defaultProps,\n theme,\n variants,\n fontFamily,\n conf,\n returnVariablesAs,\n staticConfig,\n parentVariantKey,\n avoidDefaultProps,\n debug\n) => {\n let res = {}\n for (const rKey in value) {\n const fKey = conf.shorthands[rKey] || rKey\n const val = value[rKey]\n if (isVariable(val)) {\n res[fKey] = !isWeb || returnVariablesAs === 'value' ? val.val : val.variable\n } else if (variants[fKey]) {\n // avoids infinite loop if variant is matching a style prop\n // eg: { variants: { flex: { true: { flex: 2 } } } }\n if (parentVariantKey === key) {\n res[fKey] = val\n } else {\n res = {\n ...res,\n ...Object.fromEntries(\n resolveVariants(\n fKey,\n val,\n props,\n defaultProps,\n theme,\n variants,\n fontFamily,\n conf,\n returnVariablesAs,\n staticConfig,\n key,\n avoidDefaultProps,\n debug\n )\n ),\n }\n }\n } else if (typeof val === 'string') {\n const fVal =\n val[0] === '$'\n ? getToken(fKey, val, conf, theme, fontFamily, returnVariablesAs, debug)\n : val\n res[fKey] = fVal\n } else {\n if (isObj(val)) {\n // sub-objects: media queries, pseudos, shadowOffset\n res[fKey] = resolveTokensAndVariants(\n fKey,\n val,\n props,\n defaultProps,\n theme,\n variants,\n fontFamily,\n conf,\n returnVariablesAs,\n staticConfig,\n key,\n avoidDefaultProps,\n debug\n )\n } else {\n // nullish values cant be tokens, need no extra parsing\n res[fKey] = value[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\n// goes through specificity finding best matching variant function\nfunction getVariantDefinition(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\nconst fontShorthand = {\n fontSize: 'size',\n fontWeight: 'weight',\n}\n\nconst getToken = (\n key: string,\n value: string,\n { tokensParsed, fontsParsed }: TamaguiInternalConfig,\n theme: any,\n fontFamily: string | undefined = '$body',\n resolveAs?: ResolveVariableTypes,\n debug?: DebugProp\n) => {\n let valOrVar: any\n let hasSet = false\n if (theme[value]) {\n valOrVar = theme[value]\n hasSet = true\n } else {\n switch (key) {\n case 'fontFamily':\n valOrVar = fontsParsed[value]?.family || value\n hasSet = true\n break\n case 'fontSize':\n case 'lineHeight':\n case 'letterSpacing':\n case 'fontWeight':\n valOrVar = fontsParsed[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(key, valOrVar, resolveAs)\n }\n if (process.env.NODE_ENV === 'development') {\n if (value && value[0] === '$') {\n console.warn(\n `\u26A0\uFE0F You've passed the value \"${value}\" to the style property \"${key}\", but there's no theme or token with the key \"${value}\". Using theme \"${theme.name}\".\n\nSet the debug prop to true to see more detailed debug information.`\n )\n if (debug) {\n if (typeof window !== 'undefined') {\n console.log('Looked in:')\n console.log('Theme:', theme)\n console.log('Tokens:', tokensParsed)\n console.log('Fonts:', fontsParsed)\n }\n }\n return null\n }\n }\n return value\n}\n\nfunction getVariableValue(\n key: string,\n valOrVar: Variable | any,\n resolveAs: ResolveVariableTypes = 'auto'\n) {\n if (isVariable(valOrVar)) {\n if (resolveAs === 'variable') {\n return valOrVar\n }\n if (resolveAs === 'non-color-value') {\n if (isWeb) {\n if (key in tokenCategories.color) {\n return valOrVar.variable\n }\n }\n return valOrVar.val\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 borderTopLeftRadius: true,\n borderTopRightRadius: true,\n borderBottomLeftRadius: true,\n borderBottomRightRadius: 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
|
}
|
|
@@ -3,8 +3,43 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
|
|
|
3
3
|
import { simpleHash } from "@tamagui/helpers";
|
|
4
4
|
import hyphenateStyleName from "hyphenate-style-name";
|
|
5
5
|
import normalizeCSSColor from "normalize-css-color";
|
|
6
|
+
import { getConfig } from "../conf";
|
|
6
7
|
import { isWeb } from "../constants/platform";
|
|
8
|
+
import { reversedShorthands } from "../createTamagui";
|
|
7
9
|
import { pseudos } from "./pseudos";
|
|
10
|
+
const generateAtomicStyles = /* @__PURE__ */ __name((style, pseudo) => {
|
|
11
|
+
const res = expandStyles(style);
|
|
12
|
+
const out = [];
|
|
13
|
+
for (const key in res) {
|
|
14
|
+
const value = res[key];
|
|
15
|
+
if (value != null) {
|
|
16
|
+
const valueString = stringifyValueWithProperty(value, key);
|
|
17
|
+
const hash = simpleHash(key + valueString + ((pseudo == null ? void 0 : pseudo.name) || ""));
|
|
18
|
+
const cachedResult = cache.get(hash, valueString);
|
|
19
|
+
if (cachedResult != null) {
|
|
20
|
+
out.push(cachedResult);
|
|
21
|
+
} else {
|
|
22
|
+
const pseudoPrefix = pseudo ? `0${pseudo.name}-` : "";
|
|
23
|
+
const shortProp = reversedShorthands[key] || key;
|
|
24
|
+
const identifier = `_${shortProp}-${pseudoPrefix}${hash}`;
|
|
25
|
+
const rules = createAtomicRules(identifier, key, valueString, pseudo);
|
|
26
|
+
const styleObject = {
|
|
27
|
+
property: key,
|
|
28
|
+
pseudo: pseudo == null ? void 0 : pseudo.name,
|
|
29
|
+
value,
|
|
30
|
+
identifier,
|
|
31
|
+
rules
|
|
32
|
+
};
|
|
33
|
+
cache.set(hash, valueString, styleObject);
|
|
34
|
+
out.push(styleObject);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
if (style.borderColor === "transparent") {
|
|
39
|
+
debugger;
|
|
40
|
+
}
|
|
41
|
+
return out;
|
|
42
|
+
}, "generateAtomicStyles");
|
|
8
43
|
const reducedStyleKeys = {
|
|
9
44
|
shadowColor: true,
|
|
10
45
|
shadowOffset: true,
|
|
@@ -14,58 +49,116 @@ const reducedStyleKeys = {
|
|
|
14
49
|
textShadowOffset: true,
|
|
15
50
|
textShadowRadius: true
|
|
16
51
|
};
|
|
52
|
+
let shorthands = null;
|
|
17
53
|
function expandStyles(style) {
|
|
18
54
|
const res = {};
|
|
19
55
|
boxShadowReducer(res, style);
|
|
20
56
|
textShadowReducer(res, style);
|
|
21
|
-
|
|
57
|
+
borderReducer(res, style);
|
|
58
|
+
for (let key in style) {
|
|
59
|
+
shorthands = shorthands || getConfig().shorthands;
|
|
60
|
+
if (shorthands) {
|
|
61
|
+
key = shorthands[key] || key;
|
|
62
|
+
}
|
|
22
63
|
if (reducedStyleKeys[key])
|
|
23
64
|
continue;
|
|
24
65
|
if (key in pseudos) {
|
|
25
66
|
res[key] = expandStyles(style[key]);
|
|
26
67
|
} else {
|
|
27
|
-
|
|
68
|
+
const val = normalizeValueWithProperty(style[key], key);
|
|
69
|
+
const out = expandStyle(key, val);
|
|
70
|
+
if (out) {
|
|
71
|
+
Object.assign(res, Object.fromEntries(out));
|
|
72
|
+
} else {
|
|
73
|
+
res[key] = val;
|
|
74
|
+
}
|
|
28
75
|
}
|
|
29
76
|
}
|
|
30
77
|
return res;
|
|
31
78
|
}
|
|
32
79
|
__name(expandStyles, "expandStyles");
|
|
33
|
-
function
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
} else {
|
|
39
|
-
style[key] = value;
|
|
80
|
+
function borderReducer(res, cur) {
|
|
81
|
+
for (const key in borderDefaults) {
|
|
82
|
+
if (key in cur) {
|
|
83
|
+
res[borderDefaults[key]] = cur[borderDefaults[key]] || "solid";
|
|
84
|
+
}
|
|
40
85
|
}
|
|
41
86
|
}
|
|
42
|
-
__name(
|
|
43
|
-
const
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
87
|
+
__name(borderReducer, "borderReducer");
|
|
88
|
+
const borderDefaults = {
|
|
89
|
+
borderWidth: "borderStyle",
|
|
90
|
+
borderBottomWidth: "borderBottomStyle",
|
|
91
|
+
borderTopWidth: "borderTopStyle",
|
|
92
|
+
borderLeftWidth: "borderLeftStyle",
|
|
93
|
+
borderRightWidth: "borderRightStyle"
|
|
94
|
+
};
|
|
95
|
+
function createDeclarationBlock(style, important = false) {
|
|
96
|
+
let declarations = "";
|
|
97
|
+
for (const key in style) {
|
|
98
|
+
const prop = hyphenateStyleName(key);
|
|
99
|
+
const value = style[key];
|
|
100
|
+
declarations += `${prop}:${value}`;
|
|
101
|
+
}
|
|
102
|
+
return `{${declarations}${important ? ` !important` : ""};}`;
|
|
103
|
+
}
|
|
104
|
+
__name(createDeclarationBlock, "createDeclarationBlock");
|
|
105
|
+
const pseudoSelectorPrefixes = (() => {
|
|
106
|
+
const res = {};
|
|
107
|
+
for (const key in pseudos) {
|
|
108
|
+
const pseudo = pseudos[key];
|
|
109
|
+
res[pseudo.name] = [...Array(pseudo.priority)].map(() => ":root").join("") + " ";
|
|
110
|
+
}
|
|
111
|
+
return res;
|
|
112
|
+
})();
|
|
113
|
+
function createAtomicRules(identifier, property, value, pseudo) {
|
|
114
|
+
const selector = pseudo ? `${pseudoSelectorPrefixes[pseudo.name]} .${identifier}:${pseudo.name}` : `.${identifier}`;
|
|
115
|
+
const important = !!pseudo;
|
|
116
|
+
let rules = [];
|
|
117
|
+
switch (property) {
|
|
118
|
+
case "placeholderTextColor": {
|
|
119
|
+
const block = createDeclarationBlock({ color: value, opacity: 1 }, important);
|
|
120
|
+
rules.push(`${selector}::placeholder${block}`);
|
|
121
|
+
break;
|
|
122
|
+
}
|
|
123
|
+
case "pointerEvents": {
|
|
124
|
+
let finalValue = value;
|
|
125
|
+
if (value === "auto" || value === "box-only") {
|
|
126
|
+
finalValue = "auto!important";
|
|
127
|
+
if (value === "box-only") {
|
|
128
|
+
const block2 = createDeclarationBlock({ pointerEvents: "none" }, important);
|
|
129
|
+
rules.push(`${selector}>*${block2}`);
|
|
130
|
+
}
|
|
131
|
+
} else if (value === "none" || value === "box-none") {
|
|
132
|
+
finalValue = "none!important";
|
|
133
|
+
if (value === "box-none") {
|
|
134
|
+
const block2 = createDeclarationBlock({ pointerEvents: "auto" }, important);
|
|
135
|
+
rules.push(`${selector}>*${block2}`);
|
|
136
|
+
}
|
|
64
137
|
}
|
|
138
|
+
const block = createDeclarationBlock({ pointerEvents: finalValue }, important);
|
|
139
|
+
rules.push(`${selector}${block}`);
|
|
140
|
+
break;
|
|
141
|
+
}
|
|
142
|
+
case "scrollbarWidth": {
|
|
143
|
+
if (value === "none") {
|
|
144
|
+
rules.push(`${selector}::-webkit-scrollbar{display:none}`);
|
|
145
|
+
}
|
|
146
|
+
const block = createDeclarationBlock({ scrollbarWidth: value }, important);
|
|
147
|
+
rules.push(`${selector}${block}`);
|
|
148
|
+
break;
|
|
149
|
+
}
|
|
150
|
+
default: {
|
|
151
|
+
const block = createDeclarationBlock({ [property]: value }, important);
|
|
152
|
+
rules.push(`${selector}${block}`);
|
|
153
|
+
break;
|
|
65
154
|
}
|
|
66
155
|
}
|
|
67
|
-
|
|
68
|
-
}
|
|
156
|
+
if ((pseudo == null ? void 0 : pseudo.name) === "hover") {
|
|
157
|
+
rules = rules.map((r) => `@media not all and (hover: none) { ${r} }`);
|
|
158
|
+
}
|
|
159
|
+
return rules;
|
|
160
|
+
}
|
|
161
|
+
__name(createAtomicRules, "createAtomicRules");
|
|
69
162
|
function expandStyle(key, value) {
|
|
70
163
|
if (key === "flex") {
|
|
71
164
|
if (value <= -1) {
|
|
@@ -130,61 +223,6 @@ function expandStyle(key, value) {
|
|
|
130
223
|
}
|
|
131
224
|
}
|
|
132
225
|
__name(expandStyle, "expandStyle");
|
|
133
|
-
function createAtomicRules(identifier, property, value) {
|
|
134
|
-
const rules = [];
|
|
135
|
-
const selector = `.${identifier}`;
|
|
136
|
-
switch (property) {
|
|
137
|
-
case "placeholderTextColor": {
|
|
138
|
-
const block = createDeclarationBlock({ color: value, opacity: 1 });
|
|
139
|
-
rules.push(`${selector}::placeholder${block}`);
|
|
140
|
-
break;
|
|
141
|
-
}
|
|
142
|
-
case "pointerEvents": {
|
|
143
|
-
let finalValue = value;
|
|
144
|
-
if (value === "auto" || value === "box-only") {
|
|
145
|
-
finalValue = "auto!important";
|
|
146
|
-
if (value === "box-only") {
|
|
147
|
-
const block2 = createDeclarationBlock({ pointerEvents: "none" });
|
|
148
|
-
rules.push(`${selector}>*${block2}`);
|
|
149
|
-
}
|
|
150
|
-
} else if (value === "none" || value === "box-none") {
|
|
151
|
-
finalValue = "none!important";
|
|
152
|
-
if (value === "box-none") {
|
|
153
|
-
const block2 = createDeclarationBlock({ pointerEvents: "auto" });
|
|
154
|
-
rules.push(`${selector}>*${block2}`);
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
const block = createDeclarationBlock({ pointerEvents: finalValue });
|
|
158
|
-
rules.push(`${selector}${block}`);
|
|
159
|
-
break;
|
|
160
|
-
}
|
|
161
|
-
case "scrollbarWidth": {
|
|
162
|
-
if (value === "none") {
|
|
163
|
-
rules.push(`${selector}::-webkit-scrollbar{display:none}`);
|
|
164
|
-
}
|
|
165
|
-
const block = createDeclarationBlock({ scrollbarWidth: value });
|
|
166
|
-
rules.push(`${selector}${block}`);
|
|
167
|
-
break;
|
|
168
|
-
}
|
|
169
|
-
default: {
|
|
170
|
-
const block = createDeclarationBlock({ [property]: value });
|
|
171
|
-
rules.push(`${selector}${block}`);
|
|
172
|
-
break;
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
return rules;
|
|
176
|
-
}
|
|
177
|
-
__name(createAtomicRules, "createAtomicRules");
|
|
178
|
-
function createDeclarationBlock(style) {
|
|
179
|
-
const domStyle = expandStyles(style);
|
|
180
|
-
const declarationsString = Object.keys(domStyle).map((property) => {
|
|
181
|
-
const value = domStyle[property];
|
|
182
|
-
const prop = hyphenateStyleName(property);
|
|
183
|
-
return `${prop}:${value}`;
|
|
184
|
-
}).sort().join(";");
|
|
185
|
-
return `{${declarationsString};}`;
|
|
186
|
-
}
|
|
187
|
-
__name(createDeclarationBlock, "createDeclarationBlock");
|
|
188
226
|
const cache = {
|
|
189
227
|
get(property, value) {
|
|
190
228
|
if (cache[property] != null && cache[property].hasOwnProperty(value) && cache[property][value] != null) {
|
|
@@ -257,7 +295,13 @@ const normalizeColor = /* @__PURE__ */ __name((color, opacity = 1) => {
|
|
|
257
295
|
}
|
|
258
296
|
return `${color}`;
|
|
259
297
|
}, "normalizeColor");
|
|
260
|
-
const
|
|
298
|
+
const webColors = {
|
|
299
|
+
currentColor: true,
|
|
300
|
+
currentcolor: true,
|
|
301
|
+
transparent: true,
|
|
302
|
+
inherit: true
|
|
303
|
+
};
|
|
304
|
+
const isWebColor = /* @__PURE__ */ __name((color) => webColors[color] || color.indexOf("var(") === 0, "isWebColor");
|
|
261
305
|
const processColor = /* @__PURE__ */ __name((color) => {
|
|
262
306
|
if (color === void 0 || color === null) {
|
|
263
307
|
return color;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/generateAtomicStyles.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Some parts adapted from react-native-web\n * Copyright (c) Nicolas Gallagher licensed under the MIT license.\n */\n\nimport { simpleHash } from '@tamagui/helpers'\nimport hyphenateStyleName from 'hyphenate-style-name'\nimport normalizeCSSColor from 'normalize-css-color'\nimport { TextStyle, ViewStyle } from 'react-native'\n\nimport { isWeb } from '../constants/platform'\nimport { pseudos } from './pseudos'\n\ntype Value = Object | Array<any> | string | number\nexport type Style = { [key: string]: Value }\n\ntype Rule = string\ntype Rules = Array<Rule>\n\nexport type RulesData = {\n property?: string\n value?: string\n identifier: string\n rules: Rules\n}\n\ntype CompilerOutput = { [key: string]: RulesData }\n\nconst reducedStyleKeys = {\n shadowColor: true,\n shadowOffset: true,\n shadowOpacity: true,\n shadowRadius: true,\n textShadowColor: true,\n textShadowOffset: true,\n textShadowRadius: true,\n}\n\nexport function expandStyles(style: any) {\n const res = {}\n boxShadowReducer(res, style)\n textShadowReducer(res, style)\n for (const key in style) {\n if (reducedStyleKeys[key]) continue\n if (key in pseudos) {\n res[key] = expandStyles(style[key])\n } else {\n updateReactDOMStyle(res, key, style[key])\n }\n }\n return res\n}\n\nfunction updateReactDOMStyle(style: Object, key: string, value: any) {\n value = normalizeValueWithProperty(value, key)\n const out = expandStyle(key, value)\n if (out) {\n Object.assign(style, Object.fromEntries(out))\n } else {\n style[key] = value\n }\n}\n\nexport const generateAtomicStyles = (style: ViewStyle & TextStyle): CompilerOutput => {\n const res = expandStyles(style)\n\n const out = {}\n for (const key in res) {\n const value = res[key]\n if (value != null) {\n const valueString = stringifyValueWithProperty(value, key)\n const cachedResult = cache.get(key, valueString)\n if (cachedResult != null) {\n const { identifier } = cachedResult\n out[identifier] = cachedResult\n } else {\n const identifier = simpleHash(key + valueString)\n const rules = createAtomicRules(identifier, key, valueString)\n const cachedResult = cache.set(key, valueString, {\n property: key,\n value: valueString,\n identifier,\n rules,\n })\n out[identifier] = cachedResult\n }\n }\n }\n\n return out\n}\n\nexport function expandStyle(key: string, value: any) {\n if (key === 'flex') {\n // The 'flex' property value in React Native must be a positive integer,\n // 0, or -1.\n if (value <= -1) {\n return [\n ['flexGrow', 0],\n ['flexShrink', 1],\n ['flexBasis', 'auto'],\n ]\n }\n // normalizing to better align with native\n // see spec for flex shorthand https://developer.mozilla.org/en-US/docs/Web/CSS/flex\n if (value >= 0) {\n return [\n ['flexGrow', value],\n ['flexShrink', 1],\n ]\n }\n return\n }\n\n // web only\n switch (key) {\n // Ignore some React Native styles\n case 'elevation':\n case 'overlayColor':\n case 'resizeMode':\n case 'tintColor': {\n break\n }\n\n case 'aspectRatio': {\n return [[key, value.toString()]]\n }\n\n // TODO: remove once this issue is fixed\n // https://github.com/rofrischmann/inline-style-prefixer/issues/159\n case 'backgroundClip': {\n if (value === 'text') {\n return [\n ['backgroundClip', value],\n ['WebkitBackgroundClip', value],\n ]\n }\n break\n }\n\n case 'textAlignVertical': {\n return [['verticalAlign', value === 'center' ? 'middle' : value]]\n }\n\n case 'textDecorationLine': {\n return [['textDecorationLine', value]]\n }\n\n case 'transform': {\n if (Array.isArray(value)) {\n return [[key, value.map(mapTransform).join(' ')]]\n }\n break\n }\n\n case 'writingDirection': {\n return [['direction', value]]\n }\n }\n\n const longKey = STYLE_SHORT_FORM_EXPANSIONS[key]\n if (longKey) {\n return longKey.map((key) => {\n return [key, value]\n })\n } else {\n if (isWeb && Array.isArray(value)) {\n return [[key, value.join(',')]]\n }\n }\n}\n\nfunction createAtomicRules(identifier: string, property, value): Rules {\n const rules: string[] = []\n const selector = `.${identifier}`\n\n // Handle non-standard properties and object values that require multiple\n // CSS rules to be created.\n switch (property) {\n // Equivalent to using '::placeholder'\n case 'placeholderTextColor': {\n const block = createDeclarationBlock({ color: value, opacity: 1 })\n rules.push(`${selector}::placeholder${block}`)\n break\n }\n\n // Polyfill for additional 'pointer-events' values\n // See d13f78622b233a0afc0c7a200c0a0792c8ca9e58\n case 'pointerEvents': {\n let finalValue = value\n if (value === 'auto' || value === 'box-only') {\n finalValue = 'auto!important'\n if (value === 'box-only') {\n const block = createDeclarationBlock({ pointerEvents: 'none' })\n rules.push(`${selector}>*${block}`)\n }\n } else if (value === 'none' || value === 'box-none') {\n finalValue = 'none!important'\n if (value === 'box-none') {\n const block = createDeclarationBlock({ pointerEvents: 'auto' })\n rules.push(`${selector}>*${block}`)\n }\n }\n const block = createDeclarationBlock({ pointerEvents: finalValue })\n rules.push(`${selector}${block}`)\n break\n }\n\n // Polyfill for draft spec\n // https://drafts.csswg.org/css-scrollbars-1/\n case 'scrollbarWidth': {\n if (value === 'none') {\n rules.push(`${selector}::-webkit-scrollbar{display:none}`)\n }\n const block = createDeclarationBlock({ scrollbarWidth: value })\n rules.push(`${selector}${block}`)\n break\n }\n\n default: {\n const block = createDeclarationBlock({ [property]: value })\n rules.push(`${selector}${block}`)\n break\n }\n }\n\n return rules\n}\n\n/**\n * Creates a CSS declaration block from a StyleSheet object.\n */\nfunction createDeclarationBlock(style: Style) {\n const domStyle = expandStyles(style)\n const declarationsString = Object.keys(domStyle)\n .map((property) => {\n const value = domStyle[property]\n const prop = hyphenateStyleName(property)\n return `${prop}:${value}`\n })\n // Once properties are hyphenated, this will put the vendor\n // prefixed and short-form properties first in the list.\n .sort()\n .join(';')\n\n return `{${declarationsString};}`\n}\n\nconst cache = {\n get(property, value) {\n if (\n cache[property] != null &&\n cache[property].hasOwnProperty(value) &&\n cache[property][value] != null\n ) {\n return cache[property][value]\n }\n },\n set(property, value, object) {\n if (cache[property] == null) {\n cache[property] = {}\n }\n return (cache[property][value] = object)\n },\n}\n\nfunction stringifyValueWithProperty(value: Value, property?: string): string {\n // e.g., 0 => '0px', 'black' => 'rgba(0,0,0,1)'\n return normalizeValueWithProperty(value, property)\n}\n\n// { scale: 2 } => 'scale(2)'\n// { translateX: 20 } => 'translateX(20px)'\n// { matrix: [1,2,3,4,5,6] } => 'matrix(1,2,3,4,5,6)'\nconst mapTransform = (transform) => {\n const type = Object.keys(transform)[0]\n const value = transform[type]\n if (type === 'matrix' || type === 'matrix3d') {\n return `${type}(${value.join(',')})`\n } else {\n const normalizedValue = normalizeValueWithProperty(value, type)\n return `${type}(${normalizedValue})`\n }\n}\n\nconst colorProps = {\n backgroundColor: true,\n borderColor: true,\n borderTopColor: true,\n borderRightColor: true,\n borderBottomColor: true,\n borderLeftColor: true,\n color: true,\n shadowColor: true,\n textDecorationColor: true,\n textShadowColor: true,\n}\n\nfunction normalizeValueWithProperty(value: any, property?: string): any {\n if (process.env.TAMAGUI_TARGET === 'web') {\n const shouldCoerceToPx =\n typeof value === 'number' &&\n (property === undefined || property === null || !unitlessNumbers[property])\n if (shouldCoerceToPx) {\n return `${value}px`\n }\n }\n if (property && colorProps[property]) {\n return normalizeColor(value)\n }\n return value\n}\n\nconst normalizeColor = (color?: number | string, opacity = 1): void | string => {\n if (color == null || color == undefined) {\n return\n }\n if (process.env.TAMAGUI_TARGET === 'web') {\n if (typeof color === 'string' && isWebColor(color)) {\n return color\n }\n }\n const colorInt = processColor(color)\n if (colorInt != null) {\n const r = (colorInt >> 16) & 255\n const g = (colorInt >> 8) & 255\n const b = colorInt & 255\n const a = ((colorInt >> 24) & 255) / 255\n const alpha = (a * opacity).toFixed(2)\n return `rgba(${r},${g},${b},${alpha})`\n }\n return `${color}`\n}\n\nconst isWebColor = (color: string): boolean =>\n color === 'currentcolor' ||\n color === 'currentColor' ||\n color === 'inherit' ||\n color.indexOf('var(') === 0\n\nconst processColor = (color?: number | string): number | undefined | null => {\n if (color === undefined || color === null) {\n return color\n }\n let intColor = normalizeCSSColor(color)\n if (intColor === undefined || intColor === null) {\n return undefined\n }\n return ((+intColor << 24) | (+intColor >>> 8)) >>> 0\n}\n\nconst unitlessNumbers = {\n animationIterationCount: true,\n aspectRatio: true,\n borderImageOutset: true,\n borderImageSlice: true,\n borderImageWidth: true,\n boxFlex: true,\n boxFleGroup: true,\n boxOrdinalGroup: true,\n columnCount: true,\n flex: true,\n flexGrow: true,\n flexOrder: true,\n flexPositive: true,\n flexShrink: true,\n flexNegative: true,\n fontWeight: true,\n gridRow: true,\n gridRowEnd: true,\n gridRowGap: true,\n gridRowStart: true,\n gridColumn: true,\n gridColumnEnd: true,\n gridColumnGap: true,\n gridColumnStart: true,\n lineClamp: true,\n opacity: true,\n order: true,\n orphans: true,\n tabSize: true,\n widows: true,\n zIndex: true,\n zoom: true,\n fillOpacity: true,\n floodOpacity: true,\n stopOpacity: true,\n strokeDasharray: true,\n strokeDashoffset: true,\n strokeMiterlimit: true,\n strokeOpacity: true,\n strokeWidth: true,\n scale: true,\n scaleX: true,\n scaleY: true,\n scaleZ: true,\n shadowOpacity: true,\n}\n\n/**\n * Support style names that may come passed in prefixed by adding permutations\n * of vendor prefixes.\n */\n\nconst resolveShadowValue = (style: ViewStyle): void | string => {\n const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style\n if (shadowRadius === undefined) {\n return\n }\n const { height, width } = shadowOffset || defaultOffset\n const offsetX = normalizeValueWithProperty(width)\n const offsetY = normalizeValueWithProperty(height)\n const blurRadius = normalizeValueWithProperty(shadowRadius || 0)\n const color = normalizeColor(String(shadowColor || 'black'), shadowOpacity)\n return `${offsetX} ${offsetY} ${blurRadius} ${color}`\n}\n\nfunction boxShadowReducer(resolvedStyle, style) {\n const { boxShadow } = style\n const shadow = resolveShadowValue(style)\n if (shadow != null) {\n resolvedStyle.boxShadow = boxShadow ? `${boxShadow}, ${shadow}` : shadow\n }\n}\n\nconst defaultOffset = { height: 0, width: 0 }\nfunction textShadowReducer(resolvedStyle, style) {\n const { textShadowColor, textShadowOffset, textShadowRadius } = style\n const { height, width } = textShadowOffset || defaultOffset\n const radius = textShadowRadius || 0\n const offsetX = normalizeValueWithProperty(width)\n const offsetY = normalizeValueWithProperty(height)\n const blurRadius = normalizeValueWithProperty(radius)\n const color = normalizeValueWithProperty(textShadowColor, 'textShadowColor')\n\n if (\n color &&\n (height !== 0 || width !== 0 || radius !== 0) &&\n offsetX != null &&\n offsetY != null &&\n blurRadius != null\n ) {\n resolvedStyle.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`\n }\n}\n\nconst STYLE_SHORT_FORM_EXPANSIONS = {\n borderColor: ['borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor'],\n borderRadius: [\n 'borderTopLeftRadius',\n 'borderTopRightRadius',\n 'borderBottomRightRadius',\n 'borderBottomLeftRadius',\n ],\n borderStyle: ['borderTopStyle', 'borderRightStyle', 'borderBottomStyle', 'borderLeftStyle'],\n borderWidth: ['borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth'],\n margin: ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'],\n marginHorizontal: ['marginRight', 'marginLeft'],\n marginVertical: ['marginTop', 'marginBottom'],\n overscrollBehavior: ['overscrollBehaviorX', 'overscrollBehaviorY'],\n padding: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],\n paddingHorizontal: ['paddingRight', 'paddingLeft'],\n paddingVertical: ['paddingTop', 'paddingBottom'],\n ...(isWeb && {\n // react-native doesn't support X / Y\n overflow: ['overflowX', 'overflowY'],\n }),\n}\n"],
|
|
5
|
-
"mappings": ";;AAKA;AACA;AACA;AAGA;AACA;
|
|
4
|
+
"sourcesContent": ["/**\n * Some parts adapted from react-native-web\n * Copyright (c) Nicolas Gallagher licensed under the MIT license.\n */\n\nimport { StyleObject, simpleHash } from '@tamagui/helpers'\nimport hyphenateStyleName from 'hyphenate-style-name'\nimport normalizeCSSColor from 'normalize-css-color'\nimport { TextStyle, ViewStyle } from 'react-native'\n\nimport { getConfig } from '../conf'\nimport { isWeb } from '../constants/platform'\nimport { reversedShorthands } from '../createTamagui'\nimport { PseudoDescriptor, pseudos } from './pseudos'\n\ntype Value = Object | Array<any> | string | number\nexport type Style = { [key: string]: Value }\n\nexport const generateAtomicStyles = (\n style: ViewStyle & TextStyle,\n pseudo?: PseudoDescriptor\n): StyleObject[] => {\n const res = expandStyles(style)\n const out: StyleObject[] = []\n for (const key in res) {\n const value = res[key]\n if (value != null) {\n const valueString = stringifyValueWithProperty(value, key)\n const hash = simpleHash(key + valueString + (pseudo?.name || ''))\n const cachedResult = cache.get(hash, valueString)\n if (cachedResult != null) {\n out.push(cachedResult)\n } else {\n const pseudoPrefix = pseudo ? `0${pseudo.name}-` : ''\n const shortProp = reversedShorthands[key] || key\n const identifier = `_${shortProp}-${pseudoPrefix}${hash}`\n const rules = createAtomicRules(identifier, key, valueString, pseudo)\n const styleObject: StyleObject = {\n property: key,\n pseudo: pseudo?.name,\n value,\n identifier,\n rules,\n }\n cache.set(hash, valueString, styleObject)\n out.push(styleObject)\n }\n }\n }\n if (style.borderColor === 'transparent') {\n debugger\n }\n return out\n}\n\nconst reducedStyleKeys = {\n shadowColor: true,\n shadowOffset: true,\n shadowOpacity: true,\n shadowRadius: true,\n textShadowColor: true,\n textShadowOffset: true,\n textShadowRadius: true,\n}\n\nlet shorthands: Record<string, string> | null = null\n\n// can likely remove this and include in other loops\nexport function expandStyles(style: any) {\n const res = {}\n boxShadowReducer(res, style)\n textShadowReducer(res, style)\n borderReducer(res, style)\n for (let key in style) {\n shorthands = shorthands || getConfig().shorthands\n if (shorthands) {\n key = shorthands[key] || key\n }\n if (reducedStyleKeys[key]) continue\n if (key in pseudos) {\n res[key] = expandStyles(style[key])\n } else {\n const val = normalizeValueWithProperty(style[key], key)\n const out = expandStyle(key, val)\n if (out) {\n Object.assign(res, Object.fromEntries(out))\n } else {\n res[key] = val\n }\n }\n }\n return res\n}\n\n// why is this diff from react-native-web!? need to figure out\nfunction borderReducer(res: any, cur: any) {\n for (const key in borderDefaults) {\n if (key in cur) {\n res[borderDefaults[key]] = cur[borderDefaults[key]] || 'solid'\n }\n }\n}\n\nconst borderDefaults = {\n borderWidth: 'borderStyle',\n borderBottomWidth: 'borderBottomStyle',\n borderTopWidth: 'borderTopStyle',\n borderLeftWidth: 'borderLeftStyle',\n borderRightWidth: 'borderRightStyle',\n}\n\nfunction createDeclarationBlock(style: Style, important = false) {\n let declarations = ''\n for (const key in style) {\n const prop = hyphenateStyleName(key)\n const value = style[key]\n declarations += `${prop}:${value}`\n }\n return `{${declarations}${important ? ` !important` : ''};}`\n}\n\nconst pseudoSelectorPrefixes = (() => {\n const res: Record<string, string> = {}\n for (const key in pseudos) {\n const pseudo = pseudos[key]\n res[pseudo.name] = [...Array(pseudo.priority)].map(() => ':root').join('') + ' '\n }\n return res\n})()\n\nfunction createAtomicRules(\n identifier: string,\n property: string,\n value: any,\n pseudo?: PseudoDescriptor\n): string[] {\n const selector = pseudo\n ? `${pseudoSelectorPrefixes[pseudo.name]} .${identifier}:${pseudo.name}`\n : `.${identifier}`\n const important = !!pseudo\n\n let rules: string[] = []\n\n // Handle non-standard properties and object values that require multiple\n // CSS rules to be created.\n switch (property) {\n // Equivalent to using '::placeholder'\n case 'placeholderTextColor': {\n const block = createDeclarationBlock({ color: value, opacity: 1 }, important)\n rules.push(`${selector}::placeholder${block}`)\n break\n }\n\n // Polyfill for additional 'pointer-events' values\n // See d13f78622b233a0afc0c7a200c0a0792c8ca9e58\n case 'pointerEvents': {\n let finalValue = value\n if (value === 'auto' || value === 'box-only') {\n finalValue = 'auto!important'\n if (value === 'box-only') {\n const block = createDeclarationBlock({ pointerEvents: 'none' }, important)\n rules.push(`${selector}>*${block}`)\n }\n } else if (value === 'none' || value === 'box-none') {\n finalValue = 'none!important'\n if (value === 'box-none') {\n const block = createDeclarationBlock({ pointerEvents: 'auto' }, important)\n rules.push(`${selector}>*${block}`)\n }\n }\n const block = createDeclarationBlock({ pointerEvents: finalValue }, important)\n rules.push(`${selector}${block}`)\n break\n }\n\n // Polyfill for draft spec\n // https://drafts.csswg.org/css-scrollbars-1/\n case 'scrollbarWidth': {\n if (value === 'none') {\n rules.push(`${selector}::-webkit-scrollbar{display:none}`)\n }\n const block = createDeclarationBlock({ scrollbarWidth: value }, important)\n rules.push(`${selector}${block}`)\n break\n }\n\n default: {\n const block = createDeclarationBlock({ [property]: value }, important)\n rules.push(`${selector}${block}`)\n break\n }\n }\n\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 if (pseudo?.name === 'hover') {\n rules = rules.map((r) => `@media not all and (hover: none) { ${r} }`)\n }\n\n return rules\n}\n\nexport function expandStyle(key: string, value: any) {\n if (key === 'flex') {\n // The 'flex' property value in React Native must be a positive integer,\n // 0, or -1.\n if (value <= -1) {\n return [\n ['flexGrow', 0],\n ['flexShrink', 1],\n ['flexBasis', 'auto'],\n ]\n }\n // normalizing to better align with native\n // see spec for flex shorthand https://developer.mozilla.org/en-US/docs/Web/CSS/flex\n if (value >= 0) {\n return [\n ['flexGrow', value],\n ['flexShrink', 1],\n ]\n }\n return\n }\n\n // web only\n switch (key) {\n // Ignore some React Native styles\n case 'elevation':\n case 'overlayColor':\n case 'resizeMode':\n case 'tintColor': {\n break\n }\n\n case 'aspectRatio': {\n return [[key, value.toString()]]\n }\n\n // TODO: remove once this issue is fixed\n // https://github.com/rofrischmann/inline-style-prefixer/issues/159\n case 'backgroundClip': {\n if (value === 'text') {\n return [\n ['backgroundClip', value],\n ['WebkitBackgroundClip', value],\n ]\n }\n break\n }\n\n case 'textAlignVertical': {\n return [['verticalAlign', value === 'center' ? 'middle' : value]]\n }\n\n case 'textDecorationLine': {\n return [['textDecorationLine', value]]\n }\n\n case 'transform': {\n if (Array.isArray(value)) {\n return [[key, value.map(mapTransform).join(' ')]]\n }\n break\n }\n\n case 'writingDirection': {\n return [['direction', value]]\n }\n }\n\n const longKey = STYLE_SHORT_FORM_EXPANSIONS[key]\n if (longKey) {\n return longKey.map((key) => {\n return [key, value]\n })\n } else {\n if (isWeb && Array.isArray(value)) {\n return [[key, value.join(',')]]\n }\n }\n}\n\nconst cache = {\n get(property, value) {\n if (\n cache[property] != null &&\n cache[property].hasOwnProperty(value) &&\n cache[property][value] != null\n ) {\n return cache[property][value]\n }\n },\n set(property, value, object) {\n if (cache[property] == null) {\n cache[property] = {}\n }\n return (cache[property][value] = object)\n },\n}\n\nfunction stringifyValueWithProperty(value: Value, property?: string): string {\n // e.g., 0 => '0px', 'black' => 'rgba(0,0,0,1)'\n return normalizeValueWithProperty(value, property)\n}\n\n// { scale: 2 } => 'scale(2)'\n// { translateX: 20 } => 'translateX(20px)'\n// { matrix: [1,2,3,4,5,6] } => 'matrix(1,2,3,4,5,6)'\nconst mapTransform = (transform) => {\n const type = Object.keys(transform)[0]\n const value = transform[type]\n if (type === 'matrix' || type === 'matrix3d') {\n return `${type}(${value.join(',')})`\n } else {\n const normalizedValue = normalizeValueWithProperty(value, type)\n return `${type}(${normalizedValue})`\n }\n}\n\nconst colorProps = {\n backgroundColor: true,\n borderColor: true,\n borderTopColor: true,\n borderRightColor: true,\n borderBottomColor: true,\n borderLeftColor: true,\n color: true,\n shadowColor: true,\n textDecorationColor: true,\n textShadowColor: true,\n}\n\nfunction normalizeValueWithProperty(value: any, property?: string): any {\n if (process.env.TAMAGUI_TARGET === 'web') {\n const shouldCoerceToPx =\n typeof value === 'number' &&\n (property === undefined || property === null || !unitlessNumbers[property])\n if (shouldCoerceToPx) {\n return `${value}px`\n }\n }\n if (property && colorProps[property]) {\n return normalizeColor(value)\n }\n return value\n}\n\nconst normalizeColor = (color?: number | string, opacity = 1): void | string => {\n if (color == null || color == undefined) {\n return\n }\n if (process.env.TAMAGUI_TARGET === 'web') {\n if (typeof color === 'string' && isWebColor(color)) {\n return color\n }\n }\n const colorInt = processColor(color)\n if (colorInt != null) {\n const r = (colorInt >> 16) & 255\n const g = (colorInt >> 8) & 255\n const b = colorInt & 255\n const a = ((colorInt >> 24) & 255) / 255\n const alpha = (a * opacity).toFixed(2)\n return `rgba(${r},${g},${b},${alpha})`\n }\n return `${color}`\n}\n\nconst webColors = {\n currentColor: true,\n currentcolor: true,\n transparent: true,\n inherit: true,\n}\n\nconst isWebColor = (color: string): boolean => webColors[color] || color.indexOf('var(') === 0\n\nconst processColor = (color?: number | string): number | undefined | null => {\n if (color === undefined || color === null) {\n return color\n }\n let intColor = normalizeCSSColor(color)\n if (intColor === undefined || intColor === null) {\n return undefined\n }\n return ((+intColor << 24) | (+intColor >>> 8)) >>> 0\n}\n\nconst unitlessNumbers = {\n animationIterationCount: true,\n aspectRatio: true,\n borderImageOutset: true,\n borderImageSlice: true,\n borderImageWidth: true,\n boxFlex: true,\n boxFleGroup: true,\n boxOrdinalGroup: true,\n columnCount: true,\n flex: true,\n flexGrow: true,\n flexOrder: true,\n flexPositive: true,\n flexShrink: true,\n flexNegative: true,\n fontWeight: true,\n gridRow: true,\n gridRowEnd: true,\n gridRowGap: true,\n gridRowStart: true,\n gridColumn: true,\n gridColumnEnd: true,\n gridColumnGap: true,\n gridColumnStart: true,\n lineClamp: true,\n opacity: true,\n order: true,\n orphans: true,\n tabSize: true,\n widows: true,\n zIndex: true,\n zoom: true,\n fillOpacity: true,\n floodOpacity: true,\n stopOpacity: true,\n strokeDasharray: true,\n strokeDashoffset: true,\n strokeMiterlimit: true,\n strokeOpacity: true,\n strokeWidth: true,\n scale: true,\n scaleX: true,\n scaleY: true,\n scaleZ: true,\n shadowOpacity: true,\n}\n\n/**\n * Support style names that may come passed in prefixed by adding permutations\n * of vendor prefixes.\n */\n\nconst resolveShadowValue = (style: ViewStyle): void | string => {\n const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style\n if (shadowRadius === undefined) {\n return\n }\n const { height, width } = shadowOffset || defaultOffset\n const offsetX = normalizeValueWithProperty(width)\n const offsetY = normalizeValueWithProperty(height)\n const blurRadius = normalizeValueWithProperty(shadowRadius || 0)\n const color = normalizeColor(String(shadowColor || 'black'), shadowOpacity)\n return `${offsetX} ${offsetY} ${blurRadius} ${color}`\n}\n\nfunction boxShadowReducer(resolvedStyle: any, style: any) {\n const { boxShadow } = style\n const shadow = resolveShadowValue(style)\n if (shadow != null) {\n resolvedStyle.boxShadow = boxShadow ? `${boxShadow}, ${shadow}` : shadow\n }\n}\n\nconst defaultOffset = { height: 0, width: 0 }\n\nfunction textShadowReducer(resolvedStyle: any, style: any) {\n const { textShadowColor, textShadowOffset, textShadowRadius } = style\n const { height, width } = textShadowOffset || defaultOffset\n const radius = textShadowRadius || 0\n const offsetX = normalizeValueWithProperty(width)\n const offsetY = normalizeValueWithProperty(height)\n const blurRadius = normalizeValueWithProperty(radius)\n const color = normalizeValueWithProperty(textShadowColor, 'textShadowColor')\n\n if (\n color &&\n (height !== 0 || width !== 0 || radius !== 0) &&\n offsetX != null &&\n offsetY != null &&\n blurRadius != null\n ) {\n resolvedStyle.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`\n }\n}\n\nconst STYLE_SHORT_FORM_EXPANSIONS = {\n borderColor: ['borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor'],\n borderRadius: [\n 'borderTopLeftRadius',\n 'borderTopRightRadius',\n 'borderBottomRightRadius',\n 'borderBottomLeftRadius',\n ],\n borderStyle: ['borderTopStyle', 'borderRightStyle', 'borderBottomStyle', 'borderLeftStyle'],\n borderWidth: ['borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth'],\n margin: ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'],\n marginHorizontal: ['marginRight', 'marginLeft'],\n marginVertical: ['marginTop', 'marginBottom'],\n overscrollBehavior: ['overscrollBehaviorX', 'overscrollBehaviorY'],\n padding: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],\n paddingHorizontal: ['paddingRight', 'paddingLeft'],\n paddingVertical: ['paddingTop', 'paddingBottom'],\n ...(isWeb && {\n // react-native doesn't support X / Y\n overflow: ['overflowX', 'overflowY'],\n }),\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -7,7 +7,7 @@ import { isClient, isWeb, useIsomorphicLayoutEffect } from "../constants/platfor
|
|
|
7
7
|
import { mediaQueryConfig, mediaState } from "../hooks/useMedia";
|
|
8
8
|
import { createMediaStyle } from "./createMediaStyle";
|
|
9
9
|
import { fixNativeShadow } from "./fixNativeShadow";
|
|
10
|
-
import { getStylesAtomic
|
|
10
|
+
import { getStylesAtomic } from "./getStylesAtomic";
|
|
11
11
|
import {
|
|
12
12
|
insertStyleRule,
|
|
13
13
|
insertedTransforms,
|
|
@@ -15,6 +15,7 @@ import {
|
|
|
15
15
|
updateInsertedCache
|
|
16
16
|
} from "./insertStyleRule";
|
|
17
17
|
import { mergeTransform } from "./mergeTransform";
|
|
18
|
+
import { pseudos as pseudoAttrs } from "./pseudos";
|
|
18
19
|
const skipProps = {
|
|
19
20
|
animation: true,
|
|
20
21
|
animateOnly: true,
|
|
@@ -35,6 +36,11 @@ const skipProps = {
|
|
|
35
36
|
}
|
|
36
37
|
};
|
|
37
38
|
let conf;
|
|
39
|
+
const pseudoCNInverse = {
|
|
40
|
+
hover: "hoverStyle",
|
|
41
|
+
focus: "focusStyle",
|
|
42
|
+
press: "pressStyle"
|
|
43
|
+
};
|
|
38
44
|
const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state, defaultClassNames, debug) => {
|
|
39
45
|
var _a;
|
|
40
46
|
conf = conf || getConfig();
|
|
@@ -44,6 +50,9 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
44
50
|
const medias = {};
|
|
45
51
|
const usedKeys = /* @__PURE__ */ new Set();
|
|
46
52
|
let style = {};
|
|
53
|
+
if (state.hasTextAncestor) {
|
|
54
|
+
style.display = "inline-flex";
|
|
55
|
+
}
|
|
47
56
|
let classNames = {};
|
|
48
57
|
let transforms = null;
|
|
49
58
|
const rulesToInsert = [];
|
|
@@ -90,6 +99,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
90
99
|
}
|
|
91
100
|
__name(mergeClassName, "mergeClassName");
|
|
92
101
|
const propKeys = Object.keys(props);
|
|
102
|
+
const shouldDoClasses = isWeb && !state.noClassNames;
|
|
93
103
|
if (process.env.NODE_ENV === "development" && debug === "verbose") {
|
|
94
104
|
console.log("propKeys", propKeys);
|
|
95
105
|
}
|
|
@@ -129,18 +139,18 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
129
139
|
}
|
|
130
140
|
for (const cn of valInit.split(" ")) {
|
|
131
141
|
if (cn[0] === "_") {
|
|
132
|
-
const [shorthand,
|
|
133
|
-
const isMedia2 =
|
|
134
|
-
const isPseudo2 =
|
|
142
|
+
const [shorthand, mediaOrPseudo] = cn.slice(1).split("-");
|
|
143
|
+
const isMedia2 = mediaOrPseudo[0] === "_";
|
|
144
|
+
const isPseudo2 = mediaOrPseudo[0] === "0";
|
|
135
145
|
const isMediaOrPseudo2 = isMedia2 || isPseudo2;
|
|
136
146
|
let fullKey = conf.shorthands[shorthand];
|
|
137
147
|
if (isMedia2) {
|
|
138
|
-
let mediaShortKey =
|
|
148
|
+
let mediaShortKey = mediaOrPseudo.slice(1);
|
|
139
149
|
mediaShortKey = mediaShortKey.slice(0, mediaShortKey.indexOf("_"));
|
|
140
|
-
fullKey +=
|
|
150
|
+
fullKey += `_${mediaShortKey}`;
|
|
141
151
|
} else if (isPseudo2) {
|
|
142
|
-
const pseudoShortKey =
|
|
143
|
-
fullKey +=
|
|
152
|
+
const pseudoShortKey = mediaOrPseudo.slice(1);
|
|
153
|
+
fullKey += `_${pseudoShortKey}`;
|
|
144
154
|
}
|
|
145
155
|
usedKeys.add(fullKey);
|
|
146
156
|
mergeClassName(fullKey, cn, isMediaOrPseudo2);
|
|
@@ -154,7 +164,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
154
164
|
}
|
|
155
165
|
continue;
|
|
156
166
|
}
|
|
157
|
-
if (
|
|
167
|
+
if (valInit && valInit[0] === "_") {
|
|
158
168
|
usedKeys.add(keyInit);
|
|
159
169
|
mergeClassName(keyInit, valInit);
|
|
160
170
|
continue;
|
|
@@ -204,10 +214,10 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
204
214
|
}
|
|
205
215
|
pseudos[key] = pseudos[key] || {};
|
|
206
216
|
pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, true);
|
|
207
|
-
if (
|
|
217
|
+
if (shouldDoClasses) {
|
|
208
218
|
const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] });
|
|
209
219
|
for (const style2 of pseudoStyles) {
|
|
210
|
-
const fullKey = `${style2.property}
|
|
220
|
+
const fullKey = `${style2.property}_${pseudoAttrs[key].name}`;
|
|
211
221
|
if (!usedKeys.has(fullKey)) {
|
|
212
222
|
usedKeys.add(fullKey);
|
|
213
223
|
addStyle(style2.identifier, style2.rules.join(";"));
|
|
@@ -227,7 +237,6 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
227
237
|
continue;
|
|
228
238
|
}
|
|
229
239
|
const mediaStyle = getSubStyle(val, staticConfig, theme, props, state);
|
|
230
|
-
const shouldDoClasses = isWeb && !state.noClassNames;
|
|
231
240
|
if (process.env.NODE_ENV === "development" && debug === "verbose") {
|
|
232
241
|
console.log(" \xBB getSplitStyles mediaStyle", { mediaKey, mediaStyle, props, shouldDoClasses });
|
|
233
242
|
}
|
|
@@ -235,7 +244,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
235
244
|
const mediaStyles = getStylesAtomic(mediaStyle);
|
|
236
245
|
for (const style2 of mediaStyles) {
|
|
237
246
|
const out = createMediaStyle(style2, mediaKeyShort, mediaQueryConfig);
|
|
238
|
-
const fullKey = `${style2.property}
|
|
247
|
+
const fullKey = `${style2.property}_${mediaKeyShort}`;
|
|
239
248
|
if (!usedKeys.has(fullKey)) {
|
|
240
249
|
usedKeys.add(fullKey);
|
|
241
250
|
addStyle(out.identifier, out.styleRule);
|
|
@@ -261,15 +270,10 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
261
270
|
usedKeys.add(key);
|
|
262
271
|
if (val && val[0] === "_") {
|
|
263
272
|
classNames[key] = val;
|
|
273
|
+
} else if (key in stylePropsTransform) {
|
|
274
|
+
mergeTransform(style, key, val, true);
|
|
264
275
|
} else {
|
|
265
|
-
|
|
266
|
-
if (process.env.NODE_ENV === "development" && debug) {
|
|
267
|
-
console.log(" > mergeTransform", key, val);
|
|
268
|
-
}
|
|
269
|
-
mergeTransform(style, key, val, true);
|
|
270
|
-
} else {
|
|
271
|
-
style[key] = val;
|
|
272
|
-
}
|
|
276
|
+
style[key] = val;
|
|
273
277
|
}
|
|
274
278
|
continue;
|
|
275
279
|
}
|
|
@@ -287,7 +291,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
287
291
|
...classNames
|
|
288
292
|
};
|
|
289
293
|
}
|
|
290
|
-
if (
|
|
294
|
+
if (shouldDoClasses) {
|
|
291
295
|
const atomic = getStylesAtomic(style);
|
|
292
296
|
for (const atomicStyle of atomic) {
|
|
293
297
|
const key = atomicStyle.property;
|
|
@@ -375,6 +379,7 @@ export {
|
|
|
375
379
|
getSubStyle,
|
|
376
380
|
insertSplitStyles,
|
|
377
381
|
normalizeStyleObject,
|
|
382
|
+
pseudoCNInverse,
|
|
378
383
|
useSplitStyles
|
|
379
384
|
};
|
|
380
385
|
//# sourceMappingURL=getSplitStyles.js.map
|