Update sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md

Co-authored-by: Rich Harris <rich.harris@vercel.com>
better-docs-for-css-injected
Paolo Ricciuti 2 months ago committed by GitHub
parent b97ae40121
commit 385ada14d0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -99,11 +99,11 @@ import App from './App.svelte';
In Svelte 4, rendering a component to a string also returned the CSS of all components. In Svelte 5, this is no longer the case by default because most of the time you're using a tooling chain that takes care of it in other ways (like SvelteKit). If you need CSS to be returned from `render`, you can set the `css` compiler option to `'injected'` and it will add `<style>` elements to the `head`. In Svelte 4, rendering a component to a string also returned the CSS of all components. In Svelte 5, this is no longer the case by default because most of the time you're using a tooling chain that takes care of it in other ways (like SvelteKit). If you need CSS to be returned from `render`, you can set the `css` compiler option to `'injected'` and it will add `<style>` elements to the `head`.
You can set this option: There are several ways to set this option:
- Globally through the `compilerOption` property in your svelte config. - Globally, via the `compilerOptions.css` option in your `svelte.config.js` or the options passed to `svelte.compile`
- On a per component basis through the `<svelte:options css="injected" />` tag. - Dynamically, using [`dynamicCompileOptions`](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#dynamiccompileoptions) in `vite-plugin-svelte`
- Dynamically using the [`dynamicCompileOption`](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#dynamiccompileoptions) property of `vite-plugin-svelte` - Per-component, with `<svelte:options css="injected" />` (this will override options set any other way)
### Component typing changes ### Component typing changes

Loading…
Cancel
Save