Nested Text breaks out of layout

[alizahid]

What happened?

I have a custom Markdown renderer which has some nested Text components. With uniwind, everything worked as it should. Since beta.8, it's a bit messed up.

uniwind

uniwind-pro beta.8 and 9

Steps to Reproduce

1. Add a Text with a Text nested inside
2. Add following classes to parent: font-sans text-base text-black
3. Add following classes to child: font-mono text-base text-white bg-black

Snack or Repository Link (Optional)

No response

Uniwind version

beta.9

React Native Version

0.81.5

Platforms

Android, iOS

Expo

Yes

Additional information

• I've searched for similar issues in this repository and found none
• I am a Uniwind Pro user

[jpudysz]

Hey!

Can you show me exact code that you use?

Do you use React Native Text component ? What is the exact hierarchy and classNames ?

[alizahid]

Hello!

Here you go;

Reusable Text component

import { type TextProps } from 'react-native'
import { Text as Component } from 'react-native-gesture-handler'
import { twMerge } from 'tailwind-merge'

type Props = TextProps

export function Text({ className, ...props }: Props) {
  return (
    <Component
      {...props}
      allowFontScaling={false}
      className={twMerge('font-sans text-base text-gray-12', className)}
    />
  )
}

Markdown renderer

This runs inside a loop

// `node` is an MDAST element

case 'paragraph':
  return (
    <Text className="self-start">
      {node.children.map((child, key) => (
        <Node key={key} node={child} index={key} />
      ))}
    </Text>
  )

case 'strong':
  return (
    <Text className="font-bold" key={index}>
      {node.children.map((child, key) => (
        <Node key={key} node={child} index={key} />
      ))}
    </Text>
  )

case 'emphasis':
  return (
    <Text className="italic" key={index}>
      {node.children.map((child, key) => (
        <Node key={key} node={child} index={key} />
      ))}
    </Text>
  )

case 'inlineCode':
  return (
    <Text className="font-mono bg-gray-6" key={index}>
      {node.value.replaceAll('&lt;', '<').replaceAll('&gt;', '>')}
    </Text>
  )

The weird part is that even though strong and emphasis also render a Text inside paragraph, they don't break out of the line.

[alizahid]

I've also noticed that regularly nested Text work just fine. Look at the foo foo foo foo foo line.

[jpudysz]

Is world and code a gesture handler Text?

I know I fixed it for regular React Native so thats why i need to understand your code for these breaking lines.

[alizahid]

All Text are react-native-gesture-handler, yes.

Update: I tried import from RN instead of RNGH and the same issue happens. In the previous screenshot, the correct foo foo foo foo foo was also RNGH.

[jpudysz]

Sorry, but I'm more confused 😅

So:

Text
  Text

and

RNGHText
   RNGHText

works?

But

Text
  MDASTNode

or

RNGHText
  MDASTNode

doesn't?

Maybe it will be easier to create super small repro? I don't fully understand your code structure and it's hard to find the root cause.

[alizahid]

Let me try to reproduce. Could just be something with my code.

[alizahid]

Okay, here's a super simple reproduction that can run with just these libraries;

• react-native
• react-native-gesture-handler
• uniwind-pro
• tailwind-merge

import type { Root, RootContent } from 'mdast'
import { View, type TextProps } from 'react-native'
import { Text as RNGHText } from 'react-native-gesture-handler'
import { twMerge } from 'tailwind-merge'

const tree: Root = {
  type: 'root',
  children: [
    {
      type: 'paragraph',
      children: [
        {
          type: 'text',
          value: 'Hello ',
        },
        {
          type: 'inlineCode',
          value: 'code',
        },
        {
          type: 'text',
          value: ' ',
        },
        {
          type: 'strong',
          children: [
            {
              type: 'text',
              value: 'bold',
            },
          ],
        },
        {
          type: 'text',
          value: ' ',
        },
        {
          type: 'emphasis',
          children: [
            {
              type: 'text',
              value: 'italic',
            },
          ],
        },
      ],
    },
  ],
}

