Bug: sort-imports sorts individually in custom-groups array

[GasparAdragna]

Describe the bug

Im having a problem with the auto-sorting of the imports.

I have a custom group like so:

"components": ["@components/**", "./components/**"],

But the alphabetical sorting is doing it individually, once for @components and then for ./components

Code example

This is the rest of the .eslintrc.json:

{
  "extends": [
    "next",
    "prettier",
    "next/core-web-vitals",
    "plugin:storybook/recommended",
    "plugin:perfectionist/recommended-alphabetical"
  ],
  "plugins": ["@typescript-eslint", "perfectionist"],
  "parser": "@typescript-eslint/parser",
  "rules": {
    "react/jsx-uses-react": 0,
    "react/react-in-jsx-scope": 0,
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "error",
    "quotes": ["error", "double"],
    "no-restricted-imports": [
      "error",
      {
        "paths": [
          {
            "name": "@nextui-org/react",
            "importNames": ["Link"],
            "message": "Please use Link from @/navigation if href is local or ExternalLink if you wish to navigate outside the project"
          }
        ]
      }
    ],
    "perfectionist/sort-imports": [
      "error",
      {
        "type": "alphabetical",
        "order": "asc",
        "ignore-case": true,
        "newlines-between": "always",
        "groups": [
          "react",
          ["builtin", "external"],
          "assets",
          "config",
          "constants",
          "components",
          "graphql",
          "hooks",
          "icons",
          "stores",
          "styles",
          "utils",
          "types",
          "all",
          ["parent", "sibling", "index"]
        ],
        "custom-groups": {
          "value": {
            "react": ["react", "react-*"],
            "assets": "@assets/**",
            "config": "@config/**",
            "constants": "@constants/**",
            "components": ["@components/**", "./components/**"],
            "graphql": "@graphql/**",
            "hooks": "@hooks/**",
            "icons": "@icons/**",
            "stores": "@stores/**",
            "styles": "@styles/**",
            "utils": "@utils/**",
            "types": "types/**",
            "all": "@/**"
          }
        }
      }
    ]
  },
  "root": true,
  "ignorePatterns": ["newrelic.js"]
}

ESLint version

8.54

ESLint Plugin Perfectionist version

2.9.0

Additional comments

No response

Validations

• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[azat-io]

This behavior is expected. The plugin compares the values and sorts them alphabetically.

['@', '.'].sort() // ['.', '@']

In your case, you can only separate the component imports into two separate groups.

[GasparAdragna]

There is no way of ordering them as a group? I dont get why i can group them but not order them, seems counterintuitive .

I would like to group all of my components into a single group

[azat-io]

There is currently no such opportunity. If we had such a feature, what might the configuration look like?

Perhaps you have some ideas how it should be configured.

[GasparAdragna]

Thanks for the fast replies, i only have one more question.

Why if its sorting correctly (first '.' and then '@'), its showing them in the oposite way?

When i save the file i can see that it "jumps" from the correct order to the one i show in the picture. I don’t know if something is overriding the configuration but i cannot find anything that might interfere .

https://github.com/azat-io/eslint-plugin-perfectionist/assets/38141596/c9589ca3-96de-469f-af27-b9f9aec15d3d

[azat-io]

Imports that start with a . alphabetically go earlier than those that start with a @.

Perhaps we should in the future add the ability to create subgroups that would sort values within groups, given the order defined within them.