feat: universal injected css

[Rich-Harris]

This implements #12294 (comment). If the css compiler option is "injected", styles will be added to the head when you render(...).

This makes it trivial to include styles when rendering things like emails and OG cards, as well as massively simplifying toy setups where you can't be bothered to figure out how to get CSS from the compiler into your server-rendered HTML.

append_styles works largely as it did before, meaning that as components with injected CSS are rendered to the DOM, a <style> element will be created if it doesn't already exist.

This works with HMR by removing the <style> element for the component being reloaded. In an ideal world we'd check to see if the contents had changed, but that would involve more complexity and this solution is Good Enough™.

Not pictured (yet): per-component options with <svelte:options css="injected" />.

Before submitting the PR, please make sure you do the following

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• Prefix your PR title with feat:, fix:, chore:, or docs:.
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests and linting

• Run the tests with pnpm test and lint the project with pnpm lint

[changeset-bot]

🦋 Changeset detected

Latest commit: 5f971fa

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
svelte	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Rich-Harris]

the failing tests relate to custom elements (naturally 🙄). investigating

[dummdidumm]

looks good!

While testing this I noticed two things with HMR, which are separate to the PR (happen on main aswell):

• when running pnpm ssr with injected, and then changing something on the client, you get a runtime error inside HMR
• when updating a color with external, the instance reruns. AFAIK CSS-only changes are handled better by v-p-s (cc @dominikg )

[Rich-Harris]

Yeah, I noticed the pnpm ssr/HMR bug too but haven't figured out what's happening — Vite is getting confused about the URL somehow. Need to spelunk through the git history to see where it broke, it was probably one of my recent playground PRs.

I noticed that v-p-s isn't doing its normal stable hashing thing, which could be related to the second point you mentioned

[dominikg]

stable hashing in v-p-s is done by passing in a custom cssHash function to compileOptions.

css-only hmr relies on the fact that the css is an external module and update is handled by vite (v-p-s appends an import to the virtual css module of the externalized css)

with "injected", i don't think we can avoid the js update altogether, best we can do is maybe somehow figure out that only css changed and update the style node without rerunning the instances.

Maybe it's possible to do this with custom hmr accept code. Or partial accept can help? cc @rixo

[dummdidumm]

The thing is, it also doesn't preserve component state with css: 'external'

[rodshtein]

Thank you guys for this! 😘😘😘