Allow always moving css imports to the end of imports, even if they're side-effect imports

[mz8i]

Is your feature request related to a problem? I'm trying to figure out a setup which will work automatically with sorting imports after an auto-add-import action in VSCode. My problem is that usually, the import list in my React app might look something like:

import {FC} from 'react';

import {SomeComponent} from './SomeComponent';

import './localStyle.css';

When VSCode adds an import automatically through IntelliSense, it will add it at the end of the list, that is after the side-effect CSS import. Because that import is side-effect, the new import won't be reordered and grouped with the other imports at the start of the file. Over time, if you don't pay attention, it might lead to multiple sections of sorted imports, split by side-effect imports.

Describe the solution you'd like I'm not entirely sure what a clean solution would be. Ideally, there'd be a way to specify that CSS imports, even if they are side-effect imports, should be always moved to the bottom of the imports list. But it gets slightly complicated because they should not be reordered in relation to each other. However, other non-CSS imports should be able to move before the CSS imports.

Describe alternatives you've considered In this particular case, an alternative would be for VSCode to offer an option to auto-add imports at the top of the import list, rather than at the bottom. But I'm afraid it's unlikely such a configuration will be added.

[IanVS]

Hi, thanks for the issue. This is similar to another request that we received previously, https://github.com/IanVS/prettier-plugin-sort-imports/issues/51. I'd recommend giving that a read for some of the background of why this isn't so simple to achieve. I think CSS is particularly tricky, since the import order of CSS has a direct impact on the generated cascade, and re-arranging those imports can easily break styling.

I wonder if what you really want, is an eslint rule that alerts when css imports are followed by any other kind of import. It's not as nice as automatically re-arranging them, but it's a ton safer.

[mz8i]

Thanks for the link. I can see in that thread that you had the same reflection - a simple fix would be to have VSCode add the auto imports at the top :) Perhaps it is worth requesting such a config in VSCode after all...

In general, I totally appreciate this is not a simple topic from the perspective of this plugin - I just think that this is a common enough case that people will be (often unknowingly) ending up with an import list that is only sort-of-sorted ;) And maybe that warrants having a think if there's any possible solution inside this plugin

[fbartho]

@mz8i — if you wrote your own prettier plugin, and had it execute first, you could always shift the CSS imports to the bottom, without making any other changes (preserving the relative order).

I guess this wouldn’t be that hard a feature if you don’t care about carefully moving comments around. I think this shouldn’t be a feature of this plugin though.

[fbartho]

Further, by making it a separate plugin, you don’t have to think about “other” side-effect imports. Effectively you’d be making an automatic lint rule that says “all CSS must be last”.

[mz8i]

I see; that makes sense, and I will explore these options - closing this one for now! Thanks