fix

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

@@ -6,16 +6,17 @@ import * as e from '../../../errors.js';
 import { is_keyframes_node } from '../../css.js';
 import { is_global, is_unscoped_pseudo_class } from './utils.js';
 
+/**
+ * @typedef {{
+ *   keyframes: string[];
+ *   rule: AST.CSS.Rule | null;
+ *   has_global: { value: boolean };
+ * }} CssState
+ */
+
 /**
  * We need to use an object for `has_global_unscoped` since state is spread
- * @typedef {Visitors<
- *   AST.CSS.Node,
- *   {
- *     keyframes: string[];
- *     rule: AST.CSS.Rule | null;
- *     has_unscoped_global: { value: boolean };
- *   }
- * >} CssVisitors
+ * @typedef {Visitors<AST.CSS.Node, CssState>} CssVisitors
  */
 
 /**
@@ -70,7 +71,7 @@ const css_visitors = {
 				context.state.keyframes.push(node.prelude);
 			} else if (node.prelude.startsWith('-global-')) {
 				// we don't check if the block.children.length because the keyframe is still added even if empty
-				context.state.has_unscoped_global.value ||= is_unscoped_global(context.path);
+				context.state.has_global.value ||= is_unscoped_global(context.path);
 			}
 		}
 
@@ -93,13 +94,6 @@ const css_visitors = {
 						}
 					}
 				}
-
-				if (idx === 0) {
-					context.state.has_unscoped_global.value ||=
-						!!context.state.rule &&
-						context.state.rule.block.children.length > 0 &&
-						is_unscoped_global(context.path, context.state.rule);
-				}
 			}
 		}
 
@@ -213,6 +207,13 @@ const css_visitors = {
 	Rule(node, context) {
 		node.metadata.parent_rule = context.state.rule;
 
+		// if this rule has a ComplexSelector whose RelativeSelector children
+		// are all `:global(...)`
+		context.state.has_global.value ||=
+			node.block.children.length > 0 &&
+			node.prelude.children.some((selector) => selector.children.every(is_global)) &&
+			is_unscoped_global(context.path);
+
 		node.metadata.is_global_block = node.prelude.children.some((selector) => {
 			let is_global_block = false;
 
@@ -228,11 +229,6 @@ const css_visitors = {
 				if (idx !== -1) {
 					is_global_block = true;
 
-					if (i === 0) {
-						context.state.has_unscoped_global.value ||=
-							node.block.children.length > 0 && is_unscoped_global(context.path);
-					}
-
 					for (let i = idx + 1; i < child.selectors.length; i++) {
 						walk(/** @type {AST.CSS.Node} */ (child.selectors[i]), null, {
 							ComplexSelector(node) {
@@ -332,12 +328,14 @@ const css_visitors = {
  * @param {ComponentAnalysis} analysis
  */
 export function analyze_css(stylesheet, analysis) {
+	/** @type {CssState} */
 	const css_state = {
 		keyframes: analysis.css.keyframes,
 		rule: null,
 		// we need to use an object since state is spread
-		has_unscoped_global: { value: false }
+		has_global: { value: false }
 	};
+
 	walk(stylesheet, css_state, css_visitors);
-	analysis.css.has_unscoped_global = css_state.has_unscoped_global.value;
+	analysis.css.has_global = css_state.has_global.value;
 }

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

@@ -457,7 +457,7 @@ export function analyze_component(root, source, options) {
 					})
 				: '',
 			keyframes: [],
-			has_unscoped_global: false
+			has_global: false
 		},
 		source,
 		undefined_exports: new Map(),

packages/svelte/src/compiler/phases/3-transform/css/index.js

@@ -60,7 +60,7 @@ export function render_stylesheet(source, analysis, options) {
 			source: options.filename,
 			file: options.cssOutputFilename || options.filename
 		}),
-		hasGlobal: analysis.css.has_unscoped_global
+		hasGlobal: analysis.css.has_global
 	};
 
 	merge_with_preprocessor_map(css, options, css.map.sources[0]);

packages/svelte/src/compiler/phases/types.d.ts

@@ -74,7 +74,7 @@ export interface ComponentAnalysis extends Analysis {
 		ast: AST.CSS.StyleSheet | null;
 		hash: string;
 		keyframes: string[];
-		has_unscoped_global: boolean;
+		has_global: boolean;
 	};
 	source: string;
 	undefined_exports: Map<string, Node>;