msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* breaking: use <span> instead of <div> for style props

* breaking: use <span> instead of <div> for style props

* use custom element

* docs
pull/13532/head
Dominic Gannaway 11 months ago committed by GitHub
parent 7ac0d8e7cd
commit 0466e40680
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 74 additions and 63 deletions
Show Stats Download Patch File Download Diff File

5
.changeset/tasty-spies-sniff.md
Unescape View File

@ -0,0 +1,5 @@
---
'svelte': patch
---
breaking: use `<svelte-css-wrapper>` instead of `<div>` for style props

2
packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
Unescape View File

@ -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(

4
packages/svelte/src/internal/server/index.js
Unescape View File

@ -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}">`;
}
@ -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>`;
}

16
packages/svelte/tests/runtime-browser/samples/component-css-custom-properties-dynamic/_config.js
Unescape View File

@ -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';
@ -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>
`
);
}

8
packages/svelte/tests/runtime-browser/samples/component-css-custom-properties/_config.js
Unescape View File

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

16
packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties-dynamic/_config.js
Unescape View File

@ -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';
@ -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>
`
);
}

8
packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties/_config.js
Unescape View File

@ -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() {

8
packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties2/_config.js
Unescape View File

@ -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 }) {

32
packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties-dynamic/_config.js
Unescape View File

@ -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';
@ -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>
`
);
}

15
packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties/_config.js
Unescape View File

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

15
packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties2/_config.js
Unescape View File

@ -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() {

4
packages/svelte/tests/runtime-legacy/samples/css-vars-escape/_config.js
Unescape View File

@ -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
sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
Unescape View File

@ -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 -->

Write Preview
Loading…
Cancel
Save