fix detection of unused partially global CSS selectors (#4332)

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Unreleased
 
 * Fix code generation error with adjacent inline and block comments ([#4312](https://github.com/sveltejs/svelte/issues/4312))
+* Fix detection of unused CSS selectors that begin with a `:global()` but contain a scoped portion ([#4314](https://github.com/sveltejs/svelte/issues/4314))
 
 ## 3.18.0
 

src/compiler/compile/css/Selector.ts

@@ -32,7 +32,7 @@ export default class Selector {
 		}
 
 		this.local_blocks = this.blocks.slice(0, i);
-		this.used = this.blocks[0].global;
+		this.used = this.local_blocks.length === 0;
 	}
 
 	apply(node: Element, stack: Element[]) {

test/css/samples/global-with-unused-descendant/_config.js

@@ -0,0 +1,24 @@
+export default {
+	warnings: [{
+		code: 'css-unused-selector',
+		end: {
+			character: 27,
+			column: 19,
+			line: 2
+		},
+		frame: `
+			1: <style>
+			2:   :global(.foo) .bar {
+			     ^
+			3:     color: red;
+			4:   }
+		`,
+		message: 'Unused CSS selector',
+		pos: 9,
+		start: {
+			character: 9,
+			column: 1,
+			line: 2
+		}
+	}]
+};

test/css/samples/global-with-unused-descendant/input.svelte

@@ -0,0 +1,5 @@
+<style>
+	:global(.foo) .bar {
+		color: red;
+	}
+</style>