From b20b2ee85eedc03670326d687fcf6afda07f01bf Mon Sep 17 00:00:00 2001
From: JY Wey <34165386+JaiWey@users.noreply.github.com>
Date: Tue, 25 Aug 2026 08:16:19 +1200
Subject: [PATCH] fix: avoid css tree-shaking for exported Snippet (#18540)

fix #16404

Currently one file can have multiple exports but only one `cssScopeTo` variable, which is hard coded to `default` inside vite-plugin-svelte.

Therefore set hasGlobal to `true` in case we export a snippet to not have this scoping enabled in v-p-s

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
---
 .changeset/three-peas-smoke.md                      |  5 +++++
 .../svelte/src/compiler/phases/2-analyze/index.js   |  5 +++++
 .../tests/css/samples/snippet-exported/_config.js   |  5 +++++
 .../tests/css/samples/snippet-exported/expected.css |  4 ++++
 .../tests/css/samples/snippet-exported/input.svelte | 13 +++++++++++++
 5 files changed, 32 insertions(+)
 create mode 100644 .changeset/three-peas-smoke.md
 create mode 100644 packages/svelte/tests/css/samples/snippet-exported/_config.js
 create mode 100644 packages/svelte/tests/css/samples/snippet-exported/expected.css
 create mode 100644 packages/svelte/tests/css/samples/snippet-exported/input.svelte

diff --git a/.changeset/three-peas-smoke.md b/.changeset/three-peas-smoke.md
new file mode 100644
index 0000000000..9a151c0046
--- /dev/null
+++ b/.changeset/three-peas-smoke.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: avoid css tree-shaking for exported Snippet
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index f6fb14a870..1cdd218ea8 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -832,6 +832,11 @@ export function analyze_component(root, source, options) {
 					} else {
 						e.export_undefined(specifier, name);
 					}
+				} else if (binding.initial?.type === 'SnippetBlock') {
+					// If a snippet is exported, a consumer could only import this named export and not the default export (the component).
+					// In this case we need to set hasGlobal of our output to true so that e.g. vite-plugin-svelte does not tell Vite to
+					// tree-shake the CSS if the default export is not used.
+					analysis.css.has_global = true;
 				}
 			}
 		}
diff --git a/packages/svelte/tests/css/samples/snippet-exported/_config.js b/packages/svelte/tests/css/samples/snippet-exported/_config.js
new file mode 100644
index 0000000000..30953854ad
--- /dev/null
+++ b/packages/svelte/tests/css/samples/snippet-exported/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	hasGlobal: true
+});
diff --git a/packages/svelte/tests/css/samples/snippet-exported/expected.css b/packages/svelte/tests/css/samples/snippet-exported/expected.css
new file mode 100644
index 0000000000..65d0c35e7c
--- /dev/null
+++ b/packages/svelte/tests/css/samples/snippet-exported/expected.css
@@ -0,0 +1,4 @@
+
+	.inner.svelte-xyz {
+		color: red;
+	}
diff --git a/packages/svelte/tests/css/samples/snippet-exported/input.svelte b/packages/svelte/tests/css/samples/snippet-exported/input.svelte
new file mode 100644
index 0000000000..3aef144e26
--- /dev/null
+++ b/packages/svelte/tests/css/samples/snippet-exported/input.svelte
@@ -0,0 +1,13 @@
+<script module>
+	export { outer };
+</script>
+
+{#snippet outer()}
+	<p class="inner"></p>
+{/snippet}
+
+<style>
+	.inner {
+		color: red;
+	}
+</style>