msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

cssRenderOnServer -> css: 'injected'

Browse Source
pull/12374/head
Rich Harris 2 years ago
parent a334755e98
commit 236e6a27c8
8 changed files with 10 additions and 34 deletions
Show Stats Download Patch File Download Diff File

2
packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
Unescape View File

@ -2159,7 +2159,7 @@ export function server_component(analysis, options) {
const body = [...state.hoisted, ...module.body];
if (options.cssRenderOnServer) {
if (options.css === 'injected') {
body.push(
b.const(
'$$css',

10
packages/svelte/src/compiler/types/index.d.ts vendored
Unescape View File

@ -99,8 +99,8 @@ export interface CompileOptions extends ModuleCompileOptions {
*/
immutable?: boolean;
/**
* - `'injected'`: styles will be included in the JavaScript class and injected at runtime for the components actually rendered.
* - `'external'`: the CSS will be returned in the `css` field of the compilation result. Most Svelte bundler plugins will set this to `'external'` and use the CSS that is statically generated for better performance, as it will result in smaller JavaScript bundles and the output can be served as cacheable `.css` files.
* - `'injected'`: styles will be included in the `head` when using `render(...)`, and injected into the document (if not already present) when the component mounts. For components compiled as custom elements, styles are injected to the shadow root.
* - `'external'`: the CSS will only be returned in the `css` field of the compilation result. Most Svelte bundler plugins will set this to `'external'` and use the CSS that is statically generated for better performance, as it will result in smaller JavaScript bundles and the output can be served as cacheable `.css` files.
* This is always `'injected'` when compiling with `customElement` mode.
*/
css?: 'injected' | 'external';
@ -111,12 +111,6 @@ export interface CompileOptions extends ModuleCompileOptions {
* @default undefined
*/
cssHash?: CssHashGetter;
/**
* Whether or not to include the CSS in the compiled server output, so that it's added to the `css` output of `render` from `svelte/server`.
*
* @default false
*/
cssRenderOnServer?: boolean;
/**
* If `true`, your HTML comments will be preserved during server-side rendering. By default, they are stripped out.
*

2
packages/svelte/src/compiler/validate-options.js
Unescape View File

@ -69,8 +69,6 @@ export const validate_component_options =
return `svelte-${hash(css)}`;
}),
cssRenderOnServer: boolean(false),
// TODO this is a sourcemap option, would be good to put under a sourcemap namespace
cssOutputFilename: string(undefined),

2
packages/svelte/src/internal/server/types.d.ts vendored
Unescape View File

@ -29,6 +29,4 @@ export interface RenderOutput {
html: string;
/** HTML that goes somewhere into the `<body>` */
body: string;
/** The CSS from components that were compiled with `cssRenderOnServer` */
css: string;
}

2
packages/svelte/tests/server-side-rendering/samples/css/_config.js
Unescape View File

@ -2,6 +2,6 @@ import { test } from '../../test';
export default test({
compileOptions: {
cssRenderOnServer: true
css: 'injected'
}
});

22
packages/svelte/types/index.d.ts vendored
Unescape View File

@ -760,8 +760,8 @@ declare module 'svelte/compiler' {
*/
immutable?: boolean;
/**
* - `'injected'`: styles will be included in the JavaScript class and injected at runtime for the components actually rendered.
* - `'external'`: the CSS will be returned in the `css` field of the compilation result. Most Svelte bundler plugins will set this to `'external'` and use the CSS that is statically generated for better performance, as it will result in smaller JavaScript bundles and the output can be served as cacheable `.css` files.
* - `'injected'`: styles will be included in the `head` when using `render(...)`, and injected into the document (if not already present) when the component mounts. For components compiled as custom elements, styles are injected to the shadow root.
* - `'external'`: the CSS will only be returned in the `css` field of the compilation result. Most Svelte bundler plugins will set this to `'external'` and use the CSS that is statically generated for better performance, as it will result in smaller JavaScript bundles and the output can be served as cacheable `.css` files.
* This is always `'injected'` when compiling with `customElement` mode.
*/
css?: 'injected' | 'external';
@ -772,12 +772,6 @@ declare module 'svelte/compiler' {
* @default undefined
*/
cssHash?: CssHashGetter;
/**
* Whether or not to include the CSS in the compiled server output, so that it's added to the `css` output of `render` from `svelte/server`.
*
* @default false
*/
cssRenderOnServer?: boolean;
/**
* If `true`, your HTML comments will be preserved during server-side rendering. By default, they are stripped out.
*
@ -2189,8 +2183,6 @@ declare module 'svelte/server' {
html: string;
/** HTML that goes somewhere into the `<body>` */
body: string;
/** The CSS from components that were compiled with `cssRenderOnServer` */
css: string;
}
export {};
@ -2576,8 +2568,8 @@ declare module 'svelte/types/compiler/interfaces' {
*/
immutable?: boolean;
/**
* - `'injected'`: styles will be included in the JavaScript class and injected at runtime for the components actually rendered.
* - `'external'`: the CSS will be returned in the `css` field of the compilation result. Most Svelte bundler plugins will set this to `'external'` and use the CSS that is statically generated for better performance, as it will result in smaller JavaScript bundles and the output can be served as cacheable `.css` files.
* - `'injected'`: styles will be included in the `head` when using `render(...)`, and injected into the document (if not already present) when the component mounts. For components compiled as custom elements, styles are injected to the shadow root.
* - `'external'`: the CSS will only be returned in the `css` field of the compilation result. Most Svelte bundler plugins will set this to `'external'` and use the CSS that is statically generated for better performance, as it will result in smaller JavaScript bundles and the output can be served as cacheable `.css` files.
* This is always `'injected'` when compiling with `customElement` mode.
*/
css?: 'injected' | 'external';
@ -2588,12 +2580,6 @@ declare module 'svelte/types/compiler/interfaces' {
* @default undefined
*/
cssHash?: CssHashGetter;
/**
* Whether or not to include the CSS in the compiled server output, so that it's added to the `css` output of `render` from `svelte/server`.
*
* @default false
*/
cssRenderOnServer?: boolean;
/**
* If `true`, your HTML comments will be preserved during server-side rendering. By default, they are stripped out.
*

2
sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md
Unescape View File

@ -155,7 +155,7 @@ const result = render(App, {
});
```
`render` also returns a `css` string property, which is populated with the CSS from all components which were compiled with the `cssRenderOnServer` option.
If the `css` compiler option was set to `'injected'`, `<style>` elements will be included in the `head`.
## `svelte/elements`

2
sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
Unescape View File

@ -219,7 +219,7 @@ css = css.replace(/:where\((.+?)\)/, '$1');
### CSS no longer returned from server render by default
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 the CSS string returned from `render`, you can enable it via the `cssRenderOnServer` option.
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 the CSS string returned from `render`, you can enable it by setting the `css` compiler option to `'injected'`.
### Error/warning codes have been renamed

Write Preview
Loading…
Cancel
Save