Extra linebreak above side-effect imports in some cases.

[MaKTaiL]

Your Environment

• Prettier version: 3.5.3
• node version: 22.14.0
• package manager: pnpm@10
• IDE: VSCode

Describe the bug

I'm trying to separate only type imports from the rest but the script is adding a blank line between all different imports instead.

To Reproduce

This is the import order I'm trying to use:

importOrder: ["<TYPES>", "", "<THIRD_PARTY_MODULES>", "^@/", "^[./]"]

Expected output:

import type { Metadata } from "next";

import { Geist, Geist_Mono } from "next/font/google";
import "@/app/globals.css";
import Test from "./components/test";

Actual output:

import type { Metadata } from "next";

import { Geist, Geist_Mono } from "next/font/google";

import "@/app/globals.css";

import Test from "./components/test";

Configuration File (cat .prettierrc, prettier.config.js, .prettier.js)

/**
 * @see https://prettier.io/docs/configuration
 * @type {import("prettier").Config}
 * @type {import("prettier-plugin-tailwindcss").PluginOptions}
 * @type {import("@ianvs/prettier-plugin-sort-imports").PrettierConfig}
 */
const config = {
  plugins: [
    "@ianvs/prettier-plugin-sort-imports",
    "prettier-plugin-tailwindcss",
  ],
  importOrder: ["<TYPES>", "", "<THIRD_PARTY_MODULES>", "^@/", "^[./]"],
  endOfLine: "auto",
};

export default config;

Contribute to @ianvs/prettier-plugin-sort-imports

• I'm willing to fix this bug 🥇

[IanVS]

Something else must be causing the extra lines. I created a new project with your config settings, and I get the expected output above. To troubleshoot, try running prettier on the CLI to see if it is something in your editor, and if that still doesn't work, then maybe try starting with a blank project and slowly add your project config in until you find out what's causing it. I'd be interested to hear what it is.

[MaKTaiL]

Something else must be causing the extra lines. I created a new project with your config settings, and I get the expected output above. To troubleshoot, try running prettier on the CLI to see if it is something in your editor, and if that still doesn't work, then maybe try starting with a blank project and slowly add your project config in until you find out what's causing it. I'd be interested to hear what it is.

I did that. I started a completely new blank project and prettier/eslint was the first thing I configured. I'm currently using create-next-app@latest. Using prettier from cli produces the same output.

[MaKTaiL]

I uploaded it to a repository if you want to give it a try:

https://github.com/MaKTaiL/test-prettier-imports

[IanVS]

I'm taking a look at your test repo. The only file with more than one import is layout.tsx, but it does not have the imports as shown in this issue. If I update the file to import those files, then save in VSCode, I get this expected result:

import type { Metadata } from "next";

import { Geist, Geist_Mono } from "next/font/google";
import { send } from "@/app/functions";
import Test from "./components/test";

The reason you're seeing extra spaces is that you have a .css side effect import in the middle, so your imports are being split apart into two groups, everything above the side-effect import, and everything below, and each group is formatted according to your rules. It's easier to see with a few more imports:

import type { Metadata } from "next";

import { Geist, Geist_Mono } from "next/font/google";
import Foo from "./components/foo";

import "@/app/globalss.css";

import type { HttpsAgent } from "next";

import { bar } from "@/app/globals";
import Test from "./components/test";

I'd recommend moving your .css import to the end of your imports, and then you'll get something more like what you expect:

import type { Metadata } from "next";

import { Geist, Geist_Mono } from "next/font/google";
import Test from "./components/test";

import "@/app/globals.css";

The extra space above the side-effect import is a bit unexpected, and only seems to happen when a line separator is used anywhere in the importOrder. I'll take a look at the code and see if I can figure out why exactly that's happening. But I don't think it's intentional.

[MaKTaiL]

Thanks for testing it out. Yeah, I accidently copied the example of a newer version of the layout.tsx that had the "send" function when I created the issue, sorry about that. So it seems you found out that the side-effect import is the culprit. Hopefully you can figure out why this issue is happening. ☺️

[MaKTaiL]

I moved the side-effect import to the top of the file and everything is working as intended now. I was under the assumption that the side-effect import would fall under the "^@/" rule, that's why I had it placed in that spot for testing.

[IanVS]

Right, side-effects are never sorted, because the order they are placed in can matter (for example multiple css imports will determine the cascade order, and rearranging them can change how your app looks).

[fbartho]

Reading the discussion above, the confusion is resolved! (Happy to reopen if I misunderstood)

[IanVS]

@fbartho I was keeping it open due to:

The extra space above the side-effect import is a bit unexpected, and only seems to happen when a line separator is used anywhere in the importOrder. I'll take a look at the code and see if I can figure out why exactly that's happening. But I don't think it's intentional.

It's pretty minor, but it does seem to be odd behavior.