How to handle the confliction with import/first?

[helloint]

This is after the format:

import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useShareAppMessage, useShareTimeline } from '@tarojs/taro';
import Table, { Columns } from 'taro-react-table';
import { useAppDispatch, useAppSelector } from '../../store/hooks';

import 'taro-react-table/dist/index.css';  // <----ESLint: Absolute imports should come before relative imports.(import/first)
import './index.scss';

My .eslintrc.js

module.exports = {
  extends: ['taro/react', 'plugin:prettier/recommended'],
  plugins: ['simple-import-sort', 'import'],
  rules: {
    'react/jsx-uses-react': 'off',
    'react/react-in-jsx-scope': 'off',
    'import/order': 'off',
    'import/first': 'warn',
    'import/newline-after-import': 'warn',
    'import/no-duplicates': 'warn',
    'simple-import-sort/imports': 'warn',
    'simple-import-sort/exports': 'warn',
  },
  overrides: [
    // override "simple-import-sort" config
    {
      files: ['*.js', '*.jsx', '*.ts', '*.tsx'],
      rules: {
        'simple-import-sort/imports': [
          'warn',
          {
            groups: [
              [
                // Packages `react` related packages come first.
                '^react',
                '^@?\\w',
                // Internal packages.
                '^(@|components)(/.*|$)',
                // Side effect imports.
                '^\\u0000',
                // Parent imports. Put `..` last.
                '^\\.\\.(?!/?$)',
                '^\\.\\./?$',
                // Other relative imports. Put same-folder imports and `.` last.
                '^\\./(?=.*/)(?!/?$)',
                '^\\.(?!/?$)',
                '^\\./?$',
              ],
              // Style imports.
              ['^.+\\.?(sc|sa|c)ss$'],
            ],
          },
        ],
      },
    },
  ],
};

Note: taro/react contains import/order, so I turned the rule off.

Thanks.

[lydell]

Hi! Yes, it sounds like this should be possible.

I don’t quite understand, though. Can you post:

• what the output is after running this rule
• what you would like it to be
• your config (already done)

You have already created a custom groups config. What problems did you encounter when trying to to the absolute css file thing?

[helloint]

• what the output is after running this rule
  Please see the first code block (I mentioned 'This is after the format'), this is after format by ESLint (with eslint-plugin-simple-import-sort)
  But then ESLint warned me:
  Absolute imports should come before relative imports.(import/first)
  It means the absolute css import, 'taro-react-table/dist/index.css', should come before the relative component import.

• what you would like it to be
  I would like it not warn me after I do the code format...

• your config (already done)
  See the 2nd code block.

For the custom groups config, actually it comes from this topic, and I just made some minor changes:

1. support sass
2. remove blank lines between groups, except the styles group

[helloint]

oh, my wrong, the topic is incorrect. the eslint-plugin-simple-import-sort do put the absolute css to the last group, just the import/first throws warning...

[helloint]

I pushed a demo project to GitHub https://github.com/hint-test/test-eslint-plugin-simple-import-sort.git
It shows the import/first warning in src/pages/index/index.jsx, after I format the file using eslint-plugin-simple-import-sort

[helloint]

I fixed with 'import/first': ['warn', 'disable-absolute-first'],