fix(formatter): BestFitting doesn't exactly matches the conditinalGroup behavior in Prettier

[Dunqing]

I found a case where Oxfmt's output differs from Prettier. Honestly, I think the Oxfmt output is prettier than Prettier.
Anyway, I investigated this case to find the root cause.

Failed example

Input:

const defaultColorDecoratorsEnablement = accessor
  .get(IConfigurationService)
  .getValue<"auto" | "always" | "never">(
    "longlonglonglonglonglonglonglonglong",
  );

Oxfmt and Biome's output:

const defaultColorDecoratorsEnablement = accessor
  .get(IConfigurationService)
  .getValue<"auto" | "always" | "never">(
    "longlonglonglonglonglonglonglonglong",
  );

Prettier output:

const defaultColorDecoratorsEnablement = accessor
  .get(IConfigurationService)
  .getValue<
    "auto" | "always" | "never"
  >("longlonglonglonglonglonglonglonglong");

Investigating the cause

Initially, I think the problem is that we generate inconsistent IR, so the output is different, which is a reasonable suspicion because, so far, almost all issues are due to this reason. However, after carefully comparing both IR of Oxfmt and Prettier, they are essentially the same, so the problem is moved to the printing IR part.

After spending a few days on this case, I finally found the reason why they produce the same IR but print different outputs. The cause is inside the BestFitting, which is a graceful solution for Prettier's conditionalGroup.

Let's take a look at how Prettier handles conditionalGroup

Prettier implementation:

conditionalGroup
https://github.com/prettier/prettier/blob/7584432401a47a26943dd7a9ca9a8e032ead7285/src/document/builders.js#L99-L106

/**
 * @param {Doc[]} states
 * @param {object} [opts] - TBD ???
 * @returns Doc
 */
function conditionalGroup(states, opts) {
  return group(states[0], { ...opts, expandedStates: states });
}

handling of conditionalGroup
https://github.com/prettier/prettier/blob/7584432401a47a26943dd7a9ca9a8e032ead7285/src/document/printer.js#L408-L445

// Expanded states are a rare case where a document
// can manually provide multiple representations of
// itself. It provides an array of documents
// going from the least expanded (most flattened)
// representation first to the most expanded. If a
// group has these, we need to manually go through
// these states and find the first one that fits.
// eslint-disable-next-line no-lonely-if
if (doc.expandedStates) {
  const mostExpanded = doc.expandedStates.at(-1);

  if (doc.break) {
    cmds.push({ ind, mode: MODE_BREAK, doc: mostExpanded });

    break;
  } else {
    for (let i = 1; i < doc.expandedStates.length + 1; i++) {
      if (i >= doc.expandedStates.length) {
        cmds.push({ ind, mode: MODE_BREAK, doc: mostExpanded });

        break;
      } else {
        const state = doc.expandedStates[i];
        /** @type {Command} */
        const cmd = { ind, mode: MODE_FLAT, doc: state };

        if (fits(cmd, cmds, rem, hasLineSuffix, groupModeMap)) {
          cmds.push(cmd);

          break;
        }
      }
    }
  }
} else {
  cmds.push({ ind, mode: MODE_BREAK, doc: doc.contents });
}

Oxfmt implementation

oxc/crates/oxc_formatter/src/formatter/printer/mod.rs

