import-js / import-js/eslint-plugin-import

BUG: import/order - CSS/Sass/SCSS/etc should be grouped, and never alphabetized

Open
#2,397 15 comments 16 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

import/export ordering question
Dominant language
JavaScript
Stars
5.9k
Forks
1.5k
PR merge metrics
No merged PRs in 30d

Description

In bundlers (like Webpack), you can import in style files. This is useful so that relative image/fonts get bundled correctly. You may be importing from node_modules, or locally, and the order you import files effects the Cascade in CSS. So they should always be grouped together, and never alphabetized.

* `**/*.css`
* `**/*.scss`
* `**/*.sass`
* `**/*.styl`
* `**/*.less`

There should be a "styles" group added to the list of official groups, and it should always ignore internal sorting rules, such as alphabetize, to prevent specificity bugs in the imported styles.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the import/order rule and its list of official groups. Add the styles group for CSS, SCSS, Sass, Stylus, and Less imports, ensuring internal alphabetization does not reorder those imports. Done means style imports remain grouped in their source order while other groups retain their existing sorting behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
eslint, javascript
Domain
tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.