Skip to content

JSX text wrapping seems a little bit incorrect #18384

@Dunqing

Description

@Dunqing

Prettier 3.7.3
Playground link

--parser typescript

Input:

// test file: jsx/significant-space/test.js
before_break1 =
  <span>
    <span barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar /> foo
  </span>

// test file: jsx/text-wrap/test.js
x =
  <div>
    ENDS IN <div>
      text text text text text text text text text text text
    </div>{" "}
    HRS
  </div>

Output:

before_break1 = (
  <span>
    <span barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar />{" "}
    foo
  </span>
);

x = (
  <div>
    ENDS IN <div>text text text text text text text text text text text</div>{" "}
    HRS
  </div>
);

Expected output:

before_break1 = (
  <span>
    <span
      barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar
    />{" "}
    foo
  </span>
);

x = (
  <div>
    ENDS IN <div>
      text text text text text text text text text text text
    </div>{" "}
    HRS
  </div>
);

Why?

Image

Both cases' line widths are over 80, so they should be broken into the next line.

Note: I am working on fixing oxc-project/oxc#16199 and found that these two cases fail after that issue case has been resolved.

Metadata

Metadata

Assignees

No one assigned

    Labels

    type:duplicateIssues that are a duplicate of a previous issue

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions