Prevent reordering css imports

Sometimes the order of my css imports matters, because it will effect the cascade. Is there a way I can prevent the sort algorithm from operating against my css files and making them alphabetical?

Or maybe there’s a comment I can use to prevent reordering particular sections / files? For instance in my index.tsx file I need to import my global css file before my app component, again for the cascade. Prettier itself has no ranged-ignore comments, unfortunately. https://github.com/prettier/prettier/issues/5287

Thanks!

[IanVS]

@adroste, I also agree this is important, enough that I published a fork of this project that includes https://github.com/trivago/prettier-plugin-sort-imports/pull/111, so that side-effect imports are not reordered. You can find that fork at https://www.npmjs.com/package/@ianvs/prettier-plugin-sort-imports, in case it’s useful.

[IdanLevi]

Personally (my opinion, not the opinion of the the author(s) of this plugin) I think we should keep it as simple as possible. Having to add prettier or plugin specific comments to change the sorting order might be a last workaround, but it feels wrong to me – it should “just work” without these magic comments.

Having to manually group you CSS imports into sort groups also feels like a chore and sounds pretty fragile when the content of these files changes. And I think we should also keep in mind that adding too many code style options is also kinda against the spirit of prettier.

So perhaps we can collect more uses cases CSS imports like import styles from './myButton.module.css';? Should these never be sorted because the order is important, or are there some cases when people want to sort them and some cases when people don’t want them to be sorted?

If the former we could simply never sort CSS imports. If the latter, a simple option like sortCssImports might help?

I think a ‘sortCssImports’ option would be great.