import/order doesn't sort assets that aren't assigned to a variable (e.g. `import './file.css'`)

When sorting imports, any assets that aren’t assigned to a variable are ignored, and break/mess with sorting of other imports.

e.g.

import mapboxgl from 'mapbox-gl';

import './file.json';
import './file.css';
import './file.png';
import React from 'react';
import { ToastContainer } from 'react-toastify';

import { ErrorBoundary } from '@app/components';
import { useAccount, useUser } from 'src/state';

import mygif from './file.gif';
import Routes from './Routes';

If I change the above and assign assets to a variable, sorting is applied as expected.

import mapboxgl from 'mapbox-gl';
import React from 'react';
import { ToastContainer } from 'react-toastify';

import { ErrorBoundary } from '@app/components';
import { useAccount, useUser } from 'src/state';

import b from './file.css';
import mygif from './file.gif';
import a from './file.json';
import c from './file.png';
import Routes from './Routes';

[ljharb]

I totally agree that it’s a smell - but a rule that risks making people do the wrong thing, without knowing why, isn’t a good rule.

It might be possible to make this warnable, but never to make it autofixable.

[quezak]

Your arguments are correct for complicated cases, but it would be nice if you could optionally configure to do something with the side-effect-only imports. I’m currently using a vscode plugin (TypeScript Import Sorter) that puts them on the top, in a separate group, plus a tslint rule that checks that.

IMHO side-effect imports should be used cautiously and only if absolutely necessary, so

• it’s a good thing to explicitly separate them to make them stand out
• while in some cases the order of side-effect imports may be important, if they need to be mixed in between regular imports, it’s a bad thing (and IMHO starts to smell of bad code design)

I’m using side-effect imports only for “global” stuff like reflect-metadata & tsconfig-paths/register on the backend, some jest plugins in tests, or storybook plugins on the frontend. I’ve just moved from tslint to eslint, and I’d like to keep enforcing grouping side-effect imports together 😃