[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.

[JounQin]

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

For whoever wants to work on this, I've added a failing test case at #260, feel free to contribute on this!

[reintroducing]

@JounQin for what its worth, I just tried the config you suggested and that does indeed fix my original issue, so thank you. I did add another scss file one level higher to test, and subsequently got this on saving:

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

Is there a way to force scss files to always be last? i thought the rules being last would have forced them to be last in the order, but as you can see one of the types (Medal) is between the scss files.

[JounQin]

Just a thought not tested, you could define your own parent pattern, this happens because both ../../Test.module.scss and ../../types match the default parent pattern.

[reintroducing]

Just a thought not tested, you could define your own group pattern, this happens because both ../../Test.module.scss and ../../types match the default parent pattern.

I apologize but I'm not sure I understand what you mean.

[JounQin]

Sorry, there is a typo, I mean you should build your own parent group same as you're building your own index group with nonegate option.