From cdfd935d4d0d09302a67307c173b735e49ce9e8d Mon Sep 17 00:00:00 2001
From: Jiahao Guo <im@pyonpyon.today>
Date: Tue, 17 Dec 2024 16:52:24 +0800
Subject: [PATCH] fix: (highcharts v12) keep highcharts side effect imports
 grouped after package imports

Highcharts v12 introduces a new simpler way to import it's additional modules,
which uses side effect imports to achieve.

By default, eslint-plugin-simple-import-sort groups side effect imports at the top
of the file, which makes `highcharts/modules/...` being imported before `highcharts`, resulting in a runtime error.

To fix this, we add a custom `groups` config for `simple-import-sort/imports` to group Highcharts side effect imports after package imports.

Highcharts v12 info: https://www.highcharts.com/blog/changelog/#:~:text=When%20importing%20Highcharts%20as%20a%20node%20module%2C%20additional%20modules%20no%20longer%20require%20initialization
---
 ...-06a5ccb2-db6c-452a-9b1d-b9d54302222b.json |  7 ++++
 .../eslint-config/src/config/base/imports.ts  | 37 ++++++++++++++++++-
 2 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 change/@rightcapital-eslint-config-06a5ccb2-db6c-452a-9b1d-b9d54302222b.json

diff --git a/change/@rightcapital-eslint-config-06a5ccb2-db6c-452a-9b1d-b9d54302222b.json b/change/@rightcapital-eslint-config-06a5ccb2-db6c-452a-9b1d-b9d54302222b.json
new file mode 100644
index 00000000..969e48a6
--- /dev/null
+++ b/change/@rightcapital-eslint-config-06a5ccb2-db6c-452a-9b1d-b9d54302222b.json
@@ -0,0 +1,7 @@
+{
+  "comment": "fix: (highcharts v12) keep highcharts side effect imports grouped after package imports",
+  "type": "minor",
+  "packageName": "@rightcapital/eslint-config",
+  "email": "im@pyonpyon.today",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/eslint-config/src/config/base/imports.ts b/packages/eslint-config/src/config/base/imports.ts
index 6ea8ea84..75805f28 100644
--- a/packages/eslint-config/src/config/base/imports.ts
+++ b/packages/eslint-config/src/config/base/imports.ts
@@ -78,7 +78,42 @@ const config: TSESLint.FlatConfig.ConfigArray = [
       // https://github.com/lydell/eslint-plugin-simple-import-sort?tab=readme-ov-file#usage
       // MEMO: simple-import-sort/imports should not be used with import-x/order
       'import-x/order': 'off',
-      'simple-import-sort/imports': 'error',
+      'simple-import-sort/imports': [
+        'error',
+        {
+          /**
+           * Almost the same as the default config of simple-import-sort.
+           *
+           * Except for the Highcharts side effect imports,
+           * which are grouped after package imports
+           *
+           * default: https://github.com/lydell/eslint-plugin-simple-import-sort#sorting:~:text=This%20is%20the%20default%20value%20for%20the%20groups%20option%3A
+           *
+           * highcharts v12 info: https://www.highcharts.com/blog/changelog/#:~:text=When%20importing%20Highcharts%20as%20a%20node%20module%2C%20additional%20modules%20no%20longer%20require%20initialization
+           */
+          groups: [
+            // Side effect imports.
+            ['^\\u0000'],
+            // Node.js builtins prefixed with `node:`.
+            ['^node:'],
+
+            // Packages.
+            // Things that start with a letter (or digit or underscore), or `@` followed by a letter.
+            ['^@?\\w'],
+
+            // Highcharts side effect imports
+            ['^\\u0000highcharts/'],
+
+            // Absolute imports and other imports such as Vue-style `@/foo`.
+            // Anything not matched in another group.
+            ['^'],
+
+            // Relative imports.
+            // Anything that starts with a dot.
+            ['^\\.'],
+          ],
+        },
+      ],
 
       // Ensure all exports are sorted
       // https://github.com/lydell/eslint-plugin-simple-import-sort?tab=readme-ov-file#usage