From d10df39ae6342d5e2dc7ec3eec3156f90256529f Mon Sep 17 00:00:00 2001
From: Dunqing <29533304+Dunqing@users.noreply.github.com>
Date: Thu, 2 Apr 2026 08:32:15 +0000
Subject: [PATCH] fix(formatter): resolve pending space in fits measurer before
 expanded-mode early exit (#20954)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #20519
Alternative to #20858

## Summary

The `fits()` measurer in the printer defers `Space` elements via a `pending_space` boolean flag. When the measurer exits early through an expanded-mode line break (`Fits::Yes`), any unresolved `pending_space` is silently lost — causing the measured width to be off by one.

This caused the decorator in `@property(...) prop: Type` to incorrectly stay on the same line because the space after `:` was not counted in the width measurement.

### Root cause

In `FitsMeasurer::fits_element`, `Space` sets `pending_space = true` (deferred), while `HardSpace` immediately increments `line_width`. When `fits()` returns `Fits::Yes` via the expanded-mode line break path (line 1040), the pending space is never resolved.

For the decorator case:
1. After `@property(...)` + space + `tooltipPlacement` + `:` → `line_width = 80`
2. `Space` after `:` → `pending_space = true` (line_width stays 80)
3. Union type group inherits Expanded mode → `if_group_breaks(separator)` included
4. Separator's `SoftOrSpace` in Expanded mode → `return Fits::Yes` **without resolving pending_space**
5. The +1 char from the space is lost, making the decorator group incorrectly "fit"

### Fix

Resolve `pending_space` before returning `Fits::Yes` from the expanded-mode early exit path. This matches Ruff's approach where `Space` is counted eagerly via `fits_text(Text::Token(" "))`.

### Conformance

- JS: 746/753 (unchanged)
- TS: 591/601 (unchanged — `18148.ts` fixed, `comment.ts` regressed)

The `comment.ts` regression (`typescript/union/consistent-with-flow/comment.ts`) is a **pre-existing Prettier bug** — at `printWidth: 81`, Prettier itself produces the same double-indented output with a spurious blank line:

```ts
// printWidth: 81 → Prettier also double-indents:
type SuperLong...Blaa =
                         ← spurious blank line
    | Fooo1000           ← 4 spaces (double indent)
```

At exactly 80 chars, Prettier avoids this only because its own fits check has the same off-by-one (the space is not counted), causing the Fluid layout's inner group to accidentally "fit".

## Test plan

- [x] `cargo test -p oxc_formatter` — 262 passed
- [x] `cargo test -p oxc_formatter -- fixtures` — 213 passed (including new `issue-20519.ts`)
- [x] `cargo run -p oxc_prettier_conformance` — JS 746/753, TS 591/601
- [x] `cargo clippy -p oxc_formatter` — clean

🤖 Generated with [Claude Code](https://claude.com/claude-code)
---
 apps/oxfmt/conformance/run.ts                 |  2 -
 .../src/formatter/printer/mod.rs              | 11 +++
 .../tests/fixtures/ts/class/issue-20519.ts    | 23 +++++
 .../fixtures/ts/class/issue-20519.ts.snap     | 86 +++++++++++++++++++
 .../snapshots/prettier.ts.snap.md             |  2 +-
 5 files changed, 121 insertions(+), 3 deletions(-)
 create mode 100644 crates/oxc_formatter/tests/fixtures/ts/class/issue-20519.ts
 create mode 100644 crates/oxc_formatter/tests/fixtures/ts/class/issue-20519.ts.snap

diff --git a/apps/oxfmt/conformance/run.ts b/apps/oxfmt/conformance/run.ts
index 969a8b5591a2f..3d5ba834ad77f 100644
--- a/apps/oxfmt/conformance/run.ts
+++ b/apps/oxfmt/conformance/run.ts
@@ -96,8 +96,6 @@ const categories: Category[] = [
         "js-in-html(`<script>`)-in-js needs lot more work; Please see oxc_formatter/src/print/template/embed/html.rs",
       "webawesome/relative-time/relative-time.test.ts":
         "html-in-js: Need to solve `label({ embed, hug }))` + `shouldExpandLastArg`",
-      "webawesome/slider/slider.ts":
-        "`@decorator` + union type: https://github.com/oxc-project/oxc/issues/20519",
     },
   },
   {
diff --git a/crates/oxc_formatter/src/formatter/printer/mod.rs b/crates/oxc_formatter/src/formatter/printer/mod.rs
index a6563cabd5da0..e236289fb23d7 100644
--- a/crates/oxc_formatter/src/formatter/printer/mod.rs
+++ b/crates/oxc_formatter/src/formatter/printer/mod.rs
@@ -1037,6 +1037,17 @@ impl<'a, 'print> FitsMeasurer<'a, 'print> {
                     // is what the mode's initialized to by default
                     // This means, the printer is outside of the current element at this point and any
                     // line break should be printed as regular line break -> Fits
+                    //
+                    // Before returning, resolve any pending space so the width check is accurate.
+                    // Without this, a deferred `Space` before a group boundary can be lost when
+                    // the fits measurer exits early via an expanded-mode line break, causing the
+                    // measured width to be off by one.
+                    if self.state.pending_space {
+                        self.state.line_width += 1;
+                        if self.state.line_width > usize::from(self.options().print_width) {
+                            return Ok(Fits::No);
+                        }
+                    }
                     return Ok(Fits::Yes);
                 }
             }
diff --git a/crates/oxc_formatter/tests/fixtures/ts/class/issue-20519.ts b/crates/oxc_formatter/tests/fixtures/ts/class/issue-20519.ts
new file mode 100644
index 0000000000000..d0fccfea59ca9
--- /dev/null
+++ b/crates/oxc_formatter/tests/fixtures/ts/class/issue-20519.ts
@@ -0,0 +1,23 @@
+// Long decorator + union type: decorator should go on its own line
+class SlSlider extends ShoelaceElement {
+  @property({ attribute: 'tooltip-placement', reflect: true }) tooltipPlacement: 'top' | 'right' |
+'bottom' | 'left' =
+    'top';
+}
+
+// Short decorator + long union type: decorator should stay inline
+class WaTooltip extends WebAwesomeElement {
+  @property() placement:
+    | "top"
+    | "top-start"
+    | "top-end"
+    | "right"
+    | "right-start"
+    | "right-end"
+    | "bottom"
+    | "bottom-start"
+    | "bottom-end"
+    | "left"
+    | "left-start"
+    | "left-end" = "bottom";
+}
diff --git a/crates/oxc_formatter/tests/fixtures/ts/class/issue-20519.ts.snap b/crates/oxc_formatter/tests/fixtures/ts/class/issue-20519.ts.snap
new file mode 100644
index 0000000000000..32f9ccbdde5e5
--- /dev/null
+++ b/crates/oxc_formatter/tests/fixtures/ts/class/issue-20519.ts.snap
@@ -0,0 +1,86 @@
+---
+source: crates/oxc_formatter/tests/fixtures/mod.rs
+assertion_line: 234
+---
+==================== Input ====================
+// Long decorator + union type: decorator should go on its own line
+class SlSlider extends ShoelaceElement {
+  @property({ attribute: 'tooltip-placement', reflect: true }) tooltipPlacement: 'top' | 'right' |
+'bottom' | 'left' =
+    'top';
+}
+
+// Short decorator + long union type: decorator should stay inline
+class WaTooltip extends WebAwesomeElement {
+  @property() placement:
+    | "top"
+    | "top-start"
+    | "top-end"
+    | "right"
+    | "right-start"
+    | "right-end"
+    | "bottom"
+    | "bottom-start"
+    | "bottom-end"
+    | "left"
+    | "left-start"
+    | "left-end" = "bottom";
+}
+
+==================== Output ====================
+------------------
+{ printWidth: 80 }
+------------------
+// Long decorator + union type: decorator should go on its own line
+class SlSlider extends ShoelaceElement {
+  @property({ attribute: "tooltip-placement", reflect: true })
+  tooltipPlacement: "top" | "right" | "bottom" | "left" = "top";
+}
+
+// Short decorator + long union type: decorator should stay inline
+class WaTooltip extends WebAwesomeElement {
+  @property() placement:
+    | "top"
+    | "top-start"
+    | "top-end"
+    | "right"
+    | "right-start"
+    | "right-end"
+    | "bottom"
+    | "bottom-start"
+    | "bottom-end"
+    | "left"
+    | "left-start"
+    | "left-end" = "bottom";
+}
+
+-------------------
+{ printWidth: 100 }
+-------------------
+// Long decorator + union type: decorator should go on its own line
+class SlSlider extends ShoelaceElement {
+  @property({ attribute: "tooltip-placement", reflect: true }) tooltipPlacement:
+    | "top"
+    | "right"
+    | "bottom"
+    | "left" = "top";
+}
+
+// Short decorator + long union type: decorator should stay inline
+class WaTooltip extends WebAwesomeElement {
+  @property() placement:
+    | "top"
+    | "top-start"
+    | "top-end"
+    | "right"
+    | "right-start"
+    | "right-end"
+    | "bottom"
+    | "bottom-start"
+    | "bottom-end"
+    | "left"
+    | "left-start"
+    | "left-end" = "bottom";
+}
+
+===================== End =====================
diff --git a/tasks/prettier_conformance/snapshots/prettier.ts.snap.md b/tasks/prettier_conformance/snapshots/prettier.ts.snap.md
index 626e18063d110..3e5bb7fde3fb7 100644
--- a/tasks/prettier_conformance/snapshots/prettier.ts.snap.md
+++ b/tasks/prettier_conformance/snapshots/prettier.ts.snap.md
@@ -6,11 +6,11 @@ ts compatibility: 591/601 (98.34%)
 | :-------- | :--------------: | :---------: |
 | typescript/arrow/comments.ts | 💥✨ | 44.44% |
 | typescript/arrow/comments/issue-11100.ts | 💥 | 84.00% |
-| typescript/as/break-after-keyword/18148.ts | 💥 | 82.22% |
 | typescript/class/empty-method-body.ts | 💥 | 80.00% |
 | typescript/comments/mapped_types.ts | 💥 | 96.77% |
 | typescript/comments/method_types.ts | 💥 | 82.05% |
 | typescript/mapped-type/issue-11098.ts | 💥 | 97.03% |
 | typescript/property-signature/consistent-with-flow/comments.ts | 💥 | 80.00% |
 | typescript/union/comments/18389.ts | 💥 | 51.28% |
+| typescript/union/consistent-with-flow/comment.ts | 💥 | 86.96% |
 | typescript/union/single-type/single-type.ts | 💥 | 66.67% |