fix: support optional chaining imports

Author: azat-io

rules/sort-imports.ts

@@ -353,10 +353,12 @@ export default createEslintRule<Options<string[]>, MESSAGE_ID>({
       /* Avoid matching on named imports without specifiers */
       !/\}\s*from\s+/u.test(sourceCode.getText(node))
 
-    let isStyle = (value: string): boolean =>
-      ['.less', '.scss', '.sass', '.styl', '.pcss', '.css', '.sss'].some(
-        extension => value.endsWith(extension),
+    let isStyle = (value: string): boolean => {
+      let [cleanedValue] = value.split('?')
+      return ['.less', '.scss', '.sass', '.styl', '.pcss', '.css', '.sss'].some(
+        extension => cleanedValue.endsWith(extension),
       )
+    }
 
     let flatGroups = new Set(options.groups.flat())
     let shouldRegroupSideEffectNodes = flatGroups.has('side-effect')

test/sort-imports.test.ts

@@ -2308,6 +2308,63 @@ describe(ruleName, () => {
         invalid: [],
       },
     )
+
+    ruleTester.run(
+      `${ruleName}(${type}): supports style imports with optional chaining`,
+      rule,
+      {
+        valid: [
+          {
+            code: dedent`
+              import b from './b.css?raw'
+              import c from './c.css'
+
+              import a from './a.js'
+            `,
+            options: [
+              {
+                ...options,
+                groups: ['style', 'unknown'],
+                newlinesBetween: 'always',
+              },
+            ],
+          },
+        ],
+        invalid: [
+          {
+            code: dedent`
+              import a from './a.js'
+              import b from './b.css?raw'
+              import c from './c.css'
+            `,
+            output: dedent`
+              import b from './b.css?raw'
+              import c from './c.css'
+
+              import a from './a.js'
+            `,
+            options: [
+              {
+                ...options,
+                groups: ['style', 'unknown'],
+                newlinesBetween: 'always',
+              },
+            ],
+            errors: [
+              {
+                messageId: 'unexpectedImportsGroupOrder',
+                data: {
+                  left: './a.js',
+                  leftGroup: 'unknown',
+                  right: './b.css?raw',
+                  rightGroup: 'style',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    )
   })
 
   describe(`${ruleName}: sorting by natural order`, () => {
@@ -3805,6 +3862,63 @@ describe(ruleName, () => {
         ],
       },
     )
+
+    ruleTester.run(
+      `${ruleName}(${type}): supports style imports with optional chaining`,
+      rule,
+      {
+        valid: [
+          {
+            code: dedent`
+              import b from './b.css?raw'
+              import c from './c.css'
+
+              import a from './a.js'
+            `,
+            options: [
+              {
+                ...options,
+                groups: ['style', 'unknown'],
+                newlinesBetween: 'always',
+              },
+            ],
+          },
+        ],
+        invalid: [
+          {
+            code: dedent`
+              import a from './a.js'
+              import b from './b.css?raw'
+              import c from './c.css'
+            `,
+            output: dedent`
+              import b from './b.css?raw'
+              import c from './c.css'
+
+              import a from './a.js'
+            `,
+            options: [
+              {
+                ...options,
+                groups: ['style', 'unknown'],
+                newlinesBetween: 'always',
+              },
+            ],
+            errors: [
+              {
+                messageId: 'unexpectedImportsGroupOrder',
+                data: {
+                  left: './a.js',
+                  leftGroup: 'unknown',
+                  right: './b.css?raw',
+                  rightGroup: 'style',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    )
   })
 
   describe(`${ruleName}: sorting by line length`, () => {
@@ -5374,6 +5488,63 @@ describe(ruleName, () => {
         ],
       },
     )
+
+    ruleTester.run(
+      `${ruleName}(${type}): supports style imports with optional chaining`,
+      rule,
+      {
+        valid: [
+          {
+            code: dedent`
+              import b from './b.css?raw'
+              import c from './c.css'
+
+              import a from './a.js'
+            `,
+            options: [
+              {
+                ...options,
+                groups: ['style', 'unknown'],
+                newlinesBetween: 'always',
+              },
+            ],
+          },
+        ],
+        invalid: [
+          {
+            code: dedent`
+              import a from './a.js'
+              import b from './b.css?raw'
+              import c from './c.css'
+            `,
+            output: dedent`
+              import b from './b.css?raw'
+              import c from './c.css'
+
+              import a from './a.js'
+            `,
+            options: [
+              {
+                ...options,
+                groups: ['style', 'unknown'],
+                newlinesBetween: 'always',
+              },
+            ],
+            errors: [
+              {
+                messageId: 'unexpectedImportsGroupOrder',
+                data: {
+                  left: './a.js',
+                  leftGroup: 'unknown',
+                  right: './b.css?raw',
+                  rightGroup: 'style',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    )
   })
 
   describe(`${ruleName}: validating group configuration`, () => {