export function Markdown() {
  return (
    <View className="items-center m-8">
      {tree.children.map((node, index) => (
        <Node key={index} node={node} />
      ))}
    </View>
  )
}

export function CustomText({ className, ...props }: TextProps) {
  return (
    <RNGHText
      {...props}
      allowFontScaling={false}
      className={twMerge('font-sans text-base text-gray-12', className)}
    />
  )
}

function Node({ node }: { node: RootContent }) {
  if (node.type === 'paragraph') {
    return (
      <CustomText>
        {node.children.map((item, index) => (
          <Node key={index} node={item} />
        ))}
      </CustomText>
    )
  }

  if (node.type === 'strong') {
    return (
      <CustomText className="font-bold">
        {node.children.map((item, index) => (
          <Node key={index} node={item} />
        ))}
      </CustomText>
    )
  }

  if (node.type === 'emphasis') {
    return (
      <CustomText className="italic">
        {node.children.map((item, index) => (
          <Node key={index} node={item} />
        ))}
      </CustomText>
    )
  }

  if (node.type === 'inlineCode') {
    return (
      <CustomText className="font-mono bg-amber-700 text-white">
        {node.value}
      </CustomText>
    )
  }

  if (node.type === 'text') {
    return node.value
  }

  return null
}

The result is below;

However, if I return a CustomText from the text node instead of just the text string, I get this;

It's not perfect; missing styles from strong and emphasis nodes, but the layout it not broken.

Which makes me think that somehow, the string node is not inheriting the styles from its parent CustomText, which is the paragraph node in this case.

The component tree from React Native DevTools shows this;

[a16n-dev]

We've also been experiencing this issue after upgrading to Uniwind Pro (1.0.0-beta.9). I've put together a few test cases to try and narrow down the issue, hopefully this is helpful:

Edit: here is a simple reproduction: https://github.com/a16n-dev/uniwind-playground

---

Note that this uses Text from react-native, no other libraries are being used apart from Uniwind.

import {Text, View} from "react-native";

function CustomNestedText({children}: { children: string }) {
    return (
        <Text>
            <Text>{children}</Text>
        </Text>
    );
}

function CustomText({children}: { children: string }) {
    return (
        <Text>{children}</Text>
    );
}

export default function App() {
    return (
        <View className="flex-1 items-center justify-center gap-8">
            {/* ❌ custom nested text + custom text breaks */}
            <Text>
                <CustomNestedText>{'Hello '}</CustomNestedText>
                <CustomText>{'world '}</CustomText>
            </Text>
            {/* ✅ Inline nested text works fine */}
            <Text>
                <Text>{'Hello '}</Text>
                <Text>
                    <Text>
                        {'world '}
                    </Text>
                </Text>
            </Text>
            {/* ✅ Custom nested text + Custom nested text works fine */}
            <Text>
                <CustomNestedText>{'Hello '}</CustomNestedText>
                <CustomNestedText>{'world '}</CustomNestedText>
            </Text>
            {/* ✅ Single nested + Works fine */}
            <Text>
                <CustomText>{'Hello '}</CustomText>
                <CustomText>{'world '}</CustomText>
            </Text>
            {/* ❌ String + custom text breaks */}
            <Text>
                {'Hello '}
                <CustomText>{'world '}</CustomText>
            </Text>
            {/* ✅ String + custom nested text works fine */}
            <Text>
                {'Hello '}
                <CustomNestedText>{'world '}</CustomNestedText>
            </Text>
            {/* ✅ String + inline nested text works */}
            <Text>
                {'Hello '}
                <Text>
                    <Text>
                        {'world '}
                    </Text>
                </Text>
            </Text>
            {/* ✅ String + inline text works */}
            <Text>
                {'Hello '}
                <Text>
                    {'world '}
                </Text>
            </Text>
        </View>
    );
}

Result:

[jpudysz]

Thank you guys for the details. I will try to repro and push the fix!

[alizahid]

@jpudysz Any luck?

[jpudysz]

Hey @alizahid I'm currently OOO. Will be back at full speed in a week.

I was able to repro @a16n-dev example, and I know why is that happening. Will try to push a fix during the weekend!