Issues with Svelte preprocessors

[KieranP]

If I put this plugin first in the plugin list, then none of the svelte files get formatted (the docs don't mentioned that this plugin must come after prettier-plugin-svelte).

But if I put this plugin last (i.e. after prettier-plugin-svelte) so that it runs correctly, then formatting breaks on svelte files that include SCSS comments, among other weird breakages, e.g.

<style lang="scss">
  // This is a comment
  a {
    color: red;
  }
</style>

Some of the errors I get are:

[error] app/frontend/javascripts/views/mfa/activation_modal.svelte: css_expected_identifier: Expected a valid CSS identifier
[error] https://svelte.dev/e/css_expected_identifier
[error] (unknown):135:4
[error] 133:       max-width: 594px;
[error] 134:     }
[error] 135:     // &.mobile {
[error]          ^
[error] 136:     // }
[error] 137:   }

[error] app/frontend/javascripts/components/navigation/nav_user.svelte: css_expected_identifier: Expected a valid CSS identifier
[error] https://svelte.dev/e/css_expected_identifier
[error] (unknown):105:2
[error] 103: 
[error] 104: <style lang="scss">
[error] 105:   $nav-item-padding: 0.3rem;
[error]        ^
[error] 106: 
[error] 107:   .nav-link {

[error] app/frontend/javascripts/components/embedded_page.svelte: element_invalid_closing_tag: `</script>` attempted to close an element that was not open
[error] https://svelte.dev/e/element_invalid_closing_tag
[error] (unknown):44:0
[error] 42:   const useIframe = isValidUrl(src)
[error] 43: 
[error] 44: </script>
[error]     ^
[error] 45: 
[error] 46: <div class="embedded-url-page">

That last one is interesting, because I definitely open it with <script lang="ts"> and close it with </script> so there is no reason is should be complaining.

Removing this plugin, and just using prettier-plugin-svelte by itself works fine.

So overall, there is no way to get this working properly with Svelte.

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "importOrder": [
    "^svelte($|/)",
    "<THIRD_PARTY_MODULES>",
    "^@views/",
    "^@components/",
    "^~/",
    "^\\.",
    "<THIRD_PARTY_TS_TYPES>",
    "<TS_TYPES>"
  ],
  "importOrderCaseInsensitive": true,
  "importOrderGroupNamespaceSpecifiers": true,
  "importOrderSeparation": true,
  "importOrderSideEffects": false,
  "importOrderSortSpecifiers": true,
  "objectWrap": "preserve",
  "overrides": [
    {
      "files": "*.svelte",
      "options": {
        "parser": "svelte"
      }
    }
  ],
  "plugins": [
    "@trivago/prettier-plugin-sort-imports",
    "prettier-plugin-svelte"
  ],
  "printWidth": 80,
  "semi": false,
  "singleAttributePerLine": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false
}

Your Environment

• Plugin version: 5.2.2
• Prettier version: 3.6.2
• node version: 22.15.1
• package manager: yarn@4

[TheWirv]

This plugin seems to have problems with non-built-in parsers in general. In a React codebase using Rolldown-Vite, I recently installed the OXC parser plugin to gain some performance, but I uninstalled it again, after I noticed that it breaks import sorting via this plugin.