From 0466e40680573ad6bdfab266c45499d94dd5dfa7 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Wed, 9 Oct 2024 13:56:06 +0100 Subject: [PATCH] breaking: use `` instead of `
` for style props (#13499) * breaking: use instead of
for style props * breaking: use instead of
for style props * use custom element * docs --- .changeset/tasty-spies-sniff.md | 5 +++ .../client/visitors/shared/component.js | 2 +- packages/svelte/src/internal/server/index.js | 4 +-- .../_config.js | 16 +++++----- .../_config.js | 8 ++--- .../_config.js | 16 +++++----- .../_config.js | 8 ++--- .../_config.js | 8 ++--- .../_config.js | 32 +++++++++---------- .../_config.js | 15 +++++---- .../_config.js | 15 +++++---- .../samples/css-vars-escape/_config.js | 4 +-- .../03-appendix/02-breaking-changes.md | 4 +++ 13 files changed, 74 insertions(+), 63 deletions(-) create mode 100644 .changeset/tasty-spies-sniff.md diff --git a/.changeset/tasty-spies-sniff.md b/.changeset/tasty-spies-sniff.md new file mode 100644 index 0000000000..6ea9288de9 --- /dev/null +++ b/.changeset/tasty-spies-sniff.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +breaking: use `` instead of `
` for style props diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js index 4463b5a1d0..ccf0e23dd2 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js @@ -362,7 +362,7 @@ export function build_component(node, component_name, context, anchor = context. context.state.template.push( context.state.metadata.namespace === 'svg' ? '' - : '
' + : '' ); statements.push( diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js index 5d0355b043..69f897123e 100644 --- a/packages/svelte/src/internal/server/index.js +++ b/packages/svelte/src/internal/server/index.js @@ -186,7 +186,7 @@ export function css_props(payload, is_html, props, component, dynamic = false) { const styles = style_object_to_string(props); if (is_html) { - payload.out += `
`; + payload.out += ``; } else { payload.out += ``; } @@ -198,7 +198,7 @@ export function css_props(payload, is_html, props, component, dynamic = false) { component(); if (is_html) { - payload.out += `
`; + payload.out += ``; } else { payload.out += ``; } diff --git a/packages/svelte/tests/runtime-browser/samples/component-css-custom-properties-dynamic/_config.js b/packages/svelte/tests/runtime-browser/samples/component-css-custom-properties-dynamic/_config.js index c636a3aca5..37388413d8 100644 --- a/packages/svelte/tests/runtime-browser/samples/component-css-custom-properties-dynamic/_config.js +++ b/packages/svelte/tests/runtime-browser/samples/component-css-custom-properties-dynamic/_config.js @@ -8,18 +8,18 @@ export default test({ trackColor2: 'blue' }, html: ` -
+

Slider

Track
-
-
+ +

Slider

Track
-
+ `, test({ component, assert, target }) { component.railColor1 = 'yellow'; @@ -28,18 +28,18 @@ export default test({ assert.htmlEqual( target.innerHTML, ` -
+

Slider

Track
-
-
+ +

Slider

Track
-
+ ` ); } diff --git a/packages/svelte/tests/runtime-browser/samples/component-css-custom-properties/_config.js b/packages/svelte/tests/runtime-browser/samples/component-css-custom-properties/_config.js index 25de6b18f9..4c7b8ab645 100644 --- a/packages/svelte/tests/runtime-browser/samples/component-css-custom-properties/_config.js +++ b/packages/svelte/tests/runtime-browser/samples/component-css-custom-properties/_config.js @@ -2,18 +2,18 @@ import { test, assert_ok } from '../../assert'; export default test({ html: ` -
+

Slider

Track
-
-
+ +

Slider

Track
-
+ `, test({ target, window, assert }) { const rail_color1 = target.querySelector('#slider-1 p'); diff --git a/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties-dynamic/_config.js b/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties-dynamic/_config.js index c636a3aca5..37388413d8 100644 --- a/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties-dynamic/_config.js +++ b/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties-dynamic/_config.js @@ -8,18 +8,18 @@ export default test({ trackColor2: 'blue' }, html: ` -
+

Slider

Track
-
-
+ +

Slider

Track
-
+ `, test({ component, assert, target }) { component.railColor1 = 'yellow'; @@ -28,18 +28,18 @@ export default test({ assert.htmlEqual( target.innerHTML, ` -
+

Slider

Track
-
-
+ +

Slider

Track
-
+ ` ); } diff --git a/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties/_config.js b/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties/_config.js index 4f82db0a05..e9040d8979 100644 --- a/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties/_config.js +++ b/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties/_config.js @@ -5,18 +5,18 @@ export default test({ componentName: /** @type {string | undefined} */ ('Slider1') }, html: ` -
+

Slider1

Track
-
-
+ +

Slider1

Track
-
+ `, test({ target, window, assert, component }) { function assert_slider_1() { diff --git a/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties2/_config.js b/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties2/_config.js index 09f725bb3d..303b1a377c 100644 --- a/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties2/_config.js +++ b/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties2/_config.js @@ -6,18 +6,18 @@ export default test({ }, html: `
-
+

Slider1

Track
-
-
+ +

Slider1

Track
-
+
`, test({ target, window, assert, component }) { diff --git a/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties-dynamic/_config.js b/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties-dynamic/_config.js index a3079df1d8..e885369dee 100644 --- a/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties-dynamic/_config.js +++ b/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties-dynamic/_config.js @@ -12,30 +12,30 @@ export default test({ nestTrackColor2: 'pink' }, html: ` -
+

Slider

Track
-
+

Slider

Track
-
-
-
+ + +

Slider

Track
-
+

Slider

Track
-
-
+ + `, test({ component, assert, target }) { component.railColor1 = 'yellow'; @@ -46,30 +46,30 @@ export default test({ assert.htmlEqual( target.innerHTML, ` -
+

Slider

Track
-
+

Slider

Track
-
-
-
+ + +

Slider

Track
-
+

Slider

Track
-
-
+ + ` ); } diff --git a/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties/_config.js b/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties/_config.js index 673a14a6a8..1d9037f9c3 100644 --- a/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties/_config.js +++ b/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties/_config.js @@ -3,25 +3,26 @@ import { assert_ok, test } from '../../assert'; export default test({ props: {}, html: ` -
+

Slider1

Track
-
+

Slider1

Track
-
-
+ + +

Slider2

Track
-
+

Slider2

Track
-
-
+ + `, test({ target, window, assert }) { const rail_color1 = target.querySelector('#component1 p'); diff --git a/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties2/_config.js b/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties2/_config.js index a7d8c1bc38..8fff5736d3 100644 --- a/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties2/_config.js +++ b/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties2/_config.js @@ -5,25 +5,26 @@ export default test({ componentName: /** @type {string | undefined} */ ('Slider1') }, html: ` -
+

Slider1

Track
-
+

Slider1

Track
-
-
+ + +

Slider1

Track
-
+

Slider1

Track
-
-
+ + `, test({ target, window, assert, component }) { function assert_slider_1() { diff --git a/packages/svelte/tests/runtime-legacy/samples/css-vars-escape/_config.js b/packages/svelte/tests/runtime-legacy/samples/css-vars-escape/_config.js index 71d240eb4d..49a7781f33 100644 --- a/packages/svelte/tests/runtime-legacy/samples/css-vars-escape/_config.js +++ b/packages/svelte/tests/runtime-legacy/samples/css-vars-escape/_config.js @@ -2,8 +2,8 @@ import { test } from '../../test'; export default test({ html: ` -
+
hi
-
+ ` }); diff --git a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md index ec1dfaeb34..1802966b83 100644 --- a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md +++ b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md @@ -429,4 +429,8 @@ Svelte 5 makes use of comments during server side rendering which are used for m Event attributes replace event directives: Instead of `on:click={handler}` you write `onclick={handler}`. For backwards compatibility the `on:event` syntax is still supported and behaves the same as in Svelte 4. Some of the `onevent` attributes however are delegated, which means you need to take care to not stop event propagation on those manually, as they then might never reach the listener for this event type at the root. +### `--style-props` uses a different element + +Svelte 5 uses an extra `` element instead of a `
` to wrap the component when using CSS custom properties. +