Import Order does not work in last version

[SalahAdDin]

Your Environment

• Prettier version: 3.2.5
• @ianvs/prettier-plugin-sort-imports: 4.1.1
• node version: v20.11.0
• package manager: pnpm@8.15.1
• IDE: VScode

Describe the bug We have the following import on layout.tsx:

import { useTextDirection } from "../useTextDirection";
import { MockProvider } from "./mock.provider";

import type { Metadata } from "next";

import "./globals.css";

import clsx from "clsx";

import { fonts } from "../fonts";

And we have two different custom orders:

/* from documentation */
importOrder: ["<THIRD_PARTY_MODULES>", "^(?!.*[.]css$)[./].*$", ".css$"],

/*our custom import order */
  importOrder: [
    "<BUILTIN_MODULES>",
    "",
    "^(^react$|@react|react)",
    "^(next/(.*)$)|^(next$)",
    "",
    "<THIRD_PARTY_MODULES>",
    "",
    "^@(.*)$",
    "",
    "^[../]",
    "^[./]",
    "",
    "<TYPES>",
    "<TYPES>^[.]",
    "",
    "^(?!.*[.]css$)[./].*$",
    ".css$",
  ],

It does not matter which import order we give to the plugin, it does not sort the import properly.

To Reproduce

Expected behavior

It should produce the following order:

import type { Metadata } from "next";

import clsx from "clsx";

import { fonts } from "../fonts";
import { useTextDirection } from "../useTextDirection";

import { MockProvider } from "./mock.provider";

import "./globals.css";

Screenshots, code sample, etc It resolves with the import order from the documentation:

import type { Metadata } from "next";
import { useTextDirection } from "../useTextDirection";
import { MockProvider } from "./mock.provider";
import "./globals.css";
import clsx from "clsx";
import { fonts } from "../fonts";

While with our custom order, it does not change anything.

If we order the imports manually and later save them, it reorders the import wrongly:

import clsx from "clsx";

import { fonts } from "../fonts";
import { useTextDirection } from "../useTextDirection";
import { MockProvider } from "./mock.provider";

import type { Metadata } from "next";

import "./globals.css";

The next import should be before the clsx import.

But our custom import order seems to work sometimes: As you can see, it extracts types and puts them in the right place.

Why is this happening?

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

Here there is the configuration file:

/** @typedef {import("@ianvs/prettier-plugin-sort-imports").PluginConfig} SortImportsConfig */
/** @typedef {import("prettier").Config} PrettierConfig */

/**
 * Remember to restart VSCode after making
 * any changes here and saving this file.
 */
/** @type {PrettierConfig | SortImportsConfig} */

const config = {
  parser: "typescript",
  printWidth: 80,
  arrowParens: "always",
  semi: true,
  tabWidth: 2,
  endOfLine: "auto",
  trailingComma: "es5",
  useTabs: false,
  quoteProps: "consistent",
  bracketSameLine: true,
  plugins: ["@ianvs/prettier-plugin-sort-imports"],
  importOrder: ["<THIRD_PARTY_MODULES>", "^(?!.*[.]css$)[./].*$", ".css$"],
  importOrderParserPlugins: ["importAssertions", "typescript", "jsx"],
  importOrderTypeScriptVersion: "5.3.3",
  overrides: [
    {
      files: ["*.js", "*.cjs", "*.mjs"],
      options: {
        parser: "meriyah",
      },
    },
    {
      files: ["*.ts", "*.cts"],
      options: {
        parser: "typescript",
      },
    },
    {
      files: ["*.json", "*.jsonc", ".*rc"],
      options: {
        parser: "json",
      },
    },
    {
      files: "*.css",
      options: {
        parser: "css",
      },
    },
    {
      files: "*.md",
      options: { parser: "markdown" },
    },
    {
      files: "*.mdx",
      options: { parser: "mdx" },
    },
  ],
};

export default config;

Our custom order import is:

  importOrder: [
    "<BUILTIN_MODULES>",
    "",
    "^(^react$|@react|react)",
    "^(next/(.*)$)|^(next$)",
    "",
    "<THIRD_PARTY_MODULES>",
    "",
    "^@(.*)$",
    "",
    "^[../]",
    "^[./]",
    "",
    "<TYPES>",
    "<TYPES>^[.]",
    "",
    "^(?!.*[.]css$)[./].*$",
    ".css$",
  ]

Error log Log for import order from documentation:

["INFO" - 06:56:31] Extension Name: esbenp.prettier-vscode.
["INFO" - 06:56:31] Extension Version: 10.1.0.
["INFO" - 06:58:24] Formatting file:///home/luisalaguna/Projects/TRT/twe_fe_next/src/app/%5Blocale%5D/layout.tsx
["INFO" - 06:58:24] Using config file at '/home/luisalaguna/Projects/TRT/twe_fe_next/.prettierrc.mjs'
["INFO" - 06:58:24] PrettierInstance:
{
  "modulePath": "/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/prettier/index.cjs",
  "importResolver": {},
  "callMethodResolvers": {},
  "currentCallMethodId": 5,
  "version": "3.2.5"
}
["INFO" - 06:58:24] Using ignore file (if present) at /home/luisalaguna/Projects/TRT/twe_fe_next/.prettierignore
["INFO" - 06:58:25] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 06:58:25] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 06:58:25] Prettier Options:
{
  "filepath": "/home/luisalaguna/Projects/TRT/twe_fe_next/src/app/[locale]/layout.tsx",
  "parser": "typescript",
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "endOfLine": "auto",
  "arrowParens": "always",
  "semi": true,
  "trailingComma": "es5",
  "quoteProps": "consistent",
  "bracketSameLine": true,
  "plugins": [
    "/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/@ianvs+prettier-plugin-sort-imports@4.1.1_prettier@3.2.5/node_modules/@ianvs/prettier-plugin-sort-imports/lib/src/index.js"
  ],
  "importOrder": [
    "<THIRD_PARTY_MODULES>",
    "^(?!.*[.]css$)[./].*$",
    ".css$"
  ],
  "importOrderParserPlugins": [
    "importAssertions",
    "typescript",
    "jsx"
  ],
  "importOrderTypeScriptVersion": "5.3.3"
}
["INFO" - 06:58:25] Formatting completed in 1350ms.

