It doesnt work with (import '../styles/mystyle.scss');

[Cauen]

Hello, I'm trying to order my styles imports like:

import '../styles/components/CreditCard.scss';
import 'react-credit-cards/es/styles-compiled.css';

I tried to use this group: "/\bstyles\b/", and "/css$/" but its not working.

I think that the imports must have the "from", i'm correct? There is a plan to add support to css / scss?

[willhoney7]

Hi @Cauen,

The documentation talks about this a bit, but I'll be honest, it's hard to find.

On this page: https://github.com/Tibfib/eslint-plugin-import-helpers/blob/master/docs/rules/order-imports.md

Notes:

• Unassigned imports are ignored (ex: import 'polyfill'), as the order they are imported in may be important.

Because unassigned/bare imports typically contain side-effects the order can be important. So, to avoid potential issues, this ESLint rule ignores bare imports and keeps them in the order you specified.

[Cauen]

Hmmmm it makes sense, thanks. If you find it useful, I would suggest putting another example like (import '../style.css'), for someone (like me) who searched for "css" in the docs.

And... Do you think that the possibility of adding a group that you did not reorder internally would be useful? Something like:

"groups": [
  "/^react/",
  "/^@ material-ui/",
  "module",
  ["parent", "sibling", "index"],
  { pattern: "/css$/", sort: false }
],

[willhoney7]

Hmmmm it makes sense, thanks. If you find it useful, I would suggest putting another example like (import '../style.css'), for someone (like me) who searched for "css" in the docs.

I would welcome a PR adding this if you have time.

And... Do you think that the possibility of adding a group that you did not reorder internally would be useful?

For me personally and my use cases... no. Why don't you open a new issue with this one and we can see if others have interest. @cauen