fix remove of lone :host selectors (#5984)

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## Unreleased
+
+* Fix removal of lone `:host` selectors ([#5982](https://github.com/sveltejs/svelte/issues/5982))
+
 ## 3.32.2
 
 * Fix unnecessary additional invalidation with `<Component bind:prop={obj.foo}/>` ([#3075](https://github.com/sveltejs/svelte/issues/3075), [#4447](https://github.com/sveltejs/svelte/issues/4447), [#5555](https://github.com/sveltejs/svelte/issues/5555))

src/compiler/compile/css/Selector.ts

@@ -44,7 +44,10 @@ export default class Selector {
 		}
 
 		this.local_blocks = this.blocks.slice(0, i);
-		this.used = this.local_blocks.length === 0;
+
+		const host_only = this.blocks.length === 1 && this.blocks[0].host;
+
+		this.used = this.local_blocks.length === 0 || host_only;
 	}
 
 	apply(node: Element) {

test/css/samples/host/expected.css

@@ -1 +1 @@
-:host h1.svelte-xyz{color:red}:host>h1.svelte-xyz{color:red}:host>.svelte-xyz{color:red}:host span.svelte-xyz{color:red}
+:host h1.svelte-xyz{color:red}:host>h1.svelte-xyz{color:red}:host>.svelte-xyz{color:red}:host span.svelte-xyz{color:red}:host{color:red}

test/css/samples/host/input.svelte

@@ -18,6 +18,10 @@
 	:host > span {
 		color: red;
 	}
+
+  :host {
+    color: red;
+  }
 </style>
 
 <h1>Hello!</h1>