Merge branch 'master' into pr/5402

CHANGELOG.md

@@ -2,7 +2,10 @@
 
 ## Unreleased
 
+* Fix specificity of certain styles involving a child selector ([#4795](https://github.com/sveltejs/svelte/issues/4795))
+* Fix transitions that are parameterised with stores ([#5244](https://github.com/sveltejs/svelte/issues/5244))
 * Fix scoping of styles involving child selector and `*` ([#5370](https://github.com/sveltejs/svelte/issues/5370))
+* Fix destructuring which reassigns stores ([#5388](https://github.com/sveltejs/svelte/issues/5388))
 
 ## 3.25.0
 

src/compiler/compile/Component.ts

@@ -947,12 +947,6 @@ export default class Component {
 							const variable = component.var_lookup.get(name);
 
 							if (variable.export_name && variable.writable) {
-								const insert = variable.subscribable
-									? get_insert(variable)
-									: null;
-
-								parent[key].splice(index + 1, 0, insert);
-
 								declarator.id = {
 									type: 'ObjectPattern',
 									properties: [{
@@ -973,7 +967,9 @@ export default class Component {
 								};
 
 								declarator.init = x`$$props`;
-							} else if (variable.subscribable) {
+							}
+
+							if (variable.subscribable && declarator.init) {
 								const insert = get_insert(variable);
 								parent[key].splice(index + 1, 0, ...insert);
 							}

src/compiler/compile/css/Selector.ts

@@ -65,9 +65,8 @@ export default class Selector {
 
 	transform(code: MagicString, attr: string, max_amount_class_specificity_increased: number) {
 		const amount_class_specificity_to_increase = max_amount_class_specificity_increased - this.blocks.filter(block => block.should_encapsulate).length;
-		attr = attr.repeat(amount_class_specificity_to_increase + 1);
 
-		function encapsulate_block(block: Block) {
+		function encapsulate_block(block: Block, attr: string) {
 			let i = block.selectors.length;
 
 			while (i--) {
@@ -89,15 +88,14 @@ export default class Selector {
 			}
 		}
 
-		this.blocks.forEach((block) => {
+		this.blocks.forEach((block, index) => {
 			if (block.global) {
 				const selector = block.selectors[0];
 				const first = selector.children[0];
 				const last = selector.children[selector.children.length - 1];
 				code.remove(selector.start, first.start).remove(last.end, selector.end);
 			}
-
-			if (block.should_encapsulate) encapsulate_block(block);
+			if (block.should_encapsulate) encapsulate_block(block, index === this.blocks.length - 1 ? attr.repeat(amount_class_specificity_to_increase + 1) : attr);
 		});
 	}
 

src/compiler/compile/nodes/Transition.ts

@@ -34,7 +34,7 @@ export default class Transition extends Node {
 		}
 
 		this.expression = info.expression
-			? new Expression(component, this, scope, info.expression, true)
+			? new Expression(component, this, scope, info.expression)
 			: null;
 	}
 }

src/compiler/compile/render_dom/Renderer.ts

@@ -166,12 +166,14 @@ export default class Renderer {
 		return member;
 	}
 
-	invalidate(name: string, value?) {
+	invalidate(name: string, value?, main_execution_context: boolean = false) {
 		const variable = this.component.var_lookup.get(name);
 		const member = this.context_lookup.get(name);
 
 		if (variable && (variable.subscribable && (variable.reassigned || variable.export_name))) {
-			return x`${`$$subscribe_${name}`}($$invalidate(${member.index}, ${value || name}))`;
+			return main_execution_context
+			  ? x`${`$$subscribe_${name}`}(${value || name})`
+			  : x`${`$$subscribe_${name}`}($$invalidate(${member.index}, ${value || name}))`;
 		}
 
 		if (name[0] === '$' && name[1] !== '$') {

src/compiler/compile/render_dom/invalidate.ts

@@ -31,10 +31,9 @@ export function invalidate(renderer: Renderer, scope: Scope, node: Node, names:
 
 	function get_invalidated(variable: Var, node?: Expression) {
 		if (main_execution_context && !variable.subscribable && variable.name[0] !== '$') {
-			return node || x`${variable.name}`;
+			return node;
 		}
-
-		return renderer.invalidate(variable.name);
+		return renderer.invalidate(variable.name, undefined, main_execution_context);
 	}
 
 	if (head) {
@@ -44,12 +43,15 @@ export function invalidate(renderer: Renderer, scope: Scope, node: Node, names:
 			return get_invalidated(head, node);
 		} else {
 			const is_store_value = head.name[0] === '$' && head.name[1] !== '$';
-			const extra_args = tail.map(variable => get_invalidated(variable));
+			const extra_args = tail.map(variable => get_invalidated(variable)).filter(Boolean);
 
 			const pass_value = (
-				extra_args.length > 0 ||
-				(node.type === 'AssignmentExpression' && node.left.type !== 'Identifier') ||
-				(node.type === 'UpdateExpression' && (!node.prefix || node.argument.type !== 'Identifier'))
+				!main_execution_context && 
+				(
+					extra_args.length > 0 ||
+					(node.type === 'AssignmentExpression' && node.left.type !== 'Identifier') ||
+					(node.type === 'UpdateExpression' && (!node.prefix || node.argument.type !== 'Identifier'))
+				)
 			);
 
 			if (pass_value) {
@@ -63,7 +65,9 @@ export function invalidate(renderer: Renderer, scope: Scope, node: Node, names:
 				? x`@set_store_value(${head.name.slice(1)}, ${node}, ${extra_args})`
 				: !main_execution_context
 					? x`$$invalidate(${renderer.context_lookup.get(head.name).index}, ${node}, ${extra_args})`
-					: node;
+					: extra_args.length
+						? [node, ...extra_args]
+						: node;
 
 			if (head.subscribable && head.reassigned) {
 				const subscribe = `$$subscribe_${head.name}`;

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -868,6 +868,10 @@ export default class ElementWrapper extends Wrapper {
 				block.chunks.destroy.push(b`if (detaching && ${outro_name}) ${outro_name}.end();`);
 			}
 		}
+
+		if ((intro && intro.expression && intro.expression.dependencies.size) || (outro && outro.expression && outro.expression.dependencies.size)) {
+			block.maintain_context = true;
+		}
 	}
 
 	add_animation(block: Block) {

test/css/samples/child-combinator/expected.css

@@ -0,0 +1 @@
+main.svelte-xyz button.svelte-xyz.svelte-xyz{background-color:red}main.svelte-xyz div.svelte-xyz>button.svelte-xyz{background-color:blue}

test/css/samples/child-combinator/input.svelte

@@ -0,0 +1,14 @@
+<style>
+  main button {
+    background-color: red;
+  }
+
+  main div > button {
+    background-color: blue;
+  }
+</style>
+<main>
+  <div>
+    <button type="submit">Blue</button>
+  </div>
+</main>

test/runtime/samples/reactive-assignment-in-complex-declaration-with-store/_config.js

@@ -0,0 +1,3 @@
+export default {
+	html: `<h1>2 2 xxx 5 6</h1>`
+};

test/runtime/samples/reactive-assignment-in-complex-declaration-with-store/main.svelte

@@ -0,0 +1,16 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	let eid = writable(1);
+	let foo;
+	let u;
+	let v;
+	let w;
+	[u, v, w] = [
+		{id: eid = writable(foo = 2), name: 'xxx'},
+		5,
+		writable(6)
+	];
+</script>
+
+<h1>{foo} {$eid} {u.name} {v} {$w}</h1>

test/runtime/samples/reactive-assignment-in-declaration/main.svelte

@@ -1,6 +1,9 @@
 <script>
 	let foo;
 	let bar = (foo = 1);
+	function a() {
+		bar = (foo = 1);
+	}
 </script>
 
 <h1>{foo} {bar}</h1>

test/runtime/samples/reactive-assignment-in-for-loop-head/main.svelte

@@ -1,9 +1,14 @@
 <script>
-  let foo1;
-  let foo2;
-  for (let bar = (foo1 = 0); bar < 5; bar += 1) {
-    foo2 = foo1;
-  }
+	let foo1;
+	let foo2;
+	for (let bar = (foo1 = 0); bar < 5; bar += 1) {
+		foo2 = foo1;
+	}
+	function a() {
+		for (let bar = (foo1 = 0); bar < 5; bar += 1) {
+			foo2 = foo1;
+		}
+	}
 </script>
 
 <h1>{foo1} {foo2}</h1>

test/runtime/samples/store-resubscribe-c/_config.js

@@ -0,0 +1,3 @@
+export default {
+	html: `31 42`
+};

test/runtime/samples/store-resubscribe-c/main.svelte

@@ -0,0 +1,16 @@
+<script>
+	import { writable } from 'svelte/store';
+	const context = {
+		store1: writable(31),
+		store2: writable(42)
+	};
+	let store1;
+	let store2;
+	({
+		store1,
+		store2
+	} = context);
+</script>
+
+{$store1}
+{$store2}

test/runtime/samples/transition-js-args-dynamic/_config.js

@@ -0,0 +1,15 @@
+export default {
+	test({ assert, component, target, window, raf }) {
+		component.visible = true;
+
+		const div = target.querySelector('div');
+
+		assert.equal(div.value, 0);
+
+		raf.tick(200);
+
+		div.value = 'test';
+		component.visible = false;
+		assert.equal(div.value, 'test');
+	}
+};

test/runtime/samples/transition-js-args-dynamic/main.svelte

@@ -0,0 +1,17 @@
+<script>
+	export let visible = false;
+	export let value = 0;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: () => {
+				node.value = value;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:foo={{value}}></div>
+{/if}