Cannot sort `<script setup>` if multiple `<script>` are provided in vue sfc

[Tanimodori]

Your Environment

• prettier-plugin-sort-imports: 4.1.1
• Prettier version: 2.8.4
• node version: 16.19.0
• package manager: [email protected]
• IDE: VScode
• prettier-plugin-sort-imports: 4.1.1
• OS: Windows 11

Describe the bug

If multiple <script> blocks are provided in vue sfc, the <script setup> block will be ignored where imports inside are not sorted while other prettier functions still work.

It is common that both <script> and <script setup> are required in the same sfc (e.g. you need to use defineComponent to define the name of the component, or exports something from sfc).

To Reproduce

1. git clone https://github.com/Tanimodori/prettier-import-vue-repro.git
2. cd prettier-import-vue-repro
3. pnpm i
4. pnpm format
5. inspect diff of src/App.vue. The imports in <script setup> are not sorted.

Expected behavior

The imports in <script setup> should also be sorted.

Screenshots, code sample, etc

<script lang="ts">
import { dummy } from './dummy'
import { ref } from 'vue'

export const foo = ref(dummy)
</script>

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
import { computed } from 'vue'

const bar = computed(() => foo.value)
</script>

Configuration File (cat .prettierrc, prettier.config.js, .prettier.js)

Error log

N/A

Contribute to @trivago/prettier-plugin-sort-imports

• [x] I'm willing to fix this bug 🥇

[Tanimodori]

https://github.com/trivago/prettier-plugin-sort-imports/blob/a3b98939207af6b854c0588b44ad9166d17c3c19/src/preprocessors/vue-preprocessor.ts#L8

I suppose this is causing the problem.

[seanogdev]

FWiW, in Vue 3.3+ we now have defineOptions() which can now define these global properies on the components