[feat]: apply `alphabetize` for same group or a new option `alphabetizeInGroup: true`

[reintroducing]

Hello,
I'm trying to figure out something that I can't seem to get a handle on. I have the plugin working mostly as i want except for one annoyance. In the following imports:

import clsx from 'clsx';
import Text from '@ui/Text';
import {triggerHaptics} from '@utils/hardware';
import {type Medal} from '../../types';
import css from './Medals.module.scss';
import commonCss from '../Collections.module.scss';

The last two should be reversed. I'd like the output to be:

import clsx from 'clsx';
import Text from '@ui/Text';
import {triggerHaptics} from '@utils/hardware';
import {type Medal} from '../../types';
import commonCss from '../Collections.module.scss';
import css from './Medals.module.scss';

so that the most local scss import is last (it has caused some issues in overriding classes). My config is as follows:

'import-x/order': [
  1,
  {
    alphabetize: {order: 'asc', caseInsensitive: true},
    groups: [
      'builtin',
      'external',
      'internal',
      'parent',
      'sibling',
      'index',
    ],
    pathGroups: [
      {
        pattern: '@hooks/**',
        group: 'internal',
      },
      {
        pattern: '@icons/**',
        group: 'internal',
      },
      {
        pattern: '@gds/**',
        group: 'internal',
      },
      {
        pattern: '@ui/**',
        group: 'internal',
      },
      {
        pattern: '@utils/**',
        group: 'internal',
      },
      {
        pattern: '@/**',
        group: 'internal',
        position: 'after',
      },
      {
        pattern: '*.scss',
        group: 'index',
        patternOptions: {matchBase: true},
        position: 'after',
      },
    ],
    pathGroupsExcludedImportTypes: ['internal'],
    alphabetize: {
      order: 'asc',
      caseInsensitive: true,
    },
  },
]

I can't seem to nail down the proper config to get this working as I'd like. what am i missing to get this sorting properly?

Thank you for your help.

[JounQin]

Reproduction please.

[reintroducing]

@JounQin here you go. If you run npm i and then open src/test/deep/index.tsx you'll see the corresponding code. Now, copy and paste the below to reorganize the imports:

import css from "./Medals.module.scss";
import { triggerHaptics } from "@utils/hardware";
import { useEffect } from "react";
import Text from "@ui/Text";
import clsx from "clsx";
import { type Medal } from "../../types";
import commonCss from "../Collections.module.scss";

Hit save (assuming you have format on save set) and you'll see it reformat to the following:

import clsx from "clsx";
import { useEffect } from "react";
import Text from "@ui/Text";
import { triggerHaptics } from "@utils/hardware";
import { type Medal } from "../../types";
import css from "./Medals.module.scss";
import commonCss from "../Collections.module.scss";

Ideally, it would reformat to this instead:

import clsx from "clsx";
import { useEffect } from "react";
import Text from "@ui/Text";
import { triggerHaptics } from "@utils/hardware";
import { type Medal } from "../../types";
import commonCss from "../Collections.module.scss";
import css from "./Medals.module.scss";

If you actually move commonCss up one line, it does not reformat to be below css, which is what i'd ultimately want to always happen (for it to be ordered that way when formatting on save and they are out of order).

import-bug.zip

[JounQin]

Can you provide a GitHub repo for reproduction instead of .zip?

[reintroducing]

@JounQin sure, here you go: https://github.com/reintroducing/import-plugin

[JounQin]

Is this a regression or a feature you want?

[JounQin]

In current implement and with your config, ../Collections.module.scss and ./Medals.module.scss are in same group index. But you want two groups actually:

{
  "pattern": "../**/*.scss",
  "group": "index",

  "patternOptions": {
    "matchBase": true,
  },

  "position": "after",
},
{
  "pattern": "./**/*.scss",
  "group": "index",

  "patternOptions": {
    "matchBase": true,
  },

  "position": "after",
}

[reintroducing]

I’ve not used this plugin long enough to know if it’s a regression so I suppose you can say it’s something I was hoping can be done based on the configs (and specifically my config which I thought would have covered that case). Based on the config I guess I don’t understand why files located as close to the source as possible wouldn’t come last in the order.

[reintroducing]

But that config would then need to be made for every level possible of CSS paths relative to the file. That seems anti what it should do

[JounQin]

But that config would then need to be made for every level possible of CSS paths relative to the file. That seems anti what it should do

Nope, ../**/*.scss matches all parents, ./**/*.scss matches all siblings.

[reintroducing]

But that config would then need to be made for every level possible of CSS paths relative to the file. That seems anti what it should do

Nope, ../**/*.scss matches all parents, ./**/*.scss matches all siblings.

Ah, ok, I’ll give that a try, thank you!

[JounQin]

On the other hand, maybe we should sort by alphabetize for same group.