sveltejs
diff --git a/‎.changeset/nervous-hotels-clean.md
Copy file name to clipboard
+5Lines changed: 5 additions & 0 deletions b/‎.changeset/nervous-hotels-clean.md
Copy file name to clipboard
+5Lines changed: 5 additions & 0 deletions
diff --git a/‎packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
Copy file name to clipboardExpand all lines: packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+8-1Lines changed: 8 additions & 1 deletion b/‎packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
Copy file name to clipboardExpand all lines: packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+8-1Lines changed: 8 additions & 1 deletion
diff --git a/‎packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/Component.svelte
Copy file name to clipboard
+7Lines changed: 7 additions & 0 deletions b/‎packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/Component.svelte
Copy file name to clipboard
+7Lines changed: 7 additions & 0 deletions
diff --git a/‎packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/_config.js
Copy file name to clipboard
+42Lines changed: 42 additions & 0 deletions b/‎packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/_config.js
Copy file name to clipboard
+42Lines changed: 42 additions & 0 deletions
diff --git a/‎packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/main.svelte
Copy file name to clipboard
+7Lines changed: 7 additions & 0 deletions b/‎packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/main.svelte
Copy file name to clipboard
+7Lines changed: 7 additions & 0 deletions
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: attach `__svelte_meta` correctly to elements following a CSS wrapper
@@ -1,7 +1,7 @@
 /** @import { BlockStatement, Expression, ExpressionStatement, Identifier, MemberExpression, Pattern, Property, SequenceExpression, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../../types.js' */
-import { dev, is_ignored } from '../../../../../state.js';
+import { dev, is_ignored, locator } from '../../../../../state.js';
 import { get_attribute_chunks, object } from '../../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import { build_bind_this, memoize_expression, validate_binding } from '../shared/utils.js';
@@ -440,6 +440,13 @@ export function build_component(node, component_name, context, anchor = context.
 	}
 
 	if (Object.keys(custom_css_props).length > 0) {
+		if (dev) {
+			const loc = locator(node.start);
+			if (loc) {
+				context.state.locations.push([loc.line, loc.column]);
+			}
+		}
+
 		context.state.template.push(
 			context.state.metadata.namespace === 'svg'
 				? '<g><!></g>'
 
@@ -0,0 +1,7 @@
+<h2>hello from component</h2>
+
+<style>
+	h2 {
+		color: var(--color);
+	}
+</style>
@@ -0,0 +1,42 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	html: `
+		<h1>hello</h1>
+		<svelte-css-wrapper style="display: contents; --color: red;">
+			<h2 class="svelte-13kae5a">hello from component</h2>
+		</svelte-css-wrapper>
+		<p>goodbye</p>
+	`,
+
+	async test({ target, assert }) {
+		const h1 = target.querySelector('h1');
+		const h2 = target.querySelector('h2');
+		const p = target.querySelector('p');
+
+		// @ts-expect-error
+		assert.deepEqual(h1.__svelte_meta.loc, {
+			file: 'main.svelte',
+			line: 5,
+			column: 0
+		});
+
+		// @ts-expect-error
+		assert.deepEqual(h2.__svelte_meta.loc, {
+			file: 'Component.svelte',
+			line: 1,
+			column: 0
+		});
+
+		// @ts-expect-error
+		assert.deepEqual(p.__svelte_meta.loc, {
+			file: 'main.svelte',
+			line: 7,
+			column: 0
+		});
+	}
+});
@@ -0,0 +1,7 @@
+<script>
+	import Component from './Component.svelte';
+</script>
+
+<h1>hello</h1>
+<Component --color="red" />
+<p>goodbye</p>