Add "unassigned" to importType for order rule

[hotforfeature]

I would like to group and order unassigned imports. This specific use case is for importing Polymer 2 html elements with polymer-webpack-loader.

import { Component } from '@angular/core';

import 'bower_components/paper-button/paper-button.html';

import { value } from '../parent'; 
import { other } from './sibling';

The proposed .eslintrc to achieve the above style would be

"import/order": [
  "error", 
  {
    "groups": ["builtin", "external", "unassigned", ["parent", "sibling", "index"]],
    "newlines-between": "always"
  }
]

At the moment unassigned imports are completely ignored.

[ljharb]

This seems reasonable; altho I’d call them “side-effecting” or something instead of just “unassigned”.

A use case that isn’t deprecated (ie, that doesn’t involve bower) would be shimming/polyfilling.

[lext-7]

Unassigned imports are ignored now. In our project, there are some unassigned style imports. We think there should rank last to keep code clean. We need to config it.

[ljharb]

@lext-7 they, in fact, should always be first since they typically have side effects.

[constgen]

In React apps it is better to import CSS last as it is more efficient way to override public styles of imported child components. The selectors may have the same priority. So to avoid the situation when the parent can't override appearance of child components the styles should always be imported at the very end of import list in every component

[constgen]

@ljharb As I described above sometimes it may be important. Preserving the necessary order for the particular project may be highly necessary.
To not make breaking changes I propose to add an option to pathGroups so consumers may enable processing of side affect imports for certain groups. E.g.:

"pathGroups": [
  {
    "pattern": "{.,..}/**/*.+(css|sass|less|scss|pcss|styl)",
    "unnamed": true, // this is a new option
    "group": "unknown",
    "position": "after"
  }
]

[ljharb]

@constgen that seems reasonable.