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]; const body = [...state.hoisted, ...module.body];
if (options.cssRenderOnServer) { if (options.css === 'injected') {
body.push( body.push(
b.const( b.const(
'$$css', '$$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; immutable?: boolean;
/** /**
* - `'injected'`: styles will be included in the JavaScript class and injected at runtime for the components actually rendered. * - `'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 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. * - `'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. * This is always `'injected'` when compiling with `customElement` mode.
*/ */
css?: 'injected' | 'external'; css?: 'injected' | 'external';
@ -111,12 +111,6 @@ export interface CompileOptions extends ModuleCompileOptions {
* @default undefined * @default undefined
*/ */
cssHash?: CssHashGetter; 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. * 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)}`; return `svelte-${hash(css)}`;
}), }),
cssRenderOnServer: boolean(false),
// TODO this is a sourcemap option, would be good to put under a sourcemap namespace // TODO this is a sourcemap option, would be good to put under a sourcemap namespace
cssOutputFilename: string(undefined), 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: string;
/** HTML that goes somewhere into the `<body>` */ /** HTML that goes somewhere into the `<body>` */
body: string; 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({ export default test({
compileOptions: { 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; immutable?: boolean;
/** /**
* - `'injected'`: styles will be included in the JavaScript class and injected at runtime for the components actually rendered. * - `'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 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. * - `'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. * This is always `'injected'` when compiling with `customElement` mode.
*/ */
css?: 'injected' | 'external'; css?: 'injected' | 'external';
@ -772,12 +772,6 @@ declare module 'svelte/compiler' {
* @default undefined * @default undefined
*/ */
cssHash?: CssHashGetter; 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. * 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: string;
/** HTML that goes somewhere into the `<body>` */ /** HTML that goes somewhere into the `<body>` */
body: string; body: string;
/** The CSS from components that were compiled with `cssRenderOnServer` */
css: string;
} }
export {}; export {};
@ -2576,8 +2568,8 @@ declare module 'svelte/types/compiler/interfaces' {
*/ */
immutable?: boolean; immutable?: boolean;
/** /**
* - `'injected'`: styles will be included in the JavaScript class and injected at runtime for the components actually rendered. * - `'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 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. * - `'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. * This is always `'injected'` when compiling with `customElement` mode.
*/ */
css?: 'injected' | 'external'; css?: 'injected' | 'external';
@ -2588,12 +2580,6 @@ declare module 'svelte/types/compiler/interfaces' {
* @default undefined * @default undefined
*/ */
cssHash?: CssHashGetter; 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. * 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` ## `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 ### 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 ### Error/warning codes have been renamed

Write Preview
Loading…
Cancel
Save