how to make side effect always be top

[Klay Curry]

I want to sort all the paths with extensions to the bottom group, e.g. .less, .scss, .svg

here is my config:

"simple-import-sort/imports": [
  2,
  {
    groups: [
      /**
       * Side effect
       * @example "import './reset.css';"
       */
      ["^\\u0000"],
      /**
       * packages
       * 1. start with "node:"
       * 2. start with "react"
       * 3. @ali/pocket
       * 4. start with "@ali/"
       * 5. other packages
       */
      ["^node:", "@ali/pocket", "^react", "^rax", "^@ali", "^@?\\w"],
      /**
       * absolute path, only alias starts with "@/" is allowed in real projects
       * @example "@/utils"
       * @example "src/constants"
       */
      ["^@/+", "^src/", "^app/", "^apps/", "^lib/", "^packages/", "^"],
      /**
       * relative path
       */
      ["^\\."],
      /**
       * path with extensions，which means non-js path
       * @example ".less", ".svg", ".png"
       */
      ["\\.(\\w+)$"],
    ],
  },
],

what i expected:

import "./index.scss";

import fs from "node:fs";
import { React } from "@ali/pocket";
import ReactDOM from "react-dom";
import Router from "react-router-dom";
import { createElement, useEffect, useState } from "rax";
import Text from "rax-text";
import View from "rax-view";
import TitleBar from "@ali/rxpi-custom-titlebar";
import dayjs from "dayjs";
import flatten from "lodash/flatten";
import isObject from "lodash/isObject";
import { isMiniApp, isWeb } from "universal-env";

import SortFilterPanel from "@/components/sort-filter-panel";
import { isMobile } from "src/utils";

import ListPlusA from "../container/list-plus";
import { jsonParse } from "./components/flight-card/func";
import { setGlobal } from "./store/global";

import svg from "./a.svg";
import styles from "./index.module.less";
import scssStyles from "./index.module.scss";

what it actual behaviour:

import fs from "node:fs";
import { React } from "@ali/pocket";
import ReactDOM from "react-dom";
import Router from "react-router-dom";
import { createElement, useEffect, useState } from "rax";
import Text from "rax-text";
import View from "rax-view";
import TitleBar from "@ali/rxpi-custom-titlebar";
import dayjs from "dayjs";
import flatten from "lodash/flatten";
import isObject from "lodash/isObject";
import { isMiniApp, isWeb } from "universal-env";

import SortFilterPanel from "@/components/sort-filter-panel";
import { isMobile } from "src/utils";

import ListPlusA from "../container/list-plus";
import { jsonParse } from "./components/flight-card/func";
import { setGlobal } from "./store/global";

import "./index.scss";
import svg from "./a.svg";
import styles from "./index.module.less";
import scssStyles from "./index.module.scss";

[Simon Lydell]

Hi! The readme says: “The import ends up at the regex with the longest match.” For ./index.scss, 1 character is matched by \u0000 (the added fake null character), and 5 characters are matched by \.(\w+)$ (the .scss bit). So the \.(\w+)$ group wins – that’s why it ends up at the end.

One way of solving it should be by changing ^\u0000 to ^\u0000.* – this should match the entire string so it should win over the last group. (I didn’t have to test that right now so I might have made a mistake.)

[Klay Curry]

Hi! The readme says: “The import ends up at the regex with the longest match.” For ./index.scss, 1 character is matched by \u0000 (the added fake null character), and 5 characters are matched by \.(\w+)$ (the .scss bit). So the \.(\w+)$ group wins – that’s why it ends up at the end.

One way of solving it should be by changing ^\u0000 to ^\u0000.* – this should match the entire string so it should win over the last group. (I didn’t have to test that right now so I might have made a mistake.)

it worked! thank you so much!