Lines 366 to 418 in d9f7df8

	fn print_best_fitting(
	&mut self,
	best_fitting: &'a BestFittingElement,
	queue: &mut PrintQueue<'a>,
	stack: &mut PrintCallStack,
	indent_stack: &mut PrintIndentStack,
	) -> PrintResult<()> {
	let args = stack.top();
	if args.mode().is_flat() && self.state.measured_group_fits {
	queue.extend_back(best_fitting.most_flat());
	self.print_entry(queue, stack, indent_stack, args)
	} else {
	self.state.measured_group_fits = true;
	let normal_variants = &best_fitting.variants()[..best_fitting.variants().len() - 1];
	for variant in normal_variants {
	// Test if this variant fits and if so, use it. Otherwise try the next
	// variant.
	// Try to fit only the first variant on a single line
	if !matches!(variant.first(), Some(&FormatElement::Tag(Tag::StartEntry))) {
	return invalid_start_tag(TagKind::Entry, variant.first());
	}
	let entry_args = args.with_print_mode(PrintMode::Flat);
	// Skip the first element because we want to override the args for the entry and the
	// args must be popped from the stack as soon as it sees the matching end entry.
	let content = &variant[1..];
	queue.extend_back(content);
	stack.push(TagKind::Entry, entry_args);
	let variant_fits = self.fits(queue, stack, indent_stack)?;
	stack.pop(TagKind::Entry)?;
	// Remove the content slice because printing needs the variant WITH the start entry
	let popped_slice = queue.pop_slice();
	debug_assert_eq!(popped_slice, Some(content));
	if variant_fits {
	queue.extend_back(variant);
	return self.print_entry(queue, stack, indent_stack, entry_args);
	}
	}
	// No variant fits, take the last (most expanded) as fallback
	let most_expanded = best_fitting.most_expanded();
	queue.extend_back(most_expanded);
	self.print_entry(queue, stack, indent_stack, args.with_print_mode(PrintMode::Expanded))
	}
	}

The difference between the implementations is in handling different expandedStates (Called as variants in Oxfmt).

In prettier, it will try to get all expandedStates to check whether they fit or not in the MODE_FLAT mode. If not, they will fall back to the mostExpanded and print it in MODE_BREAK mode.

In Oxfmt, it will try to get all variants except the last one (most expanded) to check whether they fit or not in the PrintMode::Flat mode. If not, they will fall back to the mostExpanded and print it in PrintMode::Expanded mode.

So the root cause is Oxfmt, which doesn't check the mostExpanded one, whether it fits in the PrintMode::Fit mode. After aligning this, the issue was solved.

Thinking

After understanding the use of conditionalGroup, although this issue is due to Oxfmt not exactly aligning with Prettier's behavior, I suspect this is a bug in Prettier because mostExpanded is expected to be printed in break mode, but Prettier prints it in flat mode if it fits. It's not intuitive, and it's not as if the variable names describe it. Additionally, this case is a little complex, and the Prettier tests don't include such cases, so the Prettier team probably wasn't aware of this case.

[Dunqing]

• fix(formatter): correct calculating layout for ChainExpression in StaticMemberExpression #14986
• fix(formatter): should not break when the parent of root of StaticMemberExpression is used as the Argument of NewExpression #14985
• fix(formatter): align the short argument handling for UnaryExpression with Prettier #14984
• fix(formatter): BestFitting doesn't exactly matches the conditinalGroup behavior in Prettier #14983 👈 (View in Graphite)
• fix(formatter): align the logic of printing type parameters, parameters, and return type for functions with Prettier #14942
• refactor(formatter): clean up unneeded implementations for printing comments #14935
• refactor(formatter): improve printing trailing comments #14934
• fix(formatter): non-nested static member expressions will never break #14929
• fix(formatter): check whether a type alias is complex when its right hand side never break #14928
• refactor(formatter): align printing trailing comments with Prettier #14927
• fix(formatter): should not add a trailing comma for long curried calls when trailingComma is es5 #14913
• main

---

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• 0-merge - adds this PR to the back of the merge queue
• hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[codspeed-hq]

CodSpeed Performance Report

Merging #14983 will not alter performance

_{Comparing 10-27-fix_formatter_bestfitting_doesn_t_exactly_matches_the_conditinalgroup_behavior_in_prettier (54c509e) with 10-25-fix_formatter_lign_the_logic_of_printing_type_parameters_parameters_and_return_type_for_functions_with_prettier (63c324d)}

Summary

✅ 33 untouched
⏩ 4 skipped¹

Footnotes

1. 4 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

[graphite-app]

Merge activity

• Oct 27, 9:32 AM UTC: leaysgur added this pull request to the Graphite merge queue.
• Oct 27, 9:48 AM UTC: Merged by the Graphite merge queue.