@tamagui/web 1.7.10 → 1.7.11

package/dist/esm/helpers/getStylesAtomic.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/getStylesAtomic.ts"],
-  "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 type { TextStyle, ViewStyle } from 'react-native'\n\nimport { getConfig } from '../config.js'\nimport type { TamaguiInternalConfig } from '../types.js'\nimport { defaultOffset } from './defaultOffset.js'\nimport { normalizeValueWithProperty } from './normalizeValueWithProperty.js'\nimport { PseudoDescriptor, pseudoDescriptors } from './pseudoDescriptors.js'\n\n// refactor this file away next...\n\ntype ViewOrTextStyle = ViewStyle | TextStyle\n\nexport type ViewStyleWithPseudos = ViewOrTextStyle & {\n  hoverStyle?: ViewOrTextStyle\n  pressStyle?: ViewOrTextStyle\n  focusStyle?: ViewOrTextStyle\n}\n\n// matching order of the below *0\nconst pseudosOrdered = [\n  pseudoDescriptors.hoverStyle,\n  pseudoDescriptors.pressStyle,\n  pseudoDescriptors.focusStyle,\n]\n\nexport function getStylesAtomic(stylesIn: ViewStyleWithPseudos) {\n  // performance optimization\n  if (!(stylesIn.hoverStyle || stylesIn.pressStyle || stylesIn.focusStyle)) {\n    return getAtomicStyle(stylesIn)\n  }\n\n  // only for pseudos\n  const { hoverStyle, pressStyle, focusStyle, ...base } = stylesIn\n  let res: StyleObject[] = []\n  // *1 order matched to *0\n  for (const [index, style] of [hoverStyle, pressStyle, focusStyle, base].entries()) {\n    if (!style) continue\n    const pseudo = pseudosOrdered[index]\n    res = [...res, ...getAtomicStyle(style, pseudo)]\n  }\n  return res\n}\n\nexport function getAtomicStyle(\n  style: ViewOrTextStyle,\n  pseudo?: PseudoDescriptor\n): StyleObject[] {\n  if (!style) return []\n  if (process.env.NODE_ENV === 'development') {\n    if (!style || typeof style !== 'object') {\n      throw new Error(`Wrong style type: \"${typeof style}\": ${style}`)\n    }\n  }\n  return generateAtomicStyles(style, pseudo)\n}\n\nlet conf: TamaguiInternalConfig\n\nconst generateAtomicStyles = (\n  styleIn: ViewStyle & TextStyle,\n  pseudo?: PseudoDescriptor\n): StyleObject[] => {\n  conf = conf || getConfig()\n\n  // were converting to css styles\n  const style = styleIn as Record<string, string | null | undefined>\n\n  // transform\n  if (style.transform && Array.isArray(style.transform)) {\n    style.transform = style.transform\n      .map(\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)'\n        (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          }\n          return `${type}(${normalizeValueWithProperty(value, type)})`\n        }\n      )\n      .join(' ')\n  }\n\n  styleToCSS(style)\n\n  const out: StyleObject[] = []\n  for (const key in style) {\n    const value = normalizeValueWithProperty(style[key], key)\n    if (value == null || value == undefined) continue\n\n    let hash: string\n    if (presetHashes[value]) {\n      hash = value as string\n    } else {\n      hash = simpleHash(`${value}`)\n    }\n\n    const pseudoPrefix = pseudo ? `0${pseudo.name}-` : ''\n    const shortProp = conf.inverseShorthands[key] || key\n    const identifier = `_${shortProp}-${pseudoPrefix}${hash}`\n    const rules = createAtomicRules(identifier, key, value, pseudo)\n    const styleObject: StyleObject = {\n      property: key,\n      pseudo: pseudo?.name as any,\n      value,\n      identifier,\n      rules,\n    }\n    out.push(styleObject)\n  }\n\n  if (process.env.NODE_ENV === 'development' && process.env.TAMAGUI_DEBUG) {\n    // when Animated.Value gets passed into Tamagui problems are caused this helps debug\n    if (\n      out.find((x) => x.property === 'transform' && x.value.includes(`[object Object]`))\n    ) {\n      // rome-ignore lint/suspicious/noDebugger: only dev\n      debugger\n    }\n  }\n\n  return out\n}\n\nconst presetHashes = {\n  none: true,\n}\n\nexport function styleToCSS(style: Record<string, any>) {\n  // box-shadow\n  const { shadowOffset, shadowRadius, shadowColor } = style\n  if (style.shadowRadius !== undefined) {\n    const offset = shadowOffset || defaultOffset\n    const shadow = `${normalizeValueWithProperty(\n      offset.width\n    )} ${normalizeValueWithProperty(offset.height)} ${normalizeValueWithProperty(\n      shadowRadius\n    )} ${shadowColor}`\n    style.boxShadow = style.boxShadow ? `${style.boxShadow}, ${shadow}` : shadow\n    style.shadowOffset = undefined\n    style.shadowRadius = undefined\n    style.shadowColor = undefined\n  }\n\n  // text-shadow\n  const { textShadowColor, textShadowOffset, textShadowRadius } = style\n  if (textShadowColor || textShadowOffset || textShadowRadius) {\n    const { height, width } = textShadowOffset || defaultOffset\n    const radius = textShadowRadius || 0\n    const color = normalizeValueWithProperty(textShadowColor, 'textShadowColor')\n    if (color && (height !== 0 || width !== 0 || radius !== 0)) {\n      const blurRadius = normalizeValueWithProperty(radius)\n      const offsetX = normalizeValueWithProperty(width)\n      const offsetY = normalizeValueWithProperty(height)\n      style.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`\n    }\n    style.textShadowColor = undefined\n    style.textShadowOffset = undefined\n    style.textShadowRadius = undefined\n  }\n}\n\nfunction createDeclarationBlock(style: Record<string, any>, important = false) {\n  let next = ''\n  for (const key in style) {\n    const prop = hyphenateStyleName(key)\n    const value = style[key]\n    next += `${prop}:${value}${important ? ' !important' : ''};`\n  }\n  return `{${next}}`\n}\n\nconst hcache = {}\nconst toHyphenLower = (match: string) => `-${match.toLowerCase()}`\nconst hyphenateStyleName = (key: string) => {\n  let val = hcache[key]\n  if (val) return val\n  hcache[key] = val = key.replace(/[A-Z]/g, toHyphenLower)\n  return val\n}\n\nconst pseudoSelectorPrefixes = (() => {\n  const res: Record<string, string> = {}\n  for (const key in pseudoDescriptors) {\n    const pseudo = pseudoDescriptors[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    // all webkit prefixed rules\n    case 'backgroundClip':\n    case 'userSelect': {\n      const propertyCapitalized = `${property[0].toUpperCase()}${property.slice(1)}`\n      const webkitProperty = `Webkit${propertyCapitalized}`\n      const block = createDeclarationBlock(\n        { [property]: value, [webkitProperty]: value },\n        important\n      )\n      rules.push(`${selector}${block}`)\n      break\n    }\n\n    // Polyfill for additional 'pointer-events' values\n    case 'pointerEvents': {\n      let finalValue = value\n      if (value === 'auto' || value === 'box-only') {\n        finalValue = 'auto'\n        if (value === 'box-only') {\n          rules.push(`${selector}>*${boxOnly}`)\n        }\n      } else if (value === 'none' || value === 'box-none') {\n        finalValue = 'none'\n        if (value === 'box-none') {\n          rules.push(`${selector}>*${boxNone}`)\n        }\n      }\n      const block = createDeclarationBlock({ pointerEvents: finalValue }, true)\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 && pseudo.name === 'hover') {\n    rules = rules.map((r) => `@media not all and (hover: none) { ${r} }`)\n  }\n\n  return rules\n}\n\nconst boxNone = createDeclarationBlock({ pointerEvents: 'auto' }, true)\nconst boxOnly = createDeclarationBlock({ pointerEvents: 'none' }, true)\n"],
-  "mappings": "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",
+  "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'\n\nimport { getConfig } from '../config.js'\nimport type { TamaguiInternalConfig, ViewStyleWithPseudos } from '../types.js'\nimport { defaultOffset } from './defaultOffset.js'\nimport { normalizeValueWithProperty } from './normalizeValueWithProperty.js'\nimport { PseudoDescriptor, pseudoDescriptors } from './pseudoDescriptors.js'\n\n// refactor this file away next...\n\n// matching order of the below *0\nconst pseudosOrdered = [\n  pseudoDescriptors.hoverStyle,\n  pseudoDescriptors.pressStyle,\n  pseudoDescriptors.focusStyle,\n]\n\nexport function getStylesAtomic(stylesIn: ViewStyleWithPseudos) {\n  // performance optimization\n  if (!(stylesIn.hoverStyle || stylesIn.pressStyle || stylesIn.focusStyle)) {\n    return getAtomicStyle(stylesIn)\n  }\n\n  // only for pseudos\n  const { hoverStyle, pressStyle, focusStyle, ...base } = stylesIn\n  let res: StyleObject[] = []\n  // *1 order matched to *0\n  for (const [index, style] of [hoverStyle, pressStyle, focusStyle, base].entries()) {\n    if (!style) continue\n    const pseudo = pseudosOrdered[index]\n    res = [...res, ...getAtomicStyle(style, pseudo)]\n  }\n  return res\n}\n\nexport function getAtomicStyle(\n  style: ViewStyleWithPseudos,\n  pseudo?: PseudoDescriptor\n): StyleObject[] {\n  if (!style) return []\n  if (process.env.NODE_ENV === 'development') {\n    if (!style || typeof style !== 'object') {\n      throw new Error(`Wrong style type: \"${typeof style}\": ${style}`)\n    }\n  }\n  return generateAtomicStyles(style, pseudo)\n}\n\nlet conf: TamaguiInternalConfig\n\nconst generateAtomicStyles = (\n  styleIn: ViewStyleWithPseudos,\n  pseudo?: PseudoDescriptor\n): StyleObject[] => {\n  conf = conf || getConfig()\n\n  // were converting to css styles\n  const style = styleIn as Record<string, string | null | undefined>\n\n  // transform\n  if (style.transform && Array.isArray(style.transform)) {\n    style.transform = style.transform\n      .map(\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)'\n        (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          }\n          return `${type}(${normalizeValueWithProperty(value, type)})`\n        }\n      )\n      .join(' ')\n  }\n\n  styleToCSS(style)\n\n  const out: StyleObject[] = []\n  for (const key in style) {\n    const value = normalizeValueWithProperty(style[key], key)\n    if (value == null || value == undefined) continue\n\n    let hash: string\n    if (presetHashes[value]) {\n      hash = value as string\n    } else {\n      hash = simpleHash(`${value}`)\n    }\n\n    const pseudoPrefix = pseudo ? `0${pseudo.name}-` : ''\n    const shortProp = conf.inverseShorthands[key] || key\n    const identifier = `_${shortProp}-${pseudoPrefix}${hash}`\n    const rules = createAtomicRules(identifier, key, value, pseudo)\n    const styleObject: StyleObject = {\n      property: key,\n      pseudo: pseudo?.name as any,\n      value,\n      identifier,\n      rules,\n    }\n    out.push(styleObject)\n  }\n\n  if (process.env.NODE_ENV === 'development' && process.env.TAMAGUI_DEBUG) {\n    // when Animated.Value gets passed into Tamagui problems are caused this helps debug\n    if (\n      out.find((x) => x.property === 'transform' && x.value.includes(`[object Object]`))\n    ) {\n      // rome-ignore lint/suspicious/noDebugger: only dev\n      debugger\n    }\n  }\n\n  return out\n}\n\nconst presetHashes = {\n  none: true,\n}\n\nexport function styleToCSS(style: Record<string, any>) {\n  // box-shadow\n  const { shadowOffset, shadowRadius, shadowColor } = style\n  if (style.shadowRadius !== undefined) {\n    const offset = shadowOffset || defaultOffset\n    const shadow = `${normalizeValueWithProperty(\n      offset.width\n    )} ${normalizeValueWithProperty(offset.height)} ${normalizeValueWithProperty(\n      shadowRadius\n    )} ${shadowColor}`\n    style.boxShadow = style.boxShadow ? `${style.boxShadow}, ${shadow}` : shadow\n    style.shadowOffset = undefined\n    style.shadowRadius = undefined\n    style.shadowColor = undefined\n  }\n\n  // text-shadow\n  const { textShadowColor, textShadowOffset, textShadowRadius } = style\n  if (textShadowColor || textShadowOffset || textShadowRadius) {\n    const { height, width } = textShadowOffset || defaultOffset\n    const radius = textShadowRadius || 0\n    const color = normalizeValueWithProperty(textShadowColor, 'textShadowColor')\n    if (color && (height !== 0 || width !== 0 || radius !== 0)) {\n      const blurRadius = normalizeValueWithProperty(radius)\n      const offsetX = normalizeValueWithProperty(width)\n      const offsetY = normalizeValueWithProperty(height)\n      style.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`\n    }\n    style.textShadowColor = undefined\n    style.textShadowOffset = undefined\n    style.textShadowRadius = undefined\n  }\n}\n\nfunction createDeclarationBlock(style: Record<string, any>, important = false) {\n  let next = ''\n  for (const key in style) {\n    const prop = hyphenateStyleName(key)\n    const value = style[key]\n    next += `${prop}:${value}${important ? ' !important' : ''};`\n  }\n  return `{${next}}`\n}\n\nconst hcache = {}\nconst toHyphenLower = (match: string) => `-${match.toLowerCase()}`\nconst hyphenateStyleName = (key: string) => {\n  let val = hcache[key]\n  if (val) return val\n  hcache[key] = val = key.replace(/[A-Z]/g, toHyphenLower)\n  return val\n}\n\nconst pseudoSelectorPrefixes = (() => {\n  const res: Record<string, string> = {}\n  for (const key in pseudoDescriptors) {\n    const pseudo = pseudoDescriptors[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    // all webkit prefixed rules\n    case 'backgroundClip':\n    case 'userSelect': {\n      const propertyCapitalized = `${property[0].toUpperCase()}${property.slice(1)}`\n      const webkitProperty = `Webkit${propertyCapitalized}`\n      const block = createDeclarationBlock(\n        { [property]: value, [webkitProperty]: value },\n        important\n      )\n      rules.push(`${selector}${block}`)\n      break\n    }\n\n    // Polyfill for additional 'pointer-events' values\n    case 'pointerEvents': {\n      let finalValue = value\n      if (value === 'auto' || value === 'box-only') {\n        finalValue = 'auto'\n        if (value === 'box-only') {\n          rules.push(`${selector}>*${boxOnly}`)\n        }\n      } else if (value === 'none' || value === 'box-none') {\n        finalValue = 'none'\n        if (value === 'box-none') {\n          rules.push(`${selector}>*${boxNone}`)\n        }\n      }\n      const block = createDeclarationBlock({ pointerEvents: finalValue }, true)\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 && pseudo.name === 'hover') {\n    rules = rules.map((r) => `@media not all and (hover: none) { ${r} }`)\n  }\n\n  return rules\n}\n\nconst boxNone = createDeclarationBlock({ pointerEvents: 'auto' }, true)\nconst boxOnly = createDeclarationBlock({ pointerEvents: 'none' }, true)\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/helpers/getStylesAtomic.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/getStylesAtomic.ts"],
-  "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 type { TextStyle, ViewStyle } from 'react-native'\n\nimport { getConfig } from '../config.js'\nimport type { TamaguiInternalConfig } from '../types.js'\nimport { defaultOffset } from './defaultOffset.js'\nimport { normalizeValueWithProperty } from './normalizeValueWithProperty.js'\nimport { PseudoDescriptor, pseudoDescriptors } from './pseudoDescriptors.js'\n\n// refactor this file away next...\n\ntype ViewOrTextStyle = ViewStyle | TextStyle\n\nexport type ViewStyleWithPseudos = ViewOrTextStyle & {\n  hoverStyle?: ViewOrTextStyle\n  pressStyle?: ViewOrTextStyle\n  focusStyle?: ViewOrTextStyle\n}\n\n// matching order of the below *0\nconst pseudosOrdered = [\n  pseudoDescriptors.hoverStyle,\n  pseudoDescriptors.pressStyle,\n  pseudoDescriptors.focusStyle,\n]\n\nexport function getStylesAtomic(stylesIn: ViewStyleWithPseudos) {\n  // performance optimization\n  if (!(stylesIn.hoverStyle || stylesIn.pressStyle || stylesIn.focusStyle)) {\n    return getAtomicStyle(stylesIn)\n  }\n\n  // only for pseudos\n  const { hoverStyle, pressStyle, focusStyle, ...base } = stylesIn\n  let res: StyleObject[] = []\n  // *1 order matched to *0\n  for (const [index, style] of [hoverStyle, pressStyle, focusStyle, base].entries()) {\n    if (!style) continue\n    const pseudo = pseudosOrdered[index]\n    res = [...res, ...getAtomicStyle(style, pseudo)]\n  }\n  return res\n}\n\nexport function getAtomicStyle(\n  style: ViewOrTextStyle,\n  pseudo?: PseudoDescriptor\n): StyleObject[] {\n  if (!style) return []\n  if (process.env.NODE_ENV === 'development') {\n    if (!style || typeof style !== 'object') {\n      throw new Error(`Wrong style type: \"${typeof style}\": ${style}`)\n    }\n  }\n  return generateAtomicStyles(style, pseudo)\n}\n\nlet conf: TamaguiInternalConfig\n\nconst generateAtomicStyles = (\n  styleIn: ViewStyle & TextStyle,\n  pseudo?: PseudoDescriptor\n): StyleObject[] => {\n  conf = conf || getConfig()\n\n  // were converting to css styles\n  const style = styleIn as Record<string, string | null | undefined>\n\n  // transform\n  if (style.transform && Array.isArray(style.transform)) {\n    style.transform = style.transform\n      .map(\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)'\n        (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          }\n          return `${type}(${normalizeValueWithProperty(value, type)})`\n        }\n      )\n      .join(' ')\n  }\n\n  styleToCSS(style)\n\n  const out: StyleObject[] = []\n  for (const key in style) {\n    const value = normalizeValueWithProperty(style[key], key)\n    if (value == null || value == undefined) continue\n\n    let hash: string\n    if (presetHashes[value]) {\n      hash = value as string\n    } else {\n      hash = simpleHash(`${value}`)\n    }\n\n    const pseudoPrefix = pseudo ? `0${pseudo.name}-` : ''\n    const shortProp = conf.inverseShorthands[key] || key\n    const identifier = `_${shortProp}-${pseudoPrefix}${hash}`\n    const rules = createAtomicRules(identifier, key, value, pseudo)\n    const styleObject: StyleObject = {\n      property: key,\n      pseudo: pseudo?.name as any,\n      value,\n      identifier,\n      rules,\n    }\n    out.push(styleObject)\n  }\n\n  if (process.env.NODE_ENV === 'development' && process.env.TAMAGUI_DEBUG) {\n    // when Animated.Value gets passed into Tamagui problems are caused this helps debug\n    if (\n      out.find((x) => x.property === 'transform' && x.value.includes(`[object Object]`))\n    ) {\n      // rome-ignore lint/suspicious/noDebugger: only dev\n      debugger\n    }\n  }\n\n  return out\n}\n\nconst presetHashes = {\n  none: true,\n}\n\nexport function styleToCSS(style: Record<string, any>) {\n  // box-shadow\n  const { shadowOffset, shadowRadius, shadowColor } = style\n  if (style.shadowRadius !== undefined) {\n    const offset = shadowOffset || defaultOffset\n    const shadow = `${normalizeValueWithProperty(\n      offset.width\n    )} ${normalizeValueWithProperty(offset.height)} ${normalizeValueWithProperty(\n      shadowRadius\n    )} ${shadowColor}`\n    style.boxShadow = style.boxShadow ? `${style.boxShadow}, ${shadow}` : shadow\n    style.shadowOffset = undefined\n    style.shadowRadius = undefined\n    style.shadowColor = undefined\n  }\n\n  // text-shadow\n  const { textShadowColor, textShadowOffset, textShadowRadius } = style\n  if (textShadowColor || textShadowOffset || textShadowRadius) {\n    const { height, width } = textShadowOffset || defaultOffset\n    const radius = textShadowRadius || 0\n    const color = normalizeValueWithProperty(textShadowColor, 'textShadowColor')\n    if (color && (height !== 0 || width !== 0 || radius !== 0)) {\n      const blurRadius = normalizeValueWithProperty(radius)\n      const offsetX = normalizeValueWithProperty(width)\n      const offsetY = normalizeValueWithProperty(height)\n      style.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`\n    }\n    style.textShadowColor = undefined\n    style.textShadowOffset = undefined\n    style.textShadowRadius = undefined\n  }\n}\n\nfunction createDeclarationBlock(style: Record<string, any>, important = false) {\n  let next = ''\n  for (const key in style) {\n    const prop = hyphenateStyleName(key)\n    const value = style[key]\n    next += `${prop}:${value}${important ? ' !important' : ''};`\n  }\n  return `{${next}}`\n}\n\nconst hcache = {}\nconst toHyphenLower = (match: string) => `-${match.toLowerCase()}`\nconst hyphenateStyleName = (key: string) => {\n  let val = hcache[key]\n  if (val) return val\n  hcache[key] = val = key.replace(/[A-Z]/g, toHyphenLower)\n  return val\n}\n\nconst pseudoSelectorPrefixes = (() => {\n  const res: Record<string, string> = {}\n  for (const key in pseudoDescriptors) {\n    const pseudo = pseudoDescriptors[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    // all webkit prefixed rules\n    case 'backgroundClip':\n    case 'userSelect': {\n      const propertyCapitalized = `${property[0].toUpperCase()}${property.slice(1)}`\n      const webkitProperty = `Webkit${propertyCapitalized}`\n      const block = createDeclarationBlock(\n        { [property]: value, [webkitProperty]: value },\n        important\n      )\n      rules.push(`${selector}${block}`)\n      break\n    }\n\n    // Polyfill for additional 'pointer-events' values\n    case 'pointerEvents': {\n      let finalValue = value\n      if (value === 'auto' || value === 'box-only') {\n        finalValue = 'auto'\n        if (value === 'box-only') {\n          rules.push(`${selector}>*${boxOnly}`)\n        }\n      } else if (value === 'none' || value === 'box-none') {\n        finalValue = 'none'\n        if (value === 'box-none') {\n          rules.push(`${selector}>*${boxNone}`)\n        }\n      }\n      const block = createDeclarationBlock({ pointerEvents: finalValue }, true)\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 && pseudo.name === 'hover') {\n    rules = rules.map((r) => `@media not all and (hover: none) { ${r} }`)\n  }\n\n  return rules\n}\n\nconst boxNone = createDeclarationBlock({ pointerEvents: 'auto' }, true)\nconst boxOnly = createDeclarationBlock({ pointerEvents: 'none' }, true)\n"],
-  "mappings": "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",
+  "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'\n\nimport { getConfig } from '../config.js'\nimport type { TamaguiInternalConfig, ViewStyleWithPseudos } from '../types.js'\nimport { defaultOffset } from './defaultOffset.js'\nimport { normalizeValueWithProperty } from './normalizeValueWithProperty.js'\nimport { PseudoDescriptor, pseudoDescriptors } from './pseudoDescriptors.js'\n\n// refactor this file away next...\n\n// matching order of the below *0\nconst pseudosOrdered = [\n  pseudoDescriptors.hoverStyle,\n  pseudoDescriptors.pressStyle,\n  pseudoDescriptors.focusStyle,\n]\n\nexport function getStylesAtomic(stylesIn: ViewStyleWithPseudos) {\n  // performance optimization\n  if (!(stylesIn.hoverStyle || stylesIn.pressStyle || stylesIn.focusStyle)) {\n    return getAtomicStyle(stylesIn)\n  }\n\n  // only for pseudos\n  const { hoverStyle, pressStyle, focusStyle, ...base } = stylesIn\n  let res: StyleObject[] = []\n  // *1 order matched to *0\n  for (const [index, style] of [hoverStyle, pressStyle, focusStyle, base].entries()) {\n    if (!style) continue\n    const pseudo = pseudosOrdered[index]\n    res = [...res, ...getAtomicStyle(style, pseudo)]\n  }\n  return res\n}\n\nexport function getAtomicStyle(\n  style: ViewStyleWithPseudos,\n  pseudo?: PseudoDescriptor\n): StyleObject[] {\n  if (!style) return []\n  if (process.env.NODE_ENV === 'development') {\n    if (!style || typeof style !== 'object') {\n      throw new Error(`Wrong style type: \"${typeof style}\": ${style}`)\n    }\n  }\n  return generateAtomicStyles(style, pseudo)\n}\n\nlet conf: TamaguiInternalConfig\n\nconst generateAtomicStyles = (\n  styleIn: ViewStyleWithPseudos,\n  pseudo?: PseudoDescriptor\n): StyleObject[] => {\n  conf = conf || getConfig()\n\n  // were converting to css styles\n  const style = styleIn as Record<string, string | null | undefined>\n\n  // transform\n  if (style.transform && Array.isArray(style.transform)) {\n    style.transform = style.transform\n      .map(\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)'\n        (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          }\n          return `${type}(${normalizeValueWithProperty(value, type)})`\n        }\n      )\n      .join(' ')\n  }\n\n  styleToCSS(style)\n\n  const out: StyleObject[] = []\n  for (const key in style) {\n    const value = normalizeValueWithProperty(style[key], key)\n    if (value == null || value == undefined) continue\n\n    let hash: string\n    if (presetHashes[value]) {\n      hash = value as string\n    } else {\n      hash = simpleHash(`${value}`)\n    }\n\n    const pseudoPrefix = pseudo ? `0${pseudo.name}-` : ''\n    const shortProp = conf.inverseShorthands[key] || key\n    const identifier = `_${shortProp}-${pseudoPrefix}${hash}`\n    const rules = createAtomicRules(identifier, key, value, pseudo)\n    const styleObject: StyleObject = {\n      property: key,\n      pseudo: pseudo?.name as any,\n      value,\n      identifier,\n      rules,\n    }\n    out.push(styleObject)\n  }\n\n  if (process.env.NODE_ENV === 'development' && process.env.TAMAGUI_DEBUG) {\n    // when Animated.Value gets passed into Tamagui problems are caused this helps debug\n    if (\n      out.find((x) => x.property === 'transform' && x.value.includes(`[object Object]`))\n    ) {\n      // rome-ignore lint/suspicious/noDebugger: only dev\n      debugger\n    }\n  }\n\n  return out\n}\n\nconst presetHashes = {\n  none: true,\n}\n\nexport function styleToCSS(style: Record<string, any>) {\n  // box-shadow\n  const { shadowOffset, shadowRadius, shadowColor } = style\n  if (style.shadowRadius !== undefined) {\n    const offset = shadowOffset || defaultOffset\n    const shadow = `${normalizeValueWithProperty(\n      offset.width\n    )} ${normalizeValueWithProperty(offset.height)} ${normalizeValueWithProperty(\n      shadowRadius\n    )} ${shadowColor}`\n    style.boxShadow = style.boxShadow ? `${style.boxShadow}, ${shadow}` : shadow\n    style.shadowOffset = undefined\n    style.shadowRadius = undefined\n    style.shadowColor = undefined\n  }\n\n  // text-shadow\n  const { textShadowColor, textShadowOffset, textShadowRadius } = style\n  if (textShadowColor || textShadowOffset || textShadowRadius) {\n    const { height, width } = textShadowOffset || defaultOffset\n    const radius = textShadowRadius || 0\n    const color = normalizeValueWithProperty(textShadowColor, 'textShadowColor')\n    if (color && (height !== 0 || width !== 0 || radius !== 0)) {\n      const blurRadius = normalizeValueWithProperty(radius)\n      const offsetX = normalizeValueWithProperty(width)\n      const offsetY = normalizeValueWithProperty(height)\n      style.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`\n    }\n    style.textShadowColor = undefined\n    style.textShadowOffset = undefined\n    style.textShadowRadius = undefined\n  }\n}\n\nfunction createDeclarationBlock(style: Record<string, any>, important = false) {\n  let next = ''\n  for (const key in style) {\n    const prop = hyphenateStyleName(key)\n    const value = style[key]\n    next += `${prop}:${value}${important ? ' !important' : ''};`\n  }\n  return `{${next}}`\n}\n\nconst hcache = {}\nconst toHyphenLower = (match: string) => `-${match.toLowerCase()}`\nconst hyphenateStyleName = (key: string) => {\n  let val = hcache[key]\n  if (val) return val\n  hcache[key] = val = key.replace(/[A-Z]/g, toHyphenLower)\n  return val\n}\n\nconst pseudoSelectorPrefixes = (() => {\n  const res: Record<string, string> = {}\n  for (const key in pseudoDescriptors) {\n    const pseudo = pseudoDescriptors[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    // all webkit prefixed rules\n    case 'backgroundClip':\n    case 'userSelect': {\n      const propertyCapitalized = `${property[0].toUpperCase()}${property.slice(1)}`\n      const webkitProperty = `Webkit${propertyCapitalized}`\n      const block = createDeclarationBlock(\n        { [property]: value, [webkitProperty]: value },\n        important\n      )\n      rules.push(`${selector}${block}`)\n      break\n    }\n\n    // Polyfill for additional 'pointer-events' values\n    case 'pointerEvents': {\n      let finalValue = value\n      if (value === 'auto' || value === 'box-only') {\n        finalValue = 'auto'\n        if (value === 'box-only') {\n          rules.push(`${selector}>*${boxOnly}`)\n        }\n      } else if (value === 'none' || value === 'box-none') {\n        finalValue = 'none'\n        if (value === 'box-none') {\n          rules.push(`${selector}>*${boxNone}`)\n        }\n      }\n      const block = createDeclarationBlock({ pointerEvents: finalValue }, true)\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 && pseudo.name === 'hover') {\n    rules = rules.map((r) => `@media not all and (hover: none) { ${r} }`)\n  }\n\n  return rules\n}\n\nconst boxNone = createDeclarationBlock({ pointerEvents: 'auto' }, true)\nconst boxOnly = createDeclarationBlock({ pointerEvents: 'none' }, true)\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/views/Stack.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Stack.tsx"],
-  "sourcesContent": ["import type { View } from 'react-native'\n\nimport { stackDefaultStyles } from '../constants/constants.js'\nimport { createComponent } from '../createComponent.js'\nimport type { StackProps, StackPropsBase } from '../types.js'\n\nexport const Stack = createComponent<StackProps, View, StackPropsBase>({\n  componentName: 'Stack',\n  acceptsClassName: true,\n  defaultProps: {\n    ...stackDefaultStyles,\n    flexDirection: 'column',\n  },\n})\n\n// test types\n// export const YStack = styled(Stack, {\n//   flexDirection: 'column',\n// })\n// // test types\n// const x00 = <Stack missing={0} /> // should err\n// const x0 = <YStack missing={0} /> // should err\n// const x1 = (props: StackProps) => <YStack {...props} />\n// type ys = typeof YStack\n// type ysv = ys extends StaticComponent<any, infer V> ? V : unknown\n"],
-  "mappings": "AAEA,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAGzB,MAAM,QAAQ,gBAAkD;AAAA,EACrE,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,cAAc;AAAA,IACZ,GAAG;AAAA,IACH,eAAe;AAAA,EACjB;AACF,CAAC;",
+  "sourcesContent": ["import { stackDefaultStyles } from '../constants/constants.js'\nimport { createComponent } from '../createComponent.js'\nimport type { StackProps, StackPropsBase } from '../types.js'\n\nexport const Stack = createComponent<\n  StackProps,\n  React.Component<StackProps>,\n  StackPropsBase\n>({\n  componentName: 'Stack',\n  acceptsClassName: true,\n  defaultProps: {\n    ...stackDefaultStyles,\n    flexDirection: 'column',\n  },\n})\n\n// test types\n// export const YStack = styled(Stack, {\n//   flexDirection: 'column',\n// })\n// // test types\n// const x00 = <Stack missing={0} /> // should err\n// const x0 = <YStack missing={0} /> // should err\n// const x1 = (props: StackProps) => <YStack {...props} />\n// type ys = typeof YStack\n// type ysv = ys extends StaticComponent<any, infer V> ? V : unknown\n"],
+  "mappings": "AAAA,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAGzB,MAAM,QAAQ,gBAInB;AAAA,EACA,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,cAAc;AAAA,IACZ,GAAG;AAAA,IACH,eAAe;AAAA,EACjB;AACF,CAAC;",
   "names": []
 }

