fix remove of lone :host selectors (#5984)

sveltejs · Feb 11, 2021 · e8094df · e8094df · rd-stefan-riehmer · Feb 11, 2021
1 parent 160a4ec
commit e8094df
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 2 deletions.
diff --git a/CHANGELOG.md b/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))

diff --git a/src/compiler/compile/css/Selector.ts b/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) {

diff --git a/test/css/samples/host/expected.css b/test/css/samples/host/expected.css
diff --git a/test/css/samples/host/input.svelte b/test/css/samples/host/input.svelte
@@ -18,6 +18,10 @@
 	:host > span {
 		color: red;
 	}
+
+  :host {
+    color: red;
+  }
 </style>
 
 <h1>Hello!</h1>