Merge ef3020413c into ce89035ecb

.changeset/calm-heads-glow.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: preserve global CSS in components without scopable elements

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

@@ -145,6 +145,19 @@ export function prune(stylesheet, elements) {
 		},
 		ComplexSelector(node) {
 			const selectors = get_relative_selectors(node);
+			const rule = /** @type {Compiler.AST.CSS.Rule} */ (node.metadata.rule);
+			const first = selectors[0]?.selectors[0];
+			const is_icss_export =
+				selectors.length === 1 &&
+				selectors[0].selectors.length === 1 &&
+				first?.type === 'PseudoClassSelector' &&
+				first.name === 'export' &&
+				first.args === null;
+
+			// Global and ICSS export rules do not depend on an element in this component
+			if (every_is_global(selectors, 0, selectors.length, rule) || is_icss_export) {
+				node.metadata.used = true;
+			}
 
 			for (const element of elements) {
 				seen.clear();
@@ -153,12 +166,7 @@ export function prune(stylesheet, elements) {
 					// Elements rendered through <svelte:head> are not style-scopable.
 					// Prevent css hash injection (class="s-...") on tags like <meta>, <link>, <script>.
 					!is_inside_svelte_head(element) &&
-					apply_selector(
+					apply_selector(selectors, rule, element, BACKWARD)
-						selectors,
-						/** @type {Compiler.AST.CSS.Rule} */ (node.metadata.rule),
-						element,
-						BACKWARD
-					)
 				) {
 					node.metadata.used = true;
 				}

packages/svelte/tests/css/samples/global-head-only/_config.js

@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: []
+});

packages/svelte/tests/css/samples/global-head-only/expected.css

@@ -0,0 +1,2 @@
+:export { foo: red; }
+	:is(td, th) { color: red; }

packages/svelte/tests/css/samples/global-head-only/input.svelte

@@ -0,0 +1,6 @@
+<svelte:head><meta name="x" content="y" /></svelte:head>
+
+<style>
+	:export { foo: red; }
+	:is(:global(td), :global(th)) { color: red; }
+</style>