Inconsistent indentation in JSX conditional blocks

[christianlegge]

Prettier 3.2.5
Playground link

--parser babel

Input:

<>
	{modal.shown && modal.artifact && Object.prototype.hasOwnProperty.call(modal.artifact, "video") ? (
		<video controls autoPlay>
			<source src={modal.artifact?.video} type="video/mp4" />
		</video>
	) : (
		<img
			style={{ visibility: imageLoaded ? "visible" : "hidden" }}
			src={modal.artifact?.image}
			alt={modal.artifact?.name}
			className="h-1/2"
			onLoad={() => setImageLoaded(true)}
		/>
	)}
	{modal.shown && modal.artifact && Object.prototype.hasOwnProperty.call(modal.artifact, "audio") && (
		<video controls autoPlay height="60" style={{ aspectRatio: "5/1" }}>
			<source src={modal.artifact?.audio} type="audio/wav" />
			<track
				label="English"
				kind="captions"
				srcLang="en"
				src={modal.artifact?.subtitles}
				default
			/>
		</video>
	)}
</>

Output:

<>
  {modal.shown &&
  modal.artifact &&
  Object.prototype.hasOwnProperty.call(modal.artifact, "video") ? (
    <video controls autoPlay>
      <source src={modal.artifact?.video} type="video/mp4" />
    </video>
  ) : (
    <img
      style={{ visibility: imageLoaded ? "visible" : "hidden" }}
      src={modal.artifact?.image}
      alt={modal.artifact?.name}
      className="h-1/2"
      onLoad={() => setImageLoaded(true)}
    />
  )}
  {modal.shown &&
    modal.artifact &&
    Object.prototype.hasOwnProperty.call(modal.artifact, "audio") && (
      <video controls autoPlay height="60" style={{ aspectRatio: "5/1" }}>
        <source src={modal.artifact?.audio} type="audio/wav" />
        <track
          label="English"
          kind="captions"
          srcLang="en"
          src={modal.artifact?.subtitles}
          default
        />
      </video>
    )}
</>;

Expected output:

<>
  {modal.shown &&
  modal.artifact &&
  Object.prototype.hasOwnProperty.call(modal.artifact, "video") ? (
    <video controls autoPlay>
      <source src={modal.artifact?.video} type="video/mp4" />
    </video>
  ) : (
    <img
      style={{ visibility: imageLoaded ? "visible" : "hidden" }}
      src={modal.artifact?.image}
      alt={modal.artifact?.name}
      className="h-1/2"
      onLoad={() => setImageLoaded(true)}
    />
  )}
  {modal.shown &&
  modal.artifact &&
  Object.prototype.hasOwnProperty.call(modal.artifact, "audio") && (
    <video controls autoPlay height="60" style={{ aspectRatio: "5/1" }}>
      <source src={modal.artifact?.audio} type="audio/wav" />
      <track
        label="English"
        kind="captions"
        srcLang="en"
        src={modal.artifact?.subtitles}
        default
      />
    </video>
  )}
</>;

Why?

It doesn't make any sense to me that these two blocks indent differently, I'm not 100% sure whether it should follow the style of the upper or lower one, but the upper makes more sense to me given that the lower's closing brace ends up unaligned with its opening one.