Sass compilation is broken when running with Vue 3.5.12 and above

[imnatgreen]

In Vue 3.5.12, compiler-sfc was updated (vuejs/core#11992) to use the Sass modern API if it is available.

This means it uses the modern compileString instead of legacy renderSync, which breaks as it doesn't support the legacy importer that vue-jest is providing.

This causes template compilation to fail: [vue-jest] Error: Vue template compilation failed

Related: pipe01/esbuild-plugin-vue3#30

I think replacing the existing importer:

importer: (url, prev) => ({
  file: applyModuleNameMapper(
    url,
    prev === 'stdin' ? filePath : prev,
    jestConfig,
    lang
  )
}),

with something like this

importer: {
  findFileUrl(url, context) {
    const resolvedPath = applyModuleNameMapper(
      url,
      context.containingUrl,
      jestConfig,
      lang
    )
    return pathToFileURL(resolvedPath)
  }
}

could work, but I couldn't get Sass to resolve my @/... imports with the modern importer, I think something more is needed.