Alias's not picked up for svelte:head styles

[Hecatron]

Describe the bug

Hi, One of the things I've noticed is that the alias's are not picked up for style tags inside svelte:head
This is something I've been using for storybook as any global styles inside svelte:head seem to be unloaded when switching between different components (which is useful)
As an example:

This works fine

<script>
  import "@styles/example1.css";
</script>

This also works

<style lang="scss">
  @import "@styles/example1";
</style>

This isn't picked up

<svelte:head>
  <style lang="scss">
    @import "@styles/example1";
  </style>
</svelte:head>

I can work around this using svelte-preprocess
by passing in a special function into it's scss importer setting.
But I suspect it might be better if this was supported natively instead.

I wasn't sure if this should be raised here or in one of the rollup plugins since I'm not sure where it's actually evaluated
Any thoughts?

Reproduction

yarn create vite testproject

When prompted select svelte then svelte-ts

vite.config.ts

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import path from 'path';

const rootdir = path.resolve(path.dirname(__filename) + './');

export default defineConfig({
  plugins: [svelte()],
  resolve: {
    alias: {
      '/@': path.resolve(rootdir),
      '~': path.resolve(rootdir + '/node_modules'),
      '@styles': path.resolve(rootdir + '/src/styles'),
    },
  },
})

with svelte-preprocess disabled just to be sure that's not interfering

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
    Memory: 4.60 GB / 15.68 GB
  Binaries:
    Node: 18.1.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 3.2.1 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (102.0.1245.41)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @sveltejs/vite-plugin-svelte: ^1.0.0-next.49 => 1.0.0-next.49
    svelte: ^3.48.0 => 3.48.0
    vite: ^2.9.12 => 2.9.12

### Severity

annoyance

[bluwy]

vite-plugin-svelte does have support for handling style tags with experimental.useVitePreprocess. That will use Vite's internal to process it, and you should turn off svelte-preprocess then. And I think it'll work.

---

The reason aliases work in top-level styles and not it svelte:head is because:

1. svelte-preprocess doesn't handle the alias by default, so the @import is left as is.
2. For top-level styles, vite-plugin-svelte splits it as a .css request, so Vite can process it (note is not the same as useVitePreprocess, as this is processed after Svelte compiles, useVitePreprocess work before compile)
3. For svelte:head styles, it's not split into a separate .css request, because it's embedded into the head (it's compiled into JS)

Plus, it's not conventional to put styles in svelte:head, but I understand that it's a workaround to the Svelte issue you pointed (https://github.com/sveltejs/svelte-preprocess/pull/531)

---

If useVitePreprocess work for you, I don't think there's anything else vite-plugin-svelte can do. The core issue probably needs to be resolved to have a better experience overall.

[Hecatron]

Thanks very much that does seem to work with a normal vite site and is exactly what I was looking for With storybook from the looks of things I still need to use the svelte-preprocess method but that should hopefully go away once they move to version 7 Since I think the error I'm seeing with that it's being caused by the use of CommonJS for it's config files

The workaround I mentioned before I've put up here btw as a pull request

https://github.com/sveltejs/svelte-preprocess/pull/531