🐛 Formatting behaves unexpectedly

[depsimon]

VS Code version

1.87.2

Extension version

2.2.2

Biome version

1.6.1

Operating system

• Windows
• macOS
• Linux

Description

It happened a lot of times to me when I refactor multi-component modules to single-components. I guess it has to to with removing unused types & imports at the same time.

When I remove the components, I save & format with Biome and the result is a wrongly formatted file. It removes parts of import lines which break the rest of the formatting.

Steps to reproduce

1. Take this snippet

import {
  Field as HeadlessField,
  type FieldProps as HeadlessFieldProps,
  Radio as HeadlessRadio, // unused
  RadioGroup as HeadlessRadioGroup, // unused
  type RadioGroupProps as HeadlessRadioGroupProps, // unused
  type RadioProps as HeadlessRadioProps, // unused
} from "@headlessui/react";
import type { VariantProps } from "class-variance-authority"; // unused
import { classNames } from "../../utils/classNames";
import { radioVariants } from "./variants"; // unused

export function RadioField({ className, ...props }: HeadlessFieldProps) {
  return (
    <HeadlessField
      data-slot="field"
      {...props}
      className={classNames(
        className,

        // Base layout
        "grid grid-cols-[1.125rem_1fr] items-center gap-x-4 gap-y-1 sm:grid-cols-[1rem_1fr]",

        // Control layout
        "[&>[data-slot=control]]:col-start-1 [&>[data-slot=control]]:row-start-1 [&>[data-slot=control]]:justify-self-center",

        // Label layout
        "[&>[data-slot=label]]:col-start-2 [&>[data-slot=label]]:row-start-1 [&>[data-slot=label]]:justify-self-start",

        // Description layout
        "[&>[data-slot=description]]:col-start-2 [&>[data-slot=description]]:row-start-2",

        // With description
        "[&_[data-slot=label]]:has-[[data-slot=description]]:font-medium",
      )}
    />
  );
}

2. Save & Format with VS Code
3. Here's the result

import {
  Field as HeadlessField,
  type FieldProps as HeadlessFieldProps,
  RadioGroup as HeadlessRadioGroup,
  type RadioProps as HeadlessRadioProps,
} from type { VariantProps } from "class-variance-authority";
import { radioVariants } from "./variants";

export n (
    <HeadlessField
      {...props}
      className={classNames(
        className,

        // Base layout
        "grid grid-cols-[1.125rem_1fr] items-center gap-x-4 gap-y-1 sm:grid-cols-[1rem_1fr]",

        // Control layout
        "[&>[data-slot=control]]:col-start-1 [&>[data-slot=control]]:row-start-1 [&>[data-slot=control]]:justify-self-center",

        // Label layout
        "[&>[data-slot=label]]:col-start-2 [&>[data-slot=label]]:row-start-1 [&>[data-slot=label]]:justify-self-start",

        // Description layout
        "[&>[data-slot=description]]:col-start-2 [&>[data-slot=description]]:row-start-2",

        // With description
        "[&_[data-slot=label]]:has-[[data-slot=description]]:font-medium",
      )}
    />
  );
}

Expected behavior

When I run with Biome's CLI, it properly format the module :

import {
  Field as HeadlessField,
  type FieldProps as HeadlessFieldProps,
} from "@headlessui/react";
import { classNames } from "../../utils/classNames";

export function RadioField({ className, ...props }: HeadlessFieldProps) {
  return (
    <HeadlessField
      data-slot="field"
      {...props}
      className={classNames(
        className,

        // Base layout
        "grid grid-cols-[1.125rem_1fr] items-center gap-x-4 gap-y-1 sm:grid-cols-[1rem_1fr]",

        // Control layout
        "[&>[data-slot=control]]:col-start-1 [&>[data-slot=control]]:row-start-1 [&>[data-slot=control]]:justify-self-center",

        // Label layout
        "[&>[data-slot=label]]:col-start-2 [&>[data-slot=label]]:row-start-1 [&>[data-slot=label]]:justify-self-start",

        // Description layout
        "[&>[data-slot=description]]:col-start-2 [&>[data-slot=description]]:row-start-2",

        // With description
        "[&_[data-slot=label]]:has-[[data-slot=description]]:font-medium",
      )}
    />
  );
}

It also works correctly if I Quick Fix: "Delete all unused imports".

VS Code Settings :

{
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },
  "editor.formatOnSave": true,
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

Does this issue occur when using the CLI directly?

No

Logs

Nothing in the Biome Trace output.

In Biome output: 


[Warn  - 09:56:30] Code formatting aborted due to parsing errors. To format code with errors, enable the 'formatter.formatWithErrors' option.

[Sec-ant]

Should be a duplicate of #688, relevant to #1570. This issue is already being looked into.