Skip to content

breaking: use <svelte-css-wrapper> instead of <div> for style props #13499

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Oct 9, 2024
Merged

breaking: use <svelte-css-wrapper> instead of <div> for style props #13499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
00d0b3f
breaking: use <span> instead of <div> for style props
trueadm Oct 4, 2024
ba50fb8
breaking: use <span> instead of <div> for style props
trueadm Oct 4, 2024
cd3d14c
use custom element
trueadm Oct 4, 2024
b318f87
docs
trueadm Oct 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/tasty-spies-sniff.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'svelte': patch
---

breaking: use `<svelte-css-wrapper>` instead of `<div>` for style props
2 changes: 1 addition & 1 deletion packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -362,7 +362,7 @@ export function build_component(node, component_name, context, anchor = context.
context.state.template.push(
context.state.metadata.namespace === 'svg'
? '<g><!></g>'
: '<div style="display: contents"><!></div>'
: '<svelte-css-wrapper style="display: contents"><!></svelte-css-wrapper>'
);

statements.push(
Expand Down
4 changes: 2 additions & 2 deletions packages/svelte/src/internal/server/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 += `<div style="display: contents; ${styles}">`;
payload.out += `<svelte-css-wrapper style="display: contents; ${styles}">`;
} else {
payload.out += `<g style="${styles}">`;
}
Expand All @@ -198,7 +198,7 @@ export function css_props(payload, is_html, props, component, dynamic = false) {
component();

if (is_html) {
payload.out += `<!----></div>`;
payload.out += `<!----></svelte-css-wrapper>`;
} else {
payload.out += `<!----></g>`;
}
Expand Down
16 changes: 8 additions & 8 deletions ...s/svelte/tests/runtime-browser/samples/component-css-custom-properties-dynamic/_config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,18 @@ export default test({
trackColor2: 'blue'
},
html: `
<div style="display: contents; --rail-color: black; --track-color: red;">
<svelte-css-wrapper style="display: contents; --rail-color: black; --track-color: red;">
<div id="slider-1">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
<div style="display: contents; --rail-color: green; --track-color: blue;">
</svelte-css-wrapper>
<svelte-css-wrapper style="display: contents; --rail-color: green; --track-color: blue;">
<div id="slider-2">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</svelte-css-wrapper>
`,
test({ component, assert, target }) {
component.railColor1 = 'yellow';
Expand All @@ -28,18 +28,18 @@ export default test({
assert.htmlEqual(
target.innerHTML,
`
<div style="display: contents; --rail-color: yellow; --track-color: red;">
<svelte-css-wrapper style="display: contents; --rail-color: yellow; --track-color: red;">
<div id="slider-1">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
<div style="display: contents; --rail-color: green; --track-color: orange;">
</svelte-css-wrapper>
<svelte-css-wrapper style="display: contents; --rail-color: green; --track-color: orange;">
<div id="slider-2">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</svelte-css-wrapper>
`
);
}
Expand Down
8 changes: 4 additions & 4 deletions packages/svelte/tests/runtime-browser/samples/component-css-custom-properties/_config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@ import { test, assert_ok } from '../../assert';

export default test({
html: `
<div style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
<div id="slider-1">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
<div style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
</svelte-css-wrapper>
<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
<div id="slider-2">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</svelte-css-wrapper>
`,
test({ target, window, assert }) {
const rail_color1 = target.querySelector('#slider-1 p');
Expand Down
16 changes: 8 additions & 8 deletions ...e/tests/runtime-browser/samples/svelte-component-css-custom-properties-dynamic/_config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,18 @@ export default test({
trackColor2: 'blue'
},
html: `
<div style="display: contents; --rail-color: black; --track-color: red;">
<svelte-css-wrapper style="display: contents; --rail-color: black; --track-color: red;">
<div id="slider-1">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
<div style="display: contents; --rail-color: green; --track-color: blue;">
</svelte-css-wrapper>
<svelte-css-wrapper style="display: contents; --rail-color: green; --track-color: blue;">
<div id="slider-2">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</svelte-css-wrapper>
`,
test({ component, assert, target }) {
component.railColor1 = 'yellow';
Expand All @@ -28,18 +28,18 @@ export default test({
assert.htmlEqual(
target.innerHTML,
`
<div style="display: contents; --rail-color: yellow; --track-color: red;">
<svelte-css-wrapper style="display: contents; --rail-color: yellow; --track-color: red;">
<div id="slider-1">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
<div style="display: contents; --rail-color: green; --track-color: orange;">
</svelte-css-wrapper>
<svelte-css-wrapper style="display: contents; --rail-color: green; --track-color: orange;">
<div id="slider-2">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</svelte-css-wrapper>
`
);
}
Expand Down
8 changes: 4 additions & 4 deletions ...es/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties/_config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,18 @@ export default test({
componentName: /** @type {string | undefined} */ ('Slider1')
},
html: `
<div style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
<div id="component1">
<p class="svelte-17ay6rc">Slider1</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
<div style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
</svelte-css-wrapper>
<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
<div id="component2">
<p class="svelte-17ay6rc">Slider1</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</svelte-css-wrapper>
`,
test({ target, window, assert, component }) {
function assert_slider_1() {
Expand Down
8 changes: 4 additions & 4 deletions ...s/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties2/_config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,18 @@ export default test({
},
html: `
<section>
<div style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
<div id="component1">
<p class="svelte-17ay6rc">Slider1</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
<div style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
</svelte-css-wrapper>
<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
<div id="component2">
<p class="svelte-17ay6rc">Slider1</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</svelte-css-wrapper>
</section>
`,
test({ target, window, assert, component }) {
Expand Down
32 changes: 16 additions & 16 deletions ...svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties-dynamic/_config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,30 +12,30 @@ export default test({
nestTrackColor2: 'pink'
},
html: `
<div style="display: contents; --rail-color: black; --track-color: red;">
<svelte-css-wrapper style="display: contents; --rail-color: black; --track-color: red;">
<div id="slider-1">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
<div style="display: contents; --rail-color: white; --track-color: gray;">
<svelte-css-wrapper style="display: contents; --rail-color: white; --track-color: gray;">
<div id="nest-slider-1">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</div>
<div style="display: contents; --rail-color: green; --track-color: blue;">
</svelte-css-wrapper>
</svelte-css-wrapper>
<svelte-css-wrapper style="display: contents; --rail-color: green; --track-color: blue;">
<div id="slider-2">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
<div style="display: contents; --rail-color: aqua; --track-color: pink;">
<svelte-css-wrapper style="display: contents; --rail-color: aqua; --track-color: pink;">
<div id="nest-slider-2">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</div>
</svelte-css-wrapper>
</svelte-css-wrapper>
`,
test({ component, assert, target }) {
component.railColor1 = 'yellow';
Expand All @@ -46,30 +46,30 @@ export default test({
assert.htmlEqual(
target.innerHTML,
`
<div style="display: contents; --rail-color:yellow; --track-color:red;">
<svelte-css-wrapper style="display: contents; --rail-color:yellow; --track-color:red;">
<div id="slider-1">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
<div style="display: contents; --rail-color:lime; --track-color:gray;">
<svelte-css-wrapper style="display: contents; --rail-color:lime; --track-color:gray;">
<div id="nest-slider-1">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</div>
<div style="display: contents; --rail-color:green; --track-color:orange;">
</svelte-css-wrapper>
</svelte-css-wrapper>
<svelte-css-wrapper style="display: contents; --rail-color:green; --track-color:orange;">
<div id="slider-2">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
<div style="display: contents; --rail-color:aqua; --track-color:gold;">
<svelte-css-wrapper style="display: contents; --rail-color:aqua; --track-color:gold;">
<div id="nest-slider-2">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</div>
</svelte-css-wrapper>
</svelte-css-wrapper>
`
);
}
Expand Down
15 changes: 8 additions & 7 deletions packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties/_config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,26 @@ import { assert_ok, test } from '../../assert';
export default test({
props: {},
html: `
<div style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
<div id="component1">
<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
</div>
<div style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
<svelte-css-wrapper style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
<div id="nest-component1">
<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span></div>
</div>
</div>
<div style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
</svelte-css-wrapper>
</svelte-css-wrapper>
<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
<div id="component2">
<p class="svelte-q538ga">Slider2</p><span class="svelte-q538ga">Track</span>
</div>
<div style="display: contents; --rail-color: rgb(0, 255, 255); --track-color: rgb(255, 255, 255);">
<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 255, 255); --track-color: rgb(255, 255, 255);">
<div id="nest-component2">
<p class="svelte-q538ga">Slider2</p><span class="svelte-q538ga">Track</span>
</div>
</div>
</div>
</svelte-css-wrapper>
</svelte-css-wrapper>
`,
test({ target, window, assert }) {
const rail_color1 = target.querySelector('#component1 p');
Expand Down
15 changes: 8 additions & 7 deletions packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties2/_config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,26 @@ export default test({
componentName: /** @type {string | undefined} */ ('Slider1')
},
html: `
<div style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
<div id="component1">
<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
</div>
<div style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
<svelte-css-wrapper style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
<div id="nest-component1">
<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span></div>
</div>
</div>
<div style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
</svelte-css-wrapper>
</svelte-css-wrapper>
<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
<div id="component2">
<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
</div>
<div style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
<svelte-css-wrapper style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
<div id="nest-component2">
<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
</div>
</div>
</div>
</svelte-css-wrapper>
</svelte-css-wrapper>
`,
test({ target, window, assert, component }) {
function assert_slider_1() {
Expand Down
4 changes: 2 additions & 2 deletions packages/svelte/tests/runtime-legacy/samples/css-vars-escape/_config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import { test } from '../../test';

export default test({
html: `
<div style="display: contents; --color: &quot; onload=&quot;alert('uhoh')&quot; data-nothing=&quot;not important;">
<svelte-css-wrapper style="display: contents; --color: &quot; onload=&quot;alert('uhoh')&quot; data-nothing=&quot;not important;">
<div class="svelte-271qee">hi</div>
</div>
</svelte-css-wrapper>
`
});
4 changes: 4 additions & 0 deletions sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<svelte-css-wrapper>` element instead of a `<div>` to wrap the component when using CSS custom properties.

<!-- TODO in final docs, add link to corresponding section for more details -->