From 236e6a27c8518224d0a9359a8f399204d50de2c6 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 9 Jul 2024 15:10:22 -0400 Subject: [PATCH] cssRenderOnServer -> css: 'injected' --- .../3-transform/server/transform-server.js | 2 +- packages/svelte/src/compiler/types/index.d.ts | 10 ++------- .../svelte/src/compiler/validate-options.js | 2 -- .../svelte/src/internal/server/types.d.ts | 2 -- .../samples/css/_config.js | 2 +- packages/svelte/types/index.d.ts | 22 ++++--------------- .../routes/docs/content/01-api/05-imports.md | 2 +- .../03-appendix/02-breaking-changes.md | 2 +- 8 files changed, 10 insertions(+), 34 deletions(-) diff --git a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js index 50957339d7..0106223a7f 100644 --- a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js +++ b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js @@ -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', diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts index acd09e28b1..1b27146982 100644 --- a/packages/svelte/src/compiler/types/index.d.ts +++ b/packages/svelte/src/compiler/types/index.d.ts @@ -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. * diff --git a/packages/svelte/src/compiler/validate-options.js b/packages/svelte/src/compiler/validate-options.js index e5bf6d189c..bd997a36ab 100644 --- a/packages/svelte/src/compiler/validate-options.js +++ b/packages/svelte/src/compiler/validate-options.js @@ -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), diff --git a/packages/svelte/src/internal/server/types.d.ts b/packages/svelte/src/internal/server/types.d.ts index 891c54e6d0..af7d8e4a5b 100644 --- a/packages/svelte/src/internal/server/types.d.ts +++ b/packages/svelte/src/internal/server/types.d.ts @@ -29,6 +29,4 @@ export interface RenderOutput { html: string; /** HTML that goes somewhere into the `` */ body: string; - /** The CSS from components that were compiled with `cssRenderOnServer` */ - css: string; } diff --git a/packages/svelte/tests/server-side-rendering/samples/css/_config.js b/packages/svelte/tests/server-side-rendering/samples/css/_config.js index 619f8298a8..194b2443f9 100644 --- a/packages/svelte/tests/server-side-rendering/samples/css/_config.js +++ b/packages/svelte/tests/server-side-rendering/samples/css/_config.js @@ -2,6 +2,6 @@ import { test } from '../../test'; export default test({ compileOptions: { - cssRenderOnServer: true + css: 'injected' } }); diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index 3ff9df9ee5..969d4f8244 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -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: 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. * diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md index a3c26a5cc3..af4118eaab 100644 --- a/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md +++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md @@ -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'`, `