Indentation removed wrongly with import-sort (causes weird artifacts)

[IgnusG]

The automatic re-ordering of imports seems to remove the indentation of the imports. I feel like this is because it sees them as top level inside of the script tag. This causes some of the statements to be distorted (see ZocreateEventDispatcher),

I've noticed the auto-import from the svelte extension for VS Code also places imports to the edge instead of respecting the indent so maybe it's a setting I missed?

Input

<script>
  import { Zoom, Sized } from "src/client/components";
  import { createEventDispatcher, onMount } from "svelte";
  import { findContent } from "src/content/find-content/find-content";
  import { scaleTextAttributes } from "src/content/scale-text-attributes/scale-text-attributes";
  import { backupOriginalTextAttributes } from "src/content/backup-original-text-attributes/backup-original-text-attributes";

  import { singlePrecision } from "src/client/lib";
  import { shortcut } from "src/client/actions";
</script>

Output:

<script>
  import { ZocreateEventDispatcher, onMount } from "svelte"; // <-- This import is broken
import { Zoom, shortcut } from "src/client/actions";
import { Zoom, Sized } from "src/client/components";
import { findbackupOriginalTextAttributes } from "src/content/backup-original-text-attributes/backup-original-text-attributes";
import { findContent } from "src/content/find-content/find-content";
import { scaleTextAttributes } from "src/content/scale-text-attributes/scale-text-attributes";

import { singlePrecision } from "src/client/lib";
</script>

Expected

<script>
  import { createEventDispatcher, onMount } from "svelte";
  import { Zoom, shortcut } from "src/client/actions";
  import { Zoom, Sized } from "src/client/components";
  import { findbackupOriginalTextAttributes } from "src/content/backup-original-text-attributes/backup-original-text-attributes";
  import { findContent } from "src/content/find-content/find-content";
  import { scaleTextAttributes } from "src/content/scale-text-attributes/scale-text-attributes";

  import { singlePrecision } from "src/client/lib";
</script>

It works correctly without the indentation (if I write the code like this):

<script>
import { Zoom, Sized } from "src/client/components";
import { createEventDispatcher, onMount } from "svelte";
import { findContent } from "src/content/find-content/find-content";
import { scaleTextAttributes } from "src/content/scale-text-attributes/scale-text-attributes";
import { backupOriginalTextAttributes } from "src/content/backup-original-text-attributes/backup-original-text-attributes";

import { singlePrecision } from "src/client/lib";
import { shortcut } from "src/client/actions";
</script>

Generates

<script>
import { createEventDispatcher, onMount } from "svelte";
import { shortcut } from "src/client/actions";
import { Zoom, Sized } from "src/client/components";
import { singlePrecision } from "src/client/lib";
import { backupOriginalTextAttributes } from "src/content/backup-original-text-attributes/backup-original-text-attributes";
import { findContent } from "src/content/find-content/find-content";
import { scaleTextAttributes } from "src/content/scale-text-attributes/scale-text-attributes";
</script>

package.json

{
  "name": "package",
  "version": "0.0.0",
  "scripts": {
    "format:eslint": "eslint --fix --ext ts,svelte src/client",
    "format:prettier": "prettier-eslint --write '$PWD/'src/client/{*.js,*.ts,**/*.js,**/*.ts,**/*.svelte}''
  },
  "devDependencies": {
    "@tsconfig/svelte": "^1.0.10",
    "@typescript-eslint/eslint-plugin": "^2.34.0",
    "@typescript-eslint/parser": "^2.34.0",
    "eslint": "^7.8.1",
    "eslint-config-prettier": "^6.11.0",
    "eslint-import-resolver-webpack": "^0.12.2",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-svelte3": "^2.7.3",
    "prettier": "^2.1.1",
    "prettier-eslint": "^11.0.0",
    "prettier-eslint-cli": "^5.0.0",
    "prettier-plugin-svelte": "^1.2.1",
    "svelte": "^3.24.1",
    "svelte-loader": "^2.13.6"
  },
  "dependencies": {}
}

.eslintrc.js

const path = require('path');
module.exports = {
  parser: "@typescript-eslint/parser",
  extends: [
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  parserOptions: {
    createDefaultProgram: true,
    ecmaVersion: 2019,
    sourceType: "module",
  },
  plugins: [
    "@typescript-eslint",
    "svelte3"
  ],
  "rules": {
    "import/order": ["error", {
      alphabetize: {
        order: 'asc',
      }
    }],
  },
  globals: {
    "process": true
  },
  overrides: [
    {
      "files": ["*.svelte"],
      "processor": "svelte3/svelte3",
      "rules": {
        "import/first": 0,
        "import/no-duplicates": 0,
        "import/no-mutable-exports": 0,
        "import/no-unresolved": 0
      }
    }
  ],
  settings: {
    "import/resolver": {
      "webpack": {
        config: path.resolve(__dirname, 'webpack.config.js')
      }
    }
  }
}

I'm kindof new to svelte so my apologies if this works as intended, or if the "svelte" way is to not indent script tags. My prettier-eslint does introduce the indentation though when I run it npm run format:prettier before npm run format:eslint.

[ritchieanesco]

Is there any update on this? Apart from affecting the indentation i am also noticing that the import path gets modified with the path from the previous import.

Before:

<script lang="ts">
  import { theme } from "@/theme/main.treat"
  import { BORDER_RADIUS, BOX_SHADOW, FONT_FAMILY } from "@/theme/constants"
  import { cssColorVars, cssFontWeightVars } from "@/utils/styles"
  import type { Host } from "."
  import BaseTemplate from "./template/base.svelte"
  import "./app.css"
  import Routes from "./routes"
  import { config } from "./store"
</script>

After:

<script lang="ts">
  import { theme } from "@/theme/main.treat"
  import { BORDER_RADIUS, BOX_SHADOW, FONT_FAMILY } from "@/theme/constants"
  import { cssColorVars, cssFontWeightVars } from "@/utils/styles"
  import BaseTemplate from "./template/base.svelte"
  import "./app.css"
  import Routes from "./routes"
  import { config } from "./store"
  import type { Host } from ".tore" // eslint modifies import path
</script>