[fix] handle kebab case style directives (#7123)

fixes #7122

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

@@ -923,7 +923,7 @@ export default class ElementWrapper extends Wrapper {
 			const snippet = expression.manipulate(block);
 			let cached_snippet;
 			if (should_cache) {
-				cached_snippet = block.get_unique_name(`style_${name}`);
+				cached_snippet = block.get_unique_name(`style_${name.replace(/-/g, '_')}`);
 				block.add_variable(cached_snippet, snippet);
 			}
 

test/runtime/samples/inline-style-directive-string-variable-kebab-case/_config.js

@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<div style="background-image: url(https://raw.githubusercontent.com/sveltejs/branding/master/svelte-vertical.png); --css-variable: rgba(0, 0, 0, 1);"></div>
+	`,
+
+	test({ assert, target, window }) {
+		const div = target.querySelector('div');
+		const styles = window.getComputedStyle(div);
+
+		assert.equal(styles['background-image'], 'url(https://raw.githubusercontent.com/sveltejs/branding/master/svelte-vertical.png)');
+		assert.equal(styles.getPropertyValue('--css-variable'), 'rgba(0, 0, 0, 1)');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<div style="background-image: url(https://raw.githubusercontent.com/sveltejs/branding/master/svelte-vertical.png); --css-variable: rgba(0, 0, 0, 1);"></div>'
+		);
+	}
+};

test/runtime/samples/inline-style-directive-string-variable-kebab-case/main.svelte

@@ -0,0 +1,11 @@
+<script>
+	let url =
+		"https://raw.githubusercontent.com/sveltejs/branding/master/svelte-vertical.png";
+
+	let alpha = 1;
+</script>
+
+<div
+	style:background-image="url({url})"
+	style:--css-variable="rgba(0, 0, 0, {alpha})"
+/>