style

.changeset/stale-jeans-refuse.md

@@ -2,4 +2,4 @@
 'svelte': patch
 ---
 
-fix: allow stores in `transition`,`animation`,`use` directives
+fix: subscribe to stores in `transition`,`animation`,`use` directives

packages/svelte/src/compiler/phases/3-transform/server/transform-server.js

@@ -345,11 +345,11 @@ function get_assignment_value(node, { state, visit }) {
 		return operator === '='
 			? /** @type {import('estree').Expression} */ (visit(node.right))
 			: // turn something like x += 1 into x = x + 1
-			  b.binary(
+				b.binary(
 					/** @type {import('estree').BinaryOperator} */ (operator.slice(0, -1)),
 					serialize_get_binding(node.left, state),
 					/** @type {import('estree').Expression} */ (visit(node.right))
-			  );
+				);
 	} else {
 		return /** @type {import('estree').Expression} */ (visit(node.right));
 	}
@@ -801,7 +801,7 @@ function serialize_element_spread_attributes(
 						b.id('join')
 					),
 					b.literal(' ')
-			  )
+				)
 			: b.literal('');
 		args.push(
 			b.object([
@@ -965,7 +965,7 @@ function serialize_inline_component(node, component_name, context) {
 			: b.call(
 					'$.spread_props',
 					b.array(props_and_spreads.map((p) => (Array.isArray(p) ? b.object(p) : p)))
-			  );
+				);
 
 	/** @type {import('estree').Statement} */
 	let statement = b.stmt(
@@ -974,7 +974,7 @@ function serialize_inline_component(node, component_name, context) {
 				? b.call(
 						'$.validate_component',
 						typeof component_name === 'string' ? b.id(component_name) : component_name
-				  )
+					)
 				: component_name,
 			b.id('$$payload'),
 			props_expression
@@ -1066,7 +1066,7 @@ const javascript_visitors_legacy = {
 							'$.value_or_fallback',
 							prop,
 							/** @type {import('estree').Expression} */ (visit(declarator.init))
-					  )
+						)
 					: prop;
 
 				declarations.push(b.declarator(declarator.id, init));
@@ -1204,7 +1204,7 @@ const template_visitors = {
 							template: [],
 							init: []
 						}
-				  }
+					}
 				: { ...context, state };
 
 		const { hoisted, trimmed } = clean_nodes(
@@ -1532,9 +1532,9 @@ const template_visitors = {
 							b.let(
 								node.expression.type === 'ObjectExpression'
 									? // @ts-expect-error types don't match, but it can't contain spread elements and the structure is otherwise fine
-									  b.object_pattern(node.expression.properties)
+										b.object_pattern(node.expression.properties)
 									: // @ts-expect-error types don't match, but it can't contain spread elements and the structure is otherwise fine
-									  b.array_pattern(node.expression.elements),
+										b.array_pattern(node.expression.elements),
 								b.member(b.id('$$slotProps'), b.id(node.name))
 							),
 							b.return(b.object(bindings.map((binding) => b.init(binding.node.name, binding.node))))
@@ -1768,12 +1768,12 @@ function serialize_element_attributes(node, context) {
 								? b.call(
 										b.member(attribute.expression, b.id('includes')),
 										serialize_attribute_value(value_attribute.value, context)
-								  )
+									)
 								: b.binary(
 										'===',
 										attribute.expression,
 										serialize_attribute_value(value_attribute.value, context)
-								  ),
+									),
 							metadata: {
 								contains_call_expression: false,
 								dynamic: false

packages/svelte/src/compiler/phases/scope.js

@@ -294,7 +294,9 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 	const SvelteDirective = (node, context) => {
 		const name = node.name;
 
-		if (name[0] === '$') context.state.scope.reference(b.id(name), context.path);
+		if (name[0] === '$') {
+			context.state.scope.reference(b.id(name), context.path);
+		}
 	};
 
 	/**