feat: allow for svelte:options css injected

[paoloricciuti]

Svelte 5 rewrite

Closes #12656

Please note that the Svelte codebase is currently being rewritten for Svelte 5. Changes should target Svelte 5, which lives on the default branch (main).

If your PR concerns Svelte 4 (including updates to svelte.dev.docs), please ensure the base branch is svelte-4 and not main.

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: a55a341

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

[dominikg]

see #12656 (comment)

if file content is allowed to change the compilerOptions, callers of compile need to be made aware so they can act accordingly.

esp css where vite-plugin-svelte adds a virtual css module in case it is external.

[Rich-Harris]

Recapping Discord discussion: we should probably only allow <svelte:options css="injected">. There's no obvious use case for forcing external when the options specified to svelte.compile include css: 'injected', but the reverse is definitely true (OG images, embed generators etc), and there are situations where injected is required (e.g. Vite prebundling).

esp css where vite-plugin-svelte adds a virtual css module in case it is external.

This should be fine — when css is injected, no CSS is emitted by the compiler

[paoloricciuti]

Recapping Discord discussion: we should probably only allow <svelte:options css="injected">. There's no obvious use case for forcing external when the options specified to svelte.compile include css: 'injected', but the reverse is definitely true (OG images, embed generators etc), and there are situations where injected is required (e.g. Vite prebundling).

esp css where vite-plugin-svelte adds a virtual css module in case it is external.

This should be fine — when css is injected, no CSS is emitted by the compiler

So should i just remove the external option or this PR needs more work to make it work with v-p-s? Does the need to return the used configuration from compile still holds true? cc. @dominikg

[dominikg]

with the limitation that only css="injected" is possible and that causes the compiler output to not contain css separately, vps is fine https://github.com/sveltejs/vite-plugin-svelte/blob/2670424fc7f66cef6797286bee4e0be1aa03b4a8/packages/vite-plugin-svelte/src/utils/compile.js#L165

I still think there needs to be a way to know the effectively used compiler options per file and i also still think that the control belongs to the project calling compile, not the component author. But ultimately you can use a preprocessor to remove that option so while this adds inconvenience, its not impossible.

It should be documented though that adding css="injected" to a components source should not be done lighthearted, esp. in public svelte libraries. And we also should make it clear that this is a very limited option to serve a very limited usecase. There is no plan to extend this to other compiler options.

so maybe instead of using css="injected" and having to add code that yells at you for "external", make it something like <svelte:options force-css-injected

[paoloricciuti]

with the limitation that only css="injected" is possible and that causes the compiler output to not contain css separately, vps is fine https://github.com/sveltejs/vite-plugin-svelte/blob/2670424fc7f66cef6797286bee4e0be1aa03b4a8/packages/vite-plugin-svelte/src/utils/compile.js#L165

I still think there needs to be a way to know the effectively used compiler options per file and i also still think that the control belongs to the project calling compile, not the component author. But ultimately you can use a preprocessor to remove that option so while this adds inconvenience, its not impossible.

It should be documented though that adding css="injected" to a components source should not be done lighthearted, esp. in public svelte libraries. And we also should make it clear that this is a very limited option to serve a very limited usecase. There is no plan to extend this to other compiler options.

so maybe instead of using css="injected" and having to add code that yells at you for "external", make it something like <svelte:options force-css-injected

I can agree to the force-css-injected thing...so, except for that are we good to go with this or there's something else we need?

[Rich-Harris]

It should be css="injected". We don't have <svelte:options force-runes /> or force-namespace="foreign", it's just understood that component-specified options take precedence over options passed to svelte.compile which take precedence over default options

[paoloricciuti]

It should be css="injected". We don't have <svelte:options force-runes /> or force-namespace="foreign", it's just understood that component-specified options take precedence over options passed to svelte.compile which take precedence over default options

But it make sense to have css="injected" if it's the only value that you can set? Is it to future proof it?

[Rich-Harris]

It's confusing if it doesn't match the underlying svelte.compile option, when all the others do

[Rich-Harris]

thanks!