Home How to format order import styles css module to first line in eslint-plugin-import?

Questions

How to format order import styles css module to first line in eslint-plugin-import?

September 1, 2023

I am trying to config ESLint for my project that using eslint-plugin-import to ogranize module import order but I have a case with style css module. I want to place style css module import to the first line. How I can config to get my expected?
Here is my lint config for that:

.eslintrc.json

    "import/order": [
        "warn",
        {
            "groups": ["builtin", "object", "external", "internal", "type", "parent", "sibling", "index"],
            "pathGroups": [
                {
                    "pattern": "~/**",
                    "group": "internal",
                    "position": "after"
                },
                {
                    "pattern": "**/*.{css,scss}",
                    // How I can config here?
                },
            ],
            "newlines-between": "always"
        }
    ]

My expected:

import '../styles/style.css'; 

import React from 'react';

import * as utils from '../utils'

>Solution :

To configure ESLint to place style CSS module imports at the top, you can adjust your ESLint configuration as follows:

"import/order": [
    "warn",
    {
        "groups": [["builtin", "external"], "internal", ["parent", "sibling", "index"]],
        "pathGroups": [
            {
                "pattern": "~/**",
                "group": "internal",
                "position": "after"
            },
            {
                "pattern": "**/*.{css,scss}",
                "group": "external",
                "position": "before"
            }
        ],
        "newlines-between": "always"
    }
]