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');

0 commit comments

Comments
 (0)