finalize

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

@@ -57,11 +57,12 @@ const analysis_visitors = {
 			node.selectors.length >= 1 &&
 			node.selectors[0].type === 'PseudoClassSelector' &&
 			node.selectors[0].name === 'global' &&
-			node.selectors[0].args !== null && // we want :global(...), not :global
-			node.selectors.every(
-				(selector) =>
-					selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector'
-			);
+			// we want :global(...) and :global or :global.x, but not div:global
+			(node.selectors[0].args === null ||
+				node.selectors.every(
+					(selector) =>
+						selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector'
+				));
 
 		if (node.selectors.length === 1) {
 			const first = node.selectors[0];
@@ -95,6 +96,12 @@ const analysis_visitors = {
 					(s) => s.type === 'PseudoClassSelector' && s.name === 'global' && s.args === null
 				);
 
+				if (is_global_block) {
+					// Do this here, not after setting it to true:
+					// All selectors after :global are unscoped, but in e.g. div:global, div is still scoped
+					child.metadata.is_global_like = true;
+				}
+
 				if (idx !== -1) {
 					is_global_block = true;
 					for (let i = idx + 1; i < child.selectors.length; i++) {
@@ -105,11 +112,6 @@ const analysis_visitors = {
 						});
 					}
 				}
-
-				if (is_global_block) {
-					// TODO this needs to be more granular, the stuff before the :global selector should be scoped
-					child.metadata.is_global_like = true;
-				}
 			}
 
 			return is_global_block;

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

@@ -295,12 +295,19 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 					return false;
 				}
 
-				if (name === 'global' && relative_selector.selectors.length === 1) {
-					const args = /** @type {Compiler.Css.SelectorList} */ (selector.args);
+				if (
+					name === 'global' &&
+					selector.args !== null &&
+					relative_selector.selectors.length === 1
+				) {
+					const args = selector.args;
 					const complex_selector = args.children[0];
 					return apply_selector(complex_selector.children, rule, element, stylesheet);
 				}
 
+				// We came across a :global, everything beyond it is global and therefore a potential match
+				if (name === 'global' && selector.args === null) return true;
+
 				if ((name === 'is' || name === 'where') && selector.args) {
 					let matched = false;
 

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

@@ -92,7 +92,7 @@ const visitors = {
 
 		next();
 	},
-	Declaration(node, { state, next }) {
+	Declaration(node, { state }) {
 		const property = node.property && remove_css_prefix(node.property.toLowerCase());
 		if (property === 'animation' || property === 'animation-name') {
 			let index = node.start + node.property.length + 1;
@@ -235,17 +235,6 @@ const visitors = {
 				continue;
 			}
 
-			// TODO make more efficient?
-			for (const selector of relative_selector.selectors) {
-				if (
-					selector.type === 'PseudoClassSelector' &&
-					selector.name === 'global' &&
-					selector.args === null
-				) {
-					remove_global_pseudo_class(selector);
-				}
-			}
-
 			if (relative_selector.metadata.scoped) {
 				if (relative_selector.selectors.length === 1) {
 					// skip standalone :is/:where/& selectors
@@ -258,7 +247,7 @@ const visitors = {
 					}
 				}
 
-				// for any :global() at the middle of compound selector
+				// for any :global() or :global at the middle of compound selector
 				for (const selector of relative_selector.selectors) {
 					if (selector.type === 'PseudoClassSelector' && selector.name === 'global') {
 						remove_global_pseudo_class(selector);

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

@@ -56,7 +56,7 @@ export namespace Css {
 		combinator: null | Combinator;
 		selectors: SimpleSelector[];
 		metadata: {
-			/** :global(..) */
+			/** `:global(...)` or `:global` or `:global.x` (but not `.x:global`) */
 			is_global: boolean;
 			/** `:root`, `:host`, `::view-transition`, or selectors after a `:global` */
 			is_global_like: boolean;

packages/svelte/tests/css/samples/global-block/_config.js

@@ -7,14 +7,14 @@ export default test({
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".unused :global"',
 			start: {
-				line: 31,
+				line: 41,
 				column: 1,
-				character: 400
+				character: 647
 			},
 			end: {
-				line: 31,
+				line: 41,
 				column: 16,
-				character: 415
+				character: 662
 			}
 		}
 	]