Add extensions order support for import/order

[atassis]

It would be nice to order imports based on their extension. For our case, we want to leave all css modules imported at the end of the imports list

import styles from '../styles.scss';
import CustomModule from './custom-module';```
Here it is more preferable to warn us move `styles` after `CustomModule`

[fuko-fabio]

Would be perfect if we could add this feature. We have the same case with css files.

[rjhilgefort]

Would love to see this as well.

[Glinkis]

I thought this could be accomplished with the pathGroups option, like this:

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

But I can't seem to get this to work.

[Glinkis]

After some experimenting, this seems to do the trick:

"pathGroups": [
  {
    "pattern": "./*.scss",
    "group": "sibling",
    "position": "after"
  }
]

[zero-t4]

I thought this could be accomplished with the pathGroups option, like this:

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

But I can't seem to get this to work.

Im also stuck with it.
@ljharb Why this case does not work?

[constgen]

"**/*.scss" pattern will not match paths started with ./ and ../. It only matches paths like @/styles/index.css and styles/index.css. To make it work you have to use "{.,..}/**/*.css" pattern. For example my config looks like

"pathGroups": [
  {
    "pattern": "**/*.+(css|sass|less|scss|pcss|styl)",
    "patternOptions": {"dot": true, "nocomment": true},
    "group": "unknown",
    "position": "after"
  },
  {
    "pattern": "{.,..}/**/*.+(css|sass|less|scss|pcss|styl)",
    "patternOptions": {"dot": true, "nocomment": true},
    "group": "unknown",
    "position": "after"
  }
],

Used 2 patterns to cover all cases

[itayganor]

"**/*.scss" pattern will not match paths started with ./ and ../. It only matches paths like @/styles/index.css and styles/index.css. To make it work you have to use "{.,..}/**/*.css" pattern. For example my config looks like

"pathGroups": [
  {
    "pattern": "**/*.+(css|sass|less|scss|pcss|styl)",
    "patternOptions": {"dot": true, "nocomment": true},
    "group": "unknown",
    "position": "after"
  },
  {
    "pattern": "{.,..}/**/*.+(css|sass|less|scss|pcss|styl)",
    "patternOptions": {"dot": true, "nocomment": true},
    "group": "unknown",
    "position": "after"
  }
],

Used 2 patterns to cover all cases

Nice, I've been using the following pattern lately:

{.,..}/**/*.{less,css,scss}

But I have some imports that start with ../../ and this glob won't match :(
Do you have any idea how to match everything with a file extension?

This is frustrating

[ljharb]

**/*.*?

[constgen]

Unfortunately this is a known problem of Minimatch. And the solution is ugly - list all possible "up" paths (1,2,3,4,5... levels up)
https://github.com/atomspace/atomspace-eslint/blob/master/src/configs/import.config.json#L104
And keep finger crossed that the project structure will be not very deep

[MoradiDavijani]

To solve this, you can set matchBase property in patternOptions.

{
  pathGroups: [
  {
    pattern: '*.scss',
    group: 'index',
    patternOptions: { matchBase: true },
    position: 'after'
  ]
}

[itayganor]

@MoradiDavijani This is amazing. You made my day ❤️

[yuri-sakharov]

Doesn't work for me (typescript project)

"import/order": ["error", {
            "groups": ["external", ["internal", "parent", "sibling", "index"], "unknown"],
            "pathGroups": [
                {
                    "pattern": "*.scss",
                    "patternOptions": { "matchBase": true },
                    "group": "unknown",
                    "position": "after"
                }
            ],
            "pathGroupsExcludedImportTypes": [],
            "newlines-between": "always"
        }],

expected .scss in bottom but result is still same.

import './AvatarsGroup.scss';
import { Avatar } from 'components/Avatar';
import { PlusIndicator } from 'components/PlusIndicator';

Any ideas?

[ljharb]

@yuri-sakharov you may also need to set up the import/extensions settings as described in the readme.

[constgen]

@yuri-sakharov this is expected to work so. You faced a completely different issue. There are already several opened tickets for this https://github.com/benmosher/eslint-plugin-import/issues?q=is%3Aissue+is%3Aopen+side+effect+label%3A%22import%2Fexport+ordering%22+

[nickvirdenlegalshield]

@yuri-sakharov I was having trouble just like you with other solutions, such as with solutions by @constgen and @MoradiDavijani, which were helpful in solving the issue.

After some toying around with it, I figured out that I had to set warnOnUnassignedImports to true.

Once I did that, it started picking up on the unassigned imports (e.g. import './foo.scss';, but it would put them after sibling instead at the very end of the import order like I wanted - after object.

Here's my configuration:

Eslint version: 7.31.0
eslint-plugin-import version: 2.24.0

Import order

import './foo.scss';
import barModule from '../../barModule';
import bazModule from './bazModule';

ESLint configuration

'import/order': [
    // other config here
    'pathGroups': [
      {
        pattern: '{.,..}/*\.scss', // same directory only
        // pattern: '{.,..}/**/*\.scss' // same & outside directories (e.g. import '../foo/foo.scss')
        group: 'object',
        position: 'after'
      }
    ],
    'warnOnUnassignedImports': true
  }
]

[debjyoti-pandit]

@nickvirdenlegalshield getting the same issue.
Did you guys have the solution to why it is importing before the nearest sibling?

[andrmoel]

@nickvirdenlegalshield unfortunately warnOnUnassignedImports does not work with autofix.

[20manas]

In summary, to match one or more extensions, including unassigned imports:

'pathGroups': [
  {
    pattern: '*.{css,scss}',
    patternOptions: {matchBase: true},
    group: 'unknown',
    position: 'after',
  },
],
// no auto-fix
'warnOnUnassignedImports': true,