Debugger in vs-code does not stop at breakpoint but elsewhere

Describe the bug

In vanilla project with vue3 + vitest + @testing-library/vue + node 18.18.2 or 20.11.1, setting and debugging breakpoints in vs-code on windows 11 does not work as expected. Debugger stops at wrong location. I am using vue single file components ( aka .vue files )

Seems to be transpiling and/or sourcemap issue.

The issue disappears when removing <style>...</style> section in .vue file

Reproduction

1. Create any vanilla vue project with simple single file component which contains all sections: template / script / style
2. Write a test with @testing-library/vue which is testing this component
3. Set a breakpoint within a .vue file
4. Run the test and watch where debugger stops
   Result: Debugger stops at wrong line
   Expected: Debugger should stop at correct line

Issue goes away when removing <style>...</style> section in .vue file

Example file SimpleComponent.vue

<template>
  <div>Hi {{ name }}</div>
  <div>Good</div>
</template>
<script setup>
import { ref } from 'vue'
const name = ref("Peter")
console.log("Nothing special") // set breakpoint here
</script>
<style>
.useless {
  color: green;
}
</style>

Example simple.spec.js

import { test } from 'vitest'
import { render } from '@testing-library/vue'
import SimpleComponent from './components/SimpleComponent.vue'

test("Component", () => {
  const renderResult = render(SimpleComponent)
  renderResult.findByText("mymessage")
})

Full example vanilla project to clone and reproduce: https://github.com/bonham/vitest-debug-issue-js

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 5700X 8-Core Processor
    Memory: 20.77 GB / 31.93 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (122.0.2365.80)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @vitejs/plugin-vue: ^5.0.4 => 5.0.4 
    vite: ^5.1.6 => 5.1.6 
    vitest: ^1.3.1 => 1.3.1

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

Clone the linked reproduction and run the test from simple.spec.js with a breakpoint in SimpleComponent.vue. Compare debugger locations with and without the style block, then trace the transpilation and source-map handling involved. Done means breakpoints in the Vue component stop on the intended source lines while the style section is present.