package/dist/esm/views/Stack.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Stack.tsx"],
-  "sourcesContent": ["import type { View } from 'react-native'\n\nimport { stackDefaultStyles } from '../constants/constants.js'\nimport { createComponent } from '../createComponent.js'\nimport type { StackProps, StackPropsBase } from '../types.js'\n\nexport const Stack = createComponent<StackProps, View, StackPropsBase>({\n  componentName: 'Stack',\n  acceptsClassName: true,\n  defaultProps: {\n    ...stackDefaultStyles,\n    flexDirection: 'column',\n  },\n})\n\n// test types\n// export const YStack = styled(Stack, {\n//   flexDirection: 'column',\n// })\n// // test types\n// const x00 = <Stack missing={0} /> // should err\n// const x0 = <YStack missing={0} /> // should err\n// const x1 = (props: StackProps) => <YStack {...props} />\n// type ys = typeof YStack\n// type ysv = ys extends StaticComponent<any, infer V> ? V : unknown\n"],
-  "mappings": "AAEA,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAGzB,MAAM,QAAQ,gBAAkD;AAAA,EACrE,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,cAAc;AAAA,IACZ,GAAG;AAAA,IACH,eAAe;AAAA,EACjB;AACF,CAAC;",
+  "sourcesContent": ["import { stackDefaultStyles } from '../constants/constants.js'\nimport { createComponent } from '../createComponent.js'\nimport type { StackProps, StackPropsBase } from '../types.js'\n\nexport const Stack = createComponent<\n  StackProps,\n  React.Component<StackProps>,\n  StackPropsBase\n>({\n  componentName: 'Stack',\n  acceptsClassName: true,\n  defaultProps: {\n    ...stackDefaultStyles,\n    flexDirection: 'column',\n  },\n})\n\n// test types\n// export const YStack = styled(Stack, {\n//   flexDirection: 'column',\n// })\n// // test types\n// const x00 = <Stack missing={0} /> // should err\n// const x0 = <YStack missing={0} /> // should err\n// const x1 = (props: StackProps) => <YStack {...props} />\n// type ys = typeof YStack\n// type ysv = ys extends StaticComponent<any, infer V> ? V : unknown\n"],
+  "mappings": "AAAA,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAGzB,MAAM,QAAQ,gBAInB;AAAA,EACA,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,cAAc;AAAA,IACZ,GAAG;AAAA,IACH,eAAe;AAAA,EACjB;AACF,CAAC;",
   "names": []
 }

