Style scoping breaks spread with "class" attribute

[trbrc]

There seems to be a bug related to the combination of spreads with "class" attributes, and scoped selectors in <style> tags.

Example:

<script>
	const spread = {
		class: 'cursive'
	};
</script>

<style>
	:global(.cursive) {
		font-family: cursive;
	}
	.this-class-breaks-the-spread {}
</style>

<p class={spread.class}>This should be cursive</p>

<p {...spread}>This should be cursive too</p>

https://svelte.dev/repl/a27af26f3c184b799a02eab5732e3c59?version=3.2.1

It seems that various non-:global selectors produce the behavior, but not all. Try changing the selector from .this-class-breaks-the-spread to p and it breaks too.

Possibly related to #2707

[EmilTholin]

Hi @trbrc! Thank you so much for reporting this!

When you add the this-class-breaks-the-spread class to your component, the p1_levels array goes from this:

var p1_levels = [ctx.spread];

To this:

var p1_levels = [ctx.spread, { class: "svelte-1yjig6f" }];

Right after that, the p1_data object is built up by looping over the aforementioned array and assigning each property in every element to the resulting object.

var p1_data = {};
for (var i = 0; i < p1_levels.length; i += 1) {
  p1_data = assign(p1_data, p1_levels[i]);
}

And since both ctx.spread and { class: "svelte-1yjig6f" } has a class property, the second one overrides the first one, and the cursive class doesn't end up in the resulting class.

[Conduitry]

I've pushed a change here that fixes this in DOM mode by adding a class:svelte-xyz={true} directive to elements that need to be scoped that have a spread but no explicit class= attribute. This doesn't work in SSR mode though, and I'm not sure whether this is indicating a limitation of this solution or another bug elsewhere.

[Conduitry]

I've opened #3790 + #3792 for a more proper and complete solution to this.