Skip to content

Commit 0466e40

Browse files
trueadmtrueadm
authored
breaking: use <svelte-css-wrapper> instead of <div> for style props (#13499)
* breaking: use <span> instead of <div> for style props * breaking: use <span> instead of <div> for style props * use custom element * docs
1 parent 7ac0d8e commit 0466e40

File tree

13 files changed

+74
-63
lines changed

13 files changed

+74
-63
lines changed

‎.changeset/tasty-spies-sniff.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte': patch
3+
---
4+
5+
breaking: use `<svelte-css-wrapper>` instead of `<div>` for style props

‎packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -362,7 +362,7 @@ export function build_component(node, component_name, context, anchor = context.
362362
context.state.template.push(
363363
context.state.metadata.namespace === 'svg'
364364
? '<g><!></g>'
365-
: '<div style="display: contents"><!></div>'
365+
: '<svelte-css-wrapper style="display: contents"><!></svelte-css-wrapper>'
366366
);
367367

368368
statements.push(

‎packages/svelte/src/internal/server/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ export function css_props(payload, is_html, props, component, dynamic = false) {
186186
const styles = style_object_to_string(props);
187187

188188
if (is_html) {
189-
payload.out += `<div style="display: contents; ${styles}">`;
189+
payload.out += `<svelte-css-wrapper style="display: contents; ${styles}">`;
190190
} else {
191191
payload.out += `<g style="${styles}">`;
192192
}
@@ -198,7 +198,7 @@ export function css_props(payload, is_html, props, component, dynamic = false) {
198198
component();
199199

200200
if (is_html) {
201-
payload.out += `<!----></div>`;
201+
payload.out += `<!----></svelte-css-wrapper>`;
202202
} else {
203203
payload.out += `<!----></g>`;
204204
}

‎packages/svelte/tests/runtime-browser/samples/component-css-custom-properties-dynamic/_config.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,18 @@ export default test({
88
trackColor2: 'blue'
99
},
1010
html: `
11-
<div style="display: contents; --rail-color: black; --track-color: red;">
11+
<svelte-css-wrapper style="display: contents; --rail-color: black; --track-color: red;">
1212
<div id="slider-1">
1313
<p class="svelte-17ay6rc">Slider</p>
1414
<span class="svelte-17ay6rc">Track</span>
1515
</div>
16-
</div>
17-
<div style="display: contents; --rail-color: green; --track-color: blue;">
16+
</svelte-css-wrapper>
17+
<svelte-css-wrapper style="display: contents; --rail-color: green; --track-color: blue;">
1818
<div id="slider-2">
1919
<p class="svelte-17ay6rc">Slider</p>
2020
<span class="svelte-17ay6rc">Track</span>
2121
</div>
22-
</div>
22+
</svelte-css-wrapper>
2323
`,
2424
test({ component, assert, target }) {
2525
component.railColor1 = 'yellow';
@@ -28,18 +28,18 @@ export default test({
2828
assert.htmlEqual(
2929
target.innerHTML,
3030
`
31-
<div style="display: contents; --rail-color: yellow; --track-color: red;">
31+
<svelte-css-wrapper style="display: contents; --rail-color: yellow; --track-color: red;">
3232
<div id="slider-1">
3333
<p class="svelte-17ay6rc">Slider</p>
3434
<span class="svelte-17ay6rc">Track</span>
3535
</div>
36-
</div>
37-
<div style="display: contents; --rail-color: green; --track-color: orange;">
36+
</svelte-css-wrapper>
37+
<svelte-css-wrapper style="display: contents; --rail-color: green; --track-color: orange;">
3838
<div id="slider-2">
3939
<p class="svelte-17ay6rc">Slider</p>
4040
<span class="svelte-17ay6rc">Track</span>
4141
</div>
42-
</div>
42+
</svelte-css-wrapper>
4343
`
4444
);
4545
}

‎packages/svelte/tests/runtime-browser/samples/component-css-custom-properties/_config.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@ import { test, assert_ok } from '../../assert';
22

33
export default test({
44
html: `
5-
<div style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
5+
<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
66
<div id="slider-1">
77
<p class="svelte-17ay6rc">Slider</p>
88
<span class="svelte-17ay6rc">Track</span>
99
</div>
10-
</div>
11-
<div style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
10+
</svelte-css-wrapper>
11+
<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
1212
<div id="slider-2">
1313
<p class="svelte-17ay6rc">Slider</p>
1414
<span class="svelte-17ay6rc">Track</span>
1515
</div>
16-
</div>
16+
</svelte-css-wrapper>
1717
`,
1818
test({ target, window, assert }) {
1919
const rail_color1 = target.querySelector('#slider-1 p');

‎packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties-dynamic/_config.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,18 @@ export default test({
88
trackColor2: 'blue'
99
},
1010
html: `
11-
<div style="display: contents; --rail-color: black; --track-color: red;">
11+
<svelte-css-wrapper style="display: contents; --rail-color: black; --track-color: red;">
1212
<div id="slider-1">
1313
<p class="svelte-17ay6rc">Slider</p>
1414
<span class="svelte-17ay6rc">Track</span>
1515
</div>
16-
</div>
17-
<div style="display: contents; --rail-color: green; --track-color: blue;">
16+
</svelte-css-wrapper>
17+
<svelte-css-wrapper style="display: contents; --rail-color: green; --track-color: blue;">
1818
<div id="slider-2">
1919
<p class="svelte-17ay6rc">Slider</p>
2020
<span class="svelte-17ay6rc">Track</span>
2121
</div>
22-
</div>
22+
</svelte-css-wrapper>
2323
`,
2424
test({ component, assert, target }) {
2525
component.railColor1 = 'yellow';
@@ -28,18 +28,18 @@ export default test({
2828
assert.htmlEqual(
2929
target.innerHTML,
3030
`
31-
<div style="display: contents; --rail-color: yellow; --track-color: red;">
31+
<svelte-css-wrapper style="display: contents; --rail-color: yellow; --track-color: red;">
3232
<div id="slider-1">
3333
<p class="svelte-17ay6rc">Slider</p>
3434
<span class="svelte-17ay6rc">Track</span>
3535
</div>
36-
</div>
37-
<div style="display: contents; --rail-color: green; --track-color: orange;">
36+
</svelte-css-wrapper>
37+
<svelte-css-wrapper style="display: contents; --rail-color: green; --track-color: orange;">
3838
<div id="slider-2">
3939
<p class="svelte-17ay6rc">Slider</p>
4040
<span class="svelte-17ay6rc">Track</span>
4141
</div>
42-
</div>
42+
</svelte-css-wrapper>
4343
`
4444
);
4545
}

‎packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties/_config.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,18 @@ export default test({
55
componentName: /** @type {string | undefined} */ ('Slider1')
66
},
77
html: `
8-
<div style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
8+
<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
99
<div id="component1">
1010
<p class="svelte-17ay6rc">Slider1</p>
1111
<span class="svelte-17ay6rc">Track</span>
1212
</div>
13-
</div>
14-
<div style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
13+
</svelte-css-wrapper>
14+
<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
1515
<div id="component2">
1616
<p class="svelte-17ay6rc">Slider1</p>
1717
<span class="svelte-17ay6rc">Track</span>
1818
</div>
19-
</div>
19+
</svelte-css-wrapper>
2020
`,
2121
test({ target, window, assert, component }) {
2222
function assert_slider_1() {

‎packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties2/_config.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,18 @@ export default test({
66
},
77
html: `
88
<section>
9-
<div style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
9+
<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
1010
<div id="component1">
1111
<p class="svelte-17ay6rc">Slider1</p>
1212
<span class="svelte-17ay6rc">Track</span>
1313
</div>
14-
</div>
15-
<div style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
14+
</svelte-css-wrapper>
15+
<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
1616
<div id="component2">
1717
<p class="svelte-17ay6rc">Slider1</p>
1818
<span class="svelte-17ay6rc">Track</span>
1919
</div>
20-
</div>
20+
</svelte-css-wrapper>
2121
</section>
2222
`,
2323
test({ target, window, assert, component }) {

‎packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties-dynamic/_config.js

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,30 +12,30 @@ export default test({
1212
nestTrackColor2: 'pink'
1313
},
1414
html: `
15-
<div style="display: contents; --rail-color: black; --track-color: red;">
15+
<svelte-css-wrapper style="display: contents; --rail-color: black; --track-color: red;">
1616
<div id="slider-1">
1717
<p class="svelte-17ay6rc">Slider</p>
1818
<span class="svelte-17ay6rc">Track</span>
1919
</div>
20-
<div style="display: contents; --rail-color: white; --track-color: gray;">
20+
<svelte-css-wrapper style="display: contents; --rail-color: white; --track-color: gray;">
2121
<div id="nest-slider-1">
2222
<p class="svelte-17ay6rc">Slider</p>
2323
<span class="svelte-17ay6rc">Track</span>
2424
</div>
25-
</div>
26-
</div>
27-
<div style="display: contents; --rail-color: green; --track-color: blue;">
25+
</svelte-css-wrapper>
26+
</svelte-css-wrapper>
27+
<svelte-css-wrapper style="display: contents; --rail-color: green; --track-color: blue;">
2828
<div id="slider-2">
2929
<p class="svelte-17ay6rc">Slider</p>
3030
<span class="svelte-17ay6rc">Track</span>
3131
</div>
32-
<div style="display: contents; --rail-color: aqua; --track-color: pink;">
32+
<svelte-css-wrapper style="display: contents; --rail-color: aqua; --track-color: pink;">
3333
<div id="nest-slider-2">
3434
<p class="svelte-17ay6rc">Slider</p>
3535
<span class="svelte-17ay6rc">Track</span>
3636
</div>
37-
</div>
38-
</div>
37+
</svelte-css-wrapper>
38+
</svelte-css-wrapper>
3939
`,
4040
test({ component, assert, target }) {
4141
component.railColor1 = 'yellow';
@@ -46,30 +46,30 @@ export default test({
4646
assert.htmlEqual(
4747
target.innerHTML,
4848
`
49-
<div style="display: contents; --rail-color:yellow; --track-color:red;">
49+
<svelte-css-wrapper style="display: contents; --rail-color:yellow; --track-color:red;">
5050
<div id="slider-1">
5151
<p class="svelte-17ay6rc">Slider</p>
5252
<span class="svelte-17ay6rc">Track</span>
5353
</div>
54-
<div style="display: contents; --rail-color:lime; --track-color:gray;">
54+
<svelte-css-wrapper style="display: contents; --rail-color:lime; --track-color:gray;">
5555
<div id="nest-slider-1">
5656
<p class="svelte-17ay6rc">Slider</p>
5757
<span class="svelte-17ay6rc">Track</span>
5858
</div>
59-
</div>
60-
</div>
61-
<div style="display: contents; --rail-color:green; --track-color:orange;">
59+
</svelte-css-wrapper>
60+
</svelte-css-wrapper>
61+
<svelte-css-wrapper style="display: contents; --rail-color:green; --track-color:orange;">
6262
<div id="slider-2">
6363
<p class="svelte-17ay6rc">Slider</p>
6464
<span class="svelte-17ay6rc">Track</span>
6565
</div>
66-
<div style="display: contents; --rail-color:aqua; --track-color:gold;">
66+
<svelte-css-wrapper style="display: contents; --rail-color:aqua; --track-color:gold;">
6767
<div id="nest-slider-2">
6868
<p class="svelte-17ay6rc">Slider</p>
6969
<span class="svelte-17ay6rc">Track</span>
7070
</div>
71-
</div>
72-
</div>
71+
</svelte-css-wrapper>
72+
</svelte-css-wrapper>
7373
`
7474
);
7575
}

‎packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties/_config.js

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,26 @@ import { assert_ok, test } from '../../assert';
33
export default test({
44
props: {},
55
html: `
6-
<div style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
6+
<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
77
<div id="component1">
88
<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
99
</div>
10-
<div style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
10+
<svelte-css-wrapper style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
1111
<div id="nest-component1">
1212
<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span></div>
1313
</div>
14-
</div>
15-
<div style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
14+
</svelte-css-wrapper>
15+
</svelte-css-wrapper>
16+
<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
1617
<div id="component2">
1718
<p class="svelte-q538ga">Slider2</p><span class="svelte-q538ga">Track</span>
1819
</div>
19-
<div style="display: contents; --rail-color: rgb(0, 255, 255); --track-color: rgb(255, 255, 255);">
20+
<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 255, 255); --track-color: rgb(255, 255, 255);">
2021
<div id="nest-component2">
2122
<p class="svelte-q538ga">Slider2</p><span class="svelte-q538ga">Track</span>
2223
</div>
23-
</div>
24-
</div>
24+
</svelte-css-wrapper>
25+
</svelte-css-wrapper>
2526
`,
2627
test({ target, window, assert }) {
2728
const rail_color1 = target.querySelector('#component1 p');

‎packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties2/_config.js

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,26 @@ export default test({
55
componentName: /** @type {string | undefined} */ ('Slider1')
66
},
77
html: `
8-
<div style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
8+
<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
99
<div id="component1">
1010
<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
1111
</div>
12-
<div style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
12+
<svelte-css-wrapper style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
1313
<div id="nest-component1">
1414
<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span></div>
1515
</div>
16-
</div>
17-
<div style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
16+
</svelte-css-wrapper>
17+
</svelte-css-wrapper>
18+
<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
1819
<div id="component2">
1920
<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
2021
</div>
21-
<div style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
22+
<svelte-css-wrapper style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
2223
<div id="nest-component2">
2324
<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
2425
</div>
25-
</div>
26-
</div>
26+
</svelte-css-wrapper>
27+
</svelte-css-wrapper>
2728
`,
2829
test({ target, window, assert, component }) {
2930
function assert_slider_1() {

‎packages/svelte/tests/runtime-legacy/samples/css-vars-escape/_config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { test } from '../../test';
22

33
export default test({
44
html: `
5-
<div style="display: contents; --color: &quot; onload=&quot;alert('uhoh')&quot; data-nothing=&quot;not important;">
5+
<svelte-css-wrapper style="display: contents; --color: &quot; onload=&quot;alert('uhoh')&quot; data-nothing=&quot;not important;">
66
<div class="svelte-271qee">hi</div>
7-
</div>
7+
</svelte-css-wrapper>
88
`
99
});

‎sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -429,4 +429,8 @@ Svelte 5 makes use of comments during server side rendering which are used for m
429429

430430
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.
431431

432+
### `--style-props` uses a different element
433+
434+
Svelte 5 uses an extra `<svelte-css-wrapper>` element instead of a `<div>` to wrap the component when using CSS custom properties.
435+
432436
<!-- TODO in final docs, add link to corresponding section for more details -->

0 commit comments

Comments
 (0)