Merge 9198d2696e into 05a3bce6bb

packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js

@@ -122,6 +122,13 @@ const any_selector = {
  */
 const seen = new Set();
 
+/**
+ * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.RenderTag | Compiler.AST.Component | Compiler.AST.SvelteComponent | Compiler.AST.SvelteSelf} node
+ */
+function is_inside_svelte_head(node) {
+	return node.metadata.path.some((ancestor) => ancestor.type === 'SvelteHead');
+}
+
 /**
  *
  * @param {Compiler.AST.CSS.StyleSheet} stylesheet
@@ -248,6 +255,8 @@ function apply_selector(
 	from = 0,
 	to = relative_selectors.length
 ) {
+	if (is_inside_svelte_head(element)) return false;
+
 	if (from >= to) return false;
 
 	const selector_index = direction === FORWARD ? from : to - 1;

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -207,6 +207,13 @@ const visitors = {
 	VariableDeclarator
 };
 
+/**
+ * @param {AST.RegularElement | AST.SvelteElement} node
+ */
+function is_inside_svelte_head(node) {
+	return node.metadata.path.some((ancestor) => ancestor.type === 'SvelteHead');
+}
+
 /**
  * @param {AST.Script | null} script
  * @param {ScopeRoot} root
@@ -881,6 +888,12 @@ export function analyze_component(root, source, options) {
 	}
 
 	for (const node of analysis.elements) {
+		// Elements rendered through <svelte:head> are not style-scopable.
+		// Prevent css hash injection (class="s-...") on tags like <meta>, <link>, <script>.
+		if (is_inside_svelte_head(node)) {
+			node.metadata.scoped = false;
+		}
+
 		if (node.metadata.scoped && is_custom_element_node(node)) {
 			mark_subtree_dynamic(node.metadata.path);
 		}

packages/svelte/tests/hydration/samples/head-css-no-class/_expected_head.html

@@ -0,0 +1 @@
+<meta name="author" content="Re:Designed"> <link rel="author" href="https://example.com"> <script type="application/ld+json"></script>

packages/svelte/tests/hydration/samples/head-css-no-class/main.svelte

@@ -0,0 +1,10 @@
+<svelte:head>
+	<meta name="author" content="Re:Designed" />
+	<link rel="author" href="https://example.com" />
+	<script type="application/ld+json"></script>
+</svelte:head>
+
+<div>dummy</div>
+
+<style>
+</style>

packages/svelte/tests/runtime-browser/samples/head-elements-not-scoped/_config.js

@@ -0,0 +1,21 @@
+import { test } from '../../assert';
+
+export default test({
+	test({ assert, window }) {
+		const head = window.document.head;
+
+		const meta = head.querySelector('meta[name="author"]');
+		const link = head.querySelector('link[rel="author"]');
+		const script = head.querySelector('script[type="application/ld+json"]');
+
+		assert.ok(meta);
+		assert.ok(link);
+		assert.ok(script);
+
+		if (!meta || !link || !script) return;
+		
+		assert.equal(meta.getAttribute('class'), null);
+		assert.equal(link.getAttribute('class'), null);
+		assert.equal(script.getAttribute('class'), null);
+	}
+});

packages/svelte/tests/runtime-browser/samples/head-elements-not-scoped/main.svelte

@@ -0,0 +1,19 @@
+<svelte:head>
+	<meta name="author" content={author} />
+	<link rel="author" href={author_url} />
+	<script type="application/ld+json"></script>
+</svelte:head>
+
+<div class="credits">
+	Site by
+	<a href={author_url} target="_blank" rel="noopener noreferrer author" title={`Authored by ${author}`}>
+		<nobr>{author}</nobr>
+	</a>
+</div>
+
+<script>
+	let { author = 'Anonymous', author_url = 'https://example.com' } = $props();
+</script>
+
+<style>
+</style>