package/dist/esm/views/Text.js

@@ -7,63 +7,65 @@ const ellipseStyle = {
   textOverflow: "ellipsis",
   whiteSpace: "nowrap"
 };
-const Text = createComponent({
-  componentName: "Text",
-  acceptsClassName: true,
-  isText: true,
-  defaultProps: {
-    // @ts-ignore
-    display: "flex",
-    fontFamily: "System",
-    ...isWeb ? {
-      display: "inline",
-      boxSizing: "border-box",
-      wordWrap: "break-word",
-      margin: 0
-    } : {
-      suppressHighlighting: true
-    }
-  },
-  inlineWhenUnflattened: /* @__PURE__ */ new Set(["fontFamily"]),
-  variants: {
-    ...isWeb && {
-      numberOfLines: {
-        1: ellipseStyle,
-        ":number": (numberOfLines) => numberOfLines >= 1 ? {
-          WebkitLineClamp: numberOfLines,
-          WebkitBoxOrient: "vertical",
-          display: "-webkit-box",
-          overflow: "hidden"
-        } : null
+const Text = createComponent(
+  {
+    componentName: "Text",
+    acceptsClassName: true,
+    isText: true,
+    defaultProps: {
+      // @ts-ignore
+      display: "flex",
+      fontFamily: "System",
+      ...isWeb ? {
+        display: "inline",
+        boxSizing: "border-box",
+        wordWrap: "break-word",
+        margin: 0
+      } : {
+        suppressHighlighting: true
       }
     },
-    // ??
-    ellipsizeMode: {
-      "...": () => null
-    },
-    selectable: {
-      true: {
-        userSelect: "text",
-        cursor: "text"
+    inlineWhenUnflattened: /* @__PURE__ */ new Set(["fontFamily"]),
+    variants: {
+      ...isWeb && {
+        numberOfLines: {
+          1: ellipseStyle,
+          ":number": (numberOfLines) => numberOfLines >= 1 ? {
+            WebkitLineClamp: numberOfLines,
+            WebkitBoxOrient: "vertical",
+            display: "-webkit-box",
+            overflow: "hidden"
+          } : null
+        }
+      },
+      // ??
+      ellipsizeMode: {
+        "...": () => null
       },
-      false: {
-        userSelect: "none",
-        cursor: "default"
+      selectable: {
+        true: {
+          userSelect: "text",
+          cursor: "text"
+        },
+        false: {
+          userSelect: "none",
+          cursor: "default"
+        }
+      },
+      ellipse: {
+        true: isWeb ? ellipseStyle : {
+          numberOfLines: 1,
+          lineBreakMode: "clip"
+        }
       }
     },
-    ellipse: {
-      true: isWeb ? ellipseStyle : {
-        numberOfLines: 1,
-        lineBreakMode: "clip"
-      }
+    deoptProps: new Set(isWeb ? [] : ["ellipse"]),
+    validStyles: {
+      ...validStyles,
+      ...stylePropsTextOnly
     }
-  },
-  deoptProps: new Set(isWeb ? [] : ["ellipse"]),
-  validStyles: {
-    ...validStyles,
-    ...stylePropsTextOnly
   }
-});
+);
 export {
   Text
 };

package/dist/esm/views/Text.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Text.tsx"],
-  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { stylePropsTextOnly, validStyles } from '@tamagui/helpers'\nimport type { Text as TextView } from 'react-native'\n\nimport { createComponent } from '../createComponent.js'\nimport { TextProps, TextPropsBase } from '../types.js'\n\nconst ellipseStyle = {\n  maxWidth: '100%',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}\n\nexport const Text = createComponent<TextProps, TextView, TextPropsBase>({\n  componentName: 'Text',\n  acceptsClassName: true,\n  isText: true,\n\n  defaultProps: {\n    // @ts-ignore\n    display: 'flex',\n    fontFamily: 'System',\n    ...(isWeb\n      ? {\n          display: 'inline',\n          boxSizing: 'border-box',\n          wordWrap: 'break-word',\n          margin: 0,\n        }\n      : {\n          suppressHighlighting: true,\n        }),\n  },\n\n  inlineWhenUnflattened: new Set(['fontFamily']),\n\n  variants: {\n    ...(isWeb && {\n      numberOfLines: {\n        1: ellipseStyle,\n\n        ':number': (numberOfLines) =>\n          numberOfLines >= 1\n            ? {\n                WebkitLineClamp: numberOfLines,\n                WebkitBoxOrient: 'vertical',\n                display: '-webkit-box',\n                overflow: 'hidden',\n              }\n            : null,\n      },\n    }),\n\n    // ??\n    ellipsizeMode: {\n      '...': () => null,\n    },\n\n    selectable: {\n      true: {\n        userSelect: 'text',\n        cursor: 'text',\n      },\n      false: {\n        userSelect: 'none',\n        cursor: 'default',\n      },\n    },\n\n    ellipse: {\n      true: isWeb\n        ? ellipseStyle\n        : {\n            numberOfLines: 1,\n            lineBreakMode: 'clip',\n          },\n    },\n  },\n\n  deoptProps: new Set(isWeb ? [] : ['ellipse']),\n\n  validStyles: {\n    ...validStyles,\n    ...stylePropsTextOnly,\n  },\n})\n"],
-  "mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,oBAAoB,mBAAmB;AAGhD,SAAS,uBAAuB;AAGhC,MAAM,eAAe;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd;AAEO,MAAM,OAAO,gBAAoD;AAAA,EACtE,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,QAAQ;AAAA,EAER,cAAc;AAAA;AAAA,IAEZ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,GAAI,QACA;AAAA,MACE,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,MACV,QAAQ;AAAA,IACV,IACA;AAAA,MACE,sBAAsB;AAAA,IACxB;AAAA,EACN;AAAA,EAEA,uBAAuB,oBAAI,IAAI,CAAC,YAAY,CAAC;AAAA,EAE7C,UAAU;AAAA,IACR,GAAI,SAAS;AAAA,MACX,eAAe;AAAA,QACb,GAAG;AAAA,QAEH,WAAW,CAAC,kBACV,iBAAiB,IACb;AAAA,UACE,iBAAiB;AAAA,UACjB,iBAAiB;AAAA,UACjB,SAAS;AAAA,UACT,UAAU;AAAA,QACZ,IACA;AAAA,MACR;AAAA,IACF;AAAA;AAAA,IAGA,eAAe;AAAA,MACb,OAAO,MAAM;AAAA,IACf;AAAA,IAEA,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,MACA,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IAEA,SAAS;AAAA,MACP,MAAM,QACF,eACA;AAAA,QACE,eAAe;AAAA,QACf,eAAe;AAAA,MACjB;AAAA,IACN;AAAA,EACF;AAAA,EAEA,YAAY,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;AAAA,EAE5C,aAAa;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF,CAAC;",
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { stylePropsTextOnly, validStyles } from '@tamagui/helpers'\n\nimport { createComponent } from '../createComponent.js'\nimport { TextProps, TextPropsBase } from '../types.js'\n\nconst ellipseStyle = {\n  maxWidth: '100%',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}\n\nexport const Text = createComponent<TextProps, React.Component<TextProps>, TextPropsBase>(\n  {\n    componentName: 'Text',\n    acceptsClassName: true,\n    isText: true,\n\n    defaultProps: {\n      // @ts-ignore\n      display: 'flex',\n      fontFamily: 'System',\n      ...(isWeb\n        ? {\n            display: 'inline',\n            boxSizing: 'border-box',\n            wordWrap: 'break-word',\n            margin: 0,\n          }\n        : {\n            suppressHighlighting: true,\n          }),\n    },\n\n    inlineWhenUnflattened: new Set(['fontFamily']),\n\n    variants: {\n      ...(isWeb && {\n        numberOfLines: {\n          1: ellipseStyle,\n\n          ':number': (numberOfLines) =>\n            numberOfLines >= 1\n              ? {\n                  WebkitLineClamp: numberOfLines,\n                  WebkitBoxOrient: 'vertical',\n                  display: '-webkit-box',\n                  overflow: 'hidden',\n                }\n              : null,\n        },\n      }),\n\n      // ??\n      ellipsizeMode: {\n        '...': () => null,\n      },\n\n      selectable: {\n        true: {\n          userSelect: 'text',\n          cursor: 'text',\n        },\n        false: {\n          userSelect: 'none',\n          cursor: 'default',\n        },\n      },\n\n      ellipse: {\n        true: isWeb\n          ? ellipseStyle\n          : {\n              numberOfLines: 1,\n              lineBreakMode: 'clip',\n            },\n      },\n    },\n\n    deoptProps: new Set(isWeb ? [] : ['ellipse']),\n\n    validStyles: {\n      ...validStyles,\n      ...stylePropsTextOnly,\n    },\n  }\n)\n"],
+  "mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,oBAAoB,mBAAmB;AAEhD,SAAS,uBAAuB;AAGhC,MAAM,eAAe;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd;AAEO,MAAM,OAAO;AAAA,EAClB;AAAA,IACE,eAAe;AAAA,IACf,kBAAkB;AAAA,IAClB,QAAQ;AAAA,IAER,cAAc;AAAA;AAAA,MAEZ,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,GAAI,QACA;AAAA,QACE,SAAS;AAAA,QACT,WAAW;AAAA,QACX,UAAU;AAAA,QACV,QAAQ;AAAA,MACV,IACA;AAAA,QACE,sBAAsB;AAAA,MACxB;AAAA,IACN;AAAA,IAEA,uBAAuB,oBAAI,IAAI,CAAC,YAAY,CAAC;AAAA,IAE7C,UAAU;AAAA,MACR,GAAI,SAAS;AAAA,QACX,eAAe;AAAA,UACb,GAAG;AAAA,UAEH,WAAW,CAAC,kBACV,iBAAiB,IACb;AAAA,YACE,iBAAiB;AAAA,YACjB,iBAAiB;AAAA,YACjB,SAAS;AAAA,YACT,UAAU;AAAA,UACZ,IACA;AAAA,QACR;AAAA,MACF;AAAA;AAAA,MAGA,eAAe;AAAA,QACb,OAAO,MAAM;AAAA,MACf;AAAA,MAEA,YAAY;AAAA,QACV,MAAM;AAAA,UACJ,YAAY;AAAA,UACZ,QAAQ;AAAA,QACV;AAAA,QACA,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,MAEA,SAAS;AAAA,QACP,MAAM,QACF,eACA;AAAA,UACE,eAAe;AAAA,UACf,eAAe;AAAA,QACjB;AAAA,MACN;AAAA,IACF;AAAA,IAEA,YAAY,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;AAAA,IAE5C,aAAa;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/views/Text.mjs

@@ -7,63 +7,65 @@ const ellipseStyle = {
   textOverflow: "ellipsis",
   whiteSpace: "nowrap"
 };
-const Text = createComponent({
-  componentName: "Text",
-  acceptsClassName: true,
-  isText: true,
-  defaultProps: {
-    // @ts-ignore
-    display: "flex",
-    fontFamily: "System",
-    ...isWeb ? {
-      display: "inline",
-      boxSizing: "border-box",
-      wordWrap: "break-word",
-      margin: 0
-    } : {
-      suppressHighlighting: true
-    }
-  },
-  inlineWhenUnflattened: /* @__PURE__ */ new Set(["fontFamily"]),
-  variants: {
-    ...isWeb && {
-      numberOfLines: {
-        1: ellipseStyle,
-        ":number": (numberOfLines) => numberOfLines >= 1 ? {
-          WebkitLineClamp: numberOfLines,
-          WebkitBoxOrient: "vertical",
-          display: "-webkit-box",
-          overflow: "hidden"
-        } : null
+const Text = createComponent(
+  {
+    componentName: "Text",
+    acceptsClassName: true,
+    isText: true,
+    defaultProps: {
+      // @ts-ignore
+      display: "flex",
+      fontFamily: "System",
+      ...isWeb ? {
+        display: "inline",
+        boxSizing: "border-box",
+        wordWrap: "break-word",
+        margin: 0
+      } : {
+        suppressHighlighting: true
       }
     },
-    // ??
-    ellipsizeMode: {
-      "...": () => null
-    },
-    selectable: {
-      true: {
-        userSelect: "text",
-        cursor: "text"
+    inlineWhenUnflattened: /* @__PURE__ */ new Set(["fontFamily"]),
+    variants: {
+      ...isWeb && {
+        numberOfLines: {
+          1: ellipseStyle,
+          ":number": (numberOfLines) => numberOfLines >= 1 ? {
+            WebkitLineClamp: numberOfLines,
+            WebkitBoxOrient: "vertical",
+            display: "-webkit-box",
+            overflow: "hidden"
+          } : null
+        }
+      },
+      // ??
+      ellipsizeMode: {
+        "...": () => null
       },
-      false: {
-        userSelect: "none",
-        cursor: "default"
+      selectable: {
+        true: {
+          userSelect: "text",
+          cursor: "text"
+        },
+        false: {
+          userSelect: "none",
+          cursor: "default"
+        }
+      },
+      ellipse: {
+        true: isWeb ? ellipseStyle : {
+          numberOfLines: 1,
+          lineBreakMode: "clip"
+        }
       }
     },
-    ellipse: {
-      true: isWeb ? ellipseStyle : {
-        numberOfLines: 1,
-        lineBreakMode: "clip"
-      }
+    deoptProps: new Set(isWeb ? [] : ["ellipse"]),
+    validStyles: {
+      ...validStyles,
+      ...stylePropsTextOnly
     }
-  },
-  deoptProps: new Set(isWeb ? [] : ["ellipse"]),
-  validStyles: {
-    ...validStyles,
-    ...stylePropsTextOnly
   }
-});
+);
 export {
   Text
 };

package/dist/esm/views/Text.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Text.tsx"],
-  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { stylePropsTextOnly, validStyles } from '@tamagui/helpers'\nimport type { Text as TextView } from 'react-native'\n\nimport { createComponent } from '../createComponent.js'\nimport { TextProps, TextPropsBase } from '../types.js'\n\nconst ellipseStyle = {\n  maxWidth: '100%',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}\n\nexport const Text = createComponent<TextProps, TextView, TextPropsBase>({\n  componentName: 'Text',\n  acceptsClassName: true,\n  isText: true,\n\n  defaultProps: {\n    // @ts-ignore\n    display: 'flex',\n    fontFamily: 'System',\n    ...(isWeb\n      ? {\n          display: 'inline',\n          boxSizing: 'border-box',\n          wordWrap: 'break-word',\n          margin: 0,\n        }\n      : {\n          suppressHighlighting: true,\n        }),\n  },\n\n  inlineWhenUnflattened: new Set(['fontFamily']),\n\n  variants: {\n    ...(isWeb && {\n      numberOfLines: {\n        1: ellipseStyle,\n\n        ':number': (numberOfLines) =>\n          numberOfLines >= 1\n            ? {\n                WebkitLineClamp: numberOfLines,\n                WebkitBoxOrient: 'vertical',\n                display: '-webkit-box',\n                overflow: 'hidden',\n              }\n            : null,\n      },\n    }),\n\n    // ??\n    ellipsizeMode: {\n      '...': () => null,\n    },\n\n    selectable: {\n      true: {\n        userSelect: 'text',\n        cursor: 'text',\n      },\n      false: {\n        userSelect: 'none',\n        cursor: 'default',\n      },\n    },\n\n    ellipse: {\n      true: isWeb\n        ? ellipseStyle\n        : {\n            numberOfLines: 1,\n            lineBreakMode: 'clip',\n          },\n    },\n  },\n\n  deoptProps: new Set(isWeb ? [] : ['ellipse']),\n\n  validStyles: {\n    ...validStyles,\n    ...stylePropsTextOnly,\n  },\n})\n"],
-  "mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,oBAAoB,mBAAmB;AAGhD,SAAS,uBAAuB;AAGhC,MAAM,eAAe;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd;AAEO,MAAM,OAAO,gBAAoD;AAAA,EACtE,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,QAAQ;AAAA,EAER,cAAc;AAAA;AAAA,IAEZ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,GAAI,QACA;AAAA,MACE,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,MACV,QAAQ;AAAA,IACV,IACA;AAAA,MACE,sBAAsB;AAAA,IACxB;AAAA,EACN;AAAA,EAEA,uBAAuB,oBAAI,IAAI,CAAC,YAAY,CAAC;AAAA,EAE7C,UAAU;AAAA,IACR,GAAI,SAAS;AAAA,MACX,eAAe;AAAA,QACb,GAAG;AAAA,QAEH,WAAW,CAAC,kBACV,iBAAiB,IACb;AAAA,UACE,iBAAiB;AAAA,UACjB,iBAAiB;AAAA,UACjB,SAAS;AAAA,UACT,UAAU;AAAA,QACZ,IACA;AAAA,MACR;AAAA,IACF;AAAA;AAAA,IAGA,eAAe;AAAA,MACb,OAAO,MAAM;AAAA,IACf;AAAA,IAEA,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,MACA,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IAEA,SAAS;AAAA,MACP,MAAM,QACF,eACA;AAAA,QACE,eAAe;AAAA,QACf,eAAe;AAAA,MACjB;AAAA,IACN;AAAA,EACF;AAAA,EAEA,YAAY,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;AAAA,EAE5C,aAAa;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF,CAAC;",
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { stylePropsTextOnly, validStyles } from '@tamagui/helpers'\n\nimport { createComponent } from '../createComponent.js'\nimport { TextProps, TextPropsBase } from '../types.js'\n\nconst ellipseStyle = {\n  maxWidth: '100%',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}\n\nexport const Text = createComponent<TextProps, React.Component<TextProps>, TextPropsBase>(\n  {\n    componentName: 'Text',\n    acceptsClassName: true,\n    isText: true,\n\n    defaultProps: {\n      // @ts-ignore\n      display: 'flex',\n      fontFamily: 'System',\n      ...(isWeb\n        ? {\n            display: 'inline',\n            boxSizing: 'border-box',\n            wordWrap: 'break-word',\n            margin: 0,\n          }\n        : {\n            suppressHighlighting: true,\n          }),\n    },\n\n    inlineWhenUnflattened: new Set(['fontFamily']),\n\n    variants: {\n      ...(isWeb && {\n        numberOfLines: {\n          1: ellipseStyle,\n\n          ':number': (numberOfLines) =>\n            numberOfLines >= 1\n              ? {\n                  WebkitLineClamp: numberOfLines,\n                  WebkitBoxOrient: 'vertical',\n                  display: '-webkit-box',\n                  overflow: 'hidden',\n                }\n              : null,\n        },\n      }),\n\n      // ??\n      ellipsizeMode: {\n        '...': () => null,\n      },\n\n      selectable: {\n        true: {\n          userSelect: 'text',\n          cursor: 'text',\n        },\n        false: {\n          userSelect: 'none',\n          cursor: 'default',\n        },\n      },\n\n      ellipse: {\n        true: isWeb\n          ? ellipseStyle\n          : {\n              numberOfLines: 1,\n              lineBreakMode: 'clip',\n            },\n      },\n    },\n\n    deoptProps: new Set(isWeb ? [] : ['ellipse']),\n\n    validStyles: {\n      ...validStyles,\n      ...stylePropsTextOnly,\n    },\n  }\n)\n"],
+  "mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,oBAAoB,mBAAmB;AAEhD,SAAS,uBAAuB;AAGhC,MAAM,eAAe;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd;AAEO,MAAM,OAAO;AAAA,EAClB;AAAA,IACE,eAAe;AAAA,IACf,kBAAkB;AAAA,IAClB,QAAQ;AAAA,IAER,cAAc;AAAA;AAAA,MAEZ,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,GAAI,QACA;AAAA,QACE,SAAS;AAAA,QACT,WAAW;AAAA,QACX,UAAU;AAAA,QACV,QAAQ;AAAA,MACV,IACA;AAAA,QACE,sBAAsB;AAAA,MACxB;AAAA,IACN;AAAA,IAEA,uBAAuB,oBAAI,IAAI,CAAC,YAAY,CAAC;AAAA,IAE7C,UAAU;AAAA,MACR,GAAI,SAAS;AAAA,QACX,eAAe;AAAA,UACb,GAAG;AAAA,UAEH,WAAW,CAAC,kBACV,iBAAiB,IACb;AAAA,YACE,iBAAiB;AAAA,YACjB,iBAAiB;AAAA,YACjB,SAAS;AAAA,YACT,UAAU;AAAA,UACZ,IACA;AAAA,QACR;AAAA,MACF;AAAA;AAAA,MAGA,eAAe;AAAA,QACb,OAAO,MAAM;AAAA,MACf;AAAA,MAEA,YAAY;AAAA,QACV,MAAM;AAAA,UACJ,YAAY;AAAA,UACZ,QAAQ;AAAA,QACV;AAAA,QACA,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,MAEA,SAAS;AAAA,QACP,MAAM,QACF,eACA;AAAA,UACE,eAAe;AAAA,UACf,eAAe;AAAA,QACjB;AAAA,MACN;AAAA,IACF;AAAA,IAEA,YAAY,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;AAAA,IAE5C,aAAa;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,EACF;AACF;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.7.10",
+  "version": "1.7.11",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,19 +27,19 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "1.7.10",
-    "@tamagui/constants": "1.7.10",
-    "@tamagui/helpers": "1.7.10",
-    "@tamagui/normalize-css-color": "1.7.10",
-    "@tamagui/use-did-finish-ssr": "1.7.10",
-    "@tamagui/use-event": "1.7.10",
-    "@tamagui/use-force-update": "1.7.10"
+    "@tamagui/compose-refs": "1.7.11",
+    "@tamagui/constants": "1.7.11",
+    "@tamagui/helpers": "1.7.11",
+    "@tamagui/normalize-css-color": "1.7.11",
+    "@tamagui/use-did-finish-ssr": "1.7.11",
+    "@tamagui/use-event": "1.7.11",
+    "@tamagui/use-force-update": "1.7.11"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.7.10",
+    "@tamagui/build": "1.7.11",
     "@testing-library/react": "^13.4.0",
     "csstype": "^3.0.10",
     "react": "^18.2.0",

package/src/createTamagui.ts

@@ -200,6 +200,12 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
 
   const shorthands = configIn.shorthands || {}
 
+  if (process.env.TAMAGUI_TARGET === 'native') {
+    // abuse shorthands for remapping the native style gap keys
+    shorthands.gapRow ??= 'rowGap'
+    shorthands.gapColumn ??= 'columnGap'
+  }
+
   const config: TamaguiInternalConfig = {
     fontLanguages: [],
     animations: {} as any,

package/src/helpers/getSplitStyles.tsx

@@ -37,7 +37,9 @@ import type {
   StaticConfigParsed,
   StyleObject,
   TamaguiInternalConfig,
+  TextStyleProps,
   ThemeParsed,
+  ViewStyleWithPseudos,
 } from '../types.js'
 import type {
   FontLanguageProps,
@@ -61,7 +63,7 @@ import {
 import { pseudoDescriptors } from './pseudoDescriptors.js'
 
 type GetStyleState = {
-  style: ViewStyle
+  style: TextStyleProps
   usedKeys: Record<string, number>
   classNames: ClassNamesObject
   staticConfig: StaticConfigParsed
@@ -227,7 +229,7 @@ export const getSplitStyles: StyleSplitter = (
   const shouldDoClasses =
     staticConfig.acceptsClassName && (isWeb || IS_STATIC) && !state.noClassNames
 
-  let style: ViewStyle | TextStyle = {}
+  let style: ViewStyleWithPseudos = {}
   const flatTransforms: FlatTransforms = {}
 
   const len = propKeys.length
@@ -759,6 +761,7 @@ export const getSplitStyles: StyleSplitter = (
               }
             }
           }
+
           const mediaStyles = getStylesAtomic(mediaStyle)
           for (const style of mediaStyles) {
             const out = createMediaStyle(style, mediaKeyShort, mediaQueryConfig)
@@ -789,7 +792,7 @@ export const getSplitStyles: StyleSplitter = (
               usedKeys
             )
             if (key === 'fontFamily') {
-              fontFamily = mediaStyle[key]
+              fontFamily = mediaStyle.fontFamily as string
             }
           }
         }
@@ -831,10 +834,10 @@ export const getSplitStyles: StyleSplitter = (
   // native: swap out the right family based on weight/style
   if (process.env.TAMAGUI_TARGET === 'native') {
     if ('fontFamily' in style && style.fontFamily) {
-      const faceInfo = getFont(style.fontFamily)?.face
+      const faceInfo = getFont(style.fontFamily as string)?.face
       if (faceInfo) {
         const overrideFace =
-          faceInfo[style.fontWeight!]?.[style.fontStyle || 'normal']?.val
+          faceInfo[style.fontWeight as string]?.[style.fontStyle || 'normal']?.val
         if (overrideFace) {
           style.fontFamily = overrideFace
           fontFamily = overrideFace
@@ -929,11 +932,20 @@ export const getSplitStyles: StyleSplitter = (
     }
   }
 
+  // now we need to reverse viewProps because order is important for wrapped tamagui children:
+  // techcnically we could just do this when it is HOC/has parentStaticConfig I think... but safer this way
+  const nextViewProps = {}
+  const ks = Object.keys(viewProps)
+  const l = ks.length
+  for (let i = l - 1; i >= 0; i--) {
+    nextViewProps[ks[i]] = viewProps[ks[i]]
+  }
+
   const result = {
     space,
     hasMedia,
     fontFamily,
-    viewProps,
+    viewProps: nextViewProps,
     style,
     pseudos,
     classNames,
@@ -1058,9 +1070,9 @@ export const getSubStyle = (
   styleIn: Object,
   avoidDefaultProps?: boolean,
   avoidMergeTransform?: boolean
-): ViewStyle => {
+): TextStyleProps => {
   const { staticConfig, theme, props, state, conf, languageContext } = styleState
-  const styleOut: ViewStyle = {}
+  const styleOut: TextStyleProps = {}
 
   for (let key in styleIn) {
     const val = styleIn[key]
@@ -1139,7 +1151,12 @@ const hyphenate = (str: string) => str.replace(/[A-Z]/g, lowercaseHyphenate)
 
 export type FlatTransforms = Record<string, any>
 
-const mergeTransform = (obj: ViewStyle, key: string, val: any, backwards = false) => {
+const mergeTransform = (
+  obj: TextStyleProps,
+  key: string,
+  val: any,
+  backwards = false
+) => {
   obj.transform ||= []
   obj.transform[backwards ? 'unshift' : 'push']({
     [mapTransformKeys[key] || key]: val,
@@ -1147,7 +1164,7 @@ const mergeTransform = (obj: ViewStyle, key: string, val: any, backwards = false
 }
 
 const mergeTransforms = (
-  obj: ViewStyle,
+  obj: TextStyleProps,
   flatTransforms: FlatTransforms,
   backwards = false
 ) => {