Function inkTextPropsToCSS

web/lib/ink-compat/prop-mapping.ts:272–328

(props: InkTextStyleProps)

 * Convert Ink Text style props to a React CSSProperties object.
 */
export function inkTextPropsToCSS(props: InkTextStyleProps): CSSProperties {
  const css: CSSProperties = {}

  const fg = inkColorToCSS(props.color)
  const bg = inkColorToCSS(props.backgroundColor)

  if (props.inverse) {
    // Swap foreground and background
    if (fg) css.backgroundColor = fg
    if (bg) css.color = bg
    if (!fg) css.filter = 'invert(1)'
  } else {
    if (fg) css.color = fg
    if (bg) css.backgroundColor = bg
  }

  if (props.bold) css.fontWeight = 'bold'
  if (props.dim) css.opacity = 0.6
  if (props.italic) css.fontStyle = 'italic'

  const decorations: string[] = []
  if (props.underline) decorations.push('underline')
  if (props.strikethrough) decorations.push('line-through')
  if (decorations.length > 0) css.textDecoration = decorations.join(' ')

  if (props.wrap) {
    switch (props.wrap) {
      case 'wrap':
      case 'wrap-trim':
        css.whiteSpace = 'pre-wrap'
        css.overflowWrap = 'anywhere'
        break
      case 'truncate':
      case 'truncate-end':
      case 'end':
        css.overflow = 'hidden'
        css.textOverflow = 'ellipsis'
        css.whiteSpace = 'nowrap'
        break
      case 'truncate-middle':
      case 'middle':
        // CSS can't do mid-truncation; use ellipsis as fallback
        css.overflow = 'hidden'
        css.textOverflow = 'ellipsis'
        css.whiteSpace = 'nowrap'
        break
      case 'truncate-start':
        css.overflow = 'hidden'
        css.direction = 'rtl'
        css.textOverflow = 'ellipsis'
        css.whiteSpace = 'nowrap'
        break
    }
  }

  return css
}