Describe the bug

My css, which is imported in main.js, is automatically inline in the head of the page when running the dev server. When running vite build and vite preview, it injects a link tag.

When running de dev server I am also experiencing a Flash of unstyled content (FOUC) when the page loads. This is very annoying, since I use vite-plugin-eleventy so rebuilds are a basic part of my dev experience.

I spent a lot of time searching on the web and in the issues, but can't seem to find the problem. It doesn't seem like normal behaviour.

Disclaimer: I'm very new to vite

I made my repo public for reproduction.

Reproduction

https://github.com/silveltman/vite-reproduction

System Info

windows 11
Firefox and Chrome (I tested those 2)
Npm 8.11.0
node v16.15.1

Dependencies can be found in the github repo

Used Package Manager

npm

Logs

No response

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.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• 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.