And for the custom import order:

["INFO" - 07:16:29] Extension Name: esbenp.prettier-vscode.
["INFO" - 07:16:29] Extension Version: 10.1.0.
["INFO" - 07:17:15] Formatting file:///home/luisalaguna/Projects/TRT/twe_fe_next/src/app/%5Blocale%5D/layout.tsx
["INFO" - 07:17:15] Using config file at '/home/luisalaguna/Projects/TRT/twe_fe_next/.prettierrc.mjs'
["INFO" - 07:17:15] PrettierInstance:
{
  "modulePath": "/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/prettier/index.cjs",
  "importResolver": {},
  "callMethodResolvers": {},
  "currentCallMethodId": 5,
  "version": "3.2.5"
}
["INFO" - 07:17:15] Using ignore file (if present) at /home/luisalaguna/Projects/TRT/twe_fe_next/.prettierignore
["INFO" - 07:17:16] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 07:17:16] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 07:17:16] Prettier Options:
{
  "filepath": "/home/luisalaguna/Projects/TRT/twe_fe_next/src/app/[locale]/layout.tsx",
  "parser": "typescript",
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "endOfLine": "auto",
  "arrowParens": "always",
  "semi": true,
  "trailingComma": "es5",
  "quoteProps": "consistent",
  "bracketSameLine": true,
  "plugins": [
    "/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/@ianvs+prettier-plugin-sort-imports@4.1.1_prettier@3.2.5/node_modules/@ianvs/prettier-plugin-sort-imports/lib/src/index.js"
  ],
  "importOrder": [
    "<BUILTIN_MODULES>",
    "",
    "^(^react$|@react|react)",
    "^(next/(.*)$)|^(next$)",
    "",
    "<THIRD_PARTY_MODULES>",
    "",
    "^@(.*)$",
    "",
    "^[../]",
    "^[./]",
    "",
    "<TYPES>",
    "<TYPES>^[.]",
    "",
    "^(?!.*[.]css$)[./].*$",
    ".css$"
  ],
  "importOrderParserPlugins": [
    "importAssertions",
    "typescript",
    "jsx"
  ],
  "importOrderTypeScriptVersion": "5.3.3"
}
["INFO" - 07:17:17] Formatting completed in 1380ms.

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

• [ ] I'm willing to fix this bug 🥇

[IanVS]

@fbartho do you have any ideas on this one? I poked around at it a bit, but couldn't immediately figure out what was going on. Maybe you can spot something I'm missing.

[SalahAdDin]

@IanVS Right now it is working for components, but it seems to not be working with NextJS-related code, l think it was reported before.

Let me check it again

[fbartho]

@SalahAdDin — is it possible it’s something blowing up with PNPM? I haven’t used that ever, but a few years ago it would have blown up every single repo I worked on (due to dependencies, not due to my repo’s behavior).

this plugin shouldn’t have any problems, but other packages might be doing something wacky?

[fbartho]

@SalahAdDin I think there’s something wrong with these rules fighting each other:

"^[../]",
"^[./]",
"^(?!.*[.]css$)[./].*$",

Additionally, I really don’t like these expressions from a regex perspective:

^[../]
^[./]

These both match for exactly the same thing: Something that “starts with a dot or slash” and that’s it. I think you meant (../) instead of [../].

You definitely don’t want multiple regex rules that can apply to the same import. — If it were me, I would simplify your rule-list, and figure out if there’s a specific rule-type that’s causing problems.

[SalahAdDin]

@SalahAdDin I think there’s something wrong with these rules fighting each other:

"^[../]",
"^[./]",
"^(?!.*[.]css$)[./].*$",

Additionally, I really don’t like these expressions from a regex perspective:

^[../]
^[./]

These both match for the same thing: Something that “starts with a dot or slash” and that’s it. I think you meant (../) instead of [../].

You don’t want multiple regex rules that can apply to the same import. — If it were me, I would simplify your rule-list, and figure out if there’s a specific rule type that’s causing problems.

Simplify to what? Can you help me?

[fbartho]

To start with, I would just delete these two rules:

^[../]
^[./]

Those modules are already being caught by: "^(?!.*[.]css$)[./].*$"

Then I would test it. If you’re still having problems, then I’d post an example, with your new rule set, and I’d be able to investigate further.

[SalahAdDin]

To start with, I would just delete these two rules:

^[../]
^[./]

Those modules are already being caught by: "^(?!.*[.]css$)[./].*$"

Then I would test it. If you’re still having problems, then I’d post an example, with your new rule set, and I’d be able to investigate further.

I checked it and It seems to work fine, but it does not work with NextJS related files, a bug that is reported from long ago.

[IanVS]

The only nextjs related issue I know of is https://github.com/IanVS/prettier-plugin-sort-imports/issues/132 which you reported, and is waiting for a reproduction. And according to the last comment, might not be related to nextjs at all.

[IanVS]

I checked it and It seems to work fine,

I think this means the issue can be closed, and we can troubleshoot the